Skip to content

Commit

Permalink
theme switcher with radios
Browse files Browse the repository at this point in the history
  • Loading branch information
@davidortinau
davidortinau committed May 5, 2022
1 parent 0042f55 commit ec1ceae
Show file tree
Hide file tree
Showing 3 changed files with 172 additions and 27 deletions.
167 changes: 162 additions & 5 deletions src/WeatherTwentyOne/Pages/SettingsPage.xaml
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,94 @@
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:WeatherTwentyOne.Resources.Styles"
xmlns:am="clr-namespace:Microsoft.Maui.ApplicationModel;assembly=Microsoft.Maui.Essentials"
xmlns:v="clr-namespace:WeatherTwentyOne.Views"
xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
ios:Page.UseSafeArea="True"
Title="Settings"
x:Class="WeatherTwentyOne.Pages.SettingsPage">

<ContentPage.Resources>
<ControlTemplate x:Key="ThemeRadioTemplate">
<Frame
BorderColor="{StaticResource Background_Mid}"
BackgroundColor="Transparent"
HasShadow="False"
HeightRequest="120"
WidthRequest="100"
HorizontalOptions="Start"
VerticalOptions="Start"
Padding="0">

<VisualStateManager.VisualStateGroups>
<VisualStateGroupList>
<VisualStateGroup
x:Name="CheckedStates">

<VisualState
x:Name="Checked">
<VisualState.Setters>
<Setter
Property="BorderColor"
Value="{StaticResource Primary}" />
<Setter
TargetName="Check"
Property="Opacity"
Value="1" />
</VisualState.Setters>
</VisualState>

<VisualState
x:Name="Unchecked">
<VisualState.Setters>
<Setter
Property="BorderColor"
Value="{StaticResource Background_Mid}" />
<Setter
TargetName="Check"
Property="Opacity"
Value="0" />
</VisualState.Setters>
</VisualState>

</VisualStateGroup>
</VisualStateGroupList>
</VisualStateManager.VisualStateGroups>

<Grid
Margin="8"
WidthRequest="100">
<Grid
WidthRequest="18"
HeightRequest="18"
Margin="0,0,8,0"
HorizontalOptions="End"
VerticalOptions="Start">
<Ellipse
Stroke="{StaticResource DarkGray}"
WidthRequest="16"
HeightRequest="16"
StrokeThickness="0.5"
VerticalOptions="Center"
HorizontalOptions="Center"
Fill="White" />
<Ellipse
x:Name="Check"
WidthRequest="8"
HeightRequest="8"
Stroke="{StaticResource Primary}"
Fill="{StaticResource Primary}"
VerticalOptions="Center"
HorizontalOptions="Center" />
</Grid>
<ContentPresenter></ContentPresenter>
</Grid>
</Frame>
</ControlTemplate>


</ContentPage.Resources>


<Grid
ColumnDefinitions="*"
Expand Down Expand Up @@ -114,10 +197,84 @@

<BoxView class="HRule"/>

<FlexLayout HeightRequest="30" JustifyContent="SpaceBetween">
<Label Text="Dark Mode" class="Subhead"/>
<Switch IsToggled="{Binding IsDarkMode}" />
</FlexLayout>
<Grid>
<Label Text="Theme" class="Subhead"/>
<StackLayout
HorizontalOptions="End"
Spacing="12"
Orientation="Horizontal"
RadioButtonGroup.GroupName="AppTheme"
RadioButtonGroup.SelectedValue="{Binding SelectedTheme}">
<StackLayout.Resources>
<Style TargetType="RadioButton">
<Setter Property="ControlTemplate" Value="{StaticResource ThemeRadioTemplate}"/>
</Style>
</StackLayout.Resources>
<RadioButton Value="{x:Static am:AppTheme.Unspecified}"
IsChecked="True"
CheckedChanged="RadioButton_CheckedChanged"
>
<RadioButton.Content>
<Grid RowDefinitions="4*,1*">
<Image
VerticalOptions="Center"
HorizontalOptions="Center"
Source="{FontImage
FontFamily=FontAwesome,
Glyph={x:Static local:IconFont.Mobile},
Color={StaticResource NeutralDark},
Size=42}"/>
<Label
Text="Default"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="1"/>
</Grid>
</RadioButton.Content>
</RadioButton>
<RadioButton Value="{x:Static am:AppTheme.Dark}"
CheckedChanged="RadioButton_CheckedChanged">
<RadioButton.Content>
<Grid RowDefinitions="4*,1*">
<Image
VerticalOptions="Center"
HorizontalOptions="Center"
Source="{FontImage
FontFamily=FontAwesome,
Glyph={x:Static local:IconFont.Lightbulb},
Color=Black,
Size=42}"/>
<Label
Text="Dark"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="1"/>
</Grid>
</RadioButton.Content>
</RadioButton>
<RadioButton Value="{x:Static am:AppTheme.Light}"
CheckedChanged="RadioButton_CheckedChanged"
>
<RadioButton.Content>
<Grid RowDefinitions="4*,1*">
<Image
VerticalOptions="Center"
HorizontalOptions="Center"
Source="{FontImage
FontFamily=FontAwesome,
Glyph={x:Static local:IconFont.Lightbulb},
Color=White,
Size=42}"/>
<Label
Text="Light"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="1"/>
</Grid>
</RadioButton.Content>
</RadioButton>
</StackLayout>
</Grid>

</VerticalStackLayout>

Expand Down
9 changes: 9 additions & 0 deletions src/WeatherTwentyOne/Pages/SettingsPage.xaml.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,4 +21,13 @@ async void OnSupportTapped(object sender, EventArgs eventArgs)
string action = await DisplayActionSheet("Get Help", "Cancel", null, "Email", "Chat", "Phone");
await DisplayAlert("You Chose", action, "Okay");
}

void RadioButton_CheckedChanged(System.Object sender, CheckedChangedEventArgs e)
{
AppTheme val = (AppTheme)((RadioButton)sender).Value;
if (App.Current.UserAppTheme == val)
return;

App.Current.UserAppTheme = val;
}
}
23 changes: 1 addition & 22 deletions src/WeatherTwentyOne/ViewModels/SettingsViewModel.cs
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
using System.ComponentModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace WeatherTwentyOne.ViewModels;
Expand All @@ -19,16 +19,6 @@ public string Units {
}
}

public bool IsDarkMode {
get {
return App.Current.UserAppTheme == AppTheme.Dark;
}
set {
App.Current.UserAppTheme = value ? AppTheme.Dark : AppTheme.Light;
OnPropertyChanged();
}
}

public string Temperature => IsImperial ? "70˚F" : "21˚C";

public bool IsImperial => units == "imperial";
Expand All @@ -39,20 +29,9 @@ public bool IsDarkMode {

public Command SelectUnits { get; set; }

public Command ChangeThemeMode { get; set; }

public SettingsViewModel()
{
SelectUnits = new Command<string>(OnSelectUnits);
ChangeThemeMode = new Command<bool>(OnChangeThemeMode);


}

private void OnChangeThemeMode(bool dark)
{
App.Current.UserAppTheme = dark ? AppTheme.Dark : AppTheme.Light;
OnPropertyChanged(nameof(IsDarkMode));
}

private void OnSelectUnits(string unit)
Expand Down

0 comments on commit ec1ceae

Please sign in to comment.