项目作者: UdaraAlwis

项目描述 :
Stunning App themes with Xamarin Forms Shell!
高级语言: C#
项目地址: git://github.com/UdaraAlwis/XFShellAdvThemeing.git
创建时间: 2019-12-17T17:29:27Z
项目社区:https://github.com/UdaraAlwis/XFShellAdvThemeing

开源协议:GNU General Public License v3.0

下载


XFShellAdvThemeing

Stunning App themes with Xamarin Forms Shell!

You probably already know how to in classic Xamarin.Forms, but how about Setting up App Themes in a Xamarin.Forms Shell App?, now that’s what this is for. 😉

Check out the blog post: https://theconfuzedsourcecode.wordpress.com/2019/12/26/stunning-app-themes-in-xamarin-forms-shell-projects/

A little sneak peak:
Android

Here we’re using awesome built-in Xamarin.Forms Dynamic Binding, and Styling features to implement a neat App Theming solution.
An alternative for: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/theming
But focused on the awesome new paradigm of Xamarin.Forms Shell!

In a nutshell:

  • Define Theme files with Colors/Fonts/Images/Icons in them
  • Create Styles based on the Theme properties using Dynamic Binding
  • Bind the UI Elements to the Styles created earlier
  • Implement dynamic App Theme selection using MergedDictionaries
  • Use XF.Essentials Preferences API to save App Theme preferences

Sample Theme File:

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <ResourceDictionary
  3. x:Class="XFShellAdvThemeing.Themes.PinkTheme"
  4. xmlns="http://xamarin.com/schemas/2014/forms"
  5. xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
  6. <Color x:Key="PrimaryColor">#fc0384</Color>
  7. <Color x:Key="AccentColor">#ffb8dd</Color>
  8. <Color x:Key="SecondaryColor">White</Color>
  9. <Color x:Key="PageBackgroundColor">White</Color>
  10. <Color x:Key="NavigationBarColor">#fc0384</Color>
  11. <Color x:Key="PrimaryTextColor">#3d0020</Color>
  12. <Color x:Key="SecondaryTextColor">#610033</Color>
  13. <Color x:Key="TertiaryTextColor">#960050</Color>
  14. </ResourceDictionary>

Sample Style:

  1. <Style x:Key="ButtonStyle" TargetType="Button">
  2. <Setter Property="BackgroundColor" Value="{DynamicResource PrimaryColor}" ></Setter>
  3. <Setter Property="TextColor" Value="{DynamicResource SecondaryColor}" ></Setter>
  4. <Setter Property="HeightRequest" Value="45" ></Setter>
  5. <Setter Property="WidthRequest" Value="190" ></Setter>
  6. </Style>

Sample UI Element:

  1. <Button
  2. x:Name="ChangeThemeButton"
  3. Clicked="ChangeThemeButton_Clicked"
  4. Style="{DynamicResource ButtonStyle}"
  5. Text="Change App Theme" ></Button>

Dynamic App Theme Switching:

  1. ICollection<ResourceDictionary> mergedDictionaries
  2. = Application.Current.Resources.MergedDictionaries;
  3. ...
  4. ...
  5. case Theme.Pink:
  6. mergedDictionaries.Add(new PinkTheme());
  7. break;
  8. ...
  9. ...

Saving Theme Preferences:

  1. Preferences.Set("CurrentAppTheme", SelectedItem.ToString());

Behold the beauty on Android and iOS…
Android
iOS