Skip to content

Commit

Permalink
Fixed Button styles
Browse files Browse the repository at this point in the history 
This commit fixes issues with the `VisualStateManager` styles.

Fixed #556
  • Loading branch information
@AndreasReitberger
AndreasReitberger committed Sep 19, 2024
1 parent fa62a39 commit dc83109
Show file tree
Hide file tree
Showing 5 changed files with 318 additions and 237 deletions.
2 changes: 1 addition & 1 deletion src/SharedMauiXamlStylesLibrary.SampleApp/Themes/DefaultColors.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<!-- https://material.io/design/color/the-color-system.html#tools-for-picking-colors -->
<!-- Common -->
<Color x:Key="PrimaryColor">#512BD4</Color>
<Color x:Key="PrimaryDarkenColor">#512BD4</Color>
<Color x:Key="PrimaryDarkenColor">#391E94</Color>
<Color x:Key="PrimaryLighterColor">#edcacd</Color>
<Color x:Key="PrimaryLight">#ffe8f4</Color>
<Color x:Key="SecondaryGradient">#7644ad</Color>
Expand Down
2 changes: 2 additions & 0 deletions src/SharedMauiXamlStylesLibrary.SampleApp/ViewModels/ButtonsPageViewModel.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ public partial class ButtonsPageViewModel : BaseViewModel
[ObservableProperty]
string sampleText = "This is just a sample text";

[ObservableProperty]
bool enabled = true;
#endregion

#region Constructor, LoadSettings
Expand Down
245 changes: 145 additions & 100 deletions src/SharedMauiXamlStylesLibrary.SampleApp/Views/ButtonsPage.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,104 +18,149 @@
<ContentPage.Resources>
<converters:ColorToBlackWhiteConverter x:Key="ColorToBlackWhiteConverter" />
</ContentPage.Resources>
<ScrollView>
<VerticalStackLayout>
<Label
Margin="2,16"
Text="Text Buttons"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
Style="{StaticResource Style.Core.Label.Default}"
/>

<Button
Margin="8,16"
Text="This is a normal button"
Style="{StaticResource Style.Core.Button.Default}"
/>

<Button
Margin="8,16"
Text="This is a green button"
Style="{StaticResource Style.Core.Button.Default}"
Background="Green"
/>

<Button
Margin="8,16"
Text="This is a link styled button"
Style="{StaticResource Style.Core.Button.Link}"
/>


<Button
Margin="8,16"
Text="This is a link styled button with a round frame"
Style="{StaticResource Style.Core.Button.LinkRound}"
/>

<Button
Margin="8,16"
Text="This is a normal button"
Style="{StaticResource Style.Core.Button.RoundedLong}"
/>

<BoxView
Style="{StaticResource Style.Core.BoxView.PrimarySeparator}"
Margin="4"
/>

<Label
Margin="2,16"
Text="Icon Buttons"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
Style="{StaticResource Style.Core.Label.Default}"
/>

<Grid
ColumnDefinitions="*,*,*"
RowDefinitions="*,*"
>
<Button
Margin="8,16"
Text="{x:Static iconsSyncfusion:SyncfusionIcons.Favourite}"
Style="{StaticResource Style.Core.Button.IconPrimary}"
/>
<Button
Grid.Column="1"
Margin="8,16"
Text="{x:Static icons:MaterialIcons.PhonePlusOutline}"
Style="{StaticResource Style.Core.Button.IconPrimary.MaterialDesign}"
/>
<Button
Grid.Column="2"
Margin="8,16"
Text="{x:Static icons:MaterialIcons.ProgressCheck}"
Style="{StaticResource Style.Core.Button.IconPrimary.MaterialDesign}"
/>
<Button
Grid.Row="1"
Grid.Column="0"
Margin="8,16"
Text="{x:Static icons:MaterialIcons.ProgressCheck}"
Style="{StaticResource Style.Core.Button.IconPrimary.MaterialDesign}"
/>
<Button
Grid.Row="1"
Grid.Column="1"
Margin="8,16"
Text="{x:Static icons:MaterialIcons.AlertCircleCheckOutline}"
Style="{StaticResource Style.Core.Button.Icon.MaterialDesign.Critical}"
/>
<Button
Grid.Row="1"
Grid.Column="2"
Margin="8,16"
Text="{x:Static icons:MaterialIcons.ScriptOutline}"
Style="{StaticResource Style.Core.Button.Icon.MaterialDesign.Error}"
/>
</Grid>
</VerticalStackLayout>
</ScrollView>
<Grid
ColumnDefinitions="*,Auto"
RowDefinitions="Auto,*"
>
<Label
Margin="16,8"
Text="Switch button enable state"
/>
<Switch
Grid.Column="1"
IsToggled="{Binding Enabled}"
/>
<ScrollView
Grid.ColumnSpan="2"
Grid.Row="1"
>
<VerticalStackLayout>
<Label
Margin="2,16"
Text="Text Buttons"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
Style="{StaticResource Style.Core.Label.Default}"
/>
<Button
IsEnabled="{Binding Enabled}"
Margin="8,16"
Text="This is a normal button"
Style="{StaticResource Style.Core.Button.Default}"
/>
<Button
IsEnabled="{Binding Enabled}"
Margin="8,16"
Text="This is a transparent button"
Style="{StaticResource Style.Core.Button.Default.Transparent}"
/>
<Button
IsEnabled="{Binding Enabled}"
Margin="8,16"
Text="This is a green button"
Style="{StaticResource Style.Core.Button.Default}"
Background="Green"
>
<!-- If you change the Background, also remember to also update the PointOver VisualState -->
<VisualStateManager.VisualStateGroups>
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Property="Background" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray800}}" />
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray400}, Dark={StaticResource Gray600}}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOver" >
<VisualState.Setters>
<Setter Property="Background" Value="DarkGreen"/>
<Setter Property="TextColor" Value="{Binding Source={RelativeSource Self}, Path=Background, Converter={StaticResource BrushToBlackWhiteConverter}}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</VisualStateManager.VisualStateGroups>
</Button>
<Button
IsEnabled="{Binding Enabled}"
Margin="8,16"
Text="This is a link styled button"
Style="{StaticResource Style.Core.Button.Link}"
/>
<Button
IsEnabled="{Binding Enabled}"
Margin="8,16"
Text="This is a link styled button with a round frame"
Style="{StaticResource Style.Core.Button.LinkRound}"
/>
<Button
IsEnabled="{Binding Enabled}"
Margin="8,16"
Text="This is a normal button"
Style="{StaticResource Style.Core.Button.RoundedLong}"
/>
<BoxView
Style="{StaticResource Style.Core.BoxView.PrimarySeparator}"
Margin="4"
/>
<Label
Margin="2,16"
Text="Icon Buttons"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
Style="{StaticResource Style.Core.Label.Default}"
/>
<Grid
ColumnDefinitions="*,*,*"
RowDefinitions="*,*"
>
<Button
IsEnabled="{Binding Enabled}"
Margin="8,16"
Text="{x:Static iconsSyncfusion:SyncfusionIcons.Favourite}"
Style="{StaticResource Style.Core.Button.IconPrimary}"
/>
<Button
IsEnabled="{Binding Enabled}"
Grid.Column="1"
Margin="8,16"
Text="{x:Static icons:MaterialIcons.PhonePlusOutline}"
Style="{StaticResource Style.Core.Button.IconPrimary.MaterialDesign}"
/>
<Button
IsEnabled="{Binding Enabled}"
Grid.Column="2"
Margin="8,16"
Text="{x:Static icons:MaterialIcons.ProgressCheck}"
Style="{StaticResource Style.Core.Button.IconPrimary.MaterialDesign}"
/>
<Button
IsEnabled="{Binding Enabled}"
Grid.Row="1"
Grid.Column="0"
Margin="8,16"
Text="{x:Static icons:MaterialIcons.ProgressCheck}"
Style="{StaticResource Style.Core.Button.IconPrimary.MaterialDesign}"
/>
<Button
IsEnabled="{Binding Enabled}"
Grid.Row="1"
Grid.Column="1"
Margin="8,16"
Text="{x:Static icons:MaterialIcons.AlertCircleCheckOutline}"
Style="{StaticResource Style.Core.Button.Icon.MaterialDesign.Critical}"
/>
<Button
IsEnabled="{Binding Enabled}"
Grid.Row="1"
Grid.Column="2"
Margin="8,16"
Text="{x:Static icons:MaterialIcons.ScriptOutline}"
Style="{StaticResource Style.Core.Button.Icon.MaterialDesign.Error}"
/>
</Grid>
</VerticalStackLayout>
</ScrollView>
</Grid>
</ContentPage>
68 changes: 20 additions & 48 deletions src/SharedMauiXamlStylesLibrary.Syncfusion/Resources/Themes/Controls/Core/Button.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,62 +24,34 @@
<converters:ColorToLightForgroundConverter x:Key="ColorToLightForgroundConverter" />
<converters:BrushToBlackWhiteConverter x:Key="BrushToBlackWhiteConverter" />

<Style x:Key="Style.Core.Button.Icon" TargetType="Button" BasedOn="{StaticResource Style.Core.Button.Default}">
<Style x:Key="Style.Core.Button.Icon" TargetType="Button" BasedOn="{StaticResource Style.Core.Button.Icon.Default}">
<Setter Property="FontFamily" Value="{StaticResource FontIcons}" />
</Style>

<Style x:Key="Style.Core.Button.Icon.Transparent" TargetType="Button" BasedOn="{StaticResource Style.Core.Button.Icon.Default.Transparent}">
<Setter Property="FontFamily" Value="{StaticResource FontIcons}" />
<Setter Property="FontSize" Value="{StaticResource LargeIconSize}" />
<Setter Property="HeightRequest" Value="{OnIdiom Desktop=60, Tablet=60, Default=50}" />
<Setter Property="WidthRequest" Value="{OnIdiom Desktop=60, Tablet=60, Default=50}" />
<Setter Property="BorderWidth" Value="0" />
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Property="Background" Value="{StaticResource Transparent}" />
<Setter Property="TextColor" Value="{DynamicResource PrimaryColor}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="Background" Value="{StaticResource Transparent}" />
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray600}, Dark={StaticResource Gray400}}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Property="Background" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray700}}" />
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray800}, Dark={StaticResource Gray200}}" />
</VisualState.Setters>
</VisualState>
<!--
<VisualState x:Name="Focused" />
<VisualState x:Name="Selected" />
-->
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>

<Style x:Key="Style.Core.Button.IconPrimary" TargetType="Button" BasedOn="{StaticResource Style.Core.Button.Icon}">
<Setter Property="Background" Value="{DynamicResource PrimaryColor}" />
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="PointerOver">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="Background" Value="{DynamicResource PrimaryDarkenColor}" />
<Setter Property="TextColor" Value="{Binding Source={RelativeSource Self}, Path=Background, Converter={StaticResource BrushToBlackWhiteConverter}}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Normal">
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Property="Background" Value="{DynamicResource PrimaryColor}" />
<Setter Property="Background" Value="{DynamicResource PrimaryDarkenColor}" />
<Setter Property="TextColor" Value="{Binding Source={RelativeSource Self}, Path=Background, Converter={StaticResource BrushToBlackWhiteConverter}}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Property="Background" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray700}}" />
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray800}, Dark={StaticResource Gray200}}" />
<Setter Property="Background" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray800}}" />
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray400}, Dark={StaticResource Gray600}}" />
</VisualState.Setters>
</VisualState>
<!--
Expand All @@ -92,6 +64,7 @@
</Style>

<Style x:Key="Style.Core.Button.IconRound" BasedOn="{StaticResource Style.Core.Button.Icon}" TargetType="Button">
<Setter Property="Background" Value="{AppThemeBinding Light={StaticResource Gray100}, Dark={StaticResource Gray900}}" />
<Setter Property="FontSize" Value="{StaticResource LargeTextSize}" />
<Setter Property="BorderWidth" Value="1" />
<Setter Property="HeightRequest" Value="{OnIdiom Desktop=64, Tablet=64, Default=50}" />
Expand All @@ -100,24 +73,23 @@
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray800}, Dark={StaticResource Gray200}}" />
<Setter Property="BorderColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray700}}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Property="Background" Value="{DynamicResource PrimaryColor}" />
<Setter Property="TextColor" Value="{Binding Source={RelativeSource Self}, Path=Background, Converter={StaticResource BrushToBlackWhiteConverter}}" />
<Setter Property="BorderColor" Value="{DynamicResource PrimaryDarkenColor}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="Background" Value="{AppThemeBinding Light={StaticResource Gray100}, Dark={StaticResource Gray900}}" />
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray800}, Dark={StaticResource Gray200}}" />
<Setter Property="BorderColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray700}}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Property="Background" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray700}}" />
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray800}, Dark={StaticResource Gray200}}" />
<Setter Property="Background" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray800}}" />
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray400}, Dark={StaticResource Gray600}}" />
</VisualState.Setters>
</VisualState>
<!--
Expand Down
Loading

0 comments on commit dc83109

Please sign in to comment.