Winrt,根据绑定值更改颜色

时间:2015-07-23 19:37:26

标签: c# xaml data-binding windows-runtime windows-store-apps

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

class="DATE"

我使用的<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

我想知道的是,如果可以根据状态值更改我使用的边框的颜色

例如,如果我有3种可能的状态:public class MeetingInvitee { public string id { get; set; } public string status { get; set; } public User user { get; set; } public BitmapImage photo { get; set; } } AcceptedRejected,颜色将相应地设置为绿色,红色或黄色。

因此,如果列表中的某个项目的状态为“已拒绝”,则边框将具有红色笔刷

2 个答案:

答案 0 :(得分: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}">

答案 1 :(得分:1)

您可以使用IValueConverter接口的实现,并在将Background的{​​{1}}属性绑定到viewmodel的Border属性时传递该实现。例如:

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

在你的xaml中定义你的<Page.Resources> <local:StatusValueConverter x:Key="StatusConverter" /> </Page.Resources> 元素:

Border

如果您希望视图模型中的不同值具有完全不同的可视树,请使用<Border BorderBrush="{Binding Status, Converter={StaticResource StatusConverter}}" BorderThickness="1" CornerRadius="15"> <Ellipse> <Ellipse.Fill> ... </Ellipse.Fill> </Ellipse> </Border>