I have a <ListBox>
with custom <ListBox.ItemTemplate>
and <DataTemplate>
in it:
<ListBox>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="2" CornerRadius="5">
开发者_如何学编程 <Image Source="{Binding Picture}" />
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Now when I'm choosing the ListBoxItem
it gets ugly with blue colored row selection. I'd like to change it. I want to color only border's background and nothing else. Also I want to change MouseOver
behavior. I've tried trough triggers, but ContentPresenter
doesn't have Background property.
UPD:
Well, I've managed to change the background on MouseEnter
and MouseLeave
:
<EventTrigger RoutedEvent="Border.MouseEnter">
<BeginStoryboard>
<Storyboard >
<ColorAnimation Storyboard.TargetProperty="Background.Color"
To="LightBlue" Duration="0:0:0.03"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
But still can't change the Background
when item's selected. I'm trying through:
<Trigger Property="ListBoxItem.IsSelected" Value="True">
<Setter Property="Background" Value="Red" />
</Trigger>
Doesn't work
The coloring you're looking for is in two Triggers inside the template for ListBoxItem, not the ItemTemplate. To change this you need to edit the ItemContainerStyle for the ListBox. This is the default that can be used as a starting point:
<ListBox>
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="HorizontalContentAlignment" Value="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="VerticalContentAlignment" Value="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Padding" Value="2,0,0,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="Bd" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="Selector.IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
You can do this by using triggers. I have in one of my projects something like this:
<Trigger Property="IsSelected" Value="true">
<Setter Property="Panel.ZIndex" Value="1"/>
<Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemSelectedBackground}"/>
</Trigger>
Though it doesn't change Border color, it shows how to change the Background. So, maybe try to set this to null. This triggers are part of a custom Style in which a tracking is achieved using IsMouseOver property.
HTH
精彩评论