Windows Store và Page: Styling và Page.Resources trên XAML và Windows Store Apps

Yêu cầu: Windows 10 và Visual Studio 2015

- Trường hợp 1: Tạo Style cho các thẻ cùng loại TextBox

01.<Page.Resources>

02.<Style TargetType="TextBox">

03.<Setter Property="Foreground" Value="RED" />

04.<Setter Property="FontSize" Value="36" />

05.</Style>

06.</Page.Resources>

07. 

08.<TextBox Name="TextBox1" Text="TextBox 1" VerticalAlignment="Top"  />

09.<TextBox Name="TextBox2" Text="TextBox 2" VerticalAlignment="Top"  />

- Trường hợp 2: Tạo Style cho từng thẻ TextBox

01.<Page.Resources>

02.<Style x:Key="textbox_style1" TargetType="TextBox">

03.<Setter Property="Foreground" Value="RED" />

04.<Setter Property="FontSize" Value="36" />

05.</Style>

06.<Style x:Key="textbox_style2" TargetType="TextBox">

07.<Setter Property="Foreground" Value="GREEN" />

08.<Setter Property="FontSize" Value="50" />

09.</Style>

10.</Page.Resources>

11. 

12.<TextBox Name="TextBox1" Text="TextBox 1"  Style="{StaticResource textbox_style1}"VerticalAlignment="Top"  />

13.<TextBox Name="TextBox2" Text="TextBox 2"  Style="{StaticResource textbox_style2}"VerticalAlignment="Top"  />

- Trường hợp 3: Tái khả năng sử dụng lại chuỗi String 

1.<Page.Resources>

2.<x:String x:Key="AppName">My Application</x:String>

3.</Page.Resources>

4. 

5.<TextBlock x:Name="tbName" HorizontalAlignment="Left" Margin="451,351,0,0"

6.TextWrapping="Wrap" Text="{StaticResource AppName}" VerticalAlignment="Top"FontSize="72"/>

Dưới đây là một vài Example

- Example 1: Tạo style cho các thẻ cùng loại Button

MainPage.xaml

Windows Store 2017

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

    <Page.Resources>
        <Style TargetType="Button">
            <Setter Property="BorderThickness" Value="5" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="FontSize" Value="48" />
            <Setter Property="Background" >
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="Black" Offset="0"/>
                        <GradientStop Color="#FF3CDA7D" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="BorderBrush" >
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                        <GradientStop Color="White" Offset="0.0" />
                        <GradientStop Color="LimeGreen" Offset="1.0" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>

    </Page.Resources>

    <Grid x:Name="LayoutRoot">
        <Button Content="Button 1" Height="117" Width="361" Margin="191,293,0,358" />
        <Button Content="Button 2" Height="117" Width="361" Margin="826,293,0,358" />
    </Grid>
</Page>

- Cả hai Button đều áp dụng cùng style

- Example 2: Tạo style cho từng thẻ Button

MainPage.xaml

Windows Store 2017

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

    <Page.Resources>
        <Style TargetType="Button">
            <Setter Property="BorderThickness" Value="5" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="FontSize" Value="48" />
            <Setter Property="Background" >
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="Black" Offset="0"/>
                        <GradientStop Color="#FF3CDA7D" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="BorderBrush" >
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                        <GradientStop Color="White" Offset="0.0" />
                        <GradientStop Color="LimeGreen" Offset="1.0" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="Button_Custom" TargetType="Button">
            <Setter Property="BorderThickness" Value="5" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="FontSize" Value="48" />
            <Setter Property="Background" >
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="Black" Offset="0"/>
                        <GradientStop Color="#FFBD3CDA" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="BorderBrush" >
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                        <GradientStop Color="White" Offset="0.0" />
                        <GradientStop Color="#FFBD3CDA" Offset="1.0" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    <Grid x:Name="LayoutRoot">
        <Button Content="Button 1" Height="117" Width="361" Margin="191,293,0,358" />
        <Button Content="Button 2" Height="117" Width="361" Margin="826,293,0,358" Style="{StaticResource Button_Custom}" />
    </Grid>
</Page>

 - Áp dụng style cho từng Button

- Example 3: Tái khả năng sử dụng lại chuỗi String

MainPage.xaml

Windows Store 2017

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

    <Page.Resources>
        <x:String x:Key="AppName">My Application</x:String>
    </Page.Resources>

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <TextBlock x:Name="tbName" HorizontalAlignment="Left" Margin="451,351,0,0" 
               TextWrapping="Wrap" Text="{StaticResource AppName}" VerticalAlignment="Top" FontSize="72"/>
    </Grid>
</Page>

 - Chúng ta thấy rằng nó đang chạy. Text = "{StaticResource AppName}"