Feature: Source Generator for TemplateSelector

[michael-hawker]

DataTemplateSelector and Styler Source Generator

Problem Statement

Creating DataTemplateSelector classes is annoying and cumbersome when they're usually pretty simple.

Inspiration

I believe Source Generators are playing better with XAML now, so this idea came to mind based on our recent explorations with SG in Labs itself and a discussion in Discord (and some prior thoughts we've talked about in the past on this subject).

Proposed Solution

Would probably need some more investigation, but was just wondering if we could take the MVVM Toolkit style approach of just decorating a method closer to where things would be used:

Also see Alternate Proposal below in Open Questions

public sealed partial class MyPage : Page
{
    public DataTemplate SomeTemplate { get; set; }

    [DataTemplateSelectorGenerator]
    private DataTemplate MyTemplateSelector(object item, DependencyObject? container) => item switch {
        MyModel model => Resources["SomeTemplate"] as DataTemplate,
        MySecondModel second => SomeTemplate,
         _ => null,
    };
}

    <Page.Resources>
       <local:MyTemplateSelector/>
    </Page.Resources>
    <muxc:NavigationView MenuItemTemplateSelector="{StaticResource MyTemplateSelector}"/>

Generated code:

public class MyTemplateSelector : DataTemplateSelector
{
    protected override DataTemplate SelectTemplateCore( object item ) => GetTemplate( item, null );

    protected override DataTemplate SelectTemplateCore( object item, DependencyObject container ) => GetTemplate( item, container );

    private DataTemplate GetTemplate( object item, DependencyObject container )
    {
        if ( item != null )
        {
            //// TODO: ???????
            //// Inject MyTemplateSelector code or call here?
        }
        return null;
    }
}

Open Questions

• It's kind of hard to access templates as they'd be defined in XAML, so is this just messy?
• Could we even link and have access to the local items in the generated code?
• Can we access the generated output from the XAML compiler - i.e. is there a way to grab references to DataTemplates defined in the page resources from there, so we can just use keys?
• I don't think we could automatically inject a copy of the selector into the Page's own resources... then that'd remove having to include it in XAML and just be able to use it as a StaticResource directly...?
• Could we generate 'named slots', maybe as params on the attribute or something such that the generated output could create those named items...

public sealed partial class MyPage : Page
{
    [DataTemplateSelectorGenerator("TemplateOne", "TemplateTwo")]
    private static string? MyTemplateSelector(object item, DependencyObject? container) => item switch {
        MyModel model => "TemplateOne",
        MySecondModel second => "TemplateTwo",
         _ => null,
    };
}

    <Page.Resources>
       <local:MyTemplateSelector TemplateTwo="{StaticResource SomeDataTemplate}">
         <local:MyTemplateSelector.TemplateOne>
            <DataTemplate>...</DataTemplate>
         </local:MyTemplateSelector.TemplateOne>
       </local:MyTemplateSelector>
    </Page.Resources>
    <muxc:NavigationView MenuItemTemplateSelector="{StaticResource MyTemplateSelector}"/>

public class MyTemplateSelector : DataTemplateSelector
{
    propdp TemplateOne; // Shorthand here for ease of reading
    propdp TemplateTwo;
    
    // We may need to do this later than here since the DP would be null initially... idea here is to have a fast lookup mechanism/cache.
    private Dictionary<string, DataTemplate> _lookupTable = new() {
       ["TemplateOne"] = TemplateOne,
       ["TemplateTwo"] = TemplateTwo,
    };

    protected override DataTemplate SelectTemplateCore( object item ) => GetTemplate( item, null );

    protected override DataTemplate SelectTemplateCore( object item, DependencyObject container ) => GetTemplate( item, container );

    private DataTemplate GetTemplate( object item, DependencyObject container )
    {
        if ( item != null )
        {
            var templateKey = MyPage.MyTemplateSelector(item, container);
            if (_lookupTable.ContainsKey(templateKey))
            {
               return _lookupTable[templateKey];
            }
        }
        return null;
    }
}

• Is it better to just adopt some of the existing solutions below like AutoDataTemplateSelector or the XamlTemplateSelector directly?

API Reference Docs

• DataTemplateSelector
• StyleSelector

References

• Discord Discussion about Selectors - https://discord.com/channels/372137812037730304/580484525075857428/971153984242974771
• AutoDataTemplateSelector by @MartinZikmund
• XamlTemplateSelector project by @djspider117

[Arlodotexe]

This is a neat use of Source Generators, but I'm not sure it's the best way to improve on how we declare and use Template Selectors today.

A few issues pop out at me:

• This is enabling us to declare the template selector in the code-behind for a Page or UserControl. That's a lot of added complexity for not a lot of return, and though we have to declare the C# either way, by removing the need to declare the static resource, we're stripping away reusability.
• DataTemplate are traditionally declared in XAML, since you'd nearly always declare XAML inside of it.
  • This new SG might encourage people (especially the less experienced) to declare templates in code-behind, which will quickly become messy and unmaintainable.
  • Declaring the template selector in this new way completely ties it to Page or UserControl - you can't reuse it anywhere else.
• Unless we can inject the generated StaticResource into the existing Control resources, we'd have to generate a property to bind to. This has its own issues:
  • Can't be accessed from an existing Static Resource (e.g. inside other data template)
  • Since this is rarely done, this could uncover issues in inbox controls (ItemsControl, ItemsRepeater) which would prevent us from moving forward.

---

Overall, I think there are better ways we could improve on how Template Selectors are declared. I'm a big fan of the XamlTemplateSelector as it makes declaring them much easier, without losing the flexibility they already provide.

From XamlTemplateSelector by @djspider117:

<xts:XamlTemplateSelector x:Key="MySelector">
     <DataTemplate xts:XamlTypeHelper.TargetType="models:YOUR_MODEL_HERE1">...</DataTemplate>
     <DataTemplate xts:XamlTypeHelper.TargetType="models:YOUR_MODEL_HERE2">...</DataTemplate>
</xts:XamlTemplateSelector>

<ListView Name="lvDemo" ItemTemplateSelector="{StaticResource MySelector}" />

[michael-hawker]

Yeah, I really like the XamlTemplateSelector solution as well. I feel like we could just use x:DataType directly maybe these days? That'd be something to investigate if we want to pull it into the Toolkit (which I know @djspider117 had expressed interest in in the past).

Definitely concerned about the initial spaghetti mess I put together around how to access the DataTemplate themselves. I do like the alternate proposal (which I've expanded above now in the original post) of having it generate properties (though passing strings back is messy kind of too). At least then everything is encapsulated as we can make the method static, and it then forces you to still define/reference the templates in XAML.

I think the main benefit of this SG approach is if you want to pivot on something other than just a type itself.

[hawkerm]

Was thinking about this problem more (for too long). The main issue with a custom/attached property is that then the VS/XAML Compiler doesn't provide IntelliSense hints for x:Bind. I think to use x:Bind you would need both which is annoying to duplicate.

I was thinking more of the source generator setup though. Thinking using enums could be helpful here. So in your code-behind you define the selector function (as above) but with a strongly typed enum:

   [GeneratedDataTemplateSelector]
   public static DataTemplates? MyTemplateSelector(object item, DependencyObject? container) => item switch
   {
       string => DataTemplates.String,
       int => DataTemplates.Int,
       bool => DataTemplates.Bool,
       _ => null,
   };

   public enum DataTemplates
   {
       String,
       Int,
       Bool
   }

This would generate a DataTemplateSelector with the name MyTemplateSelector in your namespace, with properties for DataTemplates based on the Enum value names. The above allows for not only easy type forwarding for template selection but any array of properties, etc... for various types of common patterns needed for template selection in a simple method. (The container parameter could be optional too.)

It'd be a bit verbose, but in XAML you'd define things as:

    <Page.Resources>
        <local:MyTemplateSelector x:Key="MyTypedDataTemplateSelector">
            <local:MyTemplateSelector.String>
                <DataTemplate x:DataType="x:String">
                    <TextBlock FontSize="20" Foreground="Blue">
                        <Run Text="This is a string:" />
                        <Run Text="{x:Bind}" />
                    </TextBlock>
                </DataTemplate>
            </local:MyTemplateSelector.String>
            <local:MyTemplateSelector.Int>
                <DataTemplate x:DataType="x:Int32">
                    <TextBlock FontSize="20" Foreground="Green">
                        <Run Text="This is an int:" />
                        <Run Text="{x:Bind}" />
                    </TextBlock>
                </DataTemplate>
            </local:MyTemplateSelector.Int>
            <local:MyTemplateSelector.Bool>
                <DataTemplate x:DataType="x:Boolean">
                    <TextBlock FontSize="20" Foreground="Red">
                        <Run Text="This is a bool:" />
                        <Run Text="{x:Bind}" />
                    </TextBlock>
                </DataTemplate>
            </local:MyTemplateSelector.Bool>
            <local:MyTemplateSelector.DefaultTemplate>
                <DataTemplate x:DataType="x:Double">
                    <TextBlock FontSize="20" Foreground="Purple">
                        <Run Text="This is the default template for whatever this is:" />
                        <Run Text="{x:Bind}" />
                    </TextBlock>
                </DataTemplate>
            </local:MyTemplateSelector.DefaultTemplate>
        </local:MyTemplateSelector>
    </Page.Resources>

    <ItemsControl ItemTemplateSelector="{StaticResource MyTypedDataTemplateSelector}">
     ...

You could also define these centrally or elsewhere within the lookup scope and assign them too:

<Page.Resources>
   <local:MyTemplateSelector x:Key="MyTypedDataTemplateSelector" String="{StaticResource StringTemplate}" Int="{StaticResource IntTemplate}" ... />

Or a combination of both.

I think this would work. I may try and take a stab at it; we almost need a template for a source generator in the toolkit these days... 😅

[Arlodotexe]

I'm not sure that this even needs a source generator to be built, see the top-level comment I left back in 2022.

[michael-hawker]

The issue without a source generator is that you can't access x:DataType from C#, it's only known to the XAML Compiler. So, the other existing solutions add an attached property, but then if you don't still duplicate the info and specify the x:DataType then intellisense for x:Bind doesn't work (and probably not x:Bind either).

The approach above is subtly different than the original proposal in that it generates the property slots on the generated DataTemplateSelector so all the traditional XAML resource stuff works as is (as was one of your original concerns).