WPF Calendarの日付を選択されたときに選択された箇所を強調させたい

前提・実現したいこと

Calendarの日付を選択されたときに選択された箇所を強調させたいです。
Calendar.IsTodayHighlightedをTrueにしましたが思う動作になりませんでした。
Calendar全面にStackPanelを置いているので選択のイベントを拾えていないと思ったのですが、解決策がわからず相談させていただきました。

よろしくお願いいたします。

該当のソースコード

<Calendar x:Name="rootCalendar" 
                  Margin="5"  Grid.ColumnSpan="3" Height="Auto" Width="Auto" 
                  HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                  SelectedDate="{Binding SelectedDate}">
            <Calendar.Background>White</Calendar.Background>
            <Calendar.CalendarDayButtonStyle>
                <Style TargetType="{x:Type CalendarDayButton}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type CalendarDayButton}">
                                <Grid Background="White">
                                    <Border BorderThickness="1" BorderBrush="Turquoise">
                                        <StackPanel MinHeight="80" MinWidth="80" >
                                            <TextBlock Text="{Binding StringFormat={}{0:dd}}" Margin="2" FontSize="16"/>
                                            <ItemsControl Background="Azure" Height="50" >
                                                <ItemsControl.ItemsSource>
                                                    <MultiBinding Converter="{StaticResource MultiBindToDo}" UpdateSourceTrigger="PropertyChanged" Mode="OneWay">
                                                        <Binding Path="Date" UpdateSourceTrigger="PropertyChanged"/>
                                                        <Binding Path="DataContext.DataCollection" ElementName="rootGrid" />
                                                    </MultiBinding>
                                                </ItemsControl.ItemsSource>
                                                <ItemsControl.ItemsPanel>
                                                    <ItemsPanelTemplate>
                                                        <WrapPanel Margin="2" Width="70" />
                                                    </ItemsPanelTemplate>
                                                </ItemsControl.ItemsPanel>
                                                <ItemsControl.ItemTemplate>
                                                    <DataTemplate DataType="{x:Type m:ToDoModel}">
                                                        <!--<Image Source="{Binding Image, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" Height="20" Stretch="Uniform" />-->
                                                        <TextBlock Text="{Binding DisplayItem, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" FontSize="16" Foreground="Black" />
                                                    </DataTemplate>
                                                </ItemsControl.ItemTemplate>
                                            </ItemsControl>
                                        </StackPanel>
                                    </Border>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Calendar.CalendarDayButtonStyle>
        </Calendar>

補足情報（FW/ツールのバージョンなど）

.Net Framework4.7.2
Prism Core v8.0.0.1909
Prism Unity v8.0.0.1909

行動規範の内容に同意します

回答1件

ベストアンサー

VisualStateManagerかTriggerかで変えることになります。

既定のテンプレートを見ると参考になります。
通常のCalendarを置いてデザイナで右クリックし、「追加テンプレートの編集」-「CalendarDayButtonStyle の編集」-「コピーして編集」で既定のテンプレートが見れます。
もしくは、カレンダーのスタイルとテンプレート - WPF .NET Framework | Microsoft Docs

VisualStateManagerはかなり冗長なので、アニメーションが不要な時はTriggerが手軽です。
その際は使える依存関係プロパティがないかを確認します。

CalendarDayButton.IsSelectedProperty フィールド (System.Windows.Controls.Primitives) | Microsoft Docs

提示コードだけでは動かせないので、ItemsControlは省略させていただきました。

xml
1<Window
2  x:Class="Questions319493.MainWindow"
3  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5  Width="1200"
6  Height="600">
7  <StackPanel Orientation="Horizontal">
8
9    <!--  VisualStateManager  -->
10    <Calendar SelectedDate="{Binding SelectedDate}" SelectionMode="MultipleRange">
11      <Calendar.Background>White</Calendar.Background>
12      <Calendar.CalendarDayButtonStyle>
13        <Style TargetType="{x:Type CalendarDayButton}">
14          <Setter Property="Template">
15            <Setter.Value>
16              <ControlTemplate TargetType="{x:Type CalendarDayButton}">
17                <Grid Background="White">
18
19                  <!--  色を付けるのはなんでもいいですが、既定の作りに合わせました  -->
20                  <Rectangle
21                    x:Name="SelectedBackground"
22                    Fill="#FFBADDE9"
23                    Opacity="0"
24                    RadiusX="1"
25                    RadiusY="1" />
26
27                  <Border BorderBrush="Turquoise" BorderThickness="1">
28                    <StackPanel MinWidth="80" MinHeight="80">
29                      <TextBlock
30                        Margin="2"
31                        FontSize="16"
32                        Text="{Binding StringFormat={}{0:dd}}" />
33                    </StackPanel>
34                  </Border>
35
36                  <!--  本来はもっとステートがありますが選択についてだけ  -->
37                  <VisualStateManager.VisualStateGroups>
38                    <VisualStateGroup x:Name="SelectionStates">
39                      <VisualStateGroup.Transitions>
40                        <VisualTransition GeneratedDuration="0" />
41                      </VisualStateGroup.Transitions>
42                      <VisualState x:Name="Unselected" />
43                      <VisualState x:Name="Selected">
44                        <Storyboard>
45                          <DoubleAnimation
46                            Storyboard.TargetName="SelectedBackground"
47                            Storyboard.TargetProperty="Opacity"
48                            To=".75"
49                            Duration="0" />
50                        </Storyboard>
51                      </VisualState>
52                    </VisualStateGroup>
53                  </VisualStateManager.VisualStateGroups>
54                </Grid>
55              </ControlTemplate>
56            </Setter.Value>
57          </Setter>
58        </Style>
59      </Calendar.CalendarDayButtonStyle>
60    </Calendar>
61
62    <!--  Trigger  -->
63    <Calendar SelectedDate="{Binding SelectedDate}">
64      <Calendar.Background>White</Calendar.Background>
65      <Calendar.CalendarDayButtonStyle>
66        <Style TargetType="{x:Type CalendarDayButton}">
67          <Setter Property="Template">
68            <Setter.Value>
69              <ControlTemplate TargetType="{x:Type CalendarDayButton}">
70                <Grid Background="White">
71
72                  <Rectangle
73                    x:Name="SelectedBackground"
74                    Fill="#FFBADDE9"
75                    Opacity="0"
76                    RadiusX="1"
77                    RadiusY="1" />
78
79                  <Border BorderBrush="Turquoise" BorderThickness="1">
80                    <StackPanel MinWidth="80" MinHeight="80">
81                      <TextBlock
82                        Margin="2"
83                        FontSize="16"
84                        Text="{Binding StringFormat={}{0:dd}}" />
85                    </StackPanel>
86                  </Border>
87                </Grid>
88
89                <ControlTemplate.Triggers>
90                  <Trigger Property="IsSelected" Value="True">
91                    <Setter TargetName="SelectedBackground" Property="Opacity" Value=".75" />
92                  </Trigger>
93                </ControlTemplate.Triggers>
94              </ControlTemplate>
95            </Setter.Value>
96          </Setter>
97        </Style>
98      </Calendar.CalendarDayButtonStyle>
99    </Calendar>
100  </StackPanel>
101</Window>