如何将 TreeViewItem 宽度设置为可用的最大值 space

Question

我是 WPF 和样式的新手，我想将这样的样式应用于 TreeViewItem

这是我的两个目标：

有灰色和白色的替代行，当我展开树时，我想要正确的替代行颜色，我不希望两个相邻项目具有相同的颜色。

背景颜色的宽度必须设置为父容器的宽度，而不仅仅是TreeViewItem的宽度。 CurrentSelection 颜色也是如此。这是我目前的 xaml:

<TreeView Grid.Row="1" ItemsSource="{Binding FirstGenerationStep}"  AlternationCount="2" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">
    <TreeView.ContextMenu>
        <ContextMenu>
            <MenuItem Header="Insert Step">
                <MenuItem.Icon>
                    <Image Width="16" Height="16" Source="/MWPOS;component/Resource/icons/add-icon.png" />
                </MenuItem.Icon>
                <MenuItem Header="Before" cal:Message.Attach="[Event Click] = [Action MenuItem_InsertBefore()]">
                    <MenuItem.Icon>
                        <Image Width="16" Height="16" Source="/MWPOS;component/Resource/icons/blue-document-hf-insert-icon.png"  />
                    </MenuItem.Icon>
                </MenuItem>
                <MenuItem Header="After" cal:Message.Attach="[Event Click] = [Action MenuItem_InsertAfter()]">
                    <MenuItem.Icon>
                        <Image Width="16" Height="16" Source="/MWPOS;component/Resource/icons/blue-document-hf-insert-footer-icon.png"  />
                    </MenuItem.Icon>
                </MenuItem>
            </MenuItem>
            <MenuItem Header="Move">
                <MenuItem.Icon>
                    <Image Width="16" Height="16" Source="/MWPOS;component/Resource/icons/transform-move-icon.png" />
                </MenuItem.Icon>
                <MenuItem Header="Up" cal:Message.Attach="[Event Click] = [Action MenuItem_MoveUp()]">
                    <MenuItem.Icon>
                        <Image Width="16" Height="16" Source="/MWPOS;component/Resource/icons/arrow-up-icon.png" />
                    </MenuItem.Icon>
                </MenuItem>
                <MenuItem Header="Down" cal:Message.Attach="[Event Click] = [Action MenuItem_MoveDown()]">
                    <MenuItem.Icon>
                        <Image Width="16" Height="16" Source="/MWPOS;component/Resource/icons/arrow-down-icon.png" />
                    </MenuItem.Icon>
                </MenuItem>
            </MenuItem>
            <MenuItem Header="Remove" cal:Message.Attach="[Event Click] = [Action MenuItem_Remove()]" >
                <MenuItem.Icon>
                    <Image Width="16" Height="16" Source="/MWPOS;component/Resource/icons/delete-icon.png" />
                </MenuItem.Icon>
            </MenuItem>
            <MenuItem Header="Test" cal:Message.Attach="[Event Click] = [Action MenuItem_Test()]" >
            </MenuItem>
        </ContextMenu>
    </TreeView.ContextMenu>
    <TreeView.ItemContainerStyle>
        <Style TargetType="{x:Type TreeViewItem}" >
            <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
            <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
            <Setter Property="FontWeight" Value="Normal" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="FontWeight" Value="Normal" />
                </Trigger>
                    <Trigger Property="ItemsControl.AlternationIndex" Value="0">
                        <Setter Property="Background" Value="#26EC3D12"></Setter>
                    </Trigger>
                    <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                        <Setter Property="Background" Value="#00000000"></Setter>
                    </Trigger>
            </Style.Triggers>
        </Style>
    </TreeView.ItemContainerStyle>
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding SubSteps}" >
            <ContentControl cal:View.Model="{Binding Command}" HorizontalAlignment="Stretch" Height="38"/>
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

现在我有两种可选颜色，但宽度与父项无关，仅与 TreeViewItem 相关。我尝试了 HorizontalAlignment Strech，但没有用。有什么提示吗？

编辑 1:

经过一些研究，我发现一篇文章说问题出在 TreeView 的 Default Templete Container 上。所以我改变了这个代码：

<Style x:Key="TreeViewItemFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <PathGeometry x:Key="TreeArrow" Figures="M0,0 L0,6 L6,0 z"/>

    <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 Property="Stroke" TargetName="ExpandPath" Value="#FF1BBBFA"/>
                            <Setter Property="Fill" TargetName="ExpandPath" Value="Transparent"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="RenderTransform" TargetName="ExpandPath">
                                <Setter.Value>
                                    <RotateTransform Angle="180" CenterX="3" CenterY="3"/>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="Fill" TargetName="ExpandPath" Value="#FF595959"/>
                            <Setter Property="Stroke" TargetName="ExpandPath" Value="#FF262626"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="TreeViewItemStyle1" 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="0,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}" ClickMode="Press" IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" />
                        <Border x:Name="Bd" SnapsToDevicePixels="true" Grid.Column="1" Grid.ColumnSpan="2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
                            <ContentPresenter x:Name="PART_Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header"/>
                        </Border>
                        <ItemsPresenter x:Name="ItemsHost" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsExpanded" Value="false">
                            <Setter Property="Visibility" TargetName="ItemsHost" Value="Collapsed"/>
                        </Trigger>
                        <Trigger Property="HasItems" Value="false">
                            <Setter Property="Visibility" TargetName="Expander" Value="Hidden"/>
                        </Trigger>
                        <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="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>
</UserControl.Resources>
<Grid  HorizontalAlignment="Stretch" >
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="30"/>
        <RowDefinition />
    </Grid.RowDefinitions>
    <CheckBox Grid.Row="0" IsChecked="{Binding NeedHoming}" Content="need Homing" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top"/>

    <TreeView Grid.Row="1" ItemsSource="{Binding FirstGenerationStep}"  AlternationCount="2" >
        <TreeView.ContextMenu>
            <ContextMenu>
                <MenuItem Header="Insert Step">
                    <MenuItem.Icon>
                        <Image Width="16" Height="16" Source="/MWPOS;component/Resource/icons/add-icon.png" />
                    </MenuItem.Icon>
                    <MenuItem Header="Before" cal:Message.Attach="[Event Click] = [Action MenuItem_InsertBefore()]">
                        <MenuItem.Icon>
                            <Image Width="16" Height="16" Source="/MWPOS;component/Resource/icons/blue-document-hf-insert-icon.png"  />
                        </MenuItem.Icon>
                    </MenuItem>
                    <MenuItem Header="After" cal:Message.Attach="[Event Click] = [Action MenuItem_InsertAfter()]">
                        <MenuItem.Icon>
                            <Image Width="16" Height="16" Source="/MWPOS;component/Resource/icons/blue-document-hf-insert-footer-icon.png"  />
                        </MenuItem.Icon>
                    </MenuItem>
                </MenuItem>
                <MenuItem Header="Move">
                    <MenuItem.Icon>
                        <Image Width="16" Height="16" Source="/MWPOS;component/Resource/icons/transform-move-icon.png" />
                    </MenuItem.Icon>
                    <MenuItem Header="Up" cal:Message.Attach="[Event Click] = [Action MenuItem_MoveUp()]">
                        <MenuItem.Icon>
                            <Image Width="16" Height="16" Source="/MWPOS;component/Resource/icons/arrow-up-icon.png" />
                        </MenuItem.Icon>
                    </MenuItem>
                    <MenuItem Header="Down" cal:Message.Attach="[Event Click] = [Action MenuItem_MoveDown()]">
                        <MenuItem.Icon>
                            <Image Width="16" Height="16" Source="/MWPOS;component/Resource/icons/arrow-down-icon.png" />
                        </MenuItem.Icon>
                    </MenuItem>
                </MenuItem>
                <MenuItem Header="Remove" cal:Message.Attach="[Event Click] = [Action MenuItem_Remove()]" >
                    <MenuItem.Icon>
                        <Image Width="16" Height="16" Source="/MWPOS;component/Resource/icons/delete-icon.png" />
                    </MenuItem.Icon>
                </MenuItem>
                <MenuItem Header="Test" cal:Message.Attach="[Event Click] = [Action MenuItem_Test()]" >
                </MenuItem>
            </ContextMenu>
        </TreeView.ContextMenu>
        <TreeView.ItemContainerStyle>
            <Style TargetType="{x:Type TreeViewItem}" BasedOn="{StaticResource TreeViewItemStyle1}">
                <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
                <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
                <Setter Property="FontWeight" Value="Normal" />
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                <Style.Resources>
                    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#FFEC3D12"/>
                </Style.Resources>
                <Style.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="FontWeight" Value="Normal" />
                        <Setter Property="Foreground" Value="Black" />
                    </Trigger>

                    <Trigger Property="ItemsControl.AlternationIndex" Value="0">
                        <Setter Property="Background" Value="#19747474"></Setter>
                    </Trigger>
                    <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                        <Setter Property="Background" Value="#00000000"></Setter>
                    </Trigger>

                </Style.Triggers>
            </Style>
        </TreeView.ItemContainerStyle>
        <TreeView.ItemTemplate>
            <HierarchicalDataTemplate ItemsSource="{Binding SubSteps}" >
                <ContentControl cal:View.Model="{Binding Command}"  Height="38"/>
            </HierarchicalDataTemplate>
        </TreeView.ItemTemplate>
    </TreeView>
</Grid>

这创建了一个备用行，问题是背景颜色在 TreeArrow 之后开始，我更喜欢在之前开始，但现在这不是问题。对于这种风格，选择颜色就像替代颜色一样，所以没问题。问题是 nasted 树的替代行计数，有时颜色错误，我不明白为什么。我认为关于行数的索引有误。

编辑 2： 我发现了问题，AlternationCount 从子节点重新启动，现在我正在尝试找到解决此问题的方法...

编辑 3： 好的，更改背景的唯一方法是向 TreeViewItem 添加一个背景属性并调用一个函数来计算显示的每个 TreeItem 的背景。

所以解决方案是更改默认模板并添加 "manual" 检查 TreeViewItem 的背景

Answer 1

解决方案是更改 TreeView 的默认模板并添加属性以设置每个 TreeViewItem 的背景颜色。

如何将 TreeViewItem 宽度设置为可用的最大值 space

How do I Set TreeViewItem width to the maximum space available

wpf

xaml

treeview

styles