Question

我有一个由网格分开的窗口（左中右），中心控件我希望有多个控件，需要尽可能高地填充其高度，同时在其他控件之间均匀分割。

我能够实现这一目标的一种方式是通过这样的网格：

<!-- Center -->
<Grid Grid.Row="0" Grid.Column="2" Height="Auto">
    <Grid.RowDefinitions>
         <RowDefinition Height="*" />
         <RowDefinition Height="*" />
         <RowDefinition Height="*" />

     </Grid.RowDefinitions>

     <WebBrowser Grid.Row="0" Name="browsc" />
     <WebBrowser Grid.Row="1" Name="browsa" />
     <WebBrowser Grid.Row="2" Name="browsb" />
</Grid>

这是有效的，但我需要动态添加和删除行，其中可能需要删除中间的行（导致需要重新排序每个控件所依赖的行，我无法想象这是一个简单的解决方案对）。

如果没有比这更好的方法来拆分控件，我将如何通过代码（C＃）添加和删除行？

如果有更好的方法，我怎么能这样做，我不得不担心的是添加和删除控件本身而不是乱七八糟的行属性？

谢谢！

Answer 1

这是一个关于如何以编程方式将新RowDefinition添加到Grid并将控件设置为特定Grid Row的示例：

//following line equal to XAML : <RowDefinition Height="*" />
var newrow = new RowDefinition {Height = new GridLength(1, GridUnitType.Star)};
//add new rowdefinition to grid
myGridName.RowDefinitions.Add(newrow);
//set webbrowser control to newly added row, or any row number you wish
Grid.SetRow(browsx, myGridName.RowDefinitions.Count-1);

您可以从RowDefinition属性访问任何myGridName.RowDefinitions以稍后将其删除。但更好的办法是将RowDefinition's Height设置为零而不是删除它。使用它，您不必重新排列其他控件，例如将第3行中的控件移动到第2行，因为前一行2已被删除。

Answer 2

这似乎是UniformGrid的好例子：

<UniformGrid Grid.Row="0" Grid.Column="2" Columns="1">
    <WebBrowser Name="browsc" />
    <WebBrowser Name="browsa" />
    <WebBrowser Name="browsb" />
</UniformGrid>

UniformGrid确保所有项目的宽度和高度都相同。在您的情况下，您只想约束高度，但由于只有一列，所以所有项目都必须具有相同的宽度，所以这没关系。

我们可以在Columns="1"上设置UniformGrid而不是设置行，而是自动排列新行上的每个项目。如果您添加或删除项目，或在Visibility和Visible之间切换Collapsed，则会调整所有尺寸以适应空间。

Answer 3

另一种使用网格的可能性是将高度绑定到转换器，该转换器使用其包含的控件的可见性来决定布局。

以下是一个例子：

在XAML文件中：

<Grid Grid.Row="0" Grid.Column="2" Height="Auto" xmlns:local="clr-namespace:WpfApplication2">
    <Grid.Resources>
        <local:RowHeightConverter x:Key="RowHeightConverter" />
    </Grid.Resources>
    <Grid.RowDefinitions>
        <RowDefinition Height="{Binding ElementName=browsc, Path=IsVisible, Converter={StaticResource RowHeightConverter}}" />
        <RowDefinition Height="{Binding ElementName=browsa, Path=IsVisible, Converter={StaticResource RowHeightConverter}}" />
        <RowDefinition Height="{Binding ElementName=browsb, Path=IsVisible, Converter={StaticResource RowHeightConverter}}" />
    </Grid.RowDefinitions>

    <WebBrowser Grid.Row="0" Name="browsc"></WebBrowser>
    <WebBrowser Grid.Row="1" Name="browsa" Visibility="Collapsed"></WebBrowser>
    <WebBrowser Grid.Row="2" Name="browsb"></WebBrowser>
</Grid>

您也可以将'xmlns位移动到顶级窗口，或者您可能已经拥有它。

在背后的代码中：

public class RowHeightConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        var isVisible = value as bool?;
        if (isVisible.HasValue && isVisible.Value)
            return new GridLength(1, GridUnitType.Star);
        else
            return new GridLength(0);
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

一旦您构建了一次代码，就可以更改XAML设计器中浏览器的“可见性”，并查看布局中反映的更改。

XAML在控件之间划分高度

3 个答案: