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>
選択すると背景色がビヨンと伸びて字が赤色になって、選択がはずれるとシュンと縮みます。