fluent xaml theme editorダウンロード-FluentXAML fluent xaml theme editorソースコードダウンロード

page_type

名前

言語

製品

説明

サンプル

Fluent XAMLテーマエディター

csharp

xaml

Windows

Windows-UWP

アプリを簡単にテーマにする方法を示すツールとサンプルアプリ。また、カスタムテーマがアプリで生き返るのを見るために軽量のツール性を提供することでこれを開始します。

Fluent XAMLテーマエディター

コンポーネントオーバーライドを使用します

このレポは、Fluent XAMLテーマエディターへの完全なソリューションとソースコードが含まれています。これは、Fluent Design Systemの柔軟性を実証するだけでなく、Universal Windows Platform（UWP）アプリケーションで使用されるResourcedictionaryフレームワークのXAMLマークアップを生成することにより、アプリ開発プロセスをサポートします。

このリポジトリにあるソースコードは、Visual Studioで利用可能なUniversal Windowsプラットフォームで作成され、Universal Windowsプラットフォームをサポートするデスクトップ、モバイル、および将来のデバイスで実行するように設計されています。

注： XAML、ユニバーサルWindowsプラットフォーム、Fluent DesignまたはResources、Resourcedictionaryに慣れていない場合は、Design Universal Windows Platformサイトにアクセスし、このツールが意図している言語とフレームワークに慣れることを強くお勧めします。

ユニバーサルウィンドウプラットフォーム開発

このアプリケーションには、Visual Studio 2017アップデート4以下、Windows 10のWindows Software Development Kit（SDK）バージョン17763以降が必要です。

Universal Windowsプラットフォームアプリの構築をサポートして、Visual Studio 2017 Community Editionの無料コピーを入手してください

さらに、Windowsと開発ツールの最新のアップデートを常に把握するには、Windows Insiderプログラムに参加してWindows Insiderになります。

Windows Insiderになります

ツールのバージョンを保存します

このオープンソースプロジェクトの一部であり、代わりにアプリ自体を使用したい場合は、このツールのMicrosoftストアバージョンにアクセスしてダウンロードしてください。

ツールの使用方法

プレビュービルドを使用すると、右側のプロパティの明るいテーマと暗いテーマの両方で、「カラー辞書」というラベルの付いた3つの主要な色を選択できます。

カラープロパティウィンドウ

地域- すべてのコントロールが座っている背景。これは、フレームワークには存在しない別のリソースです。
ベース- すべてのコントロールのバックプレートと、ホバーやプレスなどの一時的な状態ビジュアルを表します。一般に、ベースは、テーマの背景（または領域の色）と、黒いテキスト（明るいテーマの場合）と白のテキスト（暗いテーマの場合）とは対照的です。
プライマリ- これは基本的にアクセント色であり、主に白いテキストとは対照的です。また、リストの選択、チェックボックス、ラジオボタンチェック状態、スライダー充填値、およびデフォルトの休憩状態とは異なるものとして相互作用したものとは異なるものとして表示する必要がある他のコントロールパーツなどの切り替えコントロールの代替レスト状態を表示するために、より多くの選択肢で使用されます。

色を洗練します

各テーマの3つの主要な色に加えて、主要な色のいずれかを拡張して、特定のコントロールパーツの外観を変更するマイナーカラーのリストを表示することもできます。

カラープロパティウィンドウの詳細

色の詳細なビューにアクセスするには、メジャーカラーボタンの見本の横にあるシェブロンをクリックしてください。

プリセットの作成、保存、ロード

編集者は、アプリでテーマがどのように見えるかをアイデアを得るために、いくつかのプリセットを使用して出荷します。プリセットドロップダウンは、カラー辞書プロパティパネルの上部にあります。

最初に起動すると、常にデフォルトに設定されます。これは、すべてのコントロールの明るいテーマスタイリングデフォルトです。ラベンダーやナイトタイムなどのさまざまなテーマを選択して、ツールがコントロールをテーマにする方法のアイデアを得ることができます。

独自のテーマを作成する準備ができたら、色の編集を開始してください！それらを微調整し始めたら、プリセットのコンボボックスはプリセットの名前から「カスタム」に移動することに気付くでしょう。

これは、「カスタム」の新しい一時的なテーマを始めたことを意味します。変更した変更は、そのボックス内の他のプリセットのいずれにも影響しません。

行った変更に満足したら、「保存」ボタンをクリックして、希望の保存ポイントを参照してください。
同様に、「ロード」ボタンをクリックして、保存されたテーマのファイルの場所にブラウジングすることで、保存されたJSONテーマを開くことができます。

コントラスト比を確認します

テーマエディターの最後の部分は、おそらくあなたのテーマを作成する上で最も重要な部分の1つであり、それはどちらかのテーマであなたがコンプライアンスと対照的であることを確認することです。このツールは、色を選択するときに、色選択ウィンドウの左側にコントラスト情報の小さなリストを提供します。

コントラストパネルの例

このウィンドウでは、編集することを選択したテーマで、最も一般的なテキストの色とのコントラストを見ることができます。

4.5：1の標準コントラスト比を下回る色を選択すると、コントラスト値の横に赤いテキストで警告されます。

コントラストパネルの悪い例

ここでは、コントラスト比とその重要性について詳しく知ることができます。

UWPアプリでテーマをエクスポートして使用します

すべてをテーマにしたら、アプリで使用したいと思うでしょう！そのためには、Color Dictionary Propertiesパネルの下部にある[エクスポート]ボタンをクリックする必要があります。

エクスポートテーマ

そのボタンは、一般的で無名のリソーススパイチ（以下を参照）を備えたポップアップウィンドウを開きます。

テーマポップアップをエクスポートします

このウィンドウは最終的なものではありませんが、テーマにいくつかの変更を加えてエクスポートウィンドウに再輸出したい場合、色の変化した値で更新されます。

ただし、アプリで使用する準備ができたら、右下隅の「クリップボードへのコピー」ボタンをクリックして、UWP Visual Studioソリューションに移動します。

Visual Studioに着いたら、ソリューションエクスプローラーにあるプロジェクトソリューションを右クリックします。

リソース辞書Visual Studioの作成

>新しいアイテムを追加して、リソース辞書を選択します。

リソース辞書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に貼り付けることができます。

< 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>

最後に、ページの背景色をテーマのために選んだRegionColorに設定することを忘れないでください。自動的に設定されない唯一のブラシです。

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

それが入ったら、あなたは終わった！テーマの色は、アプリまたはページに依存するようになります。

Code-BehindでColorPaletteresourcesを使用します

ColorPaletteresources APIに背後にあるColorPaletteresources APIにアクセスし、実行時にカラープロパティを変更するには、app.xamlのマージされた辞書（またはテーマをマージしたスコープ）をループし、現在使用されているリソースへの参照をColorPaletteresource Instancanceとして取得します。

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 ;
}

パフォーマンスの問題が発生する可能性があるため、実行時にこれを頻繁に行うことはお勧めしませんが、ユーザーが頻繁に切り替えることを期待していない設定ページまたはエリアに配置すると、パフォーマンスはそれほど悪くないはずです。

ヒント！適用した新しい色の変更を取得するために、リソースをリソースティック版をリロードする必要があります。 RequestedThemeを別のテーマに反転させて、再び戻すことでそうすることができます。それが、reloadpagetheeme関数が行っていることです。

ダウンレベルのテーマ

このツールのエクスポートコードで使用されているAPIはバージョン17744以降用ですが、テーマを以前のSDKバージョンで動作させるのはそれほど複雑ではありません。

テーマをエクスポートすると、ColorPaletteresourcesの定義を備えたResourcedictionaryマークアップが表示されます。

< 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 >

ColorPaletteresourcesは、generic.xaml内に位置し、それらのシステムカラーをあらゆるレベルでスコープすることを可能にするシステムカラーにとってフレンドリーなAPIです。

この同じテーマをダウンレベルで動作させることを可能にしたい場合は、テーマの各色で各システムカラーを個別に定義する必要があります。

< 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 >

この場合、ラベンダーのテーマを使用して、このダウンレベルの移行を示しています。

警告：このマークアップ形式の変更により、以前のSDKバージョンのコントロールにテーマを適用できますが、ページ、コンテナ、またはコントロールスコープレベルでは機能しません。 ColorPaletteresourcesは、スコーピング動作を可能にするAPIです。このマークアップ形式は、以前のSDKのapp.xamlレベルでのみ機能します。

貢献

このツールは機能チームから直接作成され、ツールの改善のための入力と提案を歓迎しますが、現時点では一般からの機能や変更を受け入れていません。将来的には貢献モデルを進化させる可能性があるため、定期的に確認してください。

このプロジェクトは、Microsoftのオープンソース行動規範を採用しています。詳細については、FAQのコードを参照するか、追加の質問やコメントについては、[email protected]にお問い合わせください。

参照してください

追加のWindowsソースコード、ツール、サンプルについては、GitHubのWindowsをご覧ください。

拡大する

fluent xaml theme editor

Fluent XAMLテーマエディター

ユニバーサルウィンドウプラットフォーム開発

ツールのバージョンを保存します

ツールの使用方法

色を洗練します

プリセットの作成、保存、ロード

コントラスト比を確認します

UWPアプリでテーマをエクスポートして使用します

Code-Behindで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