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

【问题标题】：How to add Parameters in ControlTemplate xamarin forms如何在 ControlTemplate xamarin 表单中添加参数
【发布时间】：2018-11-21 14:36:41
【问题描述】：

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

【问题讨论】：

标签： c# xaml xamarin xamarin.forms telerik

【解决方案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>

等等！

请注意，如果您将图像重命名为与选项卡文本相同的名称，转换器可以简单地返回（如果不为空）：

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

希望这有助于编码愉快！

【讨论】：