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

问题描述 投票:0回答:2

Xamarin Newbie在这里。我需要避免在应用程序中重复控件和布局,因此我尝试使用Control Templates实现此目的。但是,根据前一个链接(源代码here)中的示例,我总是需要在每个要使用控件的页面上添加一个ControlTemplate属性,并在其上进行标记。

这是否必要,或者我可以在内容视图中单独创建该控件并在要添加到该控件的页面正文中引用它吗?我走了这条路,因为从不同页面调用控件时需要添加参数。这是正确的方法吗?如果有任何区别,它将主要用于android和ios应用。

没有在每个需要的页面上添加Control模板布局,这似乎与我尝试使用的“随处使用一次写入”原理背道而驰。

c# xamarin mobile xamarin.forms xamarin.android
2个回答
1
投票

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

不,您可以像下面的代码一样将ControlTemplate放在Application.ResourcesApp.xaml选项卡中。

<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>

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

<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。

enter image description here


0
投票

感谢卢昂。

我不想在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>
© www.soinside.com 2019 - 2024. All rights reserved.