読者です 読者をやめる 読者になる 読者になる

ListBoxItem を選択したときの背景

ここ最近 WPF を触っております。たぶん ListBox とかなりお友達になっていきそうな感じがしてます。
でも、通常の ListBox ではお友達になれません。なんせ背景色が青ですから。べたっと青ですから。

ということで、勉強がてら背景色を設定してみました。もっといい書き方があるかもしれませんが。

<ListBox x:Name="listBox" Grid.Row="1">
 <sys:String>ほげ1</sys:String>
 <sys:String>ほげ2</sys:String>
 <sys:String>ほげ3</sys:String>
 <sys:String>ほげ4</sys:String>
 <sys:String>ほげ5</sys:String>
 <ListBox.Resources>
  <Style TargetType="{x:Type ListBoxItem}">
   <Setter Property="FocusVisualStyle" Value="{x:Null}" />
   <Setter Property="Template">
    <Setter.Value>
     <ControlTemplate TargetType="{x:Type ListBoxItem}">
      <Grid x:Name="itemContentGrid">
       <Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
        x:Name="itemContentBackground">
        <Rectangle.RenderTransform>
         <ScaleTransform ScaleX="0" />
        </Rectangle.RenderTransform>
        <Rectangle.Fill>
         <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5" >
          <GradientStop Color="#FFFFFFFF" Offset="0"/>
          <GradientStop Color="#00FFFFFF" Offset="1"/>
         </LinearGradientBrush>
        </Rectangle.Fill>
       </Rectangle>
       <TextBlock Foreground="#FFFFFFFF" x:Name="itemContentText">
        <ContentPresenter />
       </TextBlock>
      </Grid>
      <ControlTemplate.Triggers>
       <EventTrigger RoutedEvent="Selector.Selected">
        <BeginStoryboard>
         <Storyboard Storyboard.TargetName="itemContentBackground">
          <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)" To="1" Duration="0:0:0.2" />
          <PointAnimation Storyboard.TargetProperty="RenderTransformOrigin" To="0,0.5" Duration="0:0:0" />
         </Storyboard>
        </BeginStoryboard>
       </EventTrigger>
       <EventTrigger RoutedEvent="Selector.Unselected">
        <BeginStoryboard>
         <Storyboard Storyboard.TargetName="itemContentBackground">
          <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)" To="0" Duration="0:0:0.2" />
          <PointAnimation Storyboard.TargetProperty="RenderTransformOrigin" To="0,0.5" Duration="0:0:0" />
         </Storyboard>
        </BeginStoryboard>
       </EventTrigger>
       <Trigger Property="IsSelected" Value="true">
        <Setter TargetName="itemContentText" Property="Foreground" Value="#FFFF0000" />
       </Trigger>
      </ControlTemplate.Triggers>
     </ControlTemplate>
    </Setter.Value>
   </Setter>
  </Style>
 </ListBox.Resources>
 <ListBox.Background>
  <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
   <GradientStop Color="#FF000000" Offset="0"/>
   <GradientStop Color="#FF999999" Offset="1"/>
  </LinearGradientBrush>
 </ListBox.Background>
</ListBox>

見た目は以下のような感じ。

選択すると背景色がビヨンと伸びて字が赤色になって、選択がはずれるとシュンと縮みます。