WPF 网格拆分器问题答案

【问题标题】：WPF Grid Splitter issueWPF 网格拆分器问题
【发布时间】：2012-10-07 10:55:55
【问题描述】：

我有这个控制：

图片：http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/999d1290-2d69-4cd0-9396-072e765e8364

如何在顶部箭头附近添加 GridSplitter，这样当我向下拖动拆分器时，橙色管道的高度会增加。只能向下拖动（不允许向上）

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="900">
<Grid x:Name="LayoutRoot">
    <Grid.RowDefinitions>
        <RowDefinition Height="20"/>
        <RowDefinition Height="auto" />
        <RowDefinition Height="40" />
        <RowDefinition Height="auto"/>
        <RowDefinition Height="20" />
        <RowDefinition Height="auto" />
        <RowDefinition Height="auto" />
        <RowDefinition Height="auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition Width="auto" />
    </Grid.ColumnDefinitions>
    <Grid x:Name="arrowLine" Grid.Row="0" Grid.Column="0" Height="20" Width="1" Background="Black"/>
    <Polygon Grid.Column="0" Grid.Row="1"  Fill="Black" Points="0,-6 10,-6 5,0" FillRule="Nonzero" HorizontalAlignment="Center" />
    <!-- The gripper on the Top -->
    <StackPanel Grid.Row="2">
        <Grid Grid.Column="1" Margin="0,0,0,0"  VerticalAlignment="Top" Width="100" Height="40">
            <Rectangle x:Name="OrangeBar" Fill="#FFD61D2B">
            </Rectangle>
            <Rectangle x:Name="OrangeBarShine">
                <Rectangle.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#00000000" Offset="1"/>
                        <GradientStop Color="#FFFFB141" Offset="0.172"/>
                        <GradientStop/>
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
        </Grid>
    </StackPanel>
    <Polygon Grid.Column="0" Grid.Row="3"  Fill="Black" Points="0,6 10,6 5,0" FillRule="Nonzero" HorizontalAlignment="Center" />
    <Grid  Grid.Row="4" Grid.Column="0" Height="20" VerticalAlignment="Center" Width="1" Background="Black"/>
    <Line Grid.Row="5" X1="25" Y1="0" X2="50" HorizontalAlignment="Center" Y2="20" StrokeThickness="1" Stroke="Black"></Line>
    <Line Grid.Row="5" Grid.Column="1" X1="-25" Y1="20" X2="130" Y2="20" Fill="Black" HorizontalAlignment="Left" StrokeThickness="1" Stroke="Black"></Line>
</Grid>

【问题讨论】：

XAML 中没有 GridSplitter

标签： wpf gridsplitter

【解决方案1】：

如果您想在不移动栏的顶部位置的情况下执行此操作，那么这是一个坏主意。即使你可以让它工作，拖动也是基于增量的。而且稍微拖一下就会导致栏突然变得比屏幕大。

如果您想调整栏的大小并同时等量移动它的位置，请考虑将栏上方的单元格和栏的高度绑定在一起。

考虑将拆分器移动到条形图下方。然后将 bar 上的最小高度设置为 bar 高度变化时的高度。

【讨论】：

【解决方案2】：

从底部变大有什么问题？

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="40" />            
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0" Background="White"/>    
    <StackPanel Grid.Row="1" Grid.Column="0" Background="Orange"/>
    <GridSplitter Grid.Row="2"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Center"
        Background="White" 
        ShowsPreview="True"
        Height="5"/>
    <StackPanel Grid.Row="3" Grid.Column="1" Background="White"/>
</Grid>

【讨论】：