WPF 笔记 四 Style

WPF 样式

无意义式，仅仅说明语法

    <Grid Margin="10">
        <TextBlock Text="Style test">
            <TextBlock.Style>
                <Style>
                    <Setter Property="TextBlock.FontSize" Value="36" />
                Style>
            TextBlock.Style>
        TextBlock>
    Grid>

入门例子

    <StackPanel Margin="10">
        <StackPanel.Resources>
            <Style TargetType="TextBlock">
                <Setter Property="Foreground" Value="Gray" />
                <Setter Property="FontSize" Value="24" />
            Style>
        StackPanel.Resources>
        <TextBlock>Header 1TextBlock>
        <TextBlock>Header 2TextBlock>
        <TextBlock Foreground="Blue">Header 3TextBlock>
    StackPanel>

 这个Style通过Setter设置了前景色和字体大小，只适用于该StackPanel。

窗口范围内的样式

    <Window.Resources>
        <Style TargetType="TextBlock">
            <Setter Property="Foreground" Value="Gray" />
            <Setter Property="FontSize" Value="24" />
        Style>
    Window.Resources>
    <StackPanel Margin="10">
        <TextBlock>Header 1TextBlock>
        <TextBlock>Header 2TextBlock>
        <TextBlock Foreground="Blue">Header 3TextBlock>
    StackPanel>

App范围内的样式

放在App.xaml

    <Application.Resources>
        <Style TargetType="TextBlock">
            <Setter Property="Foreground" Value="Gray" />
            <Setter Property="FontSize" Value="24" />
        Style>
    Application.Resources>

 明确使用样式

    <Window.Resources>
        <Style x:Key="HeaderStyle" TargetType="TextBlock">
            <Setter Property="Foreground" Value="Gray" />
            <Setter Property="FontSize" Value="24" />
        Style>
    Window.Resources>
    <StackPanel Margin="10">
        <TextBlock>Header 1TextBlock>
        <TextBlock Style="{StaticResource HeaderStyle}">Header 2TextBlock>
        <TextBlock>Header 3TextBlock>
    StackPanel>

使用资源字典

创建一个类，wpf 资源字典，
ButtonStyle.xaml,

 使用方式如下

    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/WpfUITest1;component/Assets/Sytles/ButtonStyle.xaml">
                    
                ResourceDictionary>
                <ResourceDictionary>
                    <Style TargetType="RadioButton" x:Key="NavTabButtonStyle">
                        。。。。。
                    Style>
                ResourceDictionary>
            ResourceDictionary.MergedDictionaries>
        ResourceDictionary>
        
    Window.Resources>

Source后面的格式   /项目名;component/Asetts....xaml

 属性触发器

    <Grid>
        <TextBlock Text="Hello, styled world!" FontSize="28" HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Setter Property="Foreground" Value="Blue">Setter>
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Foreground" Value="Red" />
                            <Setter Property="TextDecorations" Value="Underline" />
                        Trigger>
                    Style.Triggers>
                Style>
            TextBlock.Style>
        TextBlock>
    Grid>

使用key改写

    <Window.Resources>
        <Style x:Key="HeaderStyle" TargetType="TextBlock">
            <Setter Property="Foreground" Value="Gray" />
            <Setter Property="FontSize" Value="24" />
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Foreground" Value="Red" />
                    <Setter Property="TextDecorations" Value="Underline" />
                Trigger>
            Style.Triggers>
        Style>
    Window.Resources>
    <Grid>
        <TextBlock Style="{StaticResource HeaderStyle}" Text="Hello, styled world!" FontSize="28" HorizontalAlignment="Center" VerticalAlignment="Center">

        TextBlock>

 数据触发器

    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <CheckBox Name="cbSample" Content="Hello, world?" />
        <TextBlock HorizontalAlignment="Center" Margin="0,20,0,0" FontSize="48">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Setter Property="Text" Value="No" />
                    <Setter Property="Foreground" Value="Red" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ElementName=cbSample, Path=IsChecked}" Value="True">
                            <Setter Property="Text" Value="Yes!" />
                            <Setter Property="Foreground" Value="Green" />
                        DataTrigger>
                    Style.Triggers>
                Style>
            TextBlock.Style>
        TextBlock>
    StackPanel>

改写

    <Window.Resources>
        <Style x:Key="mystyle" TargetType="TextBlock">
            <Setter Property="Text" Value="No" />
            <Setter Property="Foreground" Value="Red" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding ElementName=cbSample, Path=IsChecked}" Value="True">
                    <Setter Property="Text" Value="Yes!" />
                    <Setter Property="Foreground" Value="Green" />
                DataTrigger>
            Style.Triggers>
        Style>
    Window.Resources>
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <CheckBox Name="cbSample" Content="Hello, world?" />
        <TextBlock Style="{StaticResource mystyle}" HorizontalAlignment="Center" Margin="0,20,0,0" FontSize="48">

        TextBlock>
    StackPanel>

 事件触发器

    <Window.Resources>
        <Style x:Key="mystyle" TargetType="TextBlock">
            <Style.Triggers>
                <EventTrigger RoutedEvent="MouseEnter">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:0.300" Storyboard.TargetProperty="FontSize" To="28" />
                            Storyboard>
                        BeginStoryboard>
                    EventTrigger.Actions>
                EventTrigger>
                <EventTrigger RoutedEvent="MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:0.300" Storyboard.TargetProperty="FontSize" To="18" />
                            Storyboard>
                        BeginStoryboard>
                    EventTrigger.Actions>
                EventTrigger>
            Style.Triggers>
        Style>
    Window.Resources>
    <Grid>
        <TextBlock Style="{StaticResource mystyle}" Name="lblStyled" Text="Hello, styled world!" FontSize="18" HorizontalAlignment="Center" VerticalAlignment="Center">

        TextBlock>
    Grid>

 多重触发

    <Grid>
        <TextBox VerticalAlignment="Center" HorizontalAlignment="Center" Text="Hover and focus here" Width="150">
            <TextBox.Style>
                <Style TargetType="TextBox">
                    <Style.Triggers>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsKeyboardFocused" Value="True" />
                                <Condition Property="IsMouseOver" Value="True" />
                            MultiTrigger.Conditions>
                            <MultiTrigger.Setters>
                                <Setter Property="Background" Value="LightGreen" />
                            MultiTrigger.Setters>
                        MultiTrigger>
                    Style.Triggers>
                Style>
            TextBox.Style>
        TextBox>
    Grid>

多重数据触发

   <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <CheckBox Name="cbSampleYes" Content="Yes" />
        <CheckBox Name="cbSampleSure" Content="I'm sure" />
        <TextBlock HorizontalAlignment="Center" Margin="0,20,0,0" FontSize="28">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Setter Property="Text" Value="Unverified" />
                    <Setter Property="Foreground" Value="Red" />
                    <Style.Triggers>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding ElementName=cbSampleYes, Path=IsChecked}" Value="True" />
                                <Condition Binding="{Binding ElementName=cbSampleSure, Path=IsChecked}" Value="True" />
                            MultiDataTrigger.Conditions>
                            <Setter Property="Text" Value="Verified" />
                            <Setter Property="Foreground" Value="Green" />
                        MultiDataTrigger>
                    Style.Triggers>
                Style>
            TextBlock.Style>
        TextBlock>
    StackPanel>

 动画一例

    <Grid>
        <Border Background="LightGreen" Width="100" Height="100" BorderBrush="Green">
            <Border.Style>
                <Style TargetType="Border">
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ThicknessAnimation Duration="0:0:0.400" To="3" Storyboard.TargetProperty="BorderThickness" />
                                        <DoubleAnimation Duration="0:0:0.300" To="125" Storyboard.TargetProperty="Height" />
                                        <DoubleAnimation Duration="0:0:0.300" To="125" Storyboard.TargetProperty="Width" />
                                    Storyboard>
                                BeginStoryboard>
                            Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ThicknessAnimation Duration="0:0:0.250" To="0" Storyboard.TargetProperty="BorderThickness" />
                                        <DoubleAnimation Duration="0:0:0.150" To="100" Storyboard.TargetProperty="Height" />
                                        <DoubleAnimation Duration="0:0:0.150" To="100" Storyboard.TargetProperty="Width" />
                                    Storyboard>
                                BeginStoryboard>
                            Trigger.ExitActions>
                        Trigger>
                    Style.Triggers>
                Style>
            Border.Style>
        Border>
    Grid>