Пользовательские темы в приложении UWP

Question

Я разрабатываю приложение UWP, в котором я хочу динамически установить тему из файла (содержащий цветовые коды).

Файл, который я создал, представляет собой файл XML, узлы которого содержат цветовые коды, которые сопоставлены с элементами управления приложения.

Пользователь может обновить цветовые коды в предоставленном XML-файле, который должен отражать изменения темы в приложении.

Могу ли я установить любое другое местоположение для этого файла, чтобы пользователь мог редактировать содержимое файла?

Это правильный подход для реализации тем в приложении UWP.

Кроме того, я новичок в технологии UWP.

Заранее спасибо.

Answer 1

По умолчанию приложения UWP поддерживают две темы: Light а также Dark,

Вы можете указать тему вашего приложения в App.xaml установив RequestedTheme свойство к одному из значений (оно установлено Light по умолчанию) или в App.xaml.cs в конструкторе приложений, используя RequestedTheme = ApplicationTheme.Light; (изменение его где-нибудь позже вызовет исключение).

Если вы не установите RequestedTheme свойство, оно будет отражать тему, установленную в Settings > Personalization > Colors на любом мобильном устройстве W10 или ПК W10, на котором установлено обновление Anniversary и более новая версия. На старых версиях Windows 10 для настольных ПК это будет Light,

Вы также можете установить тему любого конкретного FrameworkElement который установлен в ElementTheme.Default по умолчанию, поэтому он наследует тему от своего родителя.

<StackPanel RequestedTheme="Light">
   <TextBlock>Text using light theme.</TextBlock>
   <TextBlock RequestedTheme="Dark">Text using dark theme.</TextBlock>
</StackPanel>

Для настройки цвета UWP обычно используют цвет Accent, указанный пользователем в Settings > Personalization > Colors тоже.

Чтобы отразить тему и цвет акцента, установленные в приложении "Настройки", указав собственный цвет для какого-либо элемента, необходимо использовать ThemeResource, Вы можете использовать предопределенные ресурсы темы XAML, например, цвет фона этой Границы будет #FFFFFFFF в Light тема и #FF000000 в Dark тема.

<Border Background="{ThemeResource SystemControlBackgroundAltHighBrush}"/>

Или вы можете использовать SystemControlBackgroundAccentBrush который будет отражать цвет Accent, выбранный в настройках приложения.

Вы также можете написать свой собственный theme dictionary это определяет цвета для каждой темы. Вот пример простого тематического словаря:

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Light">
        <SolidColorBrush x:Key="MyButtonBackgroundThemeBrush" Color="White"/
        <SolidColorBrush x:Key="MyButtonForegroundThemeBrush" Color="Black"/>
    </ResourceDictionary>
    <ResourceDictionary x:Key="Dark">
        <SolidColorBrush x:Key="MyButtonBackgroundThemeBrush" Color="Black"/>
        <SolidColorBrush x:Key="MyButtonForegroundThemeBrush" Color="White"/>
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

Вы будете использовать это так:

<Button Content="Themed button"
        Background="{ThemeResource MyButtonBackgroundThemeBrush}"
        Foreground="{ThemeResource MyButtonForegroundThemeBrush}"/
        />

Фон кнопки будет White и передний план будет Black в Light тема пока Black а также White в Dark тема.

Вы можете прочитать больше о ThemeResourceтемы HighContrast тема и стандартные ресурсы темы здесь.

Также я рекомендую вам посмотреть это видео на 9 канале, где темы XAML объясняются даже с HighContrast тема.