如何在 ControlTemplate xamarin 表单中添加参数

How to add Parameters in ControlTemplate xamarin forms

我有一个带有 imageSource 的 HeaderItem 模板,因此所有选项卡都具有相同的图像。如何带一个额外的参数来使用不同的图像?

模板

        <ControlTemplate x:Key="HeaderControlTemplate">
        <Grid HorizontalOptions="FillAndExpand">

            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Image Source="{converters:ImageResource Media.logo-pp.png}" Grid.Row="0" WidthRequest="25" />
            <Label Grid.Row="1" Text="{TemplateBinding Text}" HorizontalTextAlignment="Center" StyleClass="tabViewHeaderTextColor"/>
            <BoxView Grid.Row="2" IsVisible="{TemplateBinding IsSelected}"
                        StyleClass="tabViewHeaderBgColor"
                         HorizontalOptions="Fill"
                         HeightRequest="2" />
        </Grid>
    </ControlTemplate>

制表符

 <telerikPrimitives:RadTabView>
                    <telerikPrimitives:RadTabView.Items>
                        <telerikPrimitives:TabViewItem>
                            <telerikPrimitives:TabViewItem.Header>
                                <telerikPrimitives:TabViewHeaderItem Text="1" ControlTemplate="{StaticResource HeaderControlTemplate}"/>
                            </telerikPrimitives:TabViewItem.Header>
                            <telerikPrimitives:TabViewItem.Content>
                                        //SomeContent
                            </telerikPrimitives:TabViewItem.Content>
                        </telerikPrimitives:TabViewItem>

                        <telerikPrimitives:TabViewItem>
                            <telerikPrimitives:TabViewItem.Header>
                                <telerikPrimitives:TabViewHeaderItem Text="2" ControlTemplate="{StaticResource HeaderControlTemplate}"/>
                            </telerikPrimitives:TabViewItem.Header>
                            <telerikPrimitives:TabViewItem.Content>
                                        //SomeContent
                            </telerikPrimitives:TabViewItem.Content>
                        </telerikPrimitives:TabViewItem>

                        <telerikPrimitives:TabViewItem>
                            <telerikPrimitives:TabViewItem.Header>
                                <telerikPrimitives:TabViewHeaderItem Text="3" ControlTemplate="{StaticResource HeaderControlTemplate}"/>
                            </telerikPrimitives:TabViewItem.Header>
                            <telerikPrimitives:TabViewItem.Content>
                                        //SomeContent
                            </telerikPrimitives:TabViewItem.Content>
                        </telerikPrimitives:TabViewItem>
                     <telerikPrimitives:RadTabView>

TabViewHeaderItem 也不包含图像源。所以我不知道如何解决这个问题。当然我可以做 3 个模板,但这不是我想要的。

我假设 Media.logo-pp.png 是您要显示的 3 张图片之一。您可以使用以下技巧来避免重复模板:

首先创建一个转换器,将标签名称转换为目标图像。

public class TabToImageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {   
        string imageName;         
        switch (value.ToString())
        {
            case "1":
                imageName= "logo-pp.png"
                break;
            case "2":
                imageName= "logo-pp2.png"
                break;
            case "3":
                imageName= "logo-pp3.png"
                break;
            default:
                imageName= "logo-pp.png"
                break;
        }
        return ImageSource.FromResource($"Media.{imageName}", this.GetType().GetTypeInfo().Assembly);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

然后按如下方式更改您的模板定义:

  1. 为您的转换器添加一个新的命名空间 class:

xmlns:converters="clr-namespace:Metadia.Converters"

  1. 添加一个静态资源并引用上面的转换器

<ResourceDictionary> <converters:TabToImageConverter x:Key="TabToImage" />

  1. 为标签添加一个名称以便可以引用

  2. 使用标签的 Text 属性 和转换器

    添加到图像源的绑定

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Image Source="{TemplateBinding Source={x:Reference tabTitle}, Path=Text, Converter={StaticResource {TabToImage}}" Grid.Row="0" WidthRequest="25" />
        <Label x:Name="tabTitle" Grid.Row="1" Text="{TemplateBinding Text}" HorizontalTextAlignment="Center" StyleClass="tabViewHeaderTextColor"/>
        <BoxView Grid.Row="2" IsVisible="{TemplateBinding IsSelected}"
                    StyleClass="tabViewHeaderBgColor"
                     HorizontalOptions="Fill"
                     HeightRequest="2" />
    </Grid>
    

瞧瞧!

请注意,如果您将图像重命名为与标签文本相同的名称,转换器可以简单地 return(如果不为空):

return ImageSource.FromResource($"Media.{value.ToString()}", this.GetType().GetTypeInfo().Assembly);

希望这对您有所帮助,编码愉快!