Browse Source

Styled dialog buttons

Krzysztof Krysiński 1 year ago
parent
commit
04fb6c778e

+ 1 - 0
src/PixiEditor.AvaloniaUI/PixiEditor.AvaloniaUI.csproj

@@ -81,6 +81,7 @@
       <UpToDateCheckInput Remove="Fonts\feather.ttf" />
       <UpToDateCheckInput Remove="Views\Settings\SettingsWindow.axaml" />
       <UpToDateCheckInput Remove="Views\Settings\ShortcutsBinder.axaml" />
+      <UpToDateCheckInput Remove="Styles\Buttons\DialogButton.Template.axaml" />
     </ItemGroup>
   
     <ItemGroup>

+ 50 - 0
src/PixiEditor.AvaloniaUI/Styles/Buttons/DialogButtonTheme.axaml

@@ -0,0 +1,50 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+     <Design.PreviewWith>
+        <StackPanel Spacing="5">
+            <Button Content="Button"/>
+            <Button Content="Button" IsEnabled="False"/>
+        </StackPanel>
+    </Design.PreviewWith>
+
+    <ControlTheme TargetType="Button" x:Key="DialogButtonTheme">
+        <Setter Property="Background" Value="Transparent"/>
+        <Setter Property="CornerRadius" Value="0"/>
+        <Setter Property="Width" Value="48"></Setter>
+        <Setter Property="IsHitTestVisible" Value="True"/>
+        <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}" />
+        <Setter Property="HorizontalContentAlignment" Value="Center" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="Padding" Value="5"/>
+        <Setter Property="Template">
+            <ControlTemplate>
+                <ContentPresenter Name="PART_ContentPresenter"
+                                  Padding="{TemplateBinding Padding}"
+                                  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                  Background="{TemplateBinding Background}"
+                                  BorderBrush="{TemplateBinding BorderBrush}"
+                                  BorderThickness="{TemplateBinding BorderThickness}"
+                                  Content="{TemplateBinding Content}"
+                                  ContentTemplate="{TemplateBinding ContentTemplate}"
+                                  CornerRadius="{TemplateBinding CornerRadius}"
+                                  RecognizesAccessKey="True"
+                                  TextElement.Foreground="{TemplateBinding Foreground}" />
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Background" Value="{DynamicResource ThemeControlHighlightBrush}" />
+        </Style>
+        <Style Selector="^.close:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Background" Value="Red" />
+        </Style>
+        <Style Selector="^:pressed  /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Background" Value="{DynamicResource ThemeControlHighBrush}" />
+            <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundColor}" />
+        </Style>
+        <Style Selector="^:disabled">
+            <Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}"/>
+            <Setter Property="Cursor" Value="Arrow" />
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>

+ 1 - 0
src/PixiEditor.AvaloniaUI/Styles/PixiEditor.Controls.axaml

@@ -6,6 +6,7 @@
             <ResourceDictionary.MergedDictionaries>
                 <MergeResourceInclude Source="avares://PixiEditor.AvaloniaUI/Styles/CommandsMenu.axaml"/>
                 <MergeResourceInclude Source="avares://PixiEditor.AvaloniaUI/Styles/BlendModeComboBox.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.AvaloniaUI/Styles/Buttons/DialogButtonTheme.axaml"/>
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </Styles.Resources>

+ 6 - 9
src/PixiEditor.AvaloniaUI/Views/Dialogs/DialogTitleBar.axaml

@@ -21,20 +21,14 @@
             TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" 
             ui:Translator.Key="{Binding ElementName=uc, Path=TitleKey}"
             Foreground="White" 
-            FontSize="15" 
+            FontSize="15"
             Margin="5,0,0,0"/>
         <DockPanel IsHitTestVisible="True">
-            <DockPanel.Styles>
-                <Style Selector="Button">
-                    <Setter Property="Background" Value="Transparent"/>
-                    <Setter Property="CornerRadius" Value="0"/>
-                    <Setter Property="Width" Value="48"></Setter>
-                    <Setter Property="IsHitTestVisible" Value="True"/>
-                </Style>
-            </DockPanel.Styles>
             <Button 
                 DockPanel.Dock="Right" 
                 IsCancel="True"
+                Classes="close"
+                Theme="{StaticResource DialogButtonTheme}"
                 ui:Translator.TooltipKey="CLOSE"
                 Click="CloseWindow">
                 🗙
@@ -43,6 +37,7 @@
                 <Button
                     IsVisible="{Binding !$parent[Window].WindowState, Converter={converters:IsEqualConverter}, ConverterParameter={x:Static WindowState.Maximized}}"
                     DockPanel.Dock="Right"
+                    Theme="{StaticResource DialogButtonTheme}"
                     ui:Translator.TooltipKey="MAXIMIZE"
                     Name="maximizeButton"
                     Click="MaximizeWindow">
@@ -52,6 +47,7 @@
                     IsVisible="{Binding $parent[Window].WindowState, Converter={converters:IsEqualConverter}, ConverterParameter={x:Static WindowState.Maximized}}"
                     DockPanel.Dock="Right"
                     Name="restoreButton"
+                    Theme="{StaticResource DialogButtonTheme}"
                     ui:Translator.TooltipKey="RESTORE"
                     Click="RestoreWindow">
                     🗗
@@ -60,6 +56,7 @@
             <Button 
                 DockPanel.Dock="Right"
                 Name="minimizeButton"
+                Theme="{StaticResource DialogButtonTheme}"
                 IsVisible="{Binding ElementName=uc, Path=CanMinimize}"
                 ui:Translator.TooltipKey="MINIMIZE"
                 Click="MinimizeWindow">