c#xamluwptreeviewwin-universal-app
UWP TreeViewItem Horizontal Stretch
I have set my TreeViewItem to stretch horizontally but it is still not filling up the row.
Why is that?
<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>
These are the 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}" />
Solution
You can try to modify the default style of TreeViewItem, which is an example that meets your requirements.
<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>
Usage
<TreeView x:Name="TestTreeView"
ItemContainerStyle="{StaticResource MUX_TreeViewItemStyle}"
>
...
</TreeView>
The style of this TreeViewItem is taken from Microsoft.UI.Xaml. In fact, a series of new controls such as TreeView are in it. Because of the relative independence, the control is updated very quickly. This is the recommended control set.
Best regards.
- Simple frame by frame video decoder library
- GCC no longer implements <varargs.h>
- Contents of IO buffer unknown == unsafe?
- Avoiding strcpy overflow destination warning
- Sort program not working, not sure why
- Fast & accurate atan/arctan approximation algorithm
- What's the difference between strtok_r and strtok_s in C?
- How memory address for pointer to arrays is same as an element in 2D array?
- Which is the best way to suppress "unused variable" warning
- How to use ellipsis in c's case statement?
- How can I exclude non-numeric keys? CS50 Caesar Pset2
- Fast ceiling of an integer division in C / C++
- Is there an invalid pthread_t id?
- How to Implement Universal Setter/Getter Functions for Interrupt-Driven Variables in Embedded C?
- How does SIMD (avx) processing work? for example, if I want 10 32 bit floats how do i fit in a 256 bit avx vector?
- FDCAN problems on STM32G4
- How does the call macro enable mutual recursion between functions f and g in this Hanoi Tower implementation?
- Running test on Rocket core CPU - global variable initialized to 0 is unsuccessful, output wrong value instead
- Interacting with C arrays without knowing the size
- Combination of two strings
- carriage return by fgets
- How to use special characters in C?
- Why does 1.0/100.0 == 0.1/10.0 give True?
- Is it correct to compare pointers in C?
- Force free() to return malloc memory back to OS
- How can I print to standard error in C with 'printf'?
- What is the standard behavior of fread in C on Windows?
- How is strtok removing lines it shouldn't have access to?
- Using array as smart point in C
- Assigning string to malloced 2d char array not working as intended