WPF實現主題更換的簡單DEMO

来源:https://www.cnblogs.com/ArthurRen/archive/2018/08/26/9537645.html
-Advertisement-
Play Games

WPF實現主題更換的簡單DEMO 實現主題更換功能主要是三個知識點： 1. 動態資源 ( DynamicResource ) 2. INotifyPropertyChanged 介面 3. 界面元素與數據模型的綁定 ( MVVM 中的 ViewModel ) Demo 代碼地址： "GITHUB" ...


WPF實現主題更換的簡單DEMO

實現主題更換功能主要是三個知識點：

  1. 動態資源 ( DynamicResource )
  2. INotifyPropertyChanged 介面
  3. 界面元素與數據模型的綁定 (MVVM中的ViewModel)

Demo 代碼地址：GITHUB

下麵開門見山，直奔主題

一、準備主題資源

在項目 (怎麼建項目就不說了，百度上多得是) 下麵新建一個文件夾 Themes，主題資源都放在這裡面，這裡我就簡單實現了兩個主題 Light /Dark，主題只包含背景顏色一個屬性。

1. Themes

  1. Theme.Dark.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:ModernUI.Example.Theme.Themes">
    <Color x:Key="WindowBackgroundColor">#333</Color>
</ResourceDictionary>
  1. Theme.Light.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:ModernUI.Example.Theme.Themes">
    <Color x:Key="WindowBackgroundColor">#ffffff</Color>
</ResourceDictionary>

然後在程式的App.xaml中添加一個預設的主題
不同意義的資源最好分開到單獨的文件裡面，最後Merge到App.xaml裡面，這樣方便管理和搜索。

  1. App.xaml
<Application x:Class="ModernUI.Example.Theme.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:ModernUI.Example.Theme"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Themes/Theme.Light.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

二、實現視圖模型 (ViewModel)

界面上我模仿 ModernUI ，使用ComboBox 控制項來更換主題，所以這邊需要實現一個視圖模型用來被 ComboBox 綁定。

新建一個文件夾 Prensentation ，存放所有的數據模型類文件

1. NotifyPropertyChanged 類

NotifyPropertyChanged 類實現 INotifyPropertyChanged 介面，是所有視圖模型的基類，主要用於實現數據綁定功能。

abstract class NotifyPropertyChanged : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName]string propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

這裡面用到了一個 [CallerMemberName] Attribute ，這個是.net 4.5裡面的新特性，可以實現形參的自動填充，以後在屬性中調用 OnPropertyChanged 方法就不用在輸入形參了，這樣更利於重構，不會因為更改屬性名稱後，忘記更改 OnPropertyChanged 的輸入參數而導致出現BUG。具體可以參考 C# in depth (第五版) 16.2 節 的內容

2. Displayable 類

Displayable 用來實現界面呈現的數據，ComboBox Item上顯示的字元串就是 DisplayName 這個屬性

class Displayable : NotifyPropertyChanged
{
    private string _displayName { get; set; }

    /// <summary>
    /// name to display on ui
    /// </summary>
    public string DisplayName
    {
        get => _displayName;
        set
        {
            if (_displayName != value)
            {
                _displayName = value;
                OnPropertyChanged();
            }
        }
    }
}

Link 類繼承自 Displayable ，主要用於保存界面上顯示的主題名稱(DisplayName)，以及主題資源的路徑(Source)

class Link : Displayable
{
    private Uri _source = null;

    /// <summary>
    /// resource uri
    /// </summary>
    public Uri Source
    {
        get => _source;
        set
        {
            _source = value;
            OnPropertyChanged();
        }
    }
}

4. LinkCollection 類

LinkCollection 繼承自 ObservableCollection<Link>，被 ComboBox 的 ItemsSource 綁定，當集合內的元素髮生變化時，ComboBox 的 Items 也會一起變化。

class LinkCollection : ObservableCollection<Link>
{
    /// <summary>
    /// Initializes a new instance of the <see cref="LinkCollection"/> class.
    /// </summary>
    public LinkCollection()
    {

    }

    /// <summary>
    /// Initializes a new instance of the <see cref="LinkCollection"/> class that contains specified links.
    /// </summary>
    /// <param name="links">The links that are copied to this collection.</param>
    public LinkCollection(IEnumerable<Link> links)
    {
        if (links == null)
        {
            throw new ArgumentNullException("links");
        }
        foreach (var link in links)
        {
            Add(link);
        }
    }
}

5.ThemeManager 類

ThemeManager 類用於管理當前正在使用的主題資源，使用單例模式 (Singleton) 實現。

class ThemeManager : NotifyPropertyChanged
{
    #region singletion
        
    private static ThemeManager _current = null;
    private static readonly object _lock = new object();

    public static ThemeManager Current
    {
        get
        {
            if (_current == null)
            {
                lock (_lock)
                {
                    if (_current == null)
                    {
                        _current = new ThemeManager();
                    }
                }
            }
            return _current;
        }
    }

    #endregion

    /// <summary>
    /// get current theme resource dictionary
    /// </summary>
    /// <returns></returns>
    private ResourceDictionary GetThemeResourceDictionary()
    {
        return (from dictionary in Application.Current.Resources.MergedDictionaries
                        where dictionary.Contains("WindowBackgroundColor")
                        select dictionary).FirstOrDefault(); 
    }

    /// <summary>
    /// get source uri of current theme resource 
    /// </summary>
    /// <returns>resource uri</returns>
    private Uri GetThemeSource()
    {
        var theme = GetThemeResourceDictionary();
        if (theme == null)
            return null;
        return theme.Source;
    }

    /// <summary>
    /// set the current theme source
    /// </summary>
    /// <param name="source"></param>
    public void SetThemeSource(Uri source)
    {
        var oldTheme = GetThemeResourceDictionary();
        var dictionaries = Application.Current.Resources.MergedDictionaries;
        dictionaries.Add(new ResourceDictionary
        {
            Source = source
        });
        if (oldTheme != null)
        {
            dictionaries.Remove(oldTheme);
        }
    }
        
    /// <summary>
    /// current theme source
    /// </summary>
    public Uri ThemeSource
    {
        get => GetThemeSource();
        set
        {
            if (value != null)
            {
                SetThemeSource(value);
                OnPropertyChanged();
            }
        }
    }
}

6. SettingsViewModel 類

SettingsViewModel 類用於綁定到 ComboBox 的 DataContext 屬性，構造器中會初始化 Themes 屬性，並將我們預先定義的主題資源添加進去。

ComboBox.SelectedItem -> SettingsViewModel.SelectedTheme

ComboBox.ItemsSource -> SettingsViewModel.Themes

class SettingsViewModel : NotifyPropertyChanged
{
    public LinkCollection Themes { get; private set; }

    private Link _selectedTheme = null;
    public Link SelectedTheme
    {
        get => _selectedTheme;
        set
        {
            if (value == null)
                return;
            if (_selectedTheme !=  value)
                _selectedTheme = value;
            ThemeManager.Current.ThemeSource = value.Source;
            OnPropertyChanged();
        }
    }

    public SettingsViewModel()
    {
        Themes = new LinkCollection()
        {
            new Link { DisplayName = "Light", Source = new Uri(@"Themes/Theme.Light.xaml" , UriKind.Relative) } ,
            new Link { DisplayName = "Dark", Source = new Uri(@"Themes/Theme.Dark.xaml" , UriKind.Relative) }
        };
        SelectedTheme = Themes.FirstOrDefault(dcts => dcts.Source.Equals(ThemeManager.Current.ThemeSource));
    }
}

三、實現視圖（View）

1.MainWindwo.xaml

主視窗使用 Border 控制項來控制背景顏色，Border 的 Background.Color 指向到動態資源 WindowBackgroundColor ，這個 WindowBackgroundColor 就是我們在主題資源中定義好的 Color 的 Key，因為需要動態更換主題，所以需要用DynamicResource 實現。

Border 背景動畫比較簡單，就是更改 SolidColorBrush 的 Color 屬性。

ComboBox 控制項綁定了三個屬性 ：

  1. ItemsSource="{Binding Themes }" -> SettingsViewModel.Themes
  2. SelectedItem="{Binding SelectedTheme , Mode=TwoWay}" -> SettingsViewModel.SelectedTheme
  3. DisplayMemberPath="DisplayName" -> SettingsViewModel.SelectedTheme.DisplayName
<Window ...>
    <Grid>
        <Border x:Name="Border">
            <Border.Background>
                <SolidColorBrush x:Name="WindowBackground" Color="{DynamicResource WindowBackgroundColor}"/>
            </Border.Background>
            <Border.Resources>
                <Storyboard x:Key="BorderBackcolorAnimation">
                    <ColorAnimation  
                            Storyboard.TargetName="WindowBackground" Storyboard.TargetProperty="Color" 
                            To="{DynamicResource WindowBackgroundColor}" 
                            Duration="0:0:0.5" AutoReverse="False">
                    </ColorAnimation>
                </Storyboard>
            </Border.Resources>
            <ComboBox x:Name="ThemeComboBox"
                      VerticalAlignment="Top" HorizontalAlignment="Left" Margin="30,10,0,0" Width="150"
                      DisplayMemberPath="DisplayName" 
                      ItemsSource="{Binding Themes }" 
                      SelectedItem="{Binding SelectedTheme , Mode=TwoWay}" >
            </ComboBox>
        </Border>
    </Grid>
</Window>

2. MainWindow.cs

後臺代碼將 ComboBox.DataContext 引用到 SettingsViewModel ，實現數據綁定，同時監聽 ThemeManager.Current.PropertyChanged 事件，觸發背景動畫

public partial class MainWindow : Window
{
    private Storyboard _backcolorStopyboard = null;

    public MainWindow()
    {
        InitializeComponent();
        ThemeComboBox.DataContext = new Presentation.SettingsViewModel();
        Presentation.ThemeManager.Current.PropertyChanged += AppearanceManager_PropertyChanged;
    }

    private void AppearanceManager_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
    {
        if (_backcolorStopyboard != null)
        {
            _backcolorStopyboard.Begin();
        }
    }

    public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        if (Border != null)
        {
            _backcolorStopyboard = Border.Resources["BorderBackcolorAnimation"] as Storyboard;
        }
    }
}

四、總結

關鍵點：

  1. 綁定 ComboBox(View層) 的 ItemsSource 和 SelectedItem 兩個屬性到 SettingsViewModel (ViewModel層)
  2. ComboBox 的 SelectedItem 被更改後，會觸發 ThemeManager 替換當前正在使用的主題資源(ThemeSource屬性)
  3. 視圖模型需要實現 INotifyPropertyChanged 介面來通知 WPF 框架屬性被更改
  4. 使用 DynamicResource 引用 會改變的 資源，實現主題更換。

另外寫的比較啰嗦，主要是給自己回過頭來複習看的。。。這年頭WPF也沒什麼市場了，估計也沒什麼人看吧 o(╥﹏╥)o


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Django form表單那些事
    參考來源：https://www.cnblogs.com/liwenzhou/p/8747872.html ...
  • 分享兩個小程式
    小編也不知道大家能不能用的到，我只是把我學到的知識分享出來，有需要的可以看一下。python本身就是一個不斷更新改進的語言，不存在抄襲，有需要就可以拿過來用，在用的過程中，你發現可以用另外一種方法把它實現，就可以把代碼做進一步的優化，然後分享出來，這樣python會變的越來越實用。今天心情不好，分享 ...
  • C#語法——反射，架構師的入門基礎。
    前言 編程其實就是寫代碼，而寫代碼目的就是實現業務，所以，語法和框架也是為了實現業務而存在的。因此，不管多麼高大上的目標，實質上都是業務。 所以，我認為不要把寫代碼上升到科學的高度。上升到藝術就可以了，因為藝術本身也沒有高度。。。。 軟體設計存在過度設計，語法和框架的理解，也存在過度理解。比如，反編 ...
  • 《通過C#學Proto.Actor模型》之Prpos
    在第一篇Proto.Actor博文中，HelloWorld的第一行真正代碼是： var props = Actor.FromProducer(() => new HelloActor()); 這個返回的變數props就是一個Props的對象，它是負責創Actor實例，以及配置Actor實例，並... ...
  • 韓劇TV UWP開發---抓包分析
    一,使用工具 ①Fiddler 摘自百度百科Fiddler簡介: Fiddler是一個http協議調試代理工具，它能夠記錄並檢查所有你的電腦和互聯網之間的http通訊，設置斷點，查看所有的“進出”Fiddler的數據（指cookie,html,js,css等文件，這些都可以讓你胡亂修改的意思）。 F ...
  • 《通過C#學Proto.Actor模型》之 HelloWorld
    在微服務中，數據最終一致性的一個解決方案是通過有狀態的Actor模型來達到，那什麼是Actor模型呢？ Actor是並行的計算模型，包含狀態，行為，並且包含一個郵箱，來非同步處理消息。 關於Actor的介紹可參考： https://www.jianshu.com/p/449850aa8e82 http... ...
  • 紙殼CMS的插件載入機制
    紙殼CMS是一個開源的可視化設計CMS，通過拖拽，線上編輯的方式來創建網站。紙殼CMS是基於插件化設計的，可以通過擴展插件來實現不同的功能。並且紙殼CMS的插件是相互獨立的，各插件的引用也相互獨立，即各插件都可引用各自需要的nuget包來達到目的。而不用把引用加到底層。 ...
  • Windows Community Toolkit 4.0 - DataGrid - Part01
    概述 在上面一篇 Windows Community Toolkit 4.0 - DataGrid - Overview 中，我們對 DataGrid 控制項做了一個概覽的介紹，今天開始我們會做進一步的詳細分享。 按照概述中分析代碼結構的順序，今天我們先對 CollectionViews 文件夾中的類 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類