如何在 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();
}
}
然后按如下方式更改您的模板定义:
- 为您的转换器添加一个新的命名空间 class:
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(如果不为空):
return ImageSource.FromResource($"Media.{value.ToString()}", this.GetType().GetTypeInfo().Assembly);
希望这对您有所帮助,编码愉快!
我有一个带有 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();
}
}
然后按如下方式更改您的模板定义:
- 为您的转换器添加一个新的命名空间 class:
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(如果不为空):
return ImageSource.FromResource($"Media.{value.ToString()}", this.GetType().GetTypeInfo().Assembly);
希望这对您有所帮助,编码愉快!