Skip to content

Commit

Permalink
Merge pull request #2 from AathifMahir/hybrid
Browse files Browse the repository at this point in the history
Blazor/Maui Hybrid Support without Maui Artifacts
  • Loading branch information
AathifMahir authored Jan 16, 2024
2 parents df60788 + 7ca9808 commit 945d7e3
Show file tree
Hide file tree
Showing 91 changed files with 2,817 additions and 149 deletions.
145 changes: 137 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
# Maui Theme

|**Latest Stable** | **Latest Preview**|
| :---: | :---: |
|[![AathifMahir.Maui.MauiShakeDetector](https://img.shields.io/nuget/v/AathifMahir.Maui.MauiTheme)](https://www.nuget.org/packages/AathifMahir.Maui.MauiTheme/) | [![AathifMahir.Maui.MauiShakeDetector](https://img.shields.io/nuget/vpre/AathifMahir.Maui.MauiTheme)](https://nuget.org/packages/AathifMahir.Maui.MauiTheme/absoluteLatest) |
MauiTheme is Theming Libray that Makes the Theming on Dotnet Maui a Breeze with Persistent Theme State Between Sessions and Seamless Resource Swapping, Theme Switcher and Blazor Hybrid Support.

MauiTheme is Theming Libray that Makes the Theming on Dotnet Maui a Breeze with Persistent Theme State Between Sessions and Seamless Resource Swapping, Theme Switcher and etc..
# Packages

Package | Latest stable | Latest Preview | Description
---------|---------------|---------------|------------
`AathifMahir.Maui.MauiTheme` | [![AathifMahir.Maui.MauiTheme](https://img.shields.io/nuget/v/AathifMahir.Maui.MauiTheme)](https://nuget.org/packages/AathifMahir.Maui.MauiTheme/) | [![AathifMahir.Maui.MauiTheme](https://img.shields.io/nuget/vpre/AathifMahir.Maui.MauiTheme)](https://nuget.org/packages/AathifMahir.Maui.MauiTheme/absoluteLatest) | Maui Theme - Theming Libray for Dotnet Maui with Ability Retain Sessions and Easy Resource Swapping and etc.
`AathifMahir.Maui.MauiTheme.BlazorHybrid` | [![AathifMahir.Maui.MauiTheme.BlazorHybrid](https://img.shields.io/nuget/v/AathifMahir.Maui.MauiTheme.BlazorHybrid)](https://nuget.org/packages/AathifMahir.Maui.MauiTheme.BlazorHybrid/) | [![AathifMahir.Maui.MauiTheme.BlazorHybrid](https://img.shields.io/nuget/vpre/AathifMahir.Maui.MauiTheme.BlazorHybrid)](https://nuget.org/packages/AathifMahir.Maui.MauiTheme.BlazorHybrid/absoluteLatest) | Maui Theme - Blazor Hybrid is Extension of MauiTheme with Ability to Switch Theme and Resources from Blazor Hybrid Project without Any Maui Artifacts.

# Get Started

Expand All @@ -22,7 +25,7 @@ public partial class App : Application
Theme.Default.InitializeTheme<App>(x =>
{
// Default Theme
x.DefaultTheme = AppTheme.Dark;
x.DefaultTheme = MauiAppTheme.Dark;
// Default Styles Resources
x.DefaultStyleResources = ["Resources/Styles/Styles.xaml"];
// All Resources Excluding Styles
Expand Down Expand Up @@ -64,20 +67,67 @@ The App.xaml should include the Default Color and Style Resource Like Below Exam
| **DefaultStyleResources** | `Dictionary<string, string>` | The Default Style Resources that Needs to Applied with Every Resource Change **Eg: Styles.xaml** |
| **Resources** | `Dictionary<string, string>` | All Resources in the Project Excluding Style Resources |

# Blazor Hybrid Usage

In Order to Initialize the MauiTheme Blazor Hybrid, You need to call `UseMauiThemeHybrid()` in `program.cs` like below example

```csharp
using MauiTheme.BlazorHybrid;

public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();

// Initializing MauiTheme on Blazor Hybrid Project by Sharing the Instance of MauiTheme
builder.Services.UseMauiThemeHybrid(MauiTheme.Default);

return builder.Build();
}
}
```

If your using WebAssembly or Any Other Blazor Hosting Model, Where your sharing a razor class library within those and Blazor Hybrid

```csharp
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.Services.UseMauiThemeBlazor();
```



# Theme

When it comes to Switching Theme, You can change the `CurrentTheme` Property to Switch the Theme Like Below Example

```csharp

// Maui
// --------------------------------------------------
// Dark
Theme.Default.CurrentTheme = MauiAppTheme.Dark;

// Light
Theme.Default.CurrentTheme = MauiAppTheme.Light;

// System
Theme.Default.CurrentTheme = MauiAppTheme.UnSpecified;

// Blazor Hybrid
// ---------------------------------------------------
@inject IMauiThemeHybrid MauiThemeHybrid

// Dark
Theme.Default.CurrentTheme = AppTheme.Dark;
MauiThemeHybrid.CurrentTheme = MauiAppTheme.Dark;

// Light
Theme.Default.CurrentTheme = AppTheme.Light;
MauiThemeHybrid.CurrentTheme = MauiAppTheme.Light;

// System
Theme.Default.CurrentTheme = AppTheme.UnSpecified;
MauiThemeHybrid.CurrentTheme = MauiAppTheme.UnSpecified;

```

Expand All @@ -86,6 +136,8 @@ Theme.Default.CurrentTheme = AppTheme.UnSpecified;
When it comes to Switching Resource, You can use `CurrentResource` Property to Swap the Resources Like Below Example, Make sure to Note that Resources is Applied Using The Key that you have passed into `InitializeTheme` `Resources` Property

```csharp
// Maui
// ---------------------------------------------------
// Blue.xaml
Theme.Default.CurrentResource = "Blue";
Expand All @@ -96,6 +148,83 @@ Theme.Default.CurrentResource = "Purple";
// Yellow.xaml
Theme.Default.CurrentResource = "Yellow";

// Blazor Hybrid
// ---------------------------------------------------
@inject IMauiThemeHybrid MauiThemeHybrid

MauiThemeHybrid.CurrentResource = "Blue";

```

# Listening to Theme or Resource Changes in Maui

Mainly this is useful when theme or resource changes is invoked from external source for instance from a razor class library

```csharp

// Theme Changed Event
MauiTheme.Default.ThemeChanged += (s, t) =>
{
Debug.Writeline($"New Theme : {t.ToString()}")
}

// Theme Changed Event
MauiTheme.Default.ResourceChanged += (s, r) =>
{
Debug.Writeline($"New Resource : {r}")
}

```

# Listening to Theme or Resource Changes in Blazor Hybrid

This is mainly useful when listening to Theme or Resource Changes from External Sources for Instance from Maui, as you can see in the below example, we are invoking `StateChanged()` method in MauiThemeContext, Basically What that Says is Refresh the Razor Component Whenever Theme Changes

```razor
@inject IMauiThemeHybrid MauiThemeHybrid
@implements IDisposable
<title>Theme</title>
<h3>Theme</h3>
<InputRadioGroup Name="Theme" TValue="MauiAppTheme" @bind-Value="MauiThemeHybrid.CurrentAppTheme">
@foreach (var item in (MauiAppTheme[])Enum.GetValues(typeof(MauiAppTheme)))
{
<InputRadio Name="Theme" TValue="MauiAppTheme" value="@item"/>
@item
<br/>
}
</InputRadioGroup>
<br />
<h3>Color</h3>
<InputRadioGroup TValue="string" @bind-Value="MauiThemeHybrid.CurrentResource">
<InputRadio TValue="string" value="Blue"/>Blue<br/>
<InputRadio TValue="string" value="Purple"/>Purple<br/>
<InputRadio TValue="string" value="Yellow"/>Yellow<br/>
<InputRadio TValue="string" value="Green"/>Green<br />
</InputRadioGroup>
@code{
MauiThemeContext? themeContext;
protected override void OnInitialized()
{
themeContext = MauiThemeContext.Create(MauiThemeHybrid, () => StateHasChanged());
base.OnInitialized();
}
public void Dispose()
{
themeContext?.Dispose();
}
}
```


Expand Down
Binary file added images/icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 14 additions & 0 deletions sample/MauiTheme.Sample.BlazorHybrid/App.xaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MauiTheme.Sample.BlazorHybrid"
x:Class="MauiTheme.Sample.BlazorHybrid.App">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources/Styles/Colors.xaml" />
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
31 changes: 31 additions & 0 deletions sample/MauiTheme.Sample.BlazorHybrid/App.xaml.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
using MauiTheme.Core;

namespace MauiTheme.Sample.BlazorHybrid;

public partial class App : Application
{
public App()
{
InitializeComponent();

MauiTheme.Default.InitializeTheme<App>(x =>
{
// Default Theme
x.DefaultTheme = MauiAppTheme.Light;
// Default Styles Resources
x.DefaultStyleResources = ["Resources/Styles/Styles.xaml"];
// All Resources Excluding Styles
x.Resources = new()
{
{"Blue", "Resources/Styles/Blue.xaml"},
{"Purple", "Resources/Styles/Colors.xaml"},
{"Yellow", "Resources/Styles/Yellow.xaml" },
{"Green", "Resources/Styles/Green.xaml" }
};
});

MainPage = new MainPage();


}
}
89 changes: 89 additions & 0 deletions sample/MauiTheme.Sample.BlazorHybrid/MainPage.xaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MauiTheme.Sample.BlazorHybrid"
xmlns:shared="clr-namespace:MauiTheme.Sample.Shared;assembly=MauiTheme.Sample.Shared"
xmlns:mtc="clr-namespace:MauiTheme.Core;assembly=MauiTheme.Core"
x:DataType="local:MainPage"
x:Class="MauiTheme.Sample.BlazorHybrid.MainPage">

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>



<BlazorWebView x:Name="blazorWebView" HostPage="wwwroot/index.html" Grid.Column="0">
<BlazorWebView.RootComponents>
<RootComponent Selector="#app" ComponentType="{x:Type shared:Routes}" />
</BlazorWebView.RootComponents>
</BlazorWebView>

<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="150"/>
</Grid.RowDefinitions>

<VerticalStackLayout Grid.Row="0">
<StackLayout RadioButtonGroup.GroupName="Theme"
RadioButtonGroup.SelectedValue="{Binding Selection}" HorizontalOptions="Center" VerticalOptions="Center" Padding="12,12">
<Label FontAttributes="Bold" Text="Theme" FontSize="Large"/>
<RadioButton Content="System" Value="{x:Static mtc:MauiAppTheme.Unspecified}" GroupName="Theme"/>
<RadioButton Content="Light" Value="{x:Static mtc:MauiAppTheme.Light}" GroupName="Theme"/>
<RadioButton Content="Dark" Value="{x:Static mtc:MauiAppTheme.Dark}" GroupName="Theme"/>
<Label >
<Label.FormattedText>
<FormattedString>
<Span Text="You have chosen: " />
<Span FontAttributes="Bold" Text="{Binding Selection}" />
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>

<StackLayout RadioButtonGroup.GroupName="Color"
RadioButtonGroup.SelectedValue="{Binding ColorKey}" HorizontalOptions="Center" VerticalOptions="Center" Padding="12,12">
<Label FontAttributes="Bold" Text="Color" FontSize="Large"/>
<RadioButton Value="Blue" GroupName="Color">
<RadioButton.Content>
<Rectangle Fill="Blue" WidthRequest="50" HeightRequest="50"/>
</RadioButton.Content>
</RadioButton>
<RadioButton Value="Purple" GroupName="Color">
<RadioButton.Content>
<Rectangle Fill="Purple" WidthRequest="50" HeightRequest="50"/>
</RadioButton.Content>
</RadioButton>
<RadioButton Value="Yellow" GroupName="Color">
<RadioButton.Content>
<Rectangle Fill="Yellow" WidthRequest="50" HeightRequest="50"/>
</RadioButton.Content>
</RadioButton>
<RadioButton Value="Green" GroupName="Color">
<RadioButton.Content>
<Rectangle Fill="Green" WidthRequest="50" HeightRequest="50"/>
</RadioButton.Content>
</RadioButton>
<Label>
<Label.FormattedText>
<FormattedString>
<Span Text="You have chosen: " />
<Span FontAttributes="Bold" Text="{Binding ColorKey}" />
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>
</VerticalStackLayout>

<Rectangle Grid.Row="1" Fill="{AppThemeBinding Dark={DynamicResource PrimaryDark}, Light={DynamicResource Primary}}"/>

</Grid>


</Grid>


</ContentPage>
50 changes: 50 additions & 0 deletions sample/MauiTheme.Sample.BlazorHybrid/MainPage.xaml.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
using MauiTheme.Core;
using MauiTheme.Core.Events;

namespace MauiTheme.Sample.BlazorHybrid;

public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
BindingContext = this;

MauiTheme.Default.ThemeChanged += Default_ThemeChanged;
MauiTheme.Default.ResourceChanged += Default_ResourceChanged;
}

private void Default_ResourceChanged(object? sender, ResourceChangedEventArgs e)
{
OnPropertyChanged(nameof(ColorKey));
}

private void Default_ThemeChanged(object? sender, MauiAppThemeChangedEventArgs e)
{
OnPropertyChanged(nameof(Selection));
}
public MauiAppTheme Selection
{
get => MauiTheme.Default.CurrentAppTheme;
set
{
if (value != MauiTheme.Default.CurrentAppTheme)
{
MauiTheme.Default.CurrentAppTheme = value;
OnPropertyChanged(nameof(Selection));
}
}
}
public string ColorKey
{
get => MauiTheme.Default.CurrentResource;
set
{
if (value != MauiTheme.Default.CurrentResource)
{
MauiTheme.Default.CurrentResource = value;
OnPropertyChanged(nameof(ColorKey));
}
}
}
}
Loading

0 comments on commit 945d7e3

Please sign in to comment.