UWP TreeViewItem 水平拉伸

Question

我已将 TreeViewItem 设置为水平拉伸，但它仍然没有填满该行。

这是为什么？

   <TreeView
        x:Name="LocalFolderTreeView"
        Grid.Row="1"
        Margin="0,5,0,0"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch"
        HorizontalContentAlignment="Stretch"
        Collapsed="LocalFolderTreeView_Collapsed"
        Expanding="LocalFolderTreeView_Expanding"
        ItemInvoked="LocalFolderTreeView_ItemInvoked"
        ItemTemplateSelector="{StaticResource FolderTreeTemplateSelector}"
        Visibility="Collapsed" >
        <TreeView.ItemContainerStyle>
            <Style TargetType="TreeViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            </Style>
        </TreeView.ItemContainerStyle>
    </TreeView>

这些是 DataTemplate：

    <DataTemplate x:Key="FolderTemplate" x:DataType="TreeViewNode">
        <StackPanel
            Background="Red"
            DoubleTapped="FolderTemplate_DoubleTapped"
            IsDoubleTapEnabled="True"
            Orientation="Horizontal">
            <StackPanel.ContextFlyout>
                <MenuFlyout Opening="OpenPlaylistFlyout" />
            </StackPanel.ContextFlyout>
            <Image Width="{StaticResource IconSize}" Source="Assets/folder.png" />
            <TextBlock Margin="10,0" Text="{Binding Content.Directory, Mode=OneWay}" />
        </StackPanel>
    </DataTemplate>

    <DataTemplate x:Key="FileTemplate" x:DataType="TreeViewNode">
        <StackPanel Background="Red" Orientation="Horizontal">
            <StackPanel.ContextFlyout>
                <MenuFlyout Opening="OpenMusicFlyout" />
            </StackPanel.ContextFlyout>
            <Image Width="{StaticResource IconSize}" Source="Assets/colorful_no_bg.png" />
            <TextBlock Margin="10,0" Text="{Binding Content.Name, Mode=OneWay}" />
        </StackPanel>
    </DataTemplate>

    <templateselector:FolderTreeTemplateSelector
        x:Key="FolderTreeTemplateSelector"
        FileTemplate="{StaticResource FileTemplate}"
        FolderTemplate="{StaticResource FolderTemplate}" />

Answer 1

您可以尝试修改TreeViewItem的默认样式，这是一个符合您要求的例子

<Style TargetType="TreeViewItem"
   BasedOn="{StaticResource ListViewItemRevealStyle}"
   x:Key="MUX_TreeViewItemStyle">
    <Setter Property="Padding" Value="0"/>
    <Setter Property="Background" Value="{ThemeResource TreeViewItemBackground}"/>
    <Setter Property="BorderBrush" Value="{ThemeResource TreeViewItemBorderBrush}"/>
    <Setter Property="BorderThickness" Value="{ThemeResource TreeViewItemBorderThemeThickness}"/>
    <Setter Property="GlyphBrush" Value="{ThemeResource TreeViewItemForeground}"/>
    <Setter Property="MinHeight" Value="{ThemeResource TreeViewItemMinHeight}"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TreeViewItem">
                <Grid x:Name="ContentPresenterGrid" Margin="0,0,0,0" 
                Background="{TemplateBinding Background}" 
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                CornerRadius="{TemplateBinding CornerRadius}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="PointerOver">
                                <VisualState.Setters>
                                    <Setter Target="ContentPresenterGrid.(RevealBrush.State)" Value="PointerOver" />
                                    <Setter Target="ContentPresenterGrid.Background" Value="{ThemeResource TreeViewItemBackgroundPointerOver}" />
                                    <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TreeViewItemForegroundPointerOver}" />
                                    <Setter Target="ContentPresenterGrid.BorderBrush" Value="{ThemeResource TreeViewItemBorderBrushPointerOver}" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <VisualState.Setters>
                                    <Setter Target="ContentPresenterGrid.(RevealBrush.State)" Value="Pressed" />
                                    <Setter Target="ContentPresenterGrid.Background" Value="{ThemeResource TreeViewItemBackgroundPressed}" />
                                    <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TreeViewItemForegroundPressed}" />
                                    <Setter Target="ContentPresenterGrid.BorderBrush" Value="{ThemeResource TreeViewItemBorderBrushPressed}" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Selected">
                                <VisualState.Setters>
                                    <Setter Target="ContentPresenterGrid.Background" Value="{ThemeResource TreeViewItemBackgroundSelected}" />
                                    <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TreeViewItemForegroundSelected}" />
                                    <Setter Target="ContentPresenterGrid.BorderBrush" Value="{ThemeResource TreeViewItemBorderBrushSelected}" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <VisualState.Setters>
                                    <Setter Target="ContentPresenterGrid.Background" Value="{ThemeResource TreeViewItemBackgroundDisabled}" />
                                    <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TreeViewItemForegroundDisabled}" />
                                    <Setter Target="ContentPresenterGrid.BorderBrush" Value="{ThemeResource TreeViewItemBorderBrushDisabled}" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="PointerOverSelected">
                                <VisualState.Setters>
                                    <Setter Target="ContentPresenterGrid.(RevealBrush.State)" Value="PointerOver" />
                                    <Setter Target="ContentPresenterGrid.Background" Value="{ThemeResource TreeViewItemBackgroundSelectedPointerOver}" />
                                    <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TreeViewItemForegroundSelectedPointerOver}" />
                                    <Setter Target="ContentPresenterGrid.BorderBrush" Value="{ThemeResource TreeViewItemBorderBrushSelectedPointerOver}" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="PressedSelected">
                                <VisualState.Setters>
                                    <Setter Target="ContentPresenterGrid.(RevealBrush.State)" Value="Pressed" />
                                    <Setter Target="ContentPresenterGrid.Background" Value="{ThemeResource TreeViewItemBackgroundSelectedPressed}" />
                                    <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TreeViewItemForegroundSelectedPressed}" />
                                    <Setter Target="ContentPresenterGrid.BorderBrush" Value="{ThemeResource TreeViewItemBorderBrushSelectedPressed}" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="SelectedDisabled">
                                <VisualState.Setters>
                                    <Setter Target="ContentPresenterGrid.Background" Value="{ThemeResource TreeViewItemBackgroundSelectedDisabled}" />
                                    <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TreeViewItemForegroundSelectedDisabled}" />
                                    <Setter Target="ContentPresenterGrid.BorderBrush" Value="{ThemeResource TreeViewItemBorderBrushSelectedDisabled}" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="ReorderedPlaceholder">
                                <Storyboard>
                                    <FadeOutThemeAnimation TargetName="MultiSelectGrid" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="TreeViewMultiSelectStates">
                            <VisualState x:Name="TreeViewMultiSelectDisabled"/>
                            <VisualState x:Name="TreeViewMultiSelectEnabledUnselected">
                                <VisualState.Setters>
                                    <Setter Target="MultiSelectCheckBox.Visibility" Value="Visible" />
                                    <Setter Target="ExpandCollapseChevron.Padding" Value="0,0,12,0" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="TreeViewMultiSelectEnabledSelected">
                                <VisualState.Setters>
                                    <Setter Target="MultiSelectCheckBox.Visibility" Value="Visible" />
                                    <Setter Target="MultiSelectGrid.Background" Value="{ThemeResource TreeViewItemBackgroundSelected}" />
                                    <Setter Target="ExpandCollapseChevron.Padding" Value="0,0,12,0" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="DragStates">
                            <VisualState x:Name="NotDragging" />
                            <VisualState x:Name="MultipleDraggingPrimary">
                                <VisualState.Setters>
                                    <Setter Target="MultiSelectCheckBox.Opacity" Value="0" />
                                    <Setter Target="MultiArrangeOverlayTextBorder.Visibility" Value="Visible" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>

                    <Grid x:Name="MultiSelectGrid" Padding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TreeViewItemTemplateSettings.Indentation}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>

                        <Grid Grid.Column="0">
                            <CheckBox x:Name="MultiSelectCheckBox"
                                    Width="32"
                                    MinWidth="32"
                                    Margin="12,0,0,0"
                                    VerticalAlignment="Center"
                                    Visibility="Collapsed"
                                    IsTabStop="False"
                                    AutomationProperties.AccessibilityView="Raw" />
                            <Border x:Name="MultiArrangeOverlayTextBorder"
                            Visibility="Collapsed"
                            IsHitTestVisible="False"
                            MinWidth="20"
                            Height="20"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Center"
                            Background="{ThemeResource SystemControlBackgroundAccentBrush}"
                            BorderThickness="1"
                            BorderBrush="{ThemeResource SystemControlBackgroundChromeWhiteBrush}"
                            >
                                <TextBlock x:Name="MultiArrangeOverlayText"
                                Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TreeViewItemTemplateSettings.DragItemsCount}"
                                Style="{ThemeResource CaptionTextBlockStyle}"
                                Foreground="{ThemeResource SystemControlForegroundChromeWhiteBrush}"
                                IsHitTestVisible="False"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Center"
                                AutomationProperties.AccessibilityView="Raw" />
                            </Border>
                        </Grid>

                        <Grid x:Name="ExpandCollapseChevron"
                            Grid.Column="1"
                            Padding="12,0,12,0"
                            Width="Auto"
                            Opacity="{TemplateBinding GlyphOpacity}"
                            Background="Transparent">
                            <TextBlock Foreground="{TemplateBinding GlyphBrush}"
                                    Width="12" Height="12"
                                    Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TreeViewItemTemplateSettings.CollapsedGlyphVisibility}" 
                                    FontSize="{TemplateBinding GlyphSize}" Text="{TemplateBinding CollapsedGlyph}"
                                    FontFamily="{StaticResource SymbolThemeFontFamily}"
                                    VerticalAlignment="Center"
                                    AutomationProperties.AccessibilityView="Raw"/>
                            <TextBlock Foreground="{TemplateBinding GlyphBrush}"
                                    Width="12" Height="12"
                                    Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TreeViewItemTemplateSettings.ExpandedGlyphVisibility}" 
                                    FontSize="{TemplateBinding GlyphSize}"
                                    Text="{TemplateBinding ExpandedGlyph}"
                                    FontFamily="{StaticResource SymbolThemeFontFamily}"
                                    VerticalAlignment="Center"
                                    AutomationProperties.AccessibilityView="Raw"/>
                        </Grid>

                        <ContentPresenter x:Name="ContentPresenter"
                        Grid.Column="2"
                        ContentTransitions="{TemplateBinding ContentTransitions}"
                        ContentTemplate="{TemplateBinding ContentTemplate}"
                        Content="{TemplateBinding Content}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        Margin="{TemplateBinding Padding}" />
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

用法

<TreeView x:Name="TestTreeView"
          ItemContainerStyle="{StaticResource MUX_TreeViewItemStyle}"
          >
    ...
</TreeView>

此TreeViewItem的样式取自Microsoft.UI.Xaml。其实TreeView等一系列新控件都在里面。由于相对独立，控件更新非常快。这是推荐的控制集。

此致。

UWP TreeViewItem 水平拉伸

UWP TreeViewItem Horizontal Stretch

c#

treeview

xaml

win-universal-app

uwp