スポンサーサイト

--年--月--日
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ListBox で選択したアイテムの背景色を変更する方法

2012年02月05日
listbox_01.png 左のように、ListBox のアイテムを表示したい。

DataTemplate を使って、角丸矩形の背景に、テキストを複数行表示する。
選択したアイテムは、背景の色とテキストの色を変更する。
これをVisualStateManager の Selected 状態を使って実現する。
 

しかし、Blend でこの設定をすることができませんでした(実力不足?)。

結局、VisualStateManger (VSM)部分のスケルトンを Blend で作って、その部分を手書きで修正することにしました。

DataTemplate と Style の定義部分を以下に書きました。
注目点を赤くしてます。

最初は、DataTemplate に Border を追加して、角丸矩形を実現しようとしていましたが、VSM でBorder の色を変更する方法がわからなくてかなり悩みました。

結局、ずっとスタイルを眺めていたら、ListBoxItem を構成している一番外のコントロールが Borderであり、Style の Template にもBorder が含まれていたので、これを変えればよかったことに気がつきました。


-----------------------------------------------------------------------------------
<Style x:Key="ListBoxItemStyle2" TargetType="ListBoxItem">

<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="LayoutRoot" Margin="5" CornerRadius="15" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{StaticResource PhoneForegroundBrush}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0" Value="White"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{StaticResource PhoneBackgroundBrush}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate x:Key="DataTemplate1">
<StackPanel Margin="0">
<TextBlock Text="{Binding Title}" TextTrimming="WordEllipsis" FontWeight="Bold" Margin="5,5,5,0"/>
<TextBlock Text="{Binding SubTitle}" TextWrapping="Wrap" Margin="20,0,5,5"/>
</StackPanel>
</DataTemplate>
----------------------------------------------------------------------


ここまでできた後、Blend の VSM で見たら ベース時と Selected 時で希望通りの動きをしました。

listbox_03.pngimage

Blend のUI にもちゃんと反映されるんですね!
はじめからUI操作でこれを実現したかったのですが、どうすればできるんでしょう?

Comment

管理者のみに表示

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。