WPF TreeViewItem Фон - PullRequest
Новая
       31

WPF TreeViewItem Фон

2 голосов
/ 31 марта 2011

Как я могу изменить Background выбранного TreeViewItem, когда TreeView (или Приложение) теряет фокус. Выбранный элемент по умолчанию имеет в этой ситуации светло-серый фон.

РЕДАКТИРОВАТЬ: Попытка после первого ответа: Но элемент с TargetName="Bd" не будет найден. 

<TreeView>
        <TreeView.Resources>
            <Style x:Key="{x:Type TreeViewItem}" TargetType="{x:Type TreeViewItem}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TreeViewItem}">
                            <ControlTemplate.Triggers>
                                <MultiTrigger>
                                    <MultiTrigger.Conditions>
                                        <Condition Property="IsSelected" Value="True"/>
                                        <Condition Property="IsSelectionActive" Value="False"/>
                                    </MultiTrigger.Conditions>
                                    <Setter TargetName="Bd" Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
                                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
                                </MultiTrigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </TreeView.Resources>

        <TreeViewItem Header="Test1" IsExpanded="True">
            <TreeViewItem Header="Test2" />
            <TreeViewItem Header="Test3" />
            <TreeViewItem Header="Test4" />
            <TreeViewItem Header="Test5" />
        </TreeViewItem>
    </TreeView>

Ответы [ 3 ]

5 голосов
/ 31 марта 2011

Вам нужно изменить стиль по умолчанию для TreeViewItem. В частности, вам нужно изменить следующий триггер: 

<Style x:Key="{x:Type TreeViewItem}"
       TargetType="{x:Type TreeViewItem}">
    ...
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TreeViewItem}">
                ...
                <ControlTemplate.Triggers>
                    ...
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected"
                                       Value="true"/>
                            <Condition Property="IsSelectionActive"
                                       Value="false"/>
                        </MultiTrigger.Conditions>
                        <Setter TargetName="Bd"
                                Property="Background"
                                Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                        <Setter Property="Foreground"
                                Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                    </MultiTrigger>
                    ...
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    ...
</Style>

Как видите, триггер устанавливает фон на {DynamicResource {x:Static SystemColors.ControlBrushKey}}, если элемент находится в фокусе, а выделение не активно (фокус находится где-то еще).

Обновление:

Полный стиль TreeViewItem для темы Aero выглядит следующим образом: 

<Style x:Key="{x:Type TreeViewItem}"
       TargetType="{x:Type TreeViewItem}">
    <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="1,0,0,0"/>
    <Setter Property="Foreground"
            Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="FocusVisualStyle"
            Value="{StaticResource TreeViewItemFocusVisual}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TreeViewItem}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition MinWidth="19"
                                          Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <ToggleButton x:Name="Expander"
                                  Style="{StaticResource ExpandCollapseToggleStyle}"
                                  IsChecked="{Binding Path=IsExpanded,RelativeSource={RelativeSource TemplatedParent}}"
                                  ClickMode="Press"/>
                    <Border Name="Bd"
                            Grid.Column="1"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Padding="{TemplateBinding Padding}"
                            SnapsToDevicePixels="true">
                        <ContentPresenter x:Name="PART_Header"
                                          ContentSource="Header"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Border>
                    <ItemsPresenter x:Name="ItemsHost"
                                    Grid.Row="1"
                                    Grid.Column="1"
                                    Grid.ColumnSpan="2"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsExpanded"
                             Value="false">
                        <Setter TargetName="ItemsHost"
                                Property="Visibility"
                                Value="Collapsed"/>
                    </Trigger>
                    <Trigger Property="HasItems"
                             Value="false">
                        <Setter TargetName="Expander"
                                Property="Visibility"
                                Value="Hidden"/>
                    </Trigger>
                    <Trigger Property="IsSelected"
                             Value="true">
                        <Setter TargetName="Bd"
                                Property="Background"
                                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="IsSelectionActive"
                                       Value="false"/>
                        </MultiTrigger.Conditions>
                        <Setter TargetName="Bd"
                                Property="Background"
                                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.Triggers>
    <Trigger Property="VirtualizingStackPanel.IsVirtualizing"
             Value="true">
      <Setter Property="ItemsPanel">
        <Setter.Value>
          <ItemsPanelTemplate>
            <VirtualizingStackPanel/>
          </ItemsPanelTemplate>
        </Setter.Value>
      </Setter>
    </Trigger>
  </Style.Triggers>
</Style>

Для этого вам также понадобится: 

<PathGeometry x:Key="TreeArrow">
    <PathGeometry.Figures>
        <PathFigureCollection>
            <PathFigure IsFilled="True"
                        StartPoint="0 0"
                        IsClosed="True">
                <PathFigure.Segments>
                    <PathSegmentCollection>
                        <LineSegment Point="0 6"/>
                        <LineSegment Point="6 0"/>
                    </PathSegmentCollection>
                </PathFigure.Segments>
            </PathFigure>
        </PathFigureCollection>
    </PathGeometry.Figures>
</PathGeometry>

<Style x:Key="ExpandCollapseToggleStyle"
       TargetType="{x:Type ToggleButton}">
    <Setter Property="Focusable"
            Value="False"/>
    <Setter Property="Width"
            Value="16"/>
    <Setter Property="Height"
            Value="16"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Border Width="16"
                        Height="16"
                        Background="Transparent"
                        Padding="5,5,5,5">
                    <Path x:Name="ExpandPath"
                          Fill="Transparent"
                          Stroke="#FF989898"
                          Data="{StaticResource TreeArrow}">
                        <Path.RenderTransform>
                            <RotateTransform Angle="135"
                                             CenterX="3"
                                             CenterY="3"/>
                        </Path.RenderTransform>
                    </Path>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver"
                             Value="True">
                        <Setter TargetName="ExpandPath"
                                Property="Stroke"
                                Value="#FF1BBBFA"/>
                        <Setter TargetName="ExpandPath"
                                Property="Fill"
                                Value="Transparent"/>
                    </Trigger>

                    <Trigger Property="IsChecked"
                             Value="True">
                        <Setter TargetName="ExpandPath"
                                Property="RenderTransform">
                            <Setter.Value>
                                <RotateTransform Angle="180"
                                                 CenterX="3"
                                                 CenterY="3"/>
                            </Setter.Value>
                        </Setter>
                        <Setter TargetName="ExpandPath"
                                Property="Fill"
                                Value="#FF595959"/>
                        <Setter TargetName="ExpandPath"
                                Property="Stroke"
                                Value="#FF262626"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Во всем этом вам нужно изменить только ту часть, которая вас интересует (цвет фона, если выделение неактивно), и поместить эти стили в раздел ресурсов в App.xaml в главном окне.

3 голосов
/ 15 февраля 2012

Более простой способ для вашего конкретного случая существует.Как и в ListBox, вы можете заменить ресурс ControlBrush для TreeViewItem, используя стиль: 

<Style TargetType="TreeViewItem">
    <Style.Resources>
        <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="{x:Static SystemColors.HighlightColor}" Opacity=".4" />
    </Style.Resources>
</Style>

Вы можете указать любой другой цвет.Непрозрачность рекомендуется, потому что, если у вас есть несколько TreeView / ListBox, вы можете определить, какой из них будет сфокусирован.Но, конечно, редактирование полного стиля может принести вам гораздо больше гибкости для будущих настроек.

Образец с градиентами: 

<Style TargetType="TreeViewItem">
    <Style.Resources>
        <LinearGradientBrush x:Key="{x:Static SystemColors.ControlBrushKey}" EndPoint='0 1'>
            <GradientStop Color='#AA00FF00' />
            <GradientStop Offset='1' Color='#AA007700' />
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" EndPoint='0 1'>
            <GradientStop Color='#AA00FF00' />
            <GradientStop Offset='1' Color='#AA007700' />
        </LinearGradientBrush>
    </Style.Resources>
</Style>
1 голос
/ 29 февраля 2016

Если вы не хотите переопределять шаблон элемента управления по умолчанию, вы можете определить свой собственный шаблон для заголовков с помощью текстового блока и применить стиль в этом шаблоне к самому текстовому блоку (в шаблоне элемента управления по умолчанию TreeViewItem есть небольшой отступ) , так что вы должны также установить его на ноль, чтобы достичь пиксельного совершенства). 

<TreeView.Resources>
    <Style TargetType="TreeViewItem">
        <Setter Property="Padding" Value="0"/>
        <Setter Property="HeaderTemplate">
            <Setter.Value>
                <DataTemplate>
                    <DataTemplate.Resources>
                        <Style TargetType="TextBlock">
                            <Style.Triggers>
                                <MultiDataTrigger>
                                    <MultiDataTrigger.Conditions>
                                        <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TreeViewItem}}" Value="True"/>
                                        <Condition Binding="{Binding IsSelectionActive, RelativeSource={RelativeSource AncestorType=TreeViewItem}}" Value="False"/>
                                    </MultiDataTrigger.Conditions>
                                    <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
                                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
                                </MultiDataTrigger>
                            </Style.Triggers>
                        </Style>
                    </DataTemplate.Resources>
                    <TextBlock Text="{Binding}"></TextBlock>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</TreeView.Resources>

<TreeViewItem Header="Test1" IsExpanded="True">
    <TreeViewItem Header="Test2" />
    <TreeViewItem Header="Test3" />
    <TreeViewItem Header="Test4" />
    <TreeViewItem Header="Test5" />
</TreeViewItem>

...