7

当我将 GridSplitter 拖到左侧时，使用下面的 XAML 会将元素推出窗口。如何将所有元素保留在窗口框架内？

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

    <Button Grid.Column="0" Content="0" />
    <Button Grid.Column="1" Content="1" />
    <Button Grid.Column="2" Content="2" />
    <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Left" />
</Grid>

谢谢

4

2 回答 2

8

我知道解决您的问题的唯一方法是让 gridsplitter 左侧和右侧的列将 width 属性设置为Width="*"，并为 GridSplitter 提供其自己的列，并将 Horizo​​ntalAlignment 设置为HorizontalAlignment="Stretch"。然后，您的代码将最终看起来像这样。

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

    <Button Grid.Column="0" Content="0" />
    <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch"/>
    <Button Grid.Column="2" Content="1" />
    <Button Grid.Column="3" Content="2" />
</Grid>
于 2013-08-16T14:42:31.733 回答
2

我遇到了同样的问题，并提出了这个解决方案。基本上，这个想法是在网格/列更改时动态更改相应列的 MaxWidth。我在这里展示了两列，但我已经成功地使用了三列的这种方法。

使用这种方法，如果您将窗口大小调整为不再适合网格的内容，则网格将停止更改大小，因此 ResizeGrid_SizeChanged 事件将停止调用。为了解决这个问题，您还可以侦听窗口（或用户控件）大小更改事件。您可能还需要适当地绑定网格的 MaxWidth，或者如果您的网格填充窗口/用户控件，则直接使用控件大小。我在这里展示了如何通过 XAML 绑定 MaxWidth 属性。如果您不想这样做，可以在后面的窗口代码中将“ResizeGrid.MaxWidth”替换为“ActualWidth”，并删除“ResizeGrid”对象上的“MaxWidth”绑定。

XAML：

<Window x:Class="App.Window1"
        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:Default="clr-namespace:App" 
        mc:Ignorable="d"
        SizeChanged="Window_SizeChanged"
        Title="Window1" Height="300" Width="300">
    <Grid>
        <Grid x:Name="ResizeGrid" SizeChanged="ResizeGrid_SizeChanged" 
              MaxWidth="{Binding ActualWidth, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Default:Window1}}}">

            <Grid.ColumnDefinitions>
                <ColumnDefinition x:Name="C0" Width="150" MinWidth="50" />
                <ColumnDefinition Width="5" />
                <ColumnDefinition x:Name="C2" Width="*" MinWidth="50" />
            </Grid.ColumnDefinitions>

            <Grid Grid.Column="0" Background="Green">
                <Label Content="Left" />
                <Label Content="Right" HorizontalAlignment="Right" />
            </Grid>

            <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" DragCompleted="GridSplitter_DragCompleted" />

            <Grid Grid.Column="2" Background="Red">
                <Label Content="Left" />
                <Label Content="Right" HorizontalAlignment="Right" />
            </Grid>
        </Grid>
    </Grid>
</Window>

C# 代码背后

private void Window_SizeChanged(object sender, SizeChangedEventArgs e)
{
    UpdateGridSplitterWidths();
}

private void ResizeGrid_SizeChanged(object sender, SizeChangedEventArgs e)
{
    UpdateGridSplitterWidths();
}

private void GridSplitter_DragCompleted(object sender, System.Windows.Controls.Primitives.DragCompletedEventArgs e)
{
    UpdateGridSplitterWidths();
}

private void UpdateGridSplitterWidths()
{
    C0.MaxWidth = Math.Min(ResizeGrid.ActualWidth, ResizeGrid.MaxWidth) - (C2.MinWidth + 5);
}
于 2017-10-25T05:53:49.850 回答