fluent xaml theme editor下載fluent xaml theme editor源代碼下載

page_type

姓名

語言

產品

描述

樣本

流利的XAML主題編輯器

CSHARP

XAML

視窗	Windows-UWP

一個工具和示例應用程序，向您展示如何輕鬆地主題您的應用程序。通過還可以為您提供輕巧的工具，以使您的自定義主題在應用程序中栩栩如生，從而啟動這一點。

流利的XAML主題編輯器

使用組件覆蓋

該倉庫包含了Fluent XAML主題編輯器的完整解決方案和源代碼 - 一種工具，有助於通過在通用Windows Platform（UWP）應用中為我們的ResourceCrectionaly框架生成XAML標記來證明流利設計系統的靈活性，並支持App開發過程。

位於此存儲庫中的源代碼是在Visual Studio中使用的通用Windows平台創建的，旨在在支持通用Windows平台的台式機，移動設備和未來設備上運行。

注意：如果您不熟悉XAML，通用Windows平台，流利的設計或資源和資源評估，強烈建議您訪問Design Universal Windows平台站點，並熟悉此工具的意圖。

通用Windows平台開發

此應用程序需要Visual Studio 2017更新4或更高版本，Windows 10或Windows Software開發套件（SDK）版本17763或更高版本的Windows 10。

獲取免費的Visual Studio 2017 Community Edition副本，並支持構建通用Windows平台應用程序

此外，要保持對Windows和開發工具的最新更新，請加入Windows Insider程序，成為Windows Insider。

成為Windows Insider

商店版本的工具

如果您不想與此開源項目分開，而只是想使用該應用程序本身，請使用此工具的Microsoft Store版本並在此處下載。

如何使用該工具

借助預覽構建，您可以為右側屬性中的淺色和深色主題選擇三種主要顏色。

顏色屬性窗口

區域- 所有控件都坐在的背景，這是我們框架中不存在的獨立資源。
基礎- 代表我們所有控件的背板及其臨時態度視覺效果，例如懸停或按下。通常，基礎應與主題的背景（或區域顏色）以及黑色文本（如果在光主題中）和白色文本（如果在黑暗主題中）形成鮮明對比。
主要- 這本質上是重音顏色，應與主要白色文本形成對比。它還在更多選擇的位置中使用，以顯示替代的休息狀態，用於切換控件，例如列表選擇，複選框或放射線量檢查狀態，滑塊填充值以及其他需要顯示為與其默認休息狀態不同的控制零件。

完善顏色

除了每個主題的三種主要顏色外，您還可以展開任何主要顏色，以查看僅改變某些控制零件外觀的小顏色列表 - 這基本上使您可以對狀態的顏色選擇更詳細。

顏色屬性窗口詳細信息

要訪問顏色的詳細視圖，只需單擊主要顏色按鈕色板旁邊的人字形即可。

創建，保存和加載預設

編輯器將帶有一些預設，供您查看，以了解應用程序中主題的樣子。預設下拉列表位於顏色詞典屬性面板的頂部。

當您第一次啟動時，它將始終設置為默認值 - 這是我們所有控件的淺色主題樣式默認值。您可以選擇不同的主題，例如薰衣草和夜間，以了解該工具如何主題我們的控件。

準備好開始自己的主題後，就開始編輯顏色！一旦開始調整它們，您會注意到預設Combobox從預設的名稱變為“自定義”：

這意味著您已經開始了一個新的臨時主題，該主題是“自定義”。您所做的任何更改都不會影響該框中的任何其他預設。

對所做的更改感到滿意後，只需單擊“保存”按鈕，然後瀏覽到所需的保存點即可。
同樣，您可以通過單擊“加載”按鈕打開保存的JSON主題，然後瀏覽保存的主題的文件位置。

檢查對比度

主題編輯器的最後一部分可能是創建主題的最重要部分之一，也就是說，在任何一個主題中，您都符合對比。該工具在選擇顏色時，在顏色選擇窗口的左側為您提供了一小部分對比度信息。

對比面板示例

在此窗口中，您可以看到與您選擇編輯的主題中最普遍的文本顏色的對比，在上面的情況下，黑色文本，因為您正在編輯輕型主題顏色值。

當您選擇低於4.5：1標準對比度的顏色時，您會在對比度值旁邊的紅色文本中提醒您。

對比面板壞例子

您可以在這裡了解更多有關對比度及其重要性的信息。

在UWP應用中導出和使用主題

一旦以所有內容為主題，您都需要在應用程序中使用它！為此，您需要單擊顏色詞典屬性面板底部的“導出”按鈕。

導出主題

該按鈕將打開一個帶有通用的，未命名的資源存根的彈出窗口（如下所示）。

導出主題彈出

但是，如果您想對主題進行一些更改並將其重新出口到“導出窗口”，則此窗口不會使您更改為更改的顏色值。

但是，一旦您準備在應用中使用它，請單擊右下角的“複製到剪貼板”按鈕，然後轉到UWP Visual Studio解決方案。

進入Visual Studio後，右鍵單擊位於解決方案資源管理器中的項目解決方案。

創建資源詞典視覺工作室

然後轉到添加>新項目，然後選擇資源詞典。

創建資源詞典視覺工作室

命名該詞典對您有意義，然後在完成後單擊“添加”。

創建資源詞典視覺工作室

這應該產生像這樣的空白資源：

< ResourceDictionary
    xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "
    xmlns : x = " http://schemas.microsoft.com/winfx/2006/xaml "
    xmlns : local = " using:MyAppName " >
    
</ ResourceDictionary >

現在，您可以將導出的主題代碼從編輯器粘貼到該資源範圍內。

< ResourceDictionary
    xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "
    xmlns : x = " http://schemas.microsoft.com/winfx/2006/xaml "
    xmlns : local = " using:MyAppName " >
    
    <!-- Free Public License 1.0.0 Permission to use, copy, modify, and/or distribute this code for any purpose with or without fee is hereby granted. -->
    < ResourceDictionary .ThemeDictionaries>
        < ResourceDictionary x : Key = " Default " >
            < ResourceDictionary .MergedDictionaries>
                < ColorPaletteResources Accent = " #FF0073CF " AltHigh = " #FF000000 " AltLow = " #FF000000 " AltMedium = " #FF000000 " AltMediumHigh = " #FF000000 " AltMediumLow = " #FF000000 " BaseHigh = " #FFFFFFFF " BaseLow = " #FF333333 " BaseMedium = " #FF9A9A9A " BaseMediumHigh = " #FFB4B4B4 " BaseMediumLow = " #FF676767 " ChromeAltLow = " #FFB4B4B4 " ChromeBlackHigh = " #FF000000 " ChromeBlackLow = " #FFB4B4B4 " ChromeBlackMedium = " #FF000000 " ChromeBlackMediumLow = " #FF000000 " ChromeDisabledHigh = " #FF333333 " ChromeDisabledLow = " #FF9A9A9A " ChromeGray = " #FF808080 " ChromeHigh = " #FF808080 " ChromeLow = " #FF151515 " ChromeMedium = " #FF1D1D1D " ChromeMediumLow = " #FF2C2C2C " ChromeWhite = " #FFFFFFFF " ListLow = " #FF1D1D1D " ListMedium = " #FF333333 " />
                < ResourceDictionary >
                    < Color x : Key = " SystemChromeAltMediumHighColor " >#CC000000</ Color >
                    < Color x : Key = " SystemChromeAltHighColor " >#FF000000</ Color >
                    < Color x : Key = " SystemRevealListLowColor " >#FF1D1D1D</ Color >
                    < Color x : Key = " SystemRevealListMediumColor " >#FF333333</ Color >
                    < Color x : Key = " RegionColor " >#FF000000</ Color >
                    < SolidColorBrush x : Key = " RegionBrush " Color = " {StaticResource RegionColor} " />
                </ ResourceDictionary >
            </ ResourceDictionary .MergedDictionaries>
        </ ResourceDictionary >
        < ResourceDictionary x : Key = " Light " >
            < ResourceDictionary .MergedDictionaries>
                < ColorPaletteResources Accent = " #FF0073CF " AltHigh = " #FFFFFFFF " AltLow = " #FFFFFFFF " AltMedium = " #FFFFFFFF " AltMediumHigh = " #FFFFFFFF " AltMediumLow = " #FFFFFFFF " BaseHigh = " #FF000000 " BaseLow = " #FFCCCCCC " BaseMedium = " #FF898989 " BaseMediumHigh = " #FF5D5D5D " BaseMediumLow = " #FF737373 " ChromeAltLow = " #FF5D5D5D " ChromeBlackHigh = " #FF000000 " ChromeBlackLow = " #FFCCCCCC " ChromeBlackMedium = " #FF5D5D5D " ChromeBlackMediumLow = " #FF898989 " ChromeDisabledHigh = " #FFCCCCCC " ChromeDisabledLow = " #FF898989 " ChromeGray = " #FF737373 " ChromeHigh = " #FFCCCCCC " ChromeLow = " #FFECECEC " ChromeMedium = " #FFE6E6E6 " ChromeMediumLow = " #FFECECEC " ChromeWhite = " #FFFFFFFF " ListLow = " #FFE6E6E6 " ListMedium = " #FFCCCCCC " />
                < ResourceDictionary >
                    < Color x : Key = " SystemChromeAltMediumHighColor " >#CCFFFFFF</ Color >
                    < Color x : Key = " SystemChromeAltHighColor " >#FFFFFFFF</ Color >
                    < Color x : Key = " SystemRevealListLowColor " >#FFE6E6E6</ Color >
                    < Color x : Key = " SystemRevealListMediumColor " >#FFCCCCCC</ Color >
                    < RevealBackgroundBrush x : Key = " SystemControlHighlightListLowRevealBackgroundBrush " TargetTheme = " Light " Color = " {ThemeResource SystemRevealListMediumColor} " FallbackColor = " { StaticResource SystemListMediumColor} " />
                    < Color x : Key = " RegionColor " >#FFFFFFFF</ Color >
                    < SolidColorBrush x : Key = " RegionBrush " Color = " {StaticResource RegionColor} " />
                </ ResourceDictionary >
            </ ResourceDictionary .MergedDictionaries>
        </ ResourceDictionary >
        < ResourceDictionary x : Key = " HighContrast " >
            < StaticResource x : Key = " RegionColor " ResourceKey = " SystemColorWindowColor " />
            < SolidColorBrush x : Key = " RegionBrush " Color = " {StaticResource RegionColor} " />
        </ ResourceDictionary >
    </ ResourceDictionary .ThemeDictionaries>
    
</ ResourceDictionary >

現在，您有一個完全自定義的顏色主題等待使用，所以讓我們應用它！

為此，您需要進入您的頁面或app.xaml（取決於您希望將主題應用的應用程序的數量），並將主題字典合併到該頁面或應用程序的資源中。

< Page .Resources>
   < ResourceDictionary >
      < ResourceDictionary .MergedDictionaries>
         < ResourceDictionary Source = " PurpleGreenTheme.xaml " />
      </ ResourceDictionary .MergedDictionaries>
   </ ResourceDictionary >
</ Page .Resources>

最後，不要忘記將頁面的背景顏色設置為您為主題選擇的區域彩色。這是唯一不會自動設置的刷子。

< Grid Background = " {ThemeResource RegionBrush} " >
   <!-- Your page layout/content here -->
</ Grid >

一旦進入，您就完成了！您的主題顏色現在將在您的應用程序或頁面上普遍存在。

在代碼範圍內使用colorPalettereSources

要訪問後面代碼中的colorPaletTereSources API，並在運行時更改任何顏色屬性，請循環循環瀏覽app.xaml中的合併詞典（或在您合併主題的範圍中），並抓住對當前使用的資源correscectixtionary作為colorPaleTterTereSourceSourceSourceSourceSourceSourceSourceSourceSourceSourceSourceSourceSourceSourceSourceSource實例

這是如何在C＃中抓取和編輯colorPalettereSources上的屬性的示例：

 public MainPage ( )
{
    this . InitializeComponent ( ) ;

    ColorPaletteResources cpr = FindColorPaletteResourcesForTheme ( "Light" ) ;
    cpr . Accent = Colors . Red ;

    ReloadPageTheme ( this . RequestedTheme ) ;
}

private void ReloadPageTheme ( ElementTheme startTheme )
{
    if ( this . RequestedTheme == ElementTheme . Dark )
        this . RequestedTheme = ElementTheme . Light ;
    else if ( this . RequestedTheme == ElementTheme . Light )
        this . RequestedTheme = ElementTheme . Default ;
    else if ( this . RequestedTheme == ElementTheme . Default )
        this . RequestedTheme = ElementTheme . Dark ;

    if ( this . RequestedTheme != startTheme )
        ReloadPageTheme ( startTheme ) ;
}

private ColorPaletteResources FindColorPaletteResourcesForTheme ( string theme )
{
    foreach ( var themeDictionary in Application . Current . Resources . ThemeDictionaries )
    {
        if ( themeDictionary . Key . ToString ( ) == theme )
        {
            if ( themeDictionary . Value is ColorPaletteResources )
            {
                return themeDictionary . Value as ColorPaletteResources ;
            }
            else if ( themeDictionary . Value is ResourceDictionary targetDictionary )
            {
                foreach ( var mergedDictionary in targetDictionary . MergedDictionaries )
                {
                    if ( mergedDictionary is ColorPaletteResources )
                    {
                        return mergedDictionary as ColorPaletteResources ;
                    }
                }
            }
        }
    }
    return null ;
}

我們不建議您在運行時經常執行此操作，因為您可能會遇到一些性能問題，但是如果放置在設置頁面或您不希望用戶經常切換的區域中，則性能並不是太糟糕了。

提示！您需要重新加載資源範圍，以獲取其中的資源，以獲取您應用的任何新顏色更改。您可以通過將請求的主題翻轉到另一個主題並再次返回來做到這一點。這就是ReloAdpagetheme函數正在做的。

主題下降

儘管該工具的導出代碼中使用的API適用於17744年或更高版本，但它並不是要使您的主題在較早的SDK版本上工作並不是太複雜了。

當您導出主題時，您會看到帶有colorPaletterersources定義的資源評估標記：

< ResourceDictionary .ThemeDictionaries>
    < ResourceDictionary x : Key = " Default " >
        < ResourceDictionary .MergedDictionaries>
            < ColorPaletteResources Accent = " #FF8961CC " AltHigh = " #FF000000 " AltLow = " #FF000000 " AltMedium = " #FF000000 " AltMediumHigh = " #FF000000 " AltMediumLow = " #FF000000 " BaseHigh = " #FFFFFFFF " BaseLow = " #FF64576B " BaseMedium = " #FFB6AABC " BaseMediumHigh = " #FFCBBFD0 " BaseMediumLow = " #FF8D8193 " ChromeAltLow = " #FFCBBFD0 " ChromeBlackHigh = " #FF000000 " ChromeBlackLow = " #FFCBBFD0 " ChromeBlackMedium = " #FF000000 " ChromeBlackMediumLow = " #FF000000 " ChromeDisabledHigh = " #FF64576B " ChromeDisabledLow = " #FFB6AABC " ChromeGray = " #FFA295A8 " ChromeHigh = " #FFA295A8 " ChromeLow = " #FF332041 " ChromeMedium = " #FF3F2E4B " ChromeMediumLow = " #FF584960 " ChromeWhite = " #FFFFFFFF " ListLow = " #FF3F2E4B " ListMedium = " #FF64576B " />
        < ResourceDictionary >
            < Color x : Key = " RegionColor " >#FF262738</ Color >
            < SolidColorBrush x : Key = " RegionBrush " Color = " {StaticResource RegionColor} " />
        </ ResourceDictionary >
    </ ResourceDictionary .MergedDictionaries>
</ ResourceDictionary >

對於我們的SystemColors，ColorPaletTereSources是位於generic.xaml中的友好的API，並允許將這些SystemColors在任何級別範圍內進行範圍。

如果您想啟用相同的主題以下級工作，則必須通過主題中的每種顏色單獨定義每個SystemColor：

< ResourceDictionary >
    < ResourceDictionary .ThemeDictionaries>
        < ResourceDictionary x : Key = " Default " >
            < Color x : Key = " SystemAltHighColor " >#FF000000</ Color >
            < Color x : Key = " SystemAltLowColor " >#FF000000</ Color >
            < Color x : Key = " SystemAltMediumColor " >#FF000000</ Color >
            < Color x : Key = " SystemAltMediumHighColor " >#FF000000</ Color >
            < Color x : Key = " SystemAltMediumLowColor " >#FF000000</ Color >
            < Color x : Key = " SystemBaseHighColor " >#FFFFFFFF</ Color >
            < Color x : Key = " SystemBaseLowColor " >#FF64576B</ Color >
            < Color x : Key = " SystemBaseMediumColor " >#FFB6AABC</ Color >
            < Color x : Key = " SystemBaseMediumHighColor " >#FFCBBFD0</ Color >
            < Color x : Key = " SystemBaseMediumLowColor " >#FF8D8193</ Color >
            < Color x : Key = " SystemChromeAltLowColor " >#FFCBBFD0</ Color >
            < Color x : Key = " SystemChromeBlackHighColor " >#FF000000</ Color >
            < Color x : Key = " SystemChromeBlackLowColor " >#FFCBBFD0</ Color >
            < Color x : Key = " SystemChromeBlackMediumLowColor " >#FF000000</ Color >
            < Color x : Key = " SystemChromeBlackMediumColor " >#FF000000</ Color >
            < Color x : Key = " SystemChromeDisabledHighColor " >#FF64576B</ Color >
            < Color x : Key = " SystemChromeDisabledLowColor " >#FFB6AABC</ Color >
            < Color x : Key = " SystemChromeHighColor " >#FFA295A8</ Color >
            < Color x : Key = " SystemChromeLowColor " >#FF332041</ Color >
            < Color x : Key = " SystemChromeMediumColor " >#FF3F2E4B</ Color >
            < Color x : Key = " SystemChromeMediumLowColor " >#FF584960</ Color >
            < Color x : Key = " SystemChromeWhiteColor " >#FFFFFFFF</ Color >
            < Color x : Key = " SystemChromeGrayColor " >#FFA295A8</ Color >
            < Color x : Key = " SystemListLowColor " >#FF3F2E4B</ Color >
            < Color x : Key = " SystemListMediumColor " >#FF64576B</ Color >                
            < Color x : Key = " SystemAccentColor " >#FF8961CC</ Color >
            
            < Color x : Key = " RegionColor " >#FF262738</ Color >
            < SolidColorBrush x : Key = " RegionBrush " Color = " {StaticResource RegionColor} " />
         </ ResourceDictionary >
    </ ResourceDictionary .ThemeDictionaries>
</ ResourceDictionary >

在這種情況下，我們使用Lavendar主題來顯示此下層過渡。

警告：儘管此標記格式更改將使您的主題能夠在早期的SDK版本中跨控件應用，但它將在頁面，容器或控制範圍的範圍上不起作用。 ColorPaletTereSources是允許範圍行為的API。此標記格式僅適用於app.xaML級別的早期SDK。

貢獻

該工具是直接從功能團隊創建的，儘管我們歡迎您的投入和改進該工具的建議，但目前我們不接受公眾的任何功能或更改。請定期檢查，因為我們將來可能會發展我們的貢獻模型。

該項目採用了Microsoft開源的行為代碼。有關更多信息，請參閱《行為代碼常見問題》或與[email protected]聯繫，並提供任何其他問題或評論。

參見

有關其他Windows源代碼，工具和示例，請參閱GitHub上的Windows。

展開

fluent xaml theme editor

流利的XAML主題編輯器

通用Windows平台開發

商店版本的工具

如何使用該工具

完善顏色

創建，保存和加載預設

檢查對比度

在UWP應用中導出和使用主題

在代碼範圍內使用colorPalettereSources

主題下降

貢獻

參見

filament simple theme

editor app

fluent package builder

authentic theme

WhiteSur gtk theme

fluent bit

chat.petals.dev

GPT Prompt Templates

GPTyped

Google Dorks

shepherd

mongo express

Google Dorks

shepherd

mongo express