Установить цвет фона ItemsControl - PullRequest
Новая
       12

Установить цвет фона ItemsControl

0 голосов
/ 01 апреля 2019

В моем приложении WPF у меня есть элемент управления, который показывает даты и дни недели.Теперь мне нужно изменить цвет фона элемента, который является сегодняшней датой.Вот код XAML 

  <ItemsControl Grid.Column="1"
                Focusable="False" 
               ItemsSource="{Binding WeekDays}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate >
                    <DataTemplate>
                        <Border BorderBrush="{StaticResource GrayBrush7}"
                                BorderThickness="1,0,0,0"
                                SnapsToDevicePixels="True"
                                UseLayoutRounding="True">                                
                            <StackPanel Margin="2" 
                                      VerticalAlignment="Center">
                                <TextBlock HorizontalAlignment="Center"
                                           VerticalAlignment="Top"                                               
                                           Text="{Binding Day}"
                                           TextAlignment="Center"/>

                                <TextBlock HorizontalAlignment="Center"
                                           VerticalAlignment="Top"                                               
                                           Text="{Binding Date, 
                                                StringFormat='dd/MM/yyyy'}"
                                           TextAlignment="Center"/>
                            </StackPanel>
                        </Border>
                        </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 01 апреля 2019

Вы можете просто добавить стиль Border с DataTrigger к вашему ItemTemplate.Сравните свойство Date вашего свойства DateTime со статическим свойством DateTime.Today: 

<ItemsControl.ItemTemplate>
    <DataTemplate>
        <Border BorderBrush="{StaticResource GrayBrush7}"
                BorderThickness="1,0,0,0"
                SnapsToDevicePixels="True"
                UseLayoutRounding="True">
            <Border.Style>
                <Style TargetType="Border" xmlns:system="clr-namespace:System;assembly=mscorlib">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding Date.Date}" Value="{x:Static system:DateTime.Today}">
                            <Setter Property="Background" Value="Yellow" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
            <StackPanel Margin="2" 
                        VerticalAlignment="Center">
                <TextBlock HorizontalAlignment="Center"
                           VerticalAlignment="Top"                                               
                           Text="{Binding Day}"
                           TextAlignment="Center"/>

                <TextBlock HorizontalAlignment="Center"
                           VerticalAlignment="Top"                                               
                           Text="{Binding Date,  StringFormat='dd/MM/yyyy'}"
                           TextAlignment="Center"/>
            </StackPanel>
        </Border>
    </DataTemplate>
</ItemsControl.ItemTemplate>
0 голосов
/ 01 апреля 2019

Вы можете использовать DataTrigger в Border Style, если у вас есть свойство IsToday в классе модели.Например, 

public class WeekDay
{
    public DateTime Date { get; }
    public string Day { get; }
    public bool IsToday { get; }

    public WeekDay(DateTime date)
    {
        this.Date = date;
        this.Day = date.DayOfWeek.ToString();
        this.IsToday = date.Date == DateTime.Today;
    }
}

<ItemsControl.ItemTemplate >
    <DataTemplate>
        <Border BorderBrush="{StaticResource GrayBrush7}"
                BorderThickness="1,0,0,0"
                SnapsToDevicePixels="True"
                UseLayoutRounding="True">
            <Border.Style>
                <Style TargetType="Border">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsToday}" Value="True">
                            <Setter Property="Background" Value="Yellow" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
...

В качестве альтернативы вы можете использовать ValueConverter для преобразования даты в фон. 

public class DateToItemBackgroundConverter : IValueConverter
{
    private static readonly Brush TodayBGBrush = new SolidColorBrush(Colors.Yellow);

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value == null || !(value is DateTime))
        {
            return value;
        }

        var isToday = ((DateTime)value).Date == DateTime.Today;

        return isToday ? TodayBGBrush : null;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

<ItemsControl Grid.Column="1"
              Focusable="False" 
              ItemsSource="{Binding WeekDays}">
    <ItemsControl.Resources>
        <local:DateToItemBackgroundConverter x:Key="bgConverter" />
    </ItemsControl.Resources>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate >
        <DataTemplate>
            <Border BorderBrush="{StaticResource GrayBrush7}"
                    Background="{Binding Date, Converter={StaticResource bgConverter}}"
                    BorderThickness="1,0,0,0"
                    SnapsToDevicePixels="True"
                    UseLayoutRounding="True">
...

Не забудьте обновить фон при обновлении СЕГОДНЯ, вам необходимо перестроить данные модели или снова уведомить PropertyChanged.

...