Xamarin.Forms 中的外部 ControlTemplate 在页面上没有模板布局属性

Question

Xamarin 新手在这里。我需要避免在应用程序中重复控件和布局，因此我尝试使用Control Templates 来实现这一点。但是，根据上一个链接中的示例（源代码here），我总是需要在要使用控件的每个页面上包含一个带有标记的ControlTemplate 属性。

这是必要的还是我可以在内容视图中单独创建控件并在我希望将其添加到的页面正文中引用它？我已经走了这条路线，因为在从不同页面调用控件时需要添加参数。这是正确的方法吗？这将主要用于 android 和 ios 应用程序，如果这有什么不同的话。

没有在需要的每个页面上添加控件模板布局似乎与我尝试使用的一次编写随处使用的基本原理背道而驰。

Answer 1

我总是需要在要使用控件的每个页面上包含一个带有标记的 ControlTemplate 属性。

不，您可以将您的ControlTemplate 放在App.xaml 的Application.Resources 选项卡中，如下所示。

<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ControlTemplateDemos.App">
    <Application.Resources>
        <ControlTemplate x:Key="CardViewControlTemplate">
            <!--
            In this example, the frame's BindingContext is set to the control instance that the template is applied to. Therefore,
            the binding expressions resolve against the properties of each CardView object.
            -->
            <Frame BindingContext="{Binding Source={RelativeSource TemplatedParent}}"
                   BackgroundColor="{Binding CardColor}"
                   BorderColor="{Binding BorderColor}"
                   CornerRadius="5"
                   HasShadow="True"
                   Padding="8"
                   HorizontalOptions="Center"
                   VerticalOptions="Center">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="75" />
                        <RowDefinition Height="4" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="75" />
                        <ColumnDefinition Width="200" />
                    </Grid.ColumnDefinitions>
                    <Frame IsClippedToBounds="True"
                           BorderColor="{Binding BorderColor}"
                           BackgroundColor="{Binding IconBackgroundColor}"
                           CornerRadius="38"
                           HeightRequest="60"
                           WidthRequest="60"
                           HorizontalOptions="Center"
                           VerticalOptions="Center">
                        <Image Source="{Binding IconImageSource}"
                               Margin="-20"
                               WidthRequest="100"
                               HeightRequest="100"
                               Aspect="AspectFill" />
                    </Frame>
                    <Label Grid.Column="1"
                           Text="{Binding CardTitle}"
                           FontAttributes="Bold"
                           FontSize="Large"
                           VerticalTextAlignment="Center"
                           HorizontalTextAlignment="Start" />
                    <BoxView Grid.Row="1"
                             Grid.ColumnSpan="2"
                             BackgroundColor="{Binding BorderColor}"
                             HeightRequest="2"
                             HorizontalOptions="Fill" />
                    <Label Grid.Row="2"
                           Grid.ColumnSpan="2"
                           Text="{Binding CardDescription}"
                           VerticalTextAlignment="Start"
                           VerticalOptions="Fill"
                           HorizontalOptions="Fill" />
                </Grid>
            </Frame>
        </ControlTemplate>
    </Application.Resources>
</Application>

如果我想在Page1.xaml 中使用这个ControlTemplate。我们可以直接使用。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:controls="clr-namespace:ControlTemplateDemos.Controls"
             mc:Ignorable="d"
             x:Class="ControlTemplateDemos.Views.Page1">
    <ContentPage.Content>
        <StackLayout>
            <controls:CardView BorderColor="DarkGray"
                           CardTitle="John Doe"
                           CardDescription="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elit dolor, convallis non interdum."
                           IconBackgroundColor="SlateGray"
                           IconImageSource="user.png"
                           ControlTemplate="{StaticResource CardViewControlTemplate}" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

这里正在运行 GIF。

Answer 2

感谢 Leon Lu。

我不想在 App.xaml 中添加模板，因为添加的模板越多越麻烦。我最终使用我想要的控件布局创建了一个单独的内容视图，并直接在每个需要它的页面中使用它，如下所示：

 <ContentPage.Resources>
            <ControlTemplate x:Key="StellaControlTemplate">
                <controls:MyTemplate></controls:MyTemplate>
            </ControlTemplate>
 </ContentPage.Resources>

     <StackLayout Spacing="10" x:Name="layout">            
               <Label Text="My template below"></Label>
               <controls:MyTemplate PicForTemplate="harold.png" 
                 ControlTemplate="{StaticResource StellaControlTemplate}"> 
               </controls:MyTemplate>
     </StackLayout>