WPF TreeViewItem樣式

Question

我正在編寫一些代碼，以維護對象的層次結構，並使用WPF TreeView既顯示層次結構的可視化表示形式，又允許對對象進行CRUD操作。

在我的樹狀視圖中，我創建了觸發CRUD命令的按鈕，但是為了減少視覺混亂，我只希望當用戶將鼠標移到樹中的某個項目上時，該特定項目的按鈕才可見。 我想做的是將treeviewitem的IsMouseOver屬性連接到包含按鈕的擴展面板的可見性。 這可能嗎？ 因為我毫無結果地搜尋，卻一無所獲...

<HierarchicalDataTemplate x:Key="treeViewTemplate" 
                          ItemsSource="{Binding Children}">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Column="0" Text="{Binding Name}"/>                
            <DockPanel Grid.Column="1">
                <Button DockPanel.Dock="Right" Content="..."/>
                <Button DockPanel.Dock="Right" Content="+"/>
                <Button DockPanel.Dock="Right" Content="x"/>
            </DockPanel>
        </Grid>
 </HierarchicalDataTemplate>`

我嘗試了以下DataTrigger方法，但是它什么也沒做...（？）

<HierarchicalDataTemplate x:Key="treeViewTemplate" ItemsSource="{Binding Children}">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Column="0" Text="{Binding Name}"/>                
            <DockPanel Grid.Column="1">
                <DockPanel.Style>
                    <Style TargetType="{x:Type DockPanel}">
                        <Setter Property="Visibility" Value="Collapsed"/>
                        <Style.Triggers>
                           <DataTrigger Binding="{Binding IsMouseOver,
                                        RelativeSource={RelativeSource AncestorType=TreeViewItem}}"
                                        Value="True">
                                <Setter Property="Visibility" Value="Visible"/>
                           </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </DockPanel.Style>
                <Button DockPanel.Dock="Right" Content="..."/>
                <Button DockPanel.Dock="Right" Content="+"/>
                <Button DockPanel.Dock="Right" Content="x"/>
            </DockPanel>
        </Grid>
    </HierarchicalDataTemplate>

最終，經過反復的摸索和更多的搜索之后，我有了一個樹視圖，它可以滿足我的要求。 還沒有機會使它變得純正，但這是標記：

<Window x:Class="WPFTest.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WPFTest"
Title="Window1" Height="300" Width="300">
<Window.Resources>
    <!-- Data Template for TreeViewItems -->
    <BooleanToVisibilityConverter x:Key="boolToVis"/>

    <HierarchicalDataTemplate x:Key="treeViewTemplate" ItemsSource="{Binding Children}">
        <Grid HorizontalAlignment="Stretch">
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Column="0" Text="{Binding Name}" HorizontalAlignment="Left" Height="25" Margin="5" VerticalAlignment="Center"/>                
        </Grid>
    </HierarchicalDataTemplate>

    <!-- Style for the TreeViewItems -->
    <SolidColorBrush x:Key="GlyphBrush" Color="#444" />
    <Style x:Key="ExpandCollapseToggleStyle" TargetType="ToggleButton">
        <Setter Property="Focusable" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid
      Width="15"
      Height="13"
      Background="Transparent">
                        <Path x:Name="ExpandPath"
        HorizontalAlignment="Left" 
        VerticalAlignment="Center" 
        Margin="1,1,1,1"
        Fill="{StaticResource GlyphBrush}"
        Data="M 4 0 L 8 4 L 4 8 Z"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked"
           Value="True">
                            <Setter Property="Data"
            TargetName="ExpandPath"
            Value="M 0 4 L 8 4 L 4 8 Z"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="TreeViewItemFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Border>
                        <Rectangle Margin="0,0,0,0" StrokeThickness="5" Stroke="Black" StrokeDashArray="1 2" Opacity="0"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="treeViewItemStyle"
 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="*"/>
                        </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"/>
                        <Grid Name="PART_ItemGrid" Grid.Column="1" HorizontalAlignment="Stretch" Background="Transparent">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <ContentPresenter Grid.Column="0" x:Name="PART_Header"
                                ContentSource="Header"
                                HorizontalAlignment="Stretch"/>
                            <DockPanel Grid.Column="1" x:Name="PART_DockPanel" Visibility="Hidden">
                                <Button Content="..." DockPanel.Dock="Right"
                                        Visibility="{Binding Path=DataContext.CanEdit,
                                        Converter={StaticResource boolToVis},
                                        RelativeSource={RelativeSource TemplatedParent}}"/>
                                <Button Content="+" DockPanel.Dock="Right"
                                        Visibility="{Binding Path=DataContext.CanAddChild,
                                        Converter={StaticResource boolToVis},
                                        RelativeSource={RelativeSource TemplatedParent}}"/>
                                <Button Content="x" DockPanel.Dock="Right"
                                        Visibility="{Binding Path=DataContext.CanDelete,
                                        Converter={StaticResource boolToVis},
                                        RelativeSource={RelativeSource TemplatedParent}}"/>
                            </DockPanel>
                        </Grid>                          
                        <ItemsPresenter x:Name="ItemsHost" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger SourceName="PART_ItemGrid" Property="IsMouseOver" Value="True">
                            <Setter TargetName="PART_DockPanel" Property="Visibility" Value="Visible"/>
                        </Trigger>
                        <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>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="HasHeader" Value="false"/>
                                <Condition Property="Width" Value="Auto"/>
                            </MultiTrigger.Conditions>
                            <Setter TargetName="PART_Header" Property="MinWidth" Value="75"/>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="HasHeader" Value="false"/>
                                <Condition Property="Height" Value="Auto"/>
                            </MultiTrigger.Conditions>
                            <Setter TargetName="PART_Header" Property="MinHeight" Value="19"/>
                        </MultiTrigger>
                        <!--<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 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>
</Window.Resources>

<!-- Navigation Tree -->
<Grid>
    <TreeView ItemsSource="{Binding FirstGeneration}" ItemTemplate="{StaticResource treeViewTemplate}" HorizontalAlignment="Stretch"
              ItemContainerStyle="{StaticResource treeViewItemStyle}"/>
</Grid>

謝謝克里斯

Answer 1

您需要將樣式應用於包含觸發器的DockPanel。

例如，

<DockPanel Grid.Column="1" Visibility="Hidden">
    <DockPanel.Style>
        <Style TargetType="{x:Type DockPanel}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Visibility" Value="Visible"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </DockPanel.Style>