Fix White rectangle when disabling Calendar (#3935)

* Remove white rectangle from Template and apply visual state to gray out CalendarDayButton

* Make test mor resilient by only caring about IsExpanded on items with children.

* set Opacity of the Year TextBlock when Calendar is disabled

---------

Co-authored-by: Kevin Bost <kitokeboo@gmail.com>

Author: corvinsz

src/MainDemo.Wpf/Pickers.xaml

@@ -441,7 +441,7 @@
                    Margin="0 0 0 8" />
 
         <smtx:XamlDisplay UniqueKey="calendar_1">
-          <Calendar />
+          <Calendar IsEnabled="{Binding DataContext.ControlsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}" />
         </smtx:XamlDisplay>
       </StackPanel>
 
@@ -470,6 +470,7 @@
             </Grid.Resources>
             <Calendar materialDesign:CalendarAssist.HeaderBackground="{DynamicResource PrimaryHueDarkBrush}"
                       materialDesign:CalendarAssist.HeaderForeground="{DynamicResource PrimaryHueDarkForegroundBrush}"
+                      IsEnabled="{Binding DataContext.ControlsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}" 
                       Background="{DynamicResource PrimaryHueLightBrush}"
                       CalendarButtonStyle="{StaticResource SecondaryCalendarButton}"
                       CalendarDayButtonStyle="{StaticResource SecondaryCalendarDayButton}"
@@ -502,6 +503,7 @@
               </Style>
             </Grid.Resources>
             <Calendar materialDesign:CalendarAssist.HeaderBackground="#A2E9FF"
+                      IsEnabled="{Binding DataContext.ControlsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}" 
                       materialDesign:CalendarAssist.HeaderForeground="Black"
                       Background="#343C3F"
                       CalendarButtonStyle="{StaticResource CustomCalendarButton}"
@@ -515,7 +517,7 @@
         <TextBlock Text="Horizontal"
                    Margin=" 0 0 0 8" />
         <smtx:XamlDisplay UniqueKey="calendar_4">
-          <Calendar materialDesign:CalendarAssist.Orientation="Horizontal" />
+          <Calendar materialDesign:CalendarAssist.Orientation="Horizontal" IsEnabled="{Binding DataContext.ControlsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}"  />
         </smtx:XamlDisplay>
       </StackPanel>
 
@@ -524,6 +526,7 @@
                    Margin="0 0 0 8" />
         <smtx:XamlDisplay UniqueKey="calendar_5">
           <Calendar materialDesign:ElevationAssist.Elevation="Dp8"
+                    IsEnabled="{Binding DataContext.ControlsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}" 
                     Style="{StaticResource MaterialDesignCalendarPortraitForeground}" />
         </smtx:XamlDisplay>
       </StackPanel>

src/MaterialDesign3.Demo.Wpf/Pickers.xaml

@@ -341,7 +341,9 @@
                   </Grid.RowDefinitions>
 
                   <StackPanel Grid.Row="0" Orientation="Horizontal">
-                    <Calendar x:Name="CombinedCalendar" Margin="-1,-4,-1,0" />
+                    <Calendar x:Name="CombinedCalendar"
+                              Margin="-1,-4,-1,0"
+                              IsEnabled="{Binding DataContext.ControlsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}" />
 
                     <materialDesign:Clock x:Name="CombinedClock"
                                           DisplayAutomation="CycleWithSeconds"
@@ -378,7 +380,7 @@
                     Header="Default"
                     Style="{StaticResource MaterialDesignCardGroupBox}">
             <smtx:XamlDisplay UniqueKey="calendar_1">
-              <Calendar />
+              <Calendar IsEnabled="{Binding DataContext.ControlsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}" />
             </smtx:XamlDisplay>
           </GroupBox>
 
@@ -405,6 +407,7 @@
                 </Grid.Resources>
                 <Calendar materialDesign:CalendarAssist.HeaderBackground="{DynamicResource MaterialDesign.Brush.Primary.Dark}"
                           materialDesign:CalendarAssist.HeaderForeground="{DynamicResource MaterialDesign.Brush.Primary.Dark.Foreground}"
+                          IsEnabled="{Binding DataContext.ControlsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}"
                           Background="{DynamicResource MaterialDesign.Brush.Primary.Light}"
                           CalendarButtonStyle="{StaticResource SecondaryCalendarButton}"
                           CalendarDayButtonStyle="{StaticResource SecondaryCalendarDayButton}"
@@ -436,6 +439,7 @@
                 </Grid.Resources>
                 <Calendar materialDesign:CalendarAssist.HeaderBackground="#A2E9FF"
                           materialDesign:CalendarAssist.HeaderForeground="Black"
+                          IsEnabled="{Binding DataContext.ControlsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}"
                           Background="#343C3F"
                           CalendarButtonStyle="{StaticResource CustomCalendarButton}"
                           CalendarDayButtonStyle="{StaticResource CustomCalendarDayButton}"
@@ -451,7 +455,7 @@
                     Header="Horizontal"
                     Style="{StaticResource MaterialDesignCardGroupBox}">
             <smtx:XamlDisplay UniqueKey="calendar_4">
-              <Calendar materialDesign:CalendarAssist.Orientation="Horizontal" />
+              <Calendar materialDesign:CalendarAssist.Orientation="Horizontal" IsEnabled="{Binding DataContext.ControlsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}" />
             </smtx:XamlDisplay>
           </GroupBox>
 
@@ -463,7 +467,9 @@
                     Header="Transparent Header and shadow"
                     Style="{StaticResource MaterialDesignCardGroupBox}">
             <smtx:XamlDisplay UniqueKey="calendar_5">
-              <Calendar materialDesign:ElevationAssist.Elevation="Dp8" Style="{StaticResource MaterialDesignCalendarPortraitForeground}" />
+              <Calendar materialDesign:ElevationAssist.Elevation="Dp8"
+                        Style="{StaticResource MaterialDesignCalendarPortraitForeground}"
+                        IsEnabled="{Binding DataContext.ControlsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}" />
             </smtx:XamlDisplay>
           </GroupBox>
 

src/MaterialDesignThemes.Wpf/Themes/Generic.xaml

@@ -328,7 +328,7 @@
             </Trigger>
             <Trigger Property="IsEnabled" Value="False">
               <Setter TargetName="ComponentOneTwoWrapper" Property="Opacity" Value=".56" />
-              <Setter TargetName="ComponentThreeTextBlock" Property="Opacity" Value="1" />
+              <Setter TargetName="ComponentThreeTextBlock" Property="Opacity" Value=".56" />
             </Trigger>
             <Trigger Property="local:CalendarAssist.Orientation" Value="Horizontal">
               <Setter TargetName="ComponentOneTwoWrapper" Property="Orientation" Value="Vertical" />

src/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Calendar.xaml

@@ -176,6 +176,13 @@
                   <VisualTransition GeneratedDuration="0:0:0.1" />
                 </VisualStateGroup.Transitions>
                 <VisualState x:Name="Normal" />
+                <VisualState x:Name="Disabled">
+                  <Storyboard>
+                    <DoubleAnimation Storyboard.TargetProperty="Opacity"
+                                     To=".56"
+                                     Duration="0" />
+                  </Storyboard>
+                </VisualState>
                 <VisualState x:Name="MouseOver">
                   <Storyboard>
                     <DoubleAnimation Storyboard.TargetName="HighlightingBorder"
@@ -349,23 +356,6 @@
           </ControlTemplate.Resources>
 
           <Grid x:Name="PART_Root">
-            <Grid.Resources>
-              <SolidColorBrush x:Key="DisabledColor" Color="#A5FFFFFF" />
-            </Grid.Resources>
-            <VisualStateManager.VisualStateGroups>
-              <VisualStateGroup x:Name="CommonStates">
-                <VisualState x:Name="Normal" />
-                <VisualState x:Name="Disabled">
-                  <Storyboard>
-                    <DoubleAnimation Storyboard.TargetName="PART_DisabledVisual"
-                                     Storyboard.TargetProperty="Opacity"
-                                     To="1"
-                                     Duration="0" />
-                  </Storyboard>
-                </VisualState>
-              </VisualStateGroup>
-            </VisualStateManager.VisualStateGroups>
-
             <wpf:Card Padding="0,-1,0,0"
                       wpf:ElevationAssist.Elevation="{TemplateBinding wpf:ElevationAssist.Elevation}"
                       Background="{TemplateBinding Background}"
@@ -607,18 +597,8 @@
                 </Grid>
               </Grid>
             </wpf:Card>
-            <Rectangle x:Name="PART_DisabledVisual"
-                       Fill="white"
-                       Opacity="0.5"
-                       RadiusX="2"
-                       RadiusY="2"
-                       Stretch="Fill"
-                       Visibility="Collapsed" />
           </Grid>
           <ControlTemplate.Triggers>
-            <Trigger Property="IsEnabled" Value="False">
-              <Setter TargetName="PART_DisabledVisual" Property="Visibility" Value="Visible" />
-            </Trigger>
             <DataTrigger Binding="{Binding DisplayMode, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Calendar}}, FallbackValue={x:Static controls:CalendarMode.Month}}" Value="Year">
               <Setter TargetName="MonthViewWrapperGrid" Property="Visibility" Value="Hidden" />
               <Setter TargetName="YearViewWrapperGrid" Property="Visibility" Value="Visible" />

tests/MaterialDesignThemes.UITests/WPF/TreeListViews/TreeListViewTests.cs

@@ -1026,7 +1026,10 @@ await Wait.For(async () =>
         {
             IVisualElement<TreeListViewItem> treeItem = await treeListView.GetElement<TreeListViewItem>($"/TreeListViewItem[{index}]");
             await Assert.That(await treeItem.GetContentText()).IsEqualTo(content);
-            await Assert.That(await treeItem.GetIsExpanded()).IsEqualTo(isExpanded);
+            if (await treeItem.GetHasItems())
+            {
+                await Assert.That(await treeItem.GetIsExpanded()).IsEqualTo(isExpanded);
+            }
         });
     }