Winrt，根据绑定值更改颜色

Question

我有一个看起来像这样的网格视图：

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

我想知道的是，是否可以根据状态中的值更改我使用的边框颜色

例如，如果我有 3 种可能的状态：Accepted、Rejected、Pending，颜色将相应地设置为绿色、红色或黄色。

因此，如果列表中的其中一项的状态为“已拒绝”，则边框将带有红色画笔

Answer 1

条件模板（不幸的是，而不是样式数据触发器）是进入商店应用程序的方式。您需要做的是为每种颜色定义三个不同的模板，并在后面的代码中创建一个模板选择器。

数据模板选择器

   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}">

Answer 2

您可以使用 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。

Winrt，根据绑定值更改颜色

Winrt, changing a color, depending on a bound value

c#

data-binding

xaml

windows-runtime

windows-store-apps

数据模板选择器