移动时奇怪的分离器行为答案

【问题标题】：Weird splitter behaviour when moving it移动时奇怪的分离器行为
【发布时间】：2010-04-28 13:08:54
【问题描述】：

我的演示应用显示了两个应该填满整个浏览器屏幕的矩形。它们之间有一个垂直分离器。这看起来像一个基本场景，但我不知道如何在 xaml 中实现它。我不能强迫它填满整个屏幕，当移动分离器时，整个屏幕都会变大。有人可以帮忙吗？

<UserControl 
    xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"  
    x:Class="SilverlightApplication1.MainPage"
    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" 
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
  <Grid x:Name="LayoutRoot" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>            
        </Grid.ColumnDefinitions>
        <Border BorderBrush="Black" BorderThickness="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MinWidth="50">
        </Border>
        <controls:GridSplitter Grid.Column="1" VerticalAlignment="Stretch" Width="Auto" ></controls:GridSplitter>
        <Border BorderBrush="Blue" BorderThickness="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Column="2" MinWidth="50"></Border>
    </Grid>
</UserControl>

【问题讨论】：

标签： silverlight xaml layout

【解决方案1】：

GridSplitter 简直糟透了。尝试停靠控件。

【讨论】：

是的！与其治愈不如避免！在办公室，我决定使用 Telerik 的分离器。内置 SL 分离器对我来说不存在！

【解决方案2】：

~~这是你的栏目布局。您需要为左右列调整星型大小，为中间列调整大小：~~

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

编辑：

使用网格拆分器的正确方法（在这种特殊情况下）似乎是只使用网格中的两列。然后，网格拆分器应放置在 first 列中，但要向右对齐。像这样：

<Grid x:Name="LayoutRoot"
          VerticalAlignment="Stretch"
          HorizontalAlignment="Stretch">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Border BorderBrush="Black"
                BorderThickness="3"
                Margin="3,3,13,3"
                VerticalAlignment="Stretch"
                HorizontalAlignment="Stretch"
                MinWidth="50">
        </Border>
        <controls:GridSplitter Grid.Column="0"
                               VerticalAlignment="Stretch"
                               HorizontalAlignment="Right"
                               Width="10"></controls:GridSplitter>
        <Border BorderBrush="Blue"
                Margin="3"
                BorderThickness="3"
                VerticalAlignment="Stretch"
                HorizontalAlignment="Stretch"
                Grid.Column="2"
                MinWidth="50"></Border>
    </Grid>

【讨论】：

有点帮助。应用程序填满了整个屏幕，但您是否看到它在移动拆分器时是如何工作的？
是的，我现在明白了。对不起，我错过了。请参阅上面的更新代码。

【解决方案3】：

我发现拆分器和自动宽度不起作用。

【讨论】：

【解决方案4】：

这是一个有趣的示例页面，其中包含 silverlight 示例。

http://www.xs4all.nl/~wrb/Articles/Article_WPFSplitPanels_01_SL.htm

【讨论】：