Windows 8 Store Apps學習(15) 控制項 UI: 字型繼承

控制項 UI: 字型繼承, Style, ControlTemplate, SystemReso

介紹

重新想象 Windows 8 Store Apps 之 控制項 UI

字型繼承 - 繼承父輩的 Font 相關的資訊

Style - 樣式

ControlTemplate - 控制項範本

系統資源 - 系統內建的樣式資源

VisualState - 視 圖狀態

VisualStateManager - 檢視狀態管理器

樣本

1、示範字型繼承

Controls/UI/FontInherit.xaml

<Page    x:Class="XamlDemo.Controls.UI.FontInherit"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:XamlDemo.Controls.UI"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d"            FontSize="100">        <Grid Background="Transparent">        <StackPanel Margin="120 0 0 0">                            <!--                示範如何繼承父輩的 Font 相關的資訊                Font 相關的設定來自 Windows.UI.Xaml.Controls.Control            -->                            <!--                繼承了 Page 的關於 Font 的設定            -->            <TextBlock Text="FontSize = 100" />                            <UserControl FontSize="50">                <!--                    繼承了 UserControl 的關於 Font 的設定                -->                <TextBlock Text="FontSize = 50" />            </UserControl>                        </StackPanel>    </Grid></Page>

2、示範 Style

Controls/UI/Style.xaml

<Page    x:Class="XamlDemo.Controls.UI.Style"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:XamlDemo.Controls.UI"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">        <Grid Name="root" Background="Transparent">                    <!--            註：、在 Grid.Resources 指定的資源，其範圍僅在 Grid 之內，全域資源需要在 App.xaml 中配置、Grid.Resources 等非全域資源也是支援 ResourceDictionary 的        -->                <Grid.Resources>                <!--                Style - 樣式                    x:Key - 標識（不指定此值，則樣式會應用於所有 TargetType 所指定的類型）                    TargetType - 目標物件類型                    BasedOn - 指定當前樣式的父樣式（此樣式會繼承指定的父樣式）                    Setter - 屬性設定器                        Property - 需要設定的屬性名稱                        Value - 需要設定的屬性值            -->                            <Style x:Key="MyTextStyle" TargetType="TextBox">                <Setter Property="FontSize" Value="24"/>                <Setter Property="Foreground" Value="#0000FF"/>            </Style>                <Style x:Key="MyTextStyle2" TargetType="TextBox">                <Setter Property="FontSize" Value="24"/>                <Setter Property="Foreground" Value="#FF0000"/>            </Style>                <Style TargetType="TextBox" BasedOn="{StaticResource MyTextStyle}">                <Setter Property="TextAlignment" Value="Center"/>            </Style>        </Grid.Resources>                    <StackPanel Margin="120 0 0 0">                <!--通過指定樣式資源，修改 FrameworkElement 的樣式（Style 屬性來自 FrameworkElement）-->            <TextBox Name="txtStyleDemo" Text="我是 TextBox" Margin="5" Style="{StaticResource MyTextStyle}" />                <!--隱式樣式（即全域樣式，即樣式資源中未指定 key 的樣式）的應用-->            <TextBox Text="我是 TextBox" Margin="5" />                <!--動態改變 FrameworkElement 的樣式-->            <Button Name="btnChangeStyle" Content="改變樣式" Click="btnChangeStyle_Click_1" />            </StackPanel>    </Grid></Page>