Add support for various properties to PopupBox (#4011)

* fix(popupbox): add support for Background, BorderBrush, BorderThickness and ButtonAssist.CornerRadius and hover-effect to PopupBox

* test(popupbox): get border by unique name
because the PopupBox now contains a nested border in it's template, the test was broken because it was getting the border in the template instead of the call-site defined content, which is wrong. getting the border by x:Name disambiguates them

Author: corvinsz

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

@@ -95,14 +95,40 @@
               <Setter Property="Template">
                 <Setter.Value>
                   <ControlTemplate TargetType="ToggleButton">
-                    <wpf:Ripple Padding="{TemplateBinding Padding}"
-                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                                Content="{TemplateBinding Content}"
-                                ContentTemplate="{TemplateBinding ContentTemplate}"
-                                ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
-                                Focusable="False"
-                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
+                    <Grid>
+                      <Border x:Name="border"
+                              Background="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=wpf:PopupBox}, Path=Background}"
+                              BorderBrush="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=wpf:PopupBox}, Path=BorderBrush}"
+                              BorderThickness="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=wpf:PopupBox}, Path=BorderThickness}"
+                              CornerRadius="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=wpf:PopupBox}, Path=(wpf:ButtonAssist.CornerRadius)}" />
+
+                      <wpf:Ripple Padding="{TemplateBinding Padding}"
+                                  ClipToBounds="True"
+                                  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                  Content="{TemplateBinding Content}"
+                                  ContentTemplate="{TemplateBinding ContentTemplate}"
+                                  ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
+                                  Focusable="False"
+                                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
+                        <wpf:Ripple.Clip>
+                          <MultiBinding Converter="{x:Static converters:BorderClipConverter.Instance}">
+                            <Binding ElementName="border" Path="ActualWidth" />
+                            <Binding ElementName="border" Path="ActualHeight" />
+                            <Binding ElementName="border" Path="CornerRadius" />
+                            <Binding ElementName="border" Path="BorderThickness" />
+                          </MultiBinding>
+                        </wpf:Ripple.Clip>
+                      </wpf:Ripple>
+                    </Grid>
+                    <ControlTemplate.Triggers>
+                      <Trigger Property="IsMouseOver" Value="true">
+                        <Setter TargetName="border" Property="Background" Value="{Binding Foreground, RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={x:Static converters:BrushOpacityConverter.Instance}, ConverterParameter=0.16}" />
+                      </Trigger>
+                      <Trigger Property="IsEnabled" Value="false">
+                        <Setter Property="Opacity" Value="0.38" />
+                      </Trigger>
+                    </ControlTemplate.Triggers>
                   </ControlTemplate>
                 </Setter.Value>
               </Setter>

tests/MaterialDesignThemes.UITests/Samples/PopupBox/PopupBoxWithTemplateSelector.xaml

@@ -8,11 +8,11 @@
              d:DesignHeight="450" d:DesignWidth="800">
   <UserControl.Resources>
     <DataTemplate x:Key="OddTemplate">
-      <Border Background="Red" Width="10" Height="10" />
+      <Border x:Name="ContentBorder" Background="Red" Width="10" Height="10" />
     </DataTemplate>
 
     <DataTemplate x:Key="EvenTemplate">
-      <Border Background="Blue" Width="10" Height="10" />
+      <Border x:Name="ContentBorder" Background="Blue" Width="10" Height="10" />
     </DataTemplate>
 
     <local:ColorTemplateSelector x:Key="ColorTemplateSelector"

tests/MaterialDesignThemes.UITests/WPF/PopupBoxes/PopupBoxTests.cs

@@ -46,14 +46,14 @@ public async Task PopupBox_WithContentTemplateSelector_ChangesContent()
 
 
         // Assert
-        var border = await popupBox.GetElement<Border>();
+        var border = await popupBox.GetElement<Border>("ContentBorder");
         await Assert.That(await border.GetBackgroundColor()).IsEqualTo(Colors.Blue);
 
         await button.LeftClick();
 
         await Wait.For(async () =>
         {
-            border = await popupBox.GetElement<Border>();
+            border = await popupBox.GetElement<Border>("ContentBorder");
             await Assert.That(await border.GetBackgroundColor()).IsEqualTo(Colors.Red);
         });