Merge pull request #375 from AvaloniaCommunity/buttonsRework

ToggleButtons rework
AvaloniaCommunity · Apr 28, 2024 · 70f8eee · 70f8eee
2 parents 38dfa62 + 3f4540c
commit 70f8eee
Show file tree

Hide file tree

Showing 11 changed files with 592 additions and 502 deletions.
diff --git a/Material.Avalonia.Demo/MainView.axaml b/Material.Avalonia.Demo/MainView.axaml
@@ -102,6 +102,7 @@
                 <ColumnDefinition Width="Auto" />
               </Grid.ColumnDefinitions>
               <ToggleButton Name="NavDrawerSwitch"
+                            Theme="{StaticResource MaterialFlatButton}"
                             Width="32" Height="32" Padding="4">
                 <avalonia:MaterialIcon Kind="Menu" Width="24" Height="24" />
               </ToggleButton>

diff --git a/Material.Avalonia.Demo/Pages/ButtonsDemo.axaml b/Material.Avalonia.Demo/Pages/ButtonsDemo.axaml
diff --git a/Material.Avalonia.Demo/Pages/ColorZonesDemo.axaml b/Material.Avalonia.Demo/Pages/ColorZonesDemo.axaml
@@ -21,7 +21,7 @@
             <showMeTheXaml:XamlDisplay UniqueId="ColorZoneDemo1">
                 <controls:ColorZone Height="56" Padding="12">
                     <Grid ColumnDefinitions="Auto,24,*">
-                        <ToggleButton Grid.Column="0" Classes="Flat TransparentBack" Padding="4" Content="{icons:MaterialIconExt Menu}" />
+                        <ToggleButton Grid.Column="0" Theme="{StaticResource MaterialFlatToggleButton}" Padding="4" Content="{icons:MaterialIconExt Menu}" />
                         <TextBlock Grid.Column="2" Classes="Headline6" VerticalAlignment="Center" Text="Material Design Demo"/>
                     </Grid>
                 </controls:ColorZone>
@@ -33,7 +33,7 @@
             <showMeTheXaml:XamlDisplay UniqueId="ColorZoneDemo2">
                 <controls:ColorZone Height="56" Padding="12" Mode="Inverted">
                     <Grid ColumnDefinitions="Auto,24,*">
-                        <ToggleButton Grid.Column="0" Classes="Flat TransparentBack" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
+                        <ToggleButton Grid.Column="0" Theme="{StaticResource MaterialFlatToggleButton}" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
                         <TextBlock Grid.Column="2" Classes="Headline6" VerticalAlignment="Center" Text="Material Design Demo"/>
                     </Grid>
                 </controls:ColorZone>
@@ -45,7 +45,7 @@
             <showMeTheXaml:XamlDisplay UniqueId="ColorZoneDemo3">
                 <controls:ColorZone Height="56" Padding="12" Mode="Dark">
                     <Grid ColumnDefinitions="Auto,24,*">
-                        <ToggleButton Grid.Column="0" Classes="Flat TransparentBack" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
+                        <ToggleButton Grid.Column="0" Theme="{StaticResource MaterialFlatToggleButton}" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
                         <TextBlock Grid.Column="2" Classes="Headline6" VerticalAlignment="Center" Text="Material Design Demo"/>
                     </Grid>
                 </controls:ColorZone>
@@ -57,7 +57,7 @@
             <showMeTheXaml:XamlDisplay UniqueId="ColorZoneDemo4">
                 <controls:ColorZone Height="56" Padding="12" Mode="Light">
                     <Grid ColumnDefinitions="Auto,24,*">
-                        <ToggleButton Grid.Column="0" Classes="Flat TransparentBack" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
+                        <ToggleButton Grid.Column="0" Theme="{StaticResource MaterialFlatToggleButton}" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
                         <TextBlock Grid.Column="2" Classes="Headline6" VerticalAlignment="Center" Text="Material Design Demo"/>
                     </Grid>
                 </controls:ColorZone>
@@ -69,7 +69,7 @@
             <showMeTheXaml:XamlDisplay UniqueId="ColorZoneDemo5">
                 <controls:ColorZone Height="56" Padding="12" Mode="PrimaryLight">
                     <Grid ColumnDefinitions="Auto,24,*">
-                        <ToggleButton Grid.Column="0" Classes="Flat TransparentBack" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
+                        <ToggleButton Grid.Column="0" Theme="{StaticResource MaterialFlatToggleButton}" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
                         <TextBlock Grid.Column="2" Classes="Headline6" VerticalAlignment="Center" Text="Material Design Demo"/>
                     </Grid>
                 </controls:ColorZone>
@@ -81,7 +81,7 @@
             <showMeTheXaml:XamlDisplay UniqueId="ColorZoneDemo6">
                 <controls:ColorZone Height="56" Padding="12" Mode="PrimaryMid">
                     <Grid ColumnDefinitions="Auto,24,*">
-                        <ToggleButton Grid.Column="0" Classes="Flat TransparentBack" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
+                        <ToggleButton Grid.Column="0" Theme="{StaticResource MaterialFlatToggleButton}" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
                         <TextBlock Grid.Column="2" Classes="Headline6" VerticalAlignment="Center" Text="Material Design Demo"/>
                     </Grid>
                 </controls:ColorZone>
@@ -93,7 +93,7 @@
             <showMeTheXaml:XamlDisplay UniqueId="ColorZoneDemo7">
                 <controls:ColorZone Height="56" Padding="12" Mode="PrimaryDark">
                     <Grid ColumnDefinitions="Auto,24,*">
-                        <ToggleButton Grid.Column="0" Classes="Flat TransparentBack" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
+                        <ToggleButton Grid.Column="0" Theme="{StaticResource MaterialFlatToggleButton}" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
                         <TextBlock Grid.Column="2" Classes="Headline6" VerticalAlignment="Center" Text="Material Design Demo"/>
                     </Grid>
                 </controls:ColorZone>
@@ -105,7 +105,7 @@
             <showMeTheXaml:XamlDisplay UniqueId="ColorZoneDemo8">
                 <controls:ColorZone Height="56" Padding="12" Mode="Accent">
                     <Grid ColumnDefinitions="Auto,24,*">
-                        <ToggleButton Grid.Column="0" Classes="Flat TransparentBack" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
+                        <ToggleButton Grid.Column="0" Theme="{StaticResource MaterialFlatToggleButton}" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
                         <TextBlock Grid.Column="2" Classes="Headline6" VerticalAlignment="Center" Text="Material Design Demo"/>
                     </Grid>
                 </controls:ColorZone>
@@ -118,7 +118,7 @@
             <showMeTheXaml:XamlDisplay UniqueId="ColorZoneAdvDemo1">
                 <controls:ColorZone Height="56" Padding="12">
                     <Grid ColumnDefinitions="Auto,24,*,24,Auto">
-                        <ToggleButton Grid.Column="0" Classes="Flat TransparentBack" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
+                        <ToggleButton Grid.Column="0" Theme="{StaticResource MaterialFlatToggleButton}" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
                         <TextBlock Grid.Column="2" Classes="Headline6" VerticalAlignment="Center" Text="Material Design Demo"/>
 
                         <ReversibleStackPanel Grid.Column="4" Margin="0" Orientation="Horizontal">
@@ -134,7 +134,7 @@
             <showMeTheXaml:XamlDisplay UniqueId="ColorZoneAdvDemo2">
                 <controls:ColorZone Height="56" Padding="12">
                     <Grid ColumnDefinitions="Auto,24,*,*,24,Auto">
-                        <ToggleButton Grid.Column="0" Classes="Flat TransparentBack" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
+                        <ToggleButton Grid.Column="0" Theme="{StaticResource MaterialFlatToggleButton}" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
                         <TextBlock Grid.Column="2" Classes="Headline6" VerticalAlignment="Center" Text="Material Design Demo"/>
 
                         <Panel Grid.Column="3" VerticalAlignment="Center">

diff --git a/Material.Avalonia.Demo/Pages/Home.axaml b/Material.Avalonia.Demo/Pages/Home.axaml
@@ -33,13 +33,13 @@
                 </Style>
             </StackPanel.Styles>
             <WrapPanel HorizontalAlignment="Center" MaxWidth="600">
-                <Button Content="PROJECT LINK" Command="{Binding Path=OpenProjectRepoLink}" />
-                <Button Content="USE DARK THEME" Command="{Binding Path=UseMaterialUIDarkTheme}" />
-                <Button Content="USE LIGHT THEME" Command="{Binding Path=UseMaterialUILightTheme}" />
+                <Button Content="PROJECT LINK" Classes="primary" Command="{Binding Path=OpenProjectRepoLink}" />
+                <Button Content="USE DARK THEME" Classes="primary" Command="{Binding Path=UseMaterialUIDarkTheme}" />
+                <Button Content="USE LIGHT THEME" Classes="primary" Command="{Binding Path=UseMaterialUILightTheme}" />
             </WrapPanel>
             <WrapPanel HorizontalAlignment="Center" MaxWidth="600">
-                <Button Content="SWITCH TRANSITIONS" Command="{Binding Path=SwitchTransition}" />
-                <Button Content="ABOUT AVALONIAUI" Command="{Binding Path=ShowAboutAvaloniaUI}" />
+                <Button Content="SWITCH TRANSITIONS" Classes="primary" Command="{Binding Path=SwitchTransition}" />
+                <Button Content="ABOUT AVALONIAUI" Classes="primary" Command="{Binding Path=ShowAboutAvaloniaUI}" />
             </WrapPanel>
         </StackPanel>
         <!-- Features listing is disabled. -->