Статьи

Как: играть с темой Accent Color в Windows Phone

Октябрь 24, 2018

В этом уроке мы узнаем, как программно изменить цвет Theme Accent на устройстве Windows Phone. В нашей предыдущей статье мы видели, как программно определять тему, работающую в фоновом режиме (). Эта статья является расширением предыдущей статьи, где мы собираемся программно определить цвет акцента и применить его к элементу управления. Акцентные цвета — это фоновые цвета, которые можно выбрать из списка доступных ресурсов, который лучше всего подходит для устройства по удобству.

Акцентный цвет с темами просто меняет цвет шрифта, и это не повлияет на размер шрифта или размеры элемента управления. В настоящее время для Windows Phone доступны различные цвета Accent, и он продолжает увеличиваться при каждом обновлении, которое Microsoft предоставляет, как показано в списке ниже. Windows Phone предоставляется с 10 различными цветами выбора и по умолчанию 1 для производителя компания может выбрать самостоятельно. Таким образом, будет доступно 11 цветов Accent. 

Давайте посмотрим, как мы можем программно реализовать изменения цвета Accent в Windows Phone, открыть Visual Studio 2010 и создать новый проект Silverlight для Windows Phone 7 с допустимым именем проекта, как показано на экране ниже.

образ

Теперь перетащите несколько элементов управления, которые используются для отображения выходных данных об изменениях цвета акцента, поскольку мы не можем напрямую наложить это на элемент управления, мы будем использовать текстовое поле для отображения выходных данных. Так что перетащите 3 текстовых блока с некоторыми фиктивными значениями, как показано на экране ниже.

образ

Код XAML:

<phone:PhoneApplicationPage
    x:Class="F5debugHowto41.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <!–LayoutRoot is the root grid where all page content is placed–>
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!–TitlePanel contains the name of the application and page title–>
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="F5debug How to Series" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Accent Colors" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!–ContentPanel – place additional content here–>
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <TextBlock Height="40" Style="{StaticResource PhoneTextAccentStyle}" HorizontalAlignment="Left" Margin="37,44,0,0" Name="textBlock1" Text="" VerticalAlignment="Top" Width="382" />
            <TextBlock Height="40" HorizontalAlignment="Left" Margin="37,110,0,0" Name="textBlock2" Text="" VerticalAlignment="Top" Width="382" />
            <TextBlock Height="40" Style="{StaticResource PhoneTextAccentStyle}" HorizontalAlignment="Left" Margin="37,176,0,0" Name="textBlock3" Text="" VerticalAlignment="Top" Width="382" />
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>

В приведенном выше коде XAML мы видим, что textblock1 и textblock3 имеют стиль, указывающий на PhonetextAccentStyle, который указывает, что он получает стиль, основанный на цвете акцента, выбранном из настроек. Теперь в приведенном ниже коде добавьте приведенный ниже код, который получает некоторые данные, основанные на выборе, в основном шестнадцатеричный цвет выбранного акцента, как показано ниже.

Код позади:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace F5debugHowto41
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();

            Color currentAccentColorHex = (Color)Application.Current.Resources["PhoneAccentColor"];

            string strHexa = currentAccentColorHex.ToString();
            string strRGB = currentAccentColorHex.R.ToString() + ";" + currentAccentColorHex.G.ToString() +";" + currentAccentColorHex.B.ToString();

            textBlock1.Text = "Accent Color Hex – " + strHexa;
            textBlock2.Text = "Accent Apha Channel" + currentAccentColorHex.A.ToString();
            textBlock3.Text = "Accent Color RGB – " + strRGB;
        }
    }
}

Теперь, когда мы закончили с нашим кодом, просто запустите приложение, нажав F5 непосредственно на клавиатуре, или мы можем использовать опцию Build и выполнить проект из панели инструментов для запуска приложения. После успешного завершения сборки мы можем увидеть эмулятор Windows Phone с приложением и ожидаемые результаты, как показано на экранах ниже.

Экран вывода:

образ

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

образ

Вот и все из этого урока, поэтому здесь мы увидели, как поиграться с цветами Accent и как стилизовать проект, который может эффективно использовать тему устройства, чтобы обеспечить уникальный дизайн для разработки приложений для телефона Windows. Увидимся в следующем уроке до свидания и пока Счастливого программирования!

34
Share: