Merge pull request #367 from AvaloniaCommunity/addStylesForControls

Add styles for RefreshContainer, RefreshVisualizer, PathIcon, CaptionButtons, TitleBar #234
AvaloniaCommunity · Apr 1, 2024 · 51e664d · 51e664d
2 parents aa48a4c + 762f47d
commit 51e664d
Show file tree

Hide file tree

Showing 6 changed files with 304 additions and 0 deletions.
diff --git a/Material.Styles/MaterialToolKit.xaml b/Material.Styles/MaterialToolKit.xaml
@@ -35,6 +35,7 @@
         <ResourceInclude Source="avares://Material.Styles/Resources/Themes/CalendarButton.axaml" />
         <ResourceInclude Source="avares://Material.Styles/Resources/Themes/CalendarDayButton.axaml" />
         <ResourceInclude Source="avares://Material.Styles/Resources/Themes/CalendarItem.axaml" />
+        <ResourceInclude Source="avares://Material.Styles/Resources/Themes/CaptionButtons.xaml" />
         <ResourceInclude Source="avares://Material.Styles/Resources/Themes/Carousel.axaml" />
         <ResourceInclude Source="avares://Material.Styles/Resources/Themes/CheckBox.axaml" />
         <ResourceInclude Source="avares://Material.Styles/Resources/Themes/ComboBox.axaml" />
@@ -60,9 +61,12 @@
         <ResourceInclude Source="avares://Material.Styles/Resources/Themes/NotificationCard.axaml" />
         <ResourceInclude Source="avares://Material.Styles/Resources/Themes/NumericUpDown.axaml" />
         <ResourceInclude Source="avares://Material.Styles/Resources/Themes/OverlayPopupHost.axaml" />
+        <ResourceInclude Source="avares://Material.Styles/Resources/Themes/PathIcon.xaml" />
         <ResourceInclude Source="avares://Material.Styles/Resources/Themes/PopupRoot.axaml" />
         <ResourceInclude Source="avares://Material.Styles/Resources/Themes/ProgressBar.axaml" />
         <ResourceInclude Source="avares://Material.Styles/Resources/Themes/RadioButton.axaml" />
+        <ResourceInclude Source="avares://Material.Styles/Resources/Themes/RefreshContainer.xaml" />
+        <ResourceInclude Source="avares://Material.Styles/Resources/Themes/RefreshVisualizer.xaml" />
         <ResourceInclude Source="avares://Material.Styles/Resources/Themes/RepeatButton.axaml" />
         <ResourceInclude Source="avares://Material.Styles/Resources/Themes/ScrollBar.axaml" />
         <ResourceInclude Source="avares://Material.Styles/Resources/Themes/ScrollViewer.axaml" />
@@ -78,6 +82,7 @@
         <ResourceInclude Source="avares://Material.Styles/Resources/Themes/TextBox.axaml" />
         <ResourceInclude Source="avares://Material.Styles/Resources/Themes/ThemeVariantScope.axaml" />
         <ResourceInclude Source="avares://Material.Styles/Resources/Themes/TimePicker.axaml" />
+        <ResourceInclude Source="avares://Material.Styles/Resources/Themes/TitleBar.xaml" />
         <ResourceInclude Source="avares://Material.Styles/Resources/Themes/ToggleButton.axaml" />
         <ResourceInclude Source="avares://Material.Styles/Resources/Themes/ToggleSwitch.axaml" />
         <ResourceInclude Source="avares://Material.Styles/Resources/Themes/ToolTip.axaml" />

diff --git a/Material.Styles/Resources/Themes/CaptionButtons.xaml b/Material.Styles/Resources/Themes/CaptionButtons.xaml
@@ -0,0 +1,143 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:assists="clr-namespace:Material.Styles.Assists"
+                    xmlns:ripple="clr-namespace:Material.Ripple;assembly=Material.Ripple"
+                    xmlns:converters="clr-namespace:Material.Styles.Converters"
+                    xmlns:themes="clr-namespace:Material.Styles.Themes"
+                    x:ClassModifier="internal">
+  <x:Double x:Key="ButtonHoveredOpacity">0.12</x:Double>
+  <x:Double x:Key="ButtonPressedOpacity">0.26</x:Double>
+  <converters:BrushRoundConverter x:Key="BrushRoundConverter" />
+
+  <Design.PreviewWith>
+    <Border Padding="20">
+      <StackPanel Spacing="20">
+        <ThemeVariantScope RequestedThemeVariant="{x:Static themes:Theme.MaterialDark}">
+          <Border Background="{DynamicResource MaterialPaperBrush}">
+            <CaptionButtons Height="24" />
+          </Border>
+        </ThemeVariantScope>
+        <ThemeVariantScope RequestedThemeVariant="Light">
+          <CaptionButtons Height="24" />
+        </ThemeVariantScope>
+      </StackPanel>
+    </Border>
+  </Design.PreviewWith>
+
+  <ControlTheme x:Key="MaterialCaptionButton" TargetType="Button">
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="assists:ButtonAssist.HoverColor" Value="{DynamicResource MaterialBodyBrush}" />
+    <Setter Property="assists:ButtonAssist.ClickFeedbackColor" Value="{Binding $self.Foreground}" />
+    <Setter Property="Foreground" Value="{DynamicResource MaterialBodyBrush}" />
+    <Setter Property="VerticalAlignment" Value="Stretch" />
+    <Setter Property="Padding" Value="8 0"></Setter>
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Panel>
+          <Border Name="PART_HoverEffect" />
+          <ripple:RippleEffect Name="PART_Ripple"
+                               RippleFill="{TemplateBinding assists:ButtonAssist.ClickFeedbackColor}"
+                               RippleOpacity="{StaticResource ButtonPressedOpacity}">
+            <ContentPresenter Name="PART_ContentPresenter"
+                              Background="Transparent"
+                              Content="{TemplateBinding Content}"
+                              Margin="{TemplateBinding Padding}"/>
+          </ripple:RippleEffect>
+        </Panel>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^:not(.no-transitions) /template/ Border#PART_HoverEffect">
+      <Setter Property="Transitions">
+        <Transitions>
+          <DoubleTransition Duration="0:0:0.25" Property="Opacity" Easing="LinearEasing" />
+        </Transitions>
+      </Setter>
+    </Style>
+    <Style Selector="^ /template/ Border#PART_HoverEffect">
+      <Setter Property="Background" Value="{TemplateBinding assists:ButtonAssist.HoverColor}" />
+      <Setter Property="Opacity" Value="0" />
+    </Style>
+    <Style Selector="^:not(:disabled):pointerover /template/ Border#PART_HoverEffect">
+      <Setter Property="Opacity" Value="{StaticResource ButtonHoveredOpacity}" />
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="MaterialCloseCaptionButton" TargetType="Button"
+                BasedOn="{StaticResource MaterialCaptionButton}">
+    <Style Selector="^:not(:disabled):pointerover /template/ Border#PART_HoverEffect">
+      <Setter Property="Opacity" Value="1" />
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="MaterialCaptionButtons" TargetType="CaptionButtons">
+    <Setter Property="Template">
+      <ControlTemplate>
+        <StackPanel VerticalAlignment="Stretch" TextElement.FontSize="10" Orientation="Horizontal">
+          <Button x:Name="PART_FullScreenButton"
+                  Theme="{StaticResource MaterialCaptionButton}"
+                  IsVisible="False">
+            <Viewbox Width="11" Margin="2">
+              <Path Name="FullScreenButtonPath"
+                    Stretch="UniformToFill"
+                    Fill="{TemplateBinding Foreground}"
+                    Data="M5,5H10V7H7V10H5V5M14,5H19V10H17V7H14V5M17,14H19V19H14V17H17V14M10,17V19H5V14H7V17H10Z" />
+            </Viewbox>
+          </Button>
+          <Button x:Name="PART_MinimizeButton"
+                  Theme="{StaticResource MaterialCaptionButton}"
+                  AutomationProperties.Name="Minimize">
+            <Viewbox Width="11" Margin="2">
+              <Path Stretch="UniformToFill"
+                    Fill="{TemplateBinding Foreground}"
+                    Data="M20,14H4V10H20" />
+            </Viewbox>
+          </Button>
+          <Button x:Name="PART_RestoreButton"
+                  Theme="{StaticResource MaterialCaptionButton}"
+                  AutomationProperties.Name="Maximize">
+            <Viewbox Width="11" Margin="2">
+              <Path Name="RestoreButtonPath"
+                    Stretch="UniformToFill"
+                    Fill="{TemplateBinding Foreground}"
+                    Data="M4,4H20V20H4V4M6,8V18H18V8H6Z" />
+            </Viewbox>
+          </Button>
+          <Button x:Name="PART_CloseButton"
+                  assists:ButtonAssist.HoverColor="{DynamicResource MaterialValidationErrorBrush}"
+                  Theme="{StaticResource MaterialCloseCaptionButton}"
+                  AutomationProperties.Name="Close">
+            <Viewbox Width="11" Margin="2">
+              <Path Stretch="UniformToFill"
+                    Fill="{TemplateBinding Foreground}"
+                    Data="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
+            </Viewbox>
+          </Button>
+        </StackPanel>
+      </ControlTemplate>
+    </Setter>
+    <!-- Restore -->
+    <Style Selector="^:maximized /template/ Path#RestoreButtonPath">
+      <Setter Property="Data" Value="M4,8H8V4H20V16H16V20H4V8M16,8V14H18V6H10V8H16M6,12V18H14V12H6Z" />
+    </Style>
+    <!-- Fullscreen exit -->
+    <Style Selector="^:fullscreen /template/ Path#FullScreenButtonPath">
+      <Setter Property="Data" Value="M14,14H19V16H16V19H14V14M5,14H10V19H8V16H5V14M8,5H10V10H5V8H8V5M19,8V10H14V5H16V8H19Z" />
+    </Style>
+    <Style Selector="^:fullscreen /template/ Button#PART_FullScreenButton">
+      <Setter Property="IsVisible" Value="True" />
+    </Style>
+    <Style Selector="^:fullscreen /template/ Button#PART_RestoreButton">
+      <Setter Property="IsVisible" Value="False" />
+    </Style>
+    <Style Selector="^:fullscreen /template/ Button#PART_MinimizeButton">
+      <Setter Property="IsVisible" Value="False" />
+    </Style>
+    <Style Selector="^ /template/ Button#PART_RestoreButton:disabled">
+      <Setter Property="Opacity" Value="0.2" />
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="{x:Type CaptionButtons}" TargetType="CaptionButtons"
+                BasedOn="{StaticResource MaterialCaptionButtons}" />
+</ResourceDictionary>
diff --git a/Material.Styles/Resources/Themes/PathIcon.xaml b/Material.Styles/Resources/Themes/PathIcon.xaml
@@ -0,0 +1,34 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:system="clr-namespace:System;assembly=netstandard"
+                    x:ClassModifier="internal">
+  <system:Double x:Key="IconElementThemeHeight">24</system:Double>
+  <system:Double x:Key="IconElementThemeWidth">24</system:Double>
+
+  <Design.PreviewWith>
+    <StackPanel>
+      <StackPanel.Resources>
+        <StreamGeometry x:Key="settings_regular">M14 9.50006C11.5147 9.50006 9.5 11.5148 9.5 14.0001C9.5 16.4853 11.5147 18.5001 14 18.5001C15.3488 18.5001 16.559 17.9066 17.3838 16.9666C18.0787 16.1746 18.5 15.1365 18.5 14.0001C18.5 13.5401 18.431 13.0963 18.3028 12.6784C17.7382 10.8381 16.0253 9.50006 14 9.50006ZM11 14.0001C11 12.3432 12.3431 11.0001 14 11.0001C15.6569 11.0001 17 12.3432 17 14.0001C17 15.6569 15.6569 17.0001 14 17.0001C12.3431 17.0001 11 15.6569 11 14.0001Z  M21.7093 22.3948L19.9818 21.6364C19.4876 21.4197 18.9071 21.4515 18.44 21.7219C17.9729 21.9924 17.675 22.4693 17.6157 23.0066L17.408 24.8855C17.3651 25.273 17.084 25.5917 16.7055 25.682C14.9263 26.1061 13.0725 26.1061 11.2933 25.682C10.9148 25.5917 10.6336 25.273 10.5908 24.8855L10.3834 23.0093C10.3225 22.4731 10.0112 21.9976 9.54452 21.7281C9.07783 21.4586 8.51117 21.4269 8.01859 21.6424L6.29071 22.4009C5.93281 22.558 5.51493 22.4718 5.24806 22.1859C4.00474 20.8536 3.07924 19.2561 2.54122 17.5137C2.42533 17.1384 2.55922 16.7307 2.8749 16.4977L4.40219 15.3703C4.83721 15.0501 5.09414 14.5415 5.09414 14.0007C5.09414 13.4598 4.83721 12.9512 4.40162 12.6306L2.87529 11.5051C2.55914 11.272 2.42513 10.8638 2.54142 10.4882C3.08038 8.74734 4.00637 7.15163 5.24971 5.82114C5.51684 5.53528 5.93492 5.44941 6.29276 5.60691L8.01296 6.36404C8.50793 6.58168 9.07696 6.54881 9.54617 6.27415C10.0133 6.00264 10.3244 5.52527 10.3844 4.98794L10.5933 3.11017C10.637 2.71803 10.9245 2.39704 11.3089 2.31138C12.19 2.11504 13.0891 2.01071 14.0131 2.00006C14.9147 2.01047 15.8128 2.11485 16.6928 2.31149C17.077 2.39734 17.3643 2.71823 17.4079 3.11017L17.617 4.98937C17.7116 5.85221 18.4387 6.50572 19.3055 6.50663C19.5385 6.507 19.769 6.45838 19.9843 6.36294L21.7048 5.60568C22.0626 5.44818 22.4807 5.53405 22.7478 5.81991C23.9912 7.1504 24.9172 8.74611 25.4561 10.487C25.5723 10.8623 25.4386 11.2703 25.1228 11.5035L23.5978 12.6297C23.1628 12.95 22.9 13.4586 22.9 13.9994C22.9 14.5403 23.1628 15.0489 23.5988 15.3698L25.1251 16.4965C25.441 16.7296 25.5748 17.1376 25.4586 17.5131C24.9198 19.2536 23.9944 20.8492 22.7517 22.1799C22.4849 22.4657 22.0671 22.5518 21.7093 22.3948ZM16.263 22.1966C16.4982 21.4685 16.9889 20.8288 17.6884 20.4238C18.5702 19.9132 19.6536 19.8547 20.5841 20.2627L21.9281 20.8526C22.791 19.8538 23.4593 18.7013 23.8981 17.4552L22.7095 16.5778L22.7086 16.5771C21.898 15.98 21.4 15.0277 21.4 13.9994C21.4 12.9719 21.8974 12.0195 22.7073 11.4227L22.7085 11.4218L23.8957 10.545C23.4567 9.2988 22.7881 8.14636 21.9248 7.1477L20.5922 7.73425L20.5899 7.73527C20.1844 7.91463 19.7472 8.00722 19.3039 8.00663C17.6715 8.00453 16.3046 6.77431 16.1261 5.15465L16.1259 5.15291L15.9635 3.69304C15.3202 3.57328 14.6677 3.50872 14.013 3.50017C13.3389 3.50891 12.6821 3.57367 12.0377 3.69328L11.8751 5.15452C11.7625 6.16272 11.1793 7.05909 10.3019 7.56986C9.41937 8.0856 8.34453 8.14844 7.40869 7.73694L6.07273 7.14893C5.20949 8.14751 4.54092 9.29983 4.10196 10.5459L5.29181 11.4233C6.11115 12.0269 6.59414 12.9837 6.59414 14.0007C6.59414 15.0173 6.11142 15.9742 5.29237 16.5776L4.10161 17.4566C4.54002 18.7044 5.2085 19.8585 6.07205 20.8587L7.41742 20.2682C8.34745 19.8613 9.41573 19.9215 10.2947 20.4292C11.174 20.937 11.7593 21.832 11.8738 22.84L11.8744 22.8445L12.0362 24.3088C13.3326 24.5638 14.6662 24.5638 15.9626 24.3088L16.1247 22.8418C16.1491 22.6217 16.1955 22.4055 16.263 22.1966Z</StreamGeometry>
+      </StackPanel.Resources>
+      <PathIcon Data="{StaticResource settings_regular}" />
+    </StackPanel>
+  </Design.PreviewWith>
+  <ControlTheme x:Key="MaterialPathIcon" TargetType="PathIcon">
+    <Setter Property="Foreground" Value="{DynamicResource MaterialPrimaryMidBrush}" />
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="Height" Value="{DynamicResource IconElementThemeHeight}" />
+    <Setter Property="Width" Value="{DynamicResource IconElementThemeWidth}" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Background="{TemplateBinding Background}">
+          <Viewbox Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
+            <Path Fill="{TemplateBinding Foreground}" Data="{TemplateBinding Data}" Stretch="Uniform" />
+          </Viewbox>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+  </ControlTheme>
+
+  <ControlTheme x:Key="{x:Type PathIcon}" TargetType="PathIcon"
+                BasedOn="{StaticResource MaterialPathIcon}"/>
+</ResourceDictionary>
diff --git a/Material.Styles/Resources/Themes/RefreshContainer.xaml b/Material.Styles/Resources/Themes/RefreshContainer.xaml
@@ -0,0 +1,27 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    x:ClassModifier="internal">
+  <ControlTheme x:Key="MaterialRefreshContainer" TargetType="RefreshContainer">
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Grid>
+          <ContentPresenter Name="PART_ContentPresenter"
+                            Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="{TemplateBinding CornerRadius}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                            Content="{TemplateBinding Content}"
+                            Padding="{TemplateBinding Padding}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}">
+          </ContentPresenter>
+          <Grid Name="PART_RefreshVisualizerPresenter" />
+        </Grid>
+      </ControlTemplate>
+    </Setter>
+  </ControlTheme>
+
+  <ControlTheme x:Key="{x:Type RefreshContainer}" TargetType="RefreshContainer"
+                BasedOn="{StaticResource MaterialRefreshContainer}" />
+</ResourceDictionary>
diff --git a/Material.Styles/Resources/Themes/RefreshVisualizer.xaml b/Material.Styles/Resources/Themes/RefreshVisualizer.xaml
@@ -0,0 +1,32 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:system="clr-namespace:System;assembly=netstandard"
+                    x:ClassModifier="internal">
+  <system:Double x:Key="RefreshVisualizerIndicatorSize">24</system:Double>
+
+  <ControlTheme x:Key="MaterialRefreshVisualizer" TargetType="RefreshVisualizer">
+    <Setter Property="IsTabStop" Value="False" />
+    <Setter Property="IsHitTestVisible" Value="False" />
+    <Setter Property="Height" Value="100" />
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="Foreground" Value="{DynamicResource MaterialBodyBrush}" />
+    <Setter Property="Content">
+      <Template>
+        <PathIcon Name="PART_Icon"
+                  Data="M18.6195264,3.31842271 C19.0080059,3.31842271 19.3290603,3.60710385 19.3798716,3.9816481 L19.3868766,4.08577298 L19.3868766,6.97963208 C19.3868766,7.36811161 19.0981955,7.68916605 18.7236513,7.73997735 L18.6195264,7.74698235 L15.7256673,7.74698235 C15.3018714,7.74698235 14.958317,7.40342793 14.958317,6.97963208 C14.958317,6.59115255 15.2469981,6.27009811 15.6215424,6.21928681 L15.7256673,6.21228181 L16.7044011,6.21182461 C13.7917384,3.87107476 9.52212532,4.05209336 6.81933829,6.75488039 C3.92253872,9.65167996 3.92253872,14.34832 6.81933829,17.2451196 C9.71613786,20.1419192 14.4127779,20.1419192 17.3095775,17.2451196 C19.0725398,15.4821573 19.8106555,12.9925923 19.3476248,10.58925 C19.2674502,10.173107 19.5398064,9.77076216 19.9559494,9.69058758 C20.3720923,9.610413 20.7744372,9.88276918 20.8546118,10.2989121 C21.4129973,13.1971899 20.5217103,16.2033812 18.3947747,18.3303168 C14.8986373,21.8264542 9.23027854,21.8264542 5.73414113,18.3303168 C2.23800371,14.8341794 2.23800371,9.16582064 5.73414113,5.66968323 C9.05475132,2.34907304 14.3349409,2.18235834 17.8523166,5.16953912 L17.8521761,4.08577298 C17.8521761,3.66197713 18.1957305,3.31842271 18.6195264,3.31842271 Z"
+                  Width="{DynamicResource RefreshVisualizerIndicatorSize}"
+                  Height="{DynamicResource RefreshVisualizerIndicatorSize}" />
+      </Template>
+    </Setter>
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Grid Name="PART_Root"
+              MinHeight="80"
+              Background="{TemplateBinding Background}" />
+      </ControlTemplate>
+    </Setter>
+  </ControlTheme>
+
+  <ControlTheme x:Key="{x:Type RefreshVisualizer}" TargetType="RefreshVisualizer"
+                BasedOn="{StaticResource MaterialRefreshVisualizer}" />
+</ResourceDictionary>