Статьи

Применение стилей с использованием тематических ресурсов в Windows Phone

Сентябрь 29, 2018

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

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

  • Свойства кисти
  • Цветовые ресурсы
  • Названия шрифтов
  • Размер шрифта
  • Стили текста
  • толщина
  • Видимость темы
  • Непрозрачность темы

Мы можем получить полную информацию о каждом свойстве и его внутренних потребностях, используя эту ссылку MSDN http://msdn.microsoft.com/en-us/library/ff769552%28v=vs.92%29#BKMK_BrushResources . Давайте рассмотрим пример использования этих стилей в реальном времени при разработке приложений для Windows Phone. Откройте Visual Studio 2010 и создайте новое приложение Silverlight для Windows Phone с допустимым именем проекта, как показано на экране ниже.

образ

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

образ

Теперь мы применим ресурсы темы для сетки, текстового блока и эллипса, как показано в коде ниже. Мы можем изменить его в соответствии с требованием (проверьте возможные варианты MSDN в приведенной выше ссылке). Как только мы изменим ресурсы темы, наш код будет выглядеть следующим образом.

Код:

<phone:PhoneApplicationPage
    x:Class="F5debugHowto42.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="Theme Resource" 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" Background="{StaticResource PhoneChromeBrush}">
            <TextBlock Height="71" FontFamily="{StaticResource PhoneFontFamilySemiLight}"
                FontSize="{StaticResource PhoneFontSizeLarge}" HorizontalAlignment="Left" Margin="33,40,0,0"
                       Name="textBlock1" Text="F5debug WP 101 How to’s" VerticalAlignment="Top" Width="369" />
           
            <Ellipse Height="167" Stroke="{StaticResource PhoneForegroundBrush}" 
                     Fill="{StaticResource PhoneAccentBrush}"
                     HorizontalAlignment="Left" Margin="33,147,0,0" Name="ellipse1"
                     StrokeThickness="1" VerticalAlignment="Top" Width="369" />
        </Grid>
    </Grid>
</phone:PhoneApplicationPage>

образ

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

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

образ

Теперь измените тему или цвет акцента темы, и мы увидим изменения в приложении, которые изменяют фон, цвет текста акцента, цвет кисти и т. Д. В соответствии с цветом акцента темы, выбранным, как показано на экране ниже (Тема, выбранная для манго) , Чтобы изменить тему, нажмите кнопку «Окно» и выберите настройки, в которых выберите темы и измените цвет акцента.

образ

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

 

 

34
Share: