开发者

DataTemplate, Style, Triggers

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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜