Windows 8 Store Apps Learning (15) control UI: Font inheritance

Control UI: Font inheritance, Style, ControlTemplate, Systemreso

Introduced

Re-imagine the Windows 8 Store Apps Control UI

Font inheritance-Inherit font-related information from your parents

Style-styles

ControlTemplate-Control templates

system resources-system built in style resources

VisualState-View state

VisualStateManager-View state manager

Example

1. Demo Font inheritance

Controls/ui/fontinherit.xaml

<page x:class= "XamlDemo.Controls.UI.FontInherit" xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presenta tion "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=" > <grid background= "Transparent" > <stackpanel margin= "0 0 0" > <!--demonstrates how to inherit the Font-related
                Information Font-related settings from Windows.UI.Xaml.Controls.Control--> <!--
                
            Inherited page's about Font settings--> <textblock text= "fontsize = M"/> <usercontrol fontsize= > <!--Inherits UserControl's Font-setting --> <tExtblock text= "fontsize = x"/> </UserControl> </StackPanel> < /grid> </Page>

2. Demo 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 "> <!--
        Note: The resources specified in Grid.resources are scoped only within Grid, and global resources need to be configured in App.xaml, grid.resources and other Non-global resources are supported ResourceDictionary
                    --> <Grid.Resources> <!--style-style X:key-Identity (this value is not specified, the style is applied to all types specified by TargetType) TargetType-target object type BasedOn-Specifies the current
                        The style's parent style (this style inherits the specified parent style) Setter-Property Builder-property name that needs to be set
           Value-the property value that needs to be set --> <style x:key= "Mytextstyle" targettype= "TextBox" > <setter Pro "FontSize" value= "perty="/> <setter property= "foreground" value= "#0000FF"/> </st yle> <style x:key= "MyTextStyle2" targettype= "TextBox" > <setter property= "Font
    
            Size "value="/> <setter property= "foreground" value= "#FF0000"/> </Style> <style targettype= "TextBox" basedon= "{StaticResource Mytextstyle}" > <setter propert Y= "TextAlignment" value= "Center"/> </Style> </Grid.Resources> < StackPanel margin= "0 0 0" > <!--Modify the FrameworkElement style (style property from FrameworkElement) by specifying a style resource--&
            Gt <textbox name= "Txtstyledemo" text= "I am a TextBox" margin= "5" style= "{StaticResource Mytextstyle}"/> & lt;! --An implicitThe application of the style (the global style, which is not specified in the style resource)--> <textbox text= "I am a TextBox" margin= "5"/> <!--dynamic Change FrameworkElement style--> <button name= "Btnchangestyle" content= "Change Style" click= "Btnchangestyle_click_1"/ > </StackPanel> </Grid> </Page>