Winrt,根据绑定值改变颜色
本文关键字:改变 变颜色 绑定 Winrt | 更新日期: 2023-09-27 18:04:15
我有一个gridview,看起来像这样:
<GridView ItemContainerStyle="{StaticResource GridViewItemStyle2}" ItemsSource="{Binding MyMeetingsSquareUsers}" Grid.Row="1" Margin="10,10,10,0" SelectionMode="None" HorizontalContentAlignment="Left" VerticalContentAlignment="Bottom">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Vertical" MaximumRowsOrColumns="1"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<Grid Height="35" Width="35" Margin="0,0,10,0" >
<Border BorderBrush="red" BorderThickness="1" CornerRadius="15">
<Ellipse>
<Ellipse.Fill>
<ImageBrush Stretch="Fill" ImageSource="ms-appx:///Images/photo_empty.png"/>
</Ellipse.Fill>
</Ellipse>
</Border>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
我使用的ItemsSource
是以下类型的项目列表:
public class MeetingInvitee
{
public string id { get; set; }
public string status { get; set; }
public User user { get; set; }
public BitmapImage photo { get; set; }
}
我想知道的是,是否有可能根据status
中的值来改变边框的颜色例如,如果我有3种可能的状态:Accepted
, Rejected
, Pending
,颜色将相应地设置为绿色,红色或黄色。
因此,如果列表中的一个项目的状态为"已拒绝",则边框将有一个红色的笔刷
条件模板(而不是样式数据触发器)是在商店应用程序中使用的方式。你需要做的是为每种颜色定义三个不同的模板,并在后面的代码中创建一个模板选择器。
数据模板选择器
public class MeetingTemplateSelector : DataTemplateSelector
{
public DataTemplate AcceptedTemplate { get; set; }
public DataTemplate RejectedTemplate { get; set; }
public DataTemplate PendingTemplate { get; set; }
protected override DataTemplate SelectTemplateCore(object item,
DependencyObject container)
{
DataTemplate result;
switch( ((MeetingInvitee) item).Status)
{
case "Accepted" : result = AcceptedTemplate; break;
case "Rejected" : result = RejectedTemplate; break;
case "Pending" : result = PendingTemplate; break;
}
return result;
}
}
在资源中声明模板
<UserControl.Resources>
<DataTemplate x:Key="AcceptedTemplate">
<Border Background="Green">
...
</Border>
</DataTemplate>
<DataTemplate x:Key="RejectedTemplate">
<Border Background="Red">
...
</Border>
</DataTemplate>
<DataTemplate x:Key="PendingTemplate">
<Border Background="Yellow">
...
</Border>
</DataTemplate>
<local:MeetingTemplateSelector x:Key="meetingSelector"
AcceptedTemplate="{StaticResource AcceptedTemplate}"
RejectedTemplate="{StaticResource RejectedTemplate}"
PendingTemplate="{StaticResource PendingTemplate}">
</local:MeetingTemplateSelector >
</UserControl.Resources>
使用<GridView ItemContainerStyle="{StaticResource GridViewItemStyle2}"
ItemsSource="{Binding MyMeetingsSquareUsers}"
ItemTemplateSelector="{StaticResource meetingSelector}">
您可以使用IValueConverter
接口的实现,并在将Border
的Background
属性绑定到视图模型的Status
属性时传递它。例子:
class StatusValueConverter : IValueConverter
{
private static SolidColorBrush _acceptedBrush = new SolidColorBrush(Colors.Green);
private static SolidColorBrush _pendingBrush = new SolidColorBrush(Colors.Yellow);
private static SolidColorBrush _rejectedBrush = new SolidColorBrush(Colors.Red);
public object Convert(object value, Type targetType, object parameter, string language)
{
SolidColorBrush brush = null;
if (value != null)
{
string status = value.ToString();
switch (status)
{
case "Accepted":
brush = _acceptedBrush;
break;
case "Pending":
brush = _pendingBrush;
break;
case "Rejected":
brush = _rejectedBrush;
break;
}
}
if (brush == null)
{
throw new ArgumentException("Status not valid.");
}
return brush;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
// You need this if TwoWay binding mode is used.
}
}
将值转换器添加到页面资源(其中local
是我在其中定义StatusValueConverter
的名称空间的前缀):
<Page.Resources>
<local:StatusValueConverter x:Key="StatusConverter" />
</Page.Resources>
在你的xaml中像这样定义你的Border
元素:
<Border BorderBrush="{Binding Status, Converter={StaticResource StatusConverter}}"
BorderThickness="1" CornerRadius="15">
<Ellipse>
<Ellipse.Fill>
...
</Ellipse.Fill>
</Ellipse>
</Border>
如果您希望在视图模型中为不同的值提供完全不同的视觉树,则使用DataTemplateSelector
。