WinUI 3 How to make DataTemplate usable in all pages?

Question

WinUI 3 c++/winrt. The DataTemplate is listed at the top of the page:

<Page.Resources>
    <DataTemplate x:Key="SomeViewTemplate" x:DataType="local:SomeModel">
        <StackPanel>
            <TextBlock Text="{x:Bind val1}"/>
            <RatingControl MaxRating="{x:Bind val2}" />
        </StackPanel>
    </DataTemplate>
</Page.Resources>

Everything works fine on this page. How can I make this DataTemplate usable on other pages? In what place (file) should it be placed?

Answer 1

Let's say you have your DataTemplate in a ResourceDictionary "DataTemplates.xaml". Note that you need to use Binding instead of x:Bind.

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DataTemplateExample">

     <DataTemplate x:Key="SomeViewTemplate">
         <StackPanel>
             <TextBlock Text="{Binding val1}"/>
             <RatingControl MaxRating="{Binding val2}" />
         </StackPanel>
     </DataTemplate>

</ResourceDictionary>

Add it to App.xaml,

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
            <!--  Other merged dictionaries here  -->
            <ResourceDictionary Source="DataTemplates.xaml" />
        </ResourceDictionary.MergedDictionaries>
        <!--  Other app resources here  -->
    </ResourceDictionary>
</Application.Resources>

Then you should be able to use it.

<ListView
    ItemTemplate="{StaticResource SomeViewTemplate}"
    ItemsSource="{x:Bind Items, Mode=OneWay}" />

Answer 2

When I placed DataTemplate in App.xaml or a separate ResourceDictionary as @AndrewKeepCoding answered, a Xaml Compiler error at x:DataType, XamlCompiler error WMC0612: The XAML Binary Format (XBF) generator reported syntax error '0x09C4' : Property Not Found, was raised. However, It's necessary to specify x:DataType in order to make the DataTemplate take effect.

So, my conclusion is DataTemplate cannot be global in c++ and DataTemplate also states limited properties to use.

Binding to a C++/WinRT collection costs me a long time until I find PhotoEditor sample. Must specify IInspectable instead of a custom runtime class name.

import "BookSku.idl";

namespace App1
{
    [default_interface]
    runtimeclass MainWindow : Microsoft.UI.Xaml.Window
    {
        MainWindow();
        Int32 MyProperty;
        Windows.Foundation.Collections.IVector<IInspectable> BookSkus{ get; };
    }
}

Update:

According to Resource dictionaries with {x:Bind}, It's possible to use x:Bind and x:DataType in Resource dictionaries. That's why it works in c#. But there is no document about how to implement it in cppwinrt. A related thread: https://stackoverflow.com/a/98422/15511041