你的位置:首页 > ASP.net教程

[ASP.net教程]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>  <"InventoryData" XPath="Inventory/Book">    <x:XData>      <Inventory "">        <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>  </"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...