网格分隔条无法调整大小

Question

我希望通过使用GridSplitter来扩大TreeView的大小，以便更容易查看TreeView的内容。但似乎找不到合适的放置Splitter的位置。

<Grid.ColumnDefinitions>
    <ColumnDefinition/>
    <ColumnDefinition Width="auto"/>
    <ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>

<Grid.RowDefinitions>
    <RowDefinition Height="auto"/>
    <RowDefinition/>
    <RowDefinition Height="auto"/>
    <RowDefinition />
    <RowDefinition Height="auto"/>
    <RowDefinition Height="auto"/>
</Grid.RowDefinitions>

<TextBlock Grid.Column="0" Grid.Row="0" Text="JSON String" Margin="5"/>
<TextBox Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="3"/>

<GridSplitter Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="2" Height="5"         ResizeDirection="Rows" ResizeBehavior="PreviousAndNext" HorizontalAlignment="Stretch"/>

<TextBlock Grid.Column="0" Grid.Row="3" Text="C# Type" Margin="5"/>
<TreeView Grid.Column="0" Grid.Row="4" Grid.ColumnSpan="3" x:Name="outputTree" Margin="5"/>

- jsomers89

Answer 1

将它设置为第二个TextBlock所在的同一行，并将ResizeBehavior设置为PreviousAndNext，我调整了一些行定义，如有必要请进行调整。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition Width="auto"/>
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="auto"/>
        <RowDefinition />
        <RowDefinition Height="auto"/>
        <RowDefinition  />
    </Grid.RowDefinitions>

    <TextBlock Grid.Column="0" Grid.Row="0" Text="JSON String" Margin="5"/>
    <TextBox Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="3" Margin="5"/>


    <GridSplitter Grid.Column="0" Grid.ColumnSpan="3"  Grid.Row="2" Height="5"         ResizeDirection="Rows" ResizeBehavior="PreviousAndNext" VerticalAlignment="Top" HorizontalAlignment="Stretch"/>
    <TextBlock Grid.Column="0" Grid.Row="2" Text="C# Type" Margin="5"/>
    <TreeView Grid.Column="0" Grid.Row="3" Grid.ColumnSpan="3" x:Name="outputTree" Margin="5"/>
</Grid>

- Sean Beanland

Answer 2

只需将您的 TreeView 放入 ViewBox 中即可：

<Grid.RowDefinitions>
  <RowDefinition Height="auto"/>
  <RowDefinition/>
  <RowDefinition Height="auto"/>
  <RowDefinition MinHeight="1"/>
  <RowDefinition Height="auto"/>
  <RowDefinition Height="auto"/>
</Grid.RowDefinitions>

<ViewBox Grid.Column="0" Grid.Row="4" Grid.ColumnSpan="3">
  <TreeView  x:Name="outputTree" Margin="5"/>
</ViewBox>

正如MSDN所说：

ViewBox定义了一个内容装饰器，可以拉伸和缩放单个子元素以填充可用空间。

这个WPF教程也很有帮助。

工作示例：

<Window x:Class="TreeViewWpfApplication.MainWindow"
        ...The code omitted for the brevity...
        Title="MainWindow" Height="350" Width="525">
    <Grid>     
            <Grid.RowDefinitions>
                <RowDefinition/>
            <RowDefinition Height="5" />
            <RowDefinition/>
            </Grid.RowDefinitions>
        <Viewbox>
            <TreeView Name="treeView">
                <TreeViewItem Header="1">
                    <TreeViewItem Header="1.2">
                        <TreeViewItem Header="1.3"/>
                    </TreeViewItem>
                </TreeViewItem>
                <TreeViewItem Header="2"/>
                <TreeViewItem Header="2"/>
                <TreeViewItem Header="2"/>
                <TreeViewItem Header="2"/>
                <TreeViewItem Header="2"/>
                <TreeViewItem Header="2"/>
            </TreeView>
        </Viewbox>
        <GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch" />
        <Button Grid.Row="2" Content="Hello" Name="btn"/>
    </Grid>
</Window>

更新：

我稍微编辑了你的代码。请查看：

<Grid>
    <Grid.RowDefinitions>            
        <RowDefinition Height="auto"/>
        <RowDefinition/>
        <RowDefinition Height="auto"/>
        <RowDefinition />
        <RowDefinition Height="auto"/>
        <RowDefinition Height="auto"/>
    </Grid.RowDefinitions>

    <TextBlock Grid.Column="0" Grid.Row="0" Text="JSON String" Margin="5"/>
    <TextBox Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="3"/>

    <GridSplitter Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="2" 
        Height="5" ResizeDirection="Rows" ResizeBehavior="PreviousAndNext" 
        HorizontalAlignment="Stretch"/>
    <Grid Grid.Row="3">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <TextBlock  Text="C# Type" Margin="5"/>
        <Viewbox  Grid.Row="1" >
            <TreeView   x:Name="outputTree" Margin="5">
                <TreeViewItem Header="1">
                    <TreeViewItem Header="1.2">
                        <TreeViewItem Header="1.3"/>
                    </TreeViewItem>
                </TreeViewItem>
                <TreeViewItem Header="2"/>
                <TreeViewItem Header="2"/>
                <TreeViewItem Header="2"/>
                <TreeViewItem Header="2"/>
                <TreeViewItem Header="2"/>
                <TreeViewItem Header="2"/>
            </TreeView>
        </Viewbox>
    </Grid>

    <TextBlock Text="5" Grid.Row="4"/>
    <TextBlock Text="Hello6" Grid.Row="5"/>
</Grid>

- StepUp

---

好的，我尝试过了，但是当我展开树形结构时，它变得非常小，你几乎看不到它了。 <Viewbox Grid.Column="0" Grid.Row="4" Grid.ColumnSpan="3"> <TreeView x:Name="outputTree" Margin="5"/> </Viewbox> - jsomers89

好的，我尝试了设置MinHeight，但它仍然无法正确调整大小。当TreeView展开时，它变得难以阅读，开始时大小还可以，但一旦变长就无法阅读了。 - jsomers89

刚刚看了你的更新，发现我最初的问题有一个问题，我没有包括你删除的最后两行中的内容<Button Grid.Column="1" Grid.Row="4" Content="Convert" x:Name="btnConvert" Margin="5" Click="btnConvert_Click"/> <Button Grid.Column="2" Grid.Row="4" Content="Done" x:Name="btnDone" Margin="5" Click="btnDone_Click"/> - jsomers89

@jsomers89，请查看我的更新部分。 - StepUp

@jsomers89 随时提问。如果我的回答对您有帮助，您可以将其标记为答案。请阅读此文档http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work - StepUp