読者です 読者をやめる 読者になる 読者になる

しっぽを追いかけて

ぐるぐるしながら考えています

Unity と猫の話題が中心   掲載内容は個人の私見であり、所属組織の見解ではありません

UWP で OS のアクセントカラーを使いたい

UWP Windows ランタイムアプリ XAML

Windows 10 のパーソナル設定ではアクセントカラーを選択した着せ替えが行えます

f:id:matatabi_ux:20150929211229p:plain

どうせなら UWP のアプリの中でもユーザーが選んだアクセントカラーを使いたいと思い試してみました

※ 実装コードの全体は下記にアップしています


書いたのは次のような XAML

<Page
    x:Class="UWPOsColorSample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UWPOsColorSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    RequestedTheme="Dark"
    mc:Ignorable="d">

    <Page.Resources>
        <local:KeyToResourceConverter x:Key="KeyToResourceConverter"/>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <StackPanel Orientation="Vertical"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center">
            
            <Button Content="Open accent color settings"
                    Click="OnOpenSettingsButtonClick"
                    HorizontalAlignment="Stretch"
                    Margin="0,10"/>

            <GridView HorizontalAlignment="Center"
                  VerticalAlignment="Center">
                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <ItemsWrapGrid Orientation="Vertical"
                                       ItemWidth="420"/>
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
                
                <GridView.ItemContainerStyle>
                    <Style TargetType="GridViewItem">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                        <Setter Property="Margin" Value="0,0,10,10"/>
                    </Style>
                </GridView.ItemContainerStyle>
                
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="48"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Rectangle Fill="{Binding Converter={StaticResource KeyToResourceConverter}}"/>
                            <TextBlock Grid.Column="1"
                                       Text="{Binding}"
                                       VerticalAlignment="Center"
                                       TextWrapping="Wrap"
                                       Margin="10,0,0,0"/>
                        </Grid>
                    </DataTemplate>
                </GridView.ItemTemplate>
                
                <x:String>SystemControlBackgroundAccentBrush</x:String>
                <x:String>SystemControlDisabledAccentBrush</x:String>
                <x:String>SystemControlForegroundAccentBrush</x:String>
                <x:String>SystemControlHighlightAccentBrush</x:String>
                <x:String>SystemControlHighlightAltAccentBrush</x:String>
                <x:String>SystemControlHighlightAltListAccentHighBrush</x:String>
                <x:String>SystemControlHighlightAltListAccentLowBrush</x:String>
                <x:String>SystemControlHighlightAltListAccentMediumBrush</x:String>
                <x:String>SystemControlHighlightListAccentHighBrush</x:String>
                <x:String>SystemControlHighlightListAccentLowBrush</x:String>
                <x:String>SystemControlHighlightListAccentMediumBrush</x:String>
                <x:String>SystemControlHighlightAltListAccentLowBrush</x:String>

            </GridView>

        </StackPanel>
    </Grid>
</Page>

SystemControl~Accent とキー名についている ThemeResource には OS のアクセントカラーが設定されるようなので、GridView で並べて配置しました

あとは設定画面を開くためのボタンを表示しているだけです

さくっとおためし

f:id:matatabi_ux:20150929211920g:plain

設定と同期してちゃんと切り替わってますね!