更改WPF treeViewItem選擇背景顏色，但失去焦點

Question

我想改變TreeViewItem背景顏色，當它選擇，但失去了重點。 我看到像一些類似的問題： WPF TreeViewItem Background ，但我不能用它......

這裏是我的樹視圖XAML代碼：

>  <UserControl x:Class="Ednfi.Setup.Presentation.Views.TreeViewViews.StationTree" 
> xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
> xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
> xmlns:behaviour="clr-namespace:Ednfi.Setup.Presentation.Extensions;assembly=Ednfi.Setup.Presentation" 
> xmlns:nodes="clr-namespace:Ednfi.Setup.Presentation.ViewModels.TreeViewViewModels.Nodes" 
> mc:Ignorable="d" 
> xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
> xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
> d:DesignHeight="226" d:DesignWidth="227" 
> xmlns:ml="clr-namespace:Ednfi.Setup.Presentation.ml_resources"> 
>   <TreeView Margin="10 0 10 20" ItemsSource="{Binding Path=Root.Children}" VirtualizingStackPanel.IsVirtualizing="True" 
> VirtualizingStackPanel.VirtualizationMode="Recycling"> 
>  
>  
>    <TreeView.ItemContainerStyle> 
>     <Style TargetType="{x:Type TreeViewItem}"> 
>      <Setter Property="IsSelected" Value="{Binding Path=IsSelected, Mode=TwoWay}"/> 
>      <Setter Property="IsExpanded" Value="{Binding Path=IsExpanded, Mode=TwoWay}" /> 
>     </Style> 
>    </TreeView.ItemContainerStyle> 
>    <TreeView.Resources> 
>     <Style 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="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" /> 
>      <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" /> 
>      <Setter Property="behaviour:TreeViewItemBehavior.IsBroughtIntoViewWhenSelected" 
> Value="True" /> 
>      <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" IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource 
> TemplatedParent}}" ClickMode="Press" /> 
>          <Border Grid.Column="1" x:Name="Selection_Border" Background="{TemplateBinding Background}" 
> BorderBrush="{TemplateBinding BorderBrush}" 
> BorderThickness="{TemplateBinding BorderThickness}" 
> Padding="{TemplateBinding Padding}"> 
>           <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
> x:Name="PART_Header" ContentSource="Header" /> 
>          </Border> 
>          <ItemsPresenter Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" x:Name="ItemsHost" /> 
>         </Grid> 
>         <ControlTemplate.Triggers> 
>          <Trigger Property="IsExpanded" Value="false"> 
>           <Setter Property="Visibility" Value="Collapsed" TargetName="ItemsHost" /> 
>          </Trigger> 
>          <Trigger Property="HasItems" Value="false"> 
>           <Setter Property="Visibility" Value="Hidden" TargetName="Expander" /> 
>          </Trigger> 
>          <Trigger Property="IsSelected" Value="true"> 
>           <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" 
> TargetName="Selection_Border" /> 
>           <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 Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" 
> TargetName="Selection_Border" />          
>           <Setter Property="Foreground" Value="{DynamicResource {x:Static 
> SystemColors.HighlightTextBrushKey}}" /> 
>          </MultiTrigger> 
>          <Trigger Property="IsEnabled" Value="false"> 
>           <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" /> 
>          </Trigger> 
>         </ControlTemplate.Triggers> 
>        </ControlTemplate> 
>       </Setter.Value> 
>      </Setter> 
>     </Style> 
>     <!-- Style for the ToggleButton control used to expand/collapse a TreeViewItem control --> 
>     <Style TargetType="{x:Type ToggleButton}"> 
>      <Setter Property="Focusable" Value="False" /> 
>      <Setter Property="Width" Value="19" /> 
>      <Setter Property="Height" Value="13" /> 
>      <Setter Property="Template"> 
>       <Setter.Value> 
>        <ControlTemplate TargetType="{x:Type ToggleButton}"> 
>         <Border Width="19" Height="13" Background="#00FFFFFF" x:Name="Border"> 
>          <Border Width="9" Height="9" x:Name="Border1" SnapsToDevicePixels="True" BorderBrush="#FF9495A2" 
> BorderThickness="1,1,1,1" CornerRadius="1,1,1,1"> 
>           <Border.Background> 
>            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> 
>             <GradientStop Color="#FFFFFFFF" Offset="0.4" /> 
>             <GradientStop Color="#FFC6CEDA" Offset="1" /> 
>            </LinearGradientBrush> 
>           </Border.Background> 
>           <Path Fill="#FF000000" Margin="1,1,1,1" x:Name="ExpandPath" Data="M0,2L0,3 2,3 2,5 3,5 3,3 
> 5,3 5,2 3,2 3,0 2,0 2,2z" /> 
>          </Border> 
>         </Border> 
>         <ControlTemplate.Triggers> 
>          <Trigger Property="IsChecked" Value="True"> 
>           <Setter Property="Data" Value="M0,2L0,3 5,3 5,2z" TargetName="ExpandPath" /> 
>          </Trigger> 
>         </ControlTemplate.Triggers> 
>        </ControlTemplate> 
>       </Setter.Value> 
>      </Setter> 
>     </Style> 
>     <DataTemplate DataType="{x:Type nodes:MonitorNode}"> 
>      <StackPanel Orientation="Horizontal" Margin="0 2 0 0"> 
>       <Image Source="{Binding ImageSource}" Width="16" Height="16" Margin="0 0 3 0" /> 
>       <TextBlock Text="{x:Static ml:MultiLang._157}" x:Name="ML_0048" /> 
>       <TextBlock Text="{Binding ID}" /> 
>       <TextBlock Text="{x:Static ml:MultiLang._158}" x:Name="ML_0050" /> 
>       <TextBlock Text="{Binding Name}" /> 
>      </StackPanel> 
>     </DataTemplate> 
>     <HierarchicalDataTemplate DataType="{x:Type nodes:StationNode}" ItemsSource="{Binding Children}"> 
>      <StackPanel Orientation="Horizontal" Margin="0 2 0 0"> 
>       <StackPanel.ContextMenu> 
>        <ContextMenu HasDropShadow="True"> 
>         <MenuItem Header="{x:Static ml:MultiLang._160}" Command="{Binding CopyMonitorsCommand}" 
> x:Name="ML_0055" /> 
>         <MenuItem Header="{x:Static ml:MultiLang._159}" Command="{Binding PasteMonitorsCommand}" 
> x:Name="ML_0056" /> 
>         <MenuItem Header="{x:Static ml:MultiLang._162}" Command="{Binding CopyStationsCommand}" 
> x:Name="ML_0057" /> 
>         <MenuItem Header="{x:Static ml:MultiLang._161}" Command="{Binding PasteStationsCommand}" 
> x:Name="ML_0058" /> 
>        </ContextMenu> 
>       </StackPanel.ContextMenu> 
>       <Image Source="{Binding ImageSource}" Width="16" Height="16" Margin="0 0 3 0" /> 
>       <TextBlock Text="{x:Static ml:MultiLang._157}" x:Name="ML_0060" /> 
>       <TextBlock Text="{Binding ID}" /> 
>       <TextBlock Text="{x:Static ml:MultiLang._158}" x:Name="ML_0062" /> 
>       <TextBlock Text="{Binding Name}" /> 
>      </StackPanel> 
>     </HierarchicalDataTemplate> 
>     <HierarchicalDataTemplate DataType="{x:Type nodes:FilteringNode}" ItemsSource="{Binding Children}"> 
>      <StackPanel Orientation="Horizontal" Margin="0 2 0 0"> 
>       <Image Source="{Binding ImageSource}" Width="16" Height="16" Margin="0 0 3 0" /> 
>       <TextBlock Text="{Binding Name}" /> 
>      </StackPanel> 
>     </HierarchicalDataTemplate> 
>    </TreeView.Resources> 
>   </TreeView> 
>  </UserControl> 

目前backgroung顏色看起來是這樣的選擇時：

Pictur

當選擇，但失去焦點的背景顏色是：

Pictur

我只想讓它保持藍色！ 謝謝你的幫助。

Answer 1

在TreeViewItem默認模板，有MultiDataTrigger其顏色設置爲ControlBrushKey當產品沒有焦點，你可以在你的TreeView資源覆蓋是這樣的：

<TreeView.ItemContainerStyle> 
    <Style TargetType="{x:Type TreeViewItem}"> 
     <Style.Resources> 
     <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" 
         Color="#FF3399FF"/> 
     </Style.Resources> 
     ... 
    </Style> 
<TreeView.ItemContainerStyle> 

那麼就沒有必要重寫TreeViewItem的ControlTemplate。

但是，它也將treeViewItem的文本設置爲默認爲黑色的ControlTextBrushKey。因此，只有ControlBrushKey重寫，你會得到像這樣的工作：

沒有焦點：

重點

正如你所看到的筆刷被正確覆蓋，但如果您覆蓋ControlTextBrushKey和將它設置爲白色而不是treeView Item將不可見，因爲controlTextBrush將被設置爲白色。

---

但是，如果你想樹型視圖的完全一樣看上去像是有焦點時，您必須覆蓋控制模板，並刪除MultiDataTrigger從默認模板。

默認模板將是這樣的：

<TreeView> 
     <TreeView.ItemContainerStyle> 
      <Style TargetType="TreeViewItem"> 
       <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate TargetType="TreeViewItem"> 
          <Grid> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="Auto" MinWidth="19" /> 
            <ColumnDefinition Width="Auto" /> 
            <ColumnDefinition Width="*" /> 
           </Grid.ColumnDefinitions> 
           <Grid.RowDefinitions> 
            <RowDefinition Height="Auto" /> 
            <RowDefinition/> 
           </Grid.RowDefinitions> 
           <ToggleButton IsChecked="False" 
               ClickMode="Press" 
               Name="Expander"> 
            <ToggleButton.Style> 
             <Style TargetType="ToggleButton"> 
              <Style.Resources> 
               <ResourceDictionary /> 
              </Style.Resources> 
              <Setter Property="UIElement.Focusable" Value="False"/> 
              <Setter Property="FrameworkElement.Width" Value="16"/> 
              <Setter Property="FrameworkElement.Height" Value="16"/> 
              <Setter Property="Control.Template"> 
               <Setter.Value> 
                <ControlTemplate TargetType="ToggleButton"> 
                 <Border Padding="5,5,5,5" 
                   Background="#00FFFFFF" 
                   Width="16" 
                   Height="16"> 
                  <Path Fill="#FFFFFFFF" 
                    Stroke="#FF818181" 
                    Name="ExpandPath"> 
                   <Path.Data> 
                    <PathGeometry Figures="M0,0L0,6L6,0z" /> 
                   </Path.Data> 
                   <Path.RenderTransform> 
                    <RotateTransform Angle="135" CenterX="3" CenterY="3" /> 
                   </Path.RenderTransform> 
                  </Path> 
                 </Border> 
                 <ControlTemplate.Triggers> 
                  <Trigger Property="ToggleButton.IsChecked" Value="True"> 
                   <Setter Property="UIElement.RenderTransform" TargetName="ExpandPath"> 
                    <Setter.Value> 
                     <RotateTransform Angle="180" CenterX="3" CenterY="3" /> 
                    </Setter.Value> 
                   </Setter> 
                   <Setter Property="Shape.Fill" TargetName="ExpandPath"> 
                    <Setter.Value> 
                     <SolidColorBrush>#FF595959</SolidColorBrush> 
                    </Setter.Value> 
                   </Setter> 
                   <Setter Property="Shape.Stroke" TargetName="ExpandPath"> 
                    <Setter.Value> 
                     <SolidColorBrush>#FF262626</SolidColorBrush> 
                    </Setter.Value> 
                   </Setter> 
                  </Trigger> 
                  <Trigger Property="UIElement.IsMouseOver" Value="True"> 
                   <Setter Property="Shape.Stroke" TargetName="ExpandPath"> 
                    <Setter.Value> 
                     <SolidColorBrush>#FF27C7F7</SolidColorBrush> 
                    </Setter.Value> 
                   </Setter> 
                   <Setter Property="Shape.Fill" TargetName="ExpandPath"> 
                    <Setter.Value> 
                     <SolidColorBrush>#FFCCEEFB</SolidColorBrush> 
                    </Setter.Value> 
                   </Setter> 
                  </Trigger> 
                  <MultiTrigger> 
                   <MultiTrigger.Conditions> 
                    <Condition Property="UIElement.IsMouseOver" Value="True"/> 
                    <Condition Property="ToggleButton.IsChecked" Value="True"/> 
                   </MultiTrigger.Conditions> 
                   <Setter Property="Shape.Stroke" TargetName="ExpandPath"> 
                    <Setter.Value> 
                     <SolidColorBrush>#FF1CC4F7</SolidColorBrush> 
                    </Setter.Value> 
                   </Setter> 
                   <Setter Property="Shape.Fill" TargetName="ExpandPath"> 
                    <Setter.Value> 
                     <SolidColorBrush>#FF82DFFB</SolidColorBrush> 
                    </Setter.Value> 
                   </Setter> 
                  </MultiTrigger> 
                 </ControlTemplate.Triggers> 
                </ControlTemplate> 
               </Setter.Value> 
              </Setter> 
             </Style> 
            </ToggleButton.Style> 
           </ToggleButton> 
           <Border BorderThickness="{TemplateBinding Border.BorderThickness}" 
             Padding="{TemplateBinding Control.Padding}" 
             BorderBrush="{TemplateBinding Border.BorderBrush}" 
             Background="{TemplateBinding Panel.Background}" 
             Name="Bd" 
             SnapsToDevicePixels="True" 
             Grid.Column="1"> 
            <ContentPresenter Content="{TemplateBinding HeaderedContentControl.Header}" 
                 ContentTemplate="{TemplateBinding HeaderedContentControl.HeaderTemplate}" 
                 ContentStringFormat="{TemplateBinding HeaderedItemsControl.HeaderStringFormat}" 
                 ContentSource="Header" 
                 Name="PART_Header" 
                 HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}" 
                 SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" /> 
           </Border> 
           <ItemsPresenter Name="ItemsHost" 
               Grid.Column="1" 
               Grid.Row="1" 
               Grid.ColumnSpan="2" /> 
          </Grid> 
          <ControlTemplate.Triggers> 
           <Trigger Property="TreeViewItem.IsExpanded" Value="False"> 
            <Setter Property="UIElement.Visibility" TargetName="ItemsHost" Value="Collapsed"/> 
           </Trigger> 
           <Trigger Property="ItemsControl.HasItems" Value="False"> 
            <Setter Property="UIElement.Visibility" TargetName="Expander" Value="Hidden"/> 
           </Trigger> 
           <Trigger Property="TreeViewItem.IsSelected" Value="True"> 
            <Setter Property="Panel.Background" TargetName="Bd"> 
             <Setter.Value> 
              <DynamicResource ResourceKey="{x:Static SystemColors.HighlightBrushKey}" /> 
             </Setter.Value> 
            </Setter> 
            <Setter Property="TextElement.Foreground"> 
             <Setter.Value> 
              <DynamicResource ResourceKey="{x:Static SystemColors.HighlightTextBrushKey}" /> 
             </Setter.Value> 
            </Setter> 
           </Trigger> 
           <Trigger Property="UIElement.IsEnabled" Value="False"> 
            <Setter Property="TextElement.Foreground"> 
             <Setter.Value> 
              <DynamicResource ResourceKey="{x:Static SystemColors.GrayTextBrushKey}" /> 
             </Setter.Value> 
            </Setter> 
           </Trigger> 
          </ControlTemplate.Triggers> 
         </ControlTemplate> 
        </Setter.Value> 
       </Setter> 
      </Style> 
     </TreeView.ItemContainerStyle> 
     <TreeViewItem Header="Item1"/> 
     <TreeViewItem Header="Item2"/> 
    </TreeView> 

Answer 2

在參照本其他post，該ControlBrushKey並沒有爲我工作。然而，InactiveSelectionHighlightBrushKey沒有。同時設置InactiveSelectionHighlightTextBrushKey解決了不斷變化的文本顏色。

我的完整的解決方案：

<TreeView.Resources> 
    <!-- Style the inactive selection the same as active --> 
    <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" 
        Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}" /> 
    <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}" 
        Color="{DynamicResource {x:Static SystemColors.HighlightTextColorKey}}"/> 
</TreeView.Resources>