WPF学习之路（十四）样式和模板

样式 

实例：

<Window.Resources>
    <Style x:Key="BtnStyle">
        <Setter Property="Button.Height" Value="50" />
        <Setter Property="Button.Margin" Value="30" />
        <Setter Property="Button.Background" Value="Beige" />
        <Setter Property="Button.RenderTransform">
            <Setter.Value>
                <RotateTransform Angle="45" />
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<WrapPanel x:Name="wrappanel" Margin="10">
    <Button Content="btn1" Style="{StaticResource BtnStyle}" />
    <Button Content="btn2" Style="{StaticResource BtnStyle}" />
    <Button Content="btn3" Style="{StaticResource BtnStyle}" />
</WrapPanel>

如果不设置样式，需要每个控件都添加重复的代码，比较繁琐。

 可以设置Style的TargetType，并且可以不设置x:Key，会默认应用到符合的控件上，需要注意Scope，在定义的Scope内才会生效

<Style TargetType="{x:Type Button}">
    <Setter Property="Height" Value="50" />
    <Setter Property="Margin" Value="30" />
    <Setter Property="Background" Value="Beige" />
    <Setter Property="RenderTransform">
        <Setter.Value>
            <RotateTransform Angle="45" />
        </Setter.Value>
    </Setter>
</Style>

 <Button Content="btn1" />

样式具有继承机制

如果有不同类型的空间，希望共用一部分样式设置，可以通过BasedOn实现

<Window.Resources>
        <Style TargetType="{x:Type Control}">
            ...
        </Style>
        <Style BasedOn="{StaticResource {x:Type Control}}" TargetType="{x:Type Button}">
            ...
        </Style>
        <Style BasedOn="{StaticResource {x:Type Control}}" TargetType="{x:Type RadioButton}">
            ...
        </Style>
    </Window.Resources>

 触发器

 Style有一个Trigger集合，下面的例子是一个属性触发器

 <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Foreground" Value="Red"></Setter>
                </Trigger>
</Style.Triggers>

WPF有3中触发器

属性触发器，属性改变时执行触发器中的Setter集合

数据触发器，.net属性，不只依赖属性改变

事件触发器，触发路由事件时执行

 实现一个ListBox

<Page.Resources>
    <XmlDataProvider x:Key="InventoryData" XPath="Inventory/Book">
        <x:XData>
            <Inventory xmlns="">
                <Book>
                    <Chapter Number="1">
                        <Title>Chapter A</Title>
                    </Chapter>
                    <Chapter Number="2">
                        <Title>Chapter B</Title>
                    </Chapter>
                    <Chapter Number="3">
                        <Title>Chapter C</Title>
                    </Chapter>
                    <Chapter Number="4">
                        <Title>Chapter D</Title>
                    </Chapter>
                    <Chapter Number="5">
                        <Title>Chapter E</Title>
                    </Chapter>
                </Book>
            </Inventory>
        </x:XData>
    </XmlDataProvider>
</Page.Resources>
    <StackPanel Margin="20">
    <ListBox HorizontalAlignment="Center" Padding="2">
        <ListBox.ItemsSource>
            <Binding Source="{StaticResource InventoryData}" XPath="*" />
        </ListBox.ItemsSource>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <TextBlock FontSize="20" Margin="5">
                    <TextBlock.Text>
                        <Binding XPath="Title" />
                    </TextBlock.Text>
                </TextBlock>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</StackPanel>

 为ListBox添加一个从透明到清晰的动画，通过事件触发器实现

<ListBox.Triggers>
    <EventTrigger RoutedEvent="ListBox.Loaded">
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:5" />
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</ListBox.Triggers>

 根据Number属性设置颜色

<Style TargetType="{x:Type ListBoxItem}">
    <Setter Property="Margin" Value="2" />
    <Setter Property="Padding" Value="2" />
    <Style.Triggers>
        <DataTrigger Binding="{Binding XPath=@Number}" Value="3">
            <Setter Property="TextBlock.Foreground" Value="Red" />
        </DataTrigger>
        <DataTrigger Binding="{Binding XPath=@Number}" Value="4">
            <Setter Property="TextBlock.Foreground" Value="Blue" />
        </DataTrigger>
    </Style.Triggers>
</Style>

To be continue...