Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Select an option

  • Save tor4kichi/e3dba586778fb0aed8abeff4f9c2f730 to your computer and use it in GitHub Desktop.

Select an option

Save tor4kichi/e3dba586778fb0aed8abeff4f9c2f730 to your computer and use it in GitHub Desktop.
[UWP] How to set NavigationView pane background color.

これは何?

NavigationView自体に PaneBackgroundプロパティ がありませんが、NavigationViewExpandedPaneBackground等のリソースを上書きすることで変更可能です。

xxxPaneBackground にはWindowsのクロックアプリのPane背景色と類似する SystemChromeMediumColor を指定してます。

また、参考までに ApplicationContentBackgroundBrush にクロックアプリのページコンテンツ背景色に類似した SystemChromeMediumLowColor を指定しています。

使い方

下記 ResourceDictionaryの内容を任意の Resources (App.ResourcesやPage.Resourcesなど)に記述します。

参考

<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Light">
<SolidColorBrush x:Key="NavigationViewTopPaneBackground" Color="{ThemeResource SystemChromeMediumColor}" />
<SolidColorBrush x:Key="NavigationViewExpandedPaneBackground" Color="{ThemeResource SystemChromeMediumColor}" />
<SolidColorBrush x:Key="ApplicationContentBackgroundBrush" Color="{ThemeResource SystemChromeMediumLowColor}" />
</ResourceDictionary>
<ResourceDictionary x:Key="Dark">
<SolidColorBrush x:Key="NavigationViewTopPaneBackground" Color="{ThemeResource SystemChromeMediumColor}" />
<SolidColorBrush x:Key="NavigationViewExpandedPaneBackground" Color="{ThemeResource SystemChromeMediumColor}" />
<SolidColorBrush x:Key="ApplicationContentBackgroundBrush" Color="{ThemeResource SystemChromeMediumLowColor}" />
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment