Silverlight 中的布局

Posted 2023-04-12

【中文标题】Silverlight 中的布局

【英文标题】：Layout in silverlight

【发布时间】：2011-04-20 12:55:00

【问题描述】：

我遇到了一个不知道如何解决的布局问题。这是我的 xaml 的样子，

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

    <Grid x:Name="abc" Grid.Row="0" Grid.Column="0">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="40" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Button Grid.Row="0" Grid.Column="0"></Button>
            <TextBox Grid.Row="0" Grid.Column="1"></TextBox>
        </Grid>
    </Grid>

    <Grid Grid.Row="0" Grid.Column="1">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="40" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Button Grid.Row="0" Grid.Column="0"></Button>
            <TextBox Grid.Row="0" Grid.Column="1"></TextBox>
        </Grid>
    </Grid>
</Grid>

现在上面的 xaml 的布局正是我想要的。但是，我还有一个额外的要求。在运行时，我需要使网格“abc”可折叠。另一个网格需要填充整个宽度。如果我使用星号宽度，那么如果“abc”被折叠，它的行为更像是隐藏而不是折叠。 Collapse 似乎适用于自动调整大小的宽度，但它并没有根据需要给我按比例调整大小。有没有办法做到这一点。请注意，我只能访问 Grids、StackPanels 和 Canvas 来布局我的项目（没有 DockPanel）。请让我知道任何想法以及任何代码 sn-ps。谢谢。

【参考方案1】：

在布局中很难说出您的意图，但这里有一个示例可以帮助您入门。 我在 Click 事件中将 ColumnDefintion 宽度从 * 更改为 Auto，并将“abc”网格的 Visibility 设置为 Collasped。我使用第二个按钮来更改这些值以进行测试，并删除了不需要的额外级别的 Grid。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition x:Name="ColumnToCollapse" Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Grid x:Name="abc" Grid.Row="0" Grid.Column="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="40" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Button Grid.Row="0" Grid.Column="0"></Button>
        <TextBox Grid.Row="0" Grid.Column="1"></TextBox>
    </Grid>

    <Grid Grid.Row="0" Grid.Column="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="40" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Button Grid.Row="0" Grid.Column="0" Click="Button_Click"  />
        <TextBox Grid.Row="0" Grid.Column="1"></TextBox>
    </Grid>
</Grid>

这里是按钮点击事件：

private bool _toggle = true;

private void Button_Click(object sender, RoutedEventArgs e)

  if (_toggle)
  
    ColumnToCollapse.Width = GridLength.Auto;
    abc.Visibility = Visibility.Collapsed;
    _toggle = false;
  
  else
  
    ColumnToCollapse.Width = new GridLength(1, GridUnitType.Star); 
    abc.Visibility = Visibility.Visible;
    _toggle = true;
  

【参考方案2】：

遇到了同样的问题，只是在中间第三列有一个拆分器使情况变得更糟。

基本上，我最终将列宽（每个列宽）绑定到在一种模式下返回 auto 并在另一种模式下返回 star 的属性。确保为属性实现 INotifyPropertyChange，并在更改控制布局的标志时为两个列属性名称调用 onchange 助手。

【讨论】：

注意：此解决方案适用于那些使用 MVVM 样式模式（即无代码隐藏）的解决方案。现在提供代码没有意义，因为您显然对代码隐藏感到满意。