TreeViewItem与Stretch

时间:2017-03-17 23:06:40

标签: wpf xaml treeview treeviewitem

我想创建一个包含TreeViewItems的WPF TreeView,它伸展以填充可用空间。我使用它作为指南修改了TreeViewItem模板:https://social.msdn.microsoft.com/Forums/vstudio/en-US/cabcb3ba-80c0-4367-85b7-9b55adc81e65/stretch-treeview-items?forum=wpf这很有效,因为我希望右侧的一个字符网格组件右对齐,并且长TextBlock占用可用空间 - 请参阅下面的代码,其中一个TreeViewItems的标题是一个网格。

然而,当我通过向右侧向左侧拖动来调整窗口大小时,当没有足够的空间用于所有网格组件时,我期待带有内容的长文本块"一个漫长的,长的..."开始缩小宽度,但右手边的TextBlocks被右侧窗边缘切断。

如果我创建一个全新的网格示例并将上面提到的网格放在其中一个网格单元格内(基本上模拟TreeView模板中使用的网格),那么它会按照我的预期调整大小:TextBlock的宽度会缩小当我调整大小时。

任何想法我可以对TreeViewItem模板或我指定的Header进行哪些更改以获得我想要的调整大小行为?

<Window x:Class="TreeViewSimple3.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:TreeViewSimple3"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">

<Window.Resources>
    <ControlTemplate x:Key="TreeViewItemStretchControlTemplate" 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" ClickMode="Press" IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}">
                <ToggleButton.Style>
                    <Style 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 Background="Transparent" Height="16" Padding="5" Width="16">
                                        <Path x:Name="ExpandPath" Data="M0,0 L0,6 L6,0 z" Fill="Transparent" Stroke="#FF989898">
                                            <Path.RenderTransform>
                                                <RotateTransform Angle="135" CenterY="3" CenterX="3"/>
                                            </Path.RenderTransform>
                                        </Path>
                                    </Border>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsChecked" Value="True">
                                            <Setter Property="RenderTransform" TargetName="ExpandPath">
                                                <Setter.Value>
                                                    <RotateTransform Angle="180" CenterY="3" CenterX="3"/>
                                                </Setter.Value>
                                            </Setter>
                                            <Setter Property="Fill" TargetName="ExpandPath" Value="#FF595959"/>
                                            <Setter Property="Stroke" TargetName="ExpandPath" Value="#FF262626"/>
                                        </Trigger>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter Property="Stroke" TargetName="ExpandPath" Value="#FF1BBBFA"/>
                                            <Setter Property="Fill" TargetName="ExpandPath" Value="Transparent"/>
                                        </Trigger>
                                        <MultiTrigger>
                                            <MultiTrigger.Conditions>
                                                <Condition Property="IsMouseOver" Value="True"/>
                                                <Condition Property="IsChecked" Value="True"/>
                                            </MultiTrigger.Conditions>
                                            <Setter Property="Stroke" TargetName="ExpandPath" Value="#FF262626"/>
                                            <Setter Property="Fill" TargetName="ExpandPath" Value="#FF595959"/>
                                        </MultiTrigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </ToggleButton.Style>
            </ToggleButton>
            <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="1" Grid.ColumnSpan="2" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
                <ContentPresenter x:Name="PART_Header" ContentSource="Header"
                HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
                SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"/>

            </Border>
            <ItemsPresenter x:Name="ItemsHost" Grid.ColumnSpan="2" Grid.Column="1" Grid.Row="1"/>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="TreeViewItem.IsExpanded" Value="false">
                <Setter TargetName="ItemsHost" Property="UIElement.Visibility" Value="Collapsed"/>
            </Trigger>
            <Trigger Property="ItemsControl.HasItems" Value="false">
                <Setter TargetName="Expander" Property="UIElement.Visibility" Value="Hidden"/>
            </Trigger>
            <Trigger Property="TreeViewItem.IsSelected" Value="true">
                <Setter TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"
                    Property="Border.Background"/>
                <Setter Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"
                    Property="Control.Foreground"/>
            </Trigger>
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="TreeViewItem.IsSelected" Value="true"/>
                    <Condition Property="TreeViewItem.IsSelectionActive" Value="false"/>
                </MultiTrigger.Conditions>
                <Setter TargetName="Bd"
                    Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"
                    Property="Border.Background"/>
                <Setter Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}}"
                    Property="Control.Foreground"/>
            </MultiTrigger>
            <Trigger Property="UIElement.IsEnabled" Value="false">
                <Setter Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" Property="Control.Foreground"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</Window.Resources>

<TreeView>
    <TreeViewItem Header="Parent" Template="{StaticResource TreeViewItemStretchControlTemplate}" HorizontalContentAlignment="Stretch">
        <TreeViewItem Template="{StaticResource TreeViewItemStretchControlTemplate}" HorizontalContentAlignment="Stretch">
            <TreeViewItem.Header>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" Text="A long, long, long, long, long, long, long label."/>
                    <StackPanel Grid.Column="1" Orientation="Horizontal">
                        <TextBlock Text="A"/>
                        <TextBlock Text="B"/>
                        <TextBlock Text="C"/>
                        <TextBlock Text="D"/>
                    </StackPanel>
                </Grid>
            </TreeViewItem.Header>
        </TreeViewItem>
    </TreeViewItem>
</TreeView>

1 个答案:

答案 0 :(得分:3)

当我尝试代码示例并减小窗口大小时,TreeView会显示水平滚动条(因为它不仅有Grid,而且还有模板中的ScrollViewer)

尝试以下设置:

<TreeView ScrollViewer.HorizontalScrollBarVisibility="Disabled"> 

禁用滚动

<TextBlock TextWrapping="Wrap" Grid.Column="0" ...> 

启用自动换行。