UWP TreeViewItem 水平拉伸
Posted
技术标签:
【中文标题】UWP TreeViewItem 水平拉伸【英文标题】：UWP TreeViewItem Horizontal Stretch 【发布时间】：2020-01-25 13:32:54 【问题描述】：我已将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>
这些是DataTemplates：
<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" />
【问题讨论】：
【参考方案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应用程序中使用TreeView时如何处理命名空间冲突