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>

Controls/UI/Style.xaml.cs

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
    
namespace XamlDemo.Controls.UI
{
    public sealed partial class Style : Page
    {
        public Style()
        {
            this.InitializeComponent();
        }
    
        private void btnChangeStyle_Click_1(object sender, RoutedEventArgs e)
        {
            // 獲取 Application 中的資源
            // (Windows.UI.Xaml.Style)Application.Current.Resources["myStyle"];
    
            // 獲取 root 內的資源
            txtStyleDemo.Style = (Windows.UI.Xaml.Style)root.Resources["MyTextStyle2"];
        }
    }
}

3、演示 ControlTemplate

Controls/UI/ControlTemplate.xaml

<Page
    x:Class="XamlDemo.Controls.UI.ControlTemplate"
    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>
    
            <!--
                ControlTemplate - 控件模板
                    x:Key - 標識
                    TargetType - 目標對象類型
                ContentPresenter - 用於顯示 ContentControl 中的 Content
                TemplateBinding - 模板綁定
            -->
                
            <ControlTemplate x:Key="MyControlTemplate" TargetType="Button">
                <Border BorderBrush="Red" BorderThickness="1">
                    <Grid Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Right" Foreground="Red" />
                    </Grid>
                </Border>
            </ControlTemplate>
    
            <ControlTemplate x:Key="MyControlTemplate2" TargetType="Button">
                <Border BorderBrush="Red" BorderThickness="1">
                    <Grid Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Right" Foreground="Blue" />
                    </Grid>
                </Border>
            </ControlTemplate>
    
            <!--在 Style 內配置 ControlTemplate-->
            <Style x:Key="MyStyle" TargetType="Button">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Border BorderBrush="Red" BorderThickness="1">
                                <Grid Background="{TemplateBinding Background}">
                                    <ContentPresenter HorizontalAlignment="Right" Foreground="Red" />
                                </Grid>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>
    
        <StackPanel Margin="120 0 0 0">
    
            <!--通過指定控件模板資源，修改 Control 的模板（Template 屬性來自 Control）-->
            <Button Name="btnControlTemplateDemo" Width="300" Margin="5" Content="我是 Button" Background="Yellow" Template="{StaticResource MyControlTemplate}" />
    
            <!--通過內聯控件模板，修改 Control 的模板-->
            <Button Width="300" Margin="5" Content="我是 Button">
                <Button.Template>
                    <ControlTemplate>
                        <Border BorderBrush="Red" BorderThickness="1">
                            <Grid Background="Yellow">
                                <ContentPresenter HorizontalAlignment="Right" Foreground="Red" />
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Button.Template>
            </Button>
    
            <!--在 Style 內配置 ControlTemplate-->
            <Button Width="300" Margin="5" Content="我是 Button" Background="Yellow" Style="{StaticResource MyStyle}" />
    
            <!--動態改變 Control 的模板-->
            <Button Name="btnChangeControlTemplate" Content="改變控件模板" Click="btnChangeControlTemplate_Click_1" />
    
        </StackPanel>
    </Grid>
</Page>

Controls/UI/ControlTemplate.xaml.cs

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
    
namespace XamlDemo.Controls.UI
{
    public sealed partial class ControlTemplate : Page
    {
        public ControlTemplate()
        {
            this.InitializeComponent();
        }
    
        private void btnChangeControlTemplate_Click_1(object sender, RoutedEventArgs e)
        {
            // 獲取 Application 中的資源
            // (Windows.UI.Xaml.Style)Application.Current.Resources["MyControlTemplate"];
    
            // 獲取 root 內的資源
            btnControlTemplateDemo.Template = (Windows.UI.Xaml.Controls.ControlTemplate)root.Resources["MyControlTemplate2"];
        }
    }
}

4、演示如何使用系統內置的樣式資源

Controls/UI/SystemResource.xaml

<Page
    x:Class="XamlDemo.Controls.UI.SystemResource"
    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 Background="Transparent">
        <StackPanel Margin="120 0 0 0">
    
            <!--
                有 n 多的系統資源可用，以下舉幾個例子
                
                注：可以在 Visual Studio 中枚舉出系統資源
            -->
                
            <Border Padding="12,4,12,4"
                    BorderThickness="{StaticResource ButtonBorderThemeThickness}"
                    BorderBrush="{StaticResource ButtonBorderThemeBrush}"
                    Background="{StaticResource ButtonBackgroundThemeBrush}">
                <TextBlock Text="我是一個長得像 Button 的 TextBlock" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="SemiBold"
                           FontFamily="{StaticResource ContentControlThemeFontFamily}"
                           FontSize="{StaticResource ControlContentThemeFontSize}"
                           Foreground="{StaticResource ButtonForegroundThemeBrush}" />
            </Border>
    
            <Button Content="我是一個 Button" Margin="0 10 0 0" />
    
        </StackPanel>
    </Grid>
</Page>

5、演示 VisualState 和 VisualStateManager 的應用

Controls/UI/VisualStateDemo.xaml

<Page
    x:Class="XamlDemo.Controls.UI.VisualStateDemo"
    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 Background="Transparent">
        <Grid.Resources>
    
            <ControlTemplate x:Key="myControlTemplate" TargetType="Button">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <!--
                            VisualStateGroup - 用於分組 VisualState
                        -->
                        <VisualStateGroup x:Name="CommonStates">
                            <!--
                                Normal - 正常狀態
                                
                                注意：
、本例所列出的 VisualState 名稱都是 Button 控件擁有的，不同的控件的 VisualState 名稱和種類可能會

不一樣
、寫自定義控件時，需要通過 VisualStateManager.GoToState() 來轉換 VisualState
                            -->
                            <VisualState x:Name="Normal" />
                            <!--
                                Disabled - 無效狀態
                            -->
                            <VisualState x:Name="Disabled" />
                            <!--
                                PointerOver - 鼠標經過時的狀態
                            -->
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ColorAnimation 
                                        Storyboard.TargetName="borderBrush"
                                        Storyboard.TargetProperty="Color"
                                        To="Green" />
                                </Storyboard>
                            </VisualState>
                            <!--
                                PointerOver - 鼠標按下時的狀態
                            -->
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="grid">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0.3" Value="{StaticResource ButtonPressedBackgroundThemeBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="contentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedForegroundThemeBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <!--
                                VisualTransition - VisualState 變化時的過渡效果
                                    From - 變化前的 VisualState 的 Name
                                    To - 變化後的 VisualState 的 Name
                                    GeneratedDuration - 一個狀態變化到另一個狀態的所需時間
                                    GeneratedEasingFunction - 一個狀態變化到另一個狀態的緩動效果
                            -->
                            <VisualStateGroup.Transitions>
                                <VisualTransition To="PointerOver" GeneratedDuration="0:0:1">
                                    <VisualTransition.GeneratedEasingFunction>
                                        <ElasticEase EasingMode="EaseInOut" />
                                    </VisualTransition.GeneratedEasingFunction>
                                </VisualTransition>
                            </VisualStateGroup.Transitions>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <!--
                                Focused - 獲取到焦點
                            -->
                            <VisualState x:Name="Focused" />
                            <!--
                                Unfocused - 失去焦點
                            -->
                            <VisualState x:Name="Unfocused"/>
                            <!--
                                PointerFocused - 通過指針獲取到焦點
                            -->
                            <VisualState x:Name="PointerFocused"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
    
                    <Border x:Name="border" BorderThickness="10">
                        <Border.BorderBrush>
                            <SolidColorBrush x:Name="borderBrush" Color="Red" />
                        </Border.BorderBrush>
                        <Grid Name="grid" Background="{TemplateBinding Background}" Width="500" Height="200">
                            <ContentPresenter Name="contentPresenter" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="24.667"
                                          Foreground="{TemplateBinding Foreground}" />
                        </Grid>
                    </Border>
                </Grid>
            </ControlTemplate>
    
        </Grid.Resources>
            
        <StackPanel Margin="120 0 0 0">
                
            <Button Name="btnDemo" Content="我是 Button（用於演示 VisualState）" Margin="5" Background="Blue" Foreground="White" Template="{StaticResource myControlTemplate}" />
    
            <Button Name="btnVisualStateManager" Content="將上面的按鈕的 VisualState 轉到 PointerOver" Click="btnVisualStateManager_Click_1" Margin="5" />
    
        </StackPanel>
            
    </Grid>
</Page>

Controls/UI/VisualStateDemo.xaml.cs

/*
 * 演示 VisualState 和 VisualStateManager 的應用
 */
    
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
    
namespace XamlDemo.Controls.UI
{
    public sealed partial class VisualStateDemo : Page
    {
        public VisualStateDemo()
        {
            this.InitializeComponent();
        }
    
        private void btnVisualStateManager_Click_1(object sender, RoutedEventArgs e)
        {
            /*
             * bool GoToState(Control control, string stateName, bool useTransitions) - 轉換 VisualState
             *     control - 需要轉換 VisualState 的控件
             *     stateName - 目標 VisualState 的名稱
             *     useTransitions - 是否使用 VisualTransition 進行過渡
             */
    
            // 將 VisualState 轉到指定的狀態
            VisualStateManager.GoToState(btnDemo, "PointerOver", true);
        }
    }
}

OK

[源碼下載]：http://files.cnblogs.com/webabcd/Windows8.rar