Question

我有一个HeaderItem模板，其中包含imageSource，因此所有选项卡都具有相同的图像。如何添加其他参数以使用不同的图像？

模板

        <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个模板，但这不是我想要的。

Answer 1

我假设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();
    }
}

然后按照以下步骤更改模板定义：

为您的转换器类添加新的命名空间：

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

添加静态资源并引用上述转换器

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

在标签上添加一个名称，以便可以引用

使用标签的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>

等等！

请注意，如果将图像重命名为与标签文本相同，则转换器可以简单地返回（如果不为null）：

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

希望这对您有帮助并且编码愉快！

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

1 个答案: