SilverLight 样式与模板

1. ContentPresenter 与ItemsPresenter

<Style TargetType="HeaderedItemsControl">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type HeaderedItemsControl}">
        <StackPanel>
          <Grid>
            <Rectangle Fill="{TemplateBinding Background}"/>
            <ContentPresenter ContentSource="Header"/>
          </Grid>
          <Grid>
            <Rectangle Stroke="{TemplateBinding BorderBrush}"/>
            <ItemsPresenter Margin="2,0,0,0"/>
          </Grid>
        </StackPanel>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

1. ItemsPanelTemplate

<Style TargetType="ListBox">
    <Setter Property="ItemsPanel">
      <Setter.Value>
        <ItemsPanelTemplate>
          <StackPanel Orientation="Horizontal"
                      VerticalAlignment="Center"
                      HorizontalAlignment="Center"/>
        </ItemsPanelTemplate>
      </Setter.Value>
    </Setter>
  </Style>

1. DataTemplate

Style Resource 定义:

<DataTemplate x:Key="myTaskTemplate">
  <StackPanel>
    <TextBlock Text="{Binding Path=TaskName}" />
    <TextBlock Text="{Binding Path=Description}"/>
    <TextBlock Text="{Binding Path=Priority}"/>
  </StackPanel>
</DataTemplate>

使用：

<ListBox Width="400" Margin="10"
         ItemsSource="{Binding Source={StaticResource myTodoList}}"
         ItemTemplate="{StaticResource myTaskTemplate}"/>

二、进阶

1.Trigger & EventTrigger

<Style TargetType="ListBoxItem">
  <Setter Property="Opacity" Value="0.5" />
  <Setter Property="MaxHeight" Value="75" />
  <Style.Triggers>
    <Trigger Property="IsSelected" Value="True">
        <Setter Property="Opacity" Value="1.0" />
    </Trigger>


...


  </Style.Triggers>
</Style>

<Style TargetType="Rectangle">
  <Setter Property="Width" Value="50" />
  <Setter Property="Height" Value="50" />
  <Setter Property="Margin" Value="20" />
  <Setter Property="HorizontalAlignment" Value="Left" />
  <Style.Triggers>
    <EventTrigger RoutedEvent="MouseEnter">
        <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation To="300" Duration="0:0:1.5"
                AccelerationRatio="0.10" DecelerationRatio="0.25"
                Storyboard.TargetProperty="(Canvas.Width)" />
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
    <EventTrigger RoutedEvent="MouseLeave">
        <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation Duration="0:0:1.5"
                AccelerationRatio="0.10" DecelerationRatio="0.25"
                Storyboard.TargetProperty="(Canvas.Width)" />
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
  </Style.Triggers>
</Style>

2.VisualStateManager

<ControlTemplate TargetType="Button"
                 xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">
  <Grid >
    <vsm:VisualStateManager.VisualStateGroups>
      <vsm:VisualStateGroup x:Name="CommonStates">

        <vsm:VisualStateGroup.Transitions>

          <!--Take one half second to trasition to the MouseOver state.-->
          <vsm:VisualTransition To="MouseOver"
                              GeneratedDuration="0:0:0.5"/>
        </vsm:VisualStateGroup.Transitions>

        <vsm:VisualState x:Name="Normal" />

        <!--Change the SolidColorBrush, ButtonBrush, to red when the
            mouse is over the button.-->
        <vsm:VisualState x:Name="MouseOver">
          <Storyboard>
            <ColorAnimation Storyboard.TargetName="ButtonBrush"
                            Storyboard.TargetProperty="Color" To="Red" />
          </Storyboard>
        </vsm:VisualState>
      </vsm:VisualStateGroup>
    </vsm:VisualStateManager.VisualStateGroups>
    <Grid.Background>
      <SolidColorBrush x:Name="ButtonBrush" Color="Green"/>
    </Grid.Background>
  </Grid>
</ControlTemplate>