Как добавить параметры в формы ControlTemplate xamarin

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

Затем измените определение шаблона следующим образом:

1. добавьте новое пространство имен для вашего класса конвертера:

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>

Et voilà!

Обратите внимание, что если вы переименуете изображения так же, как текст вкладок, конвертер может просто вернуть (если не ноль):

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

Надеюсь, это поможет и удачного кодирования!