在 WPF 中以编程方式设置带有 * 的网格列的宽度答案

【问题标题】：Programmatically setting the width of a grid column with * in WPF在 WPF 中以编程方式设置带有 * 的网格列的宽度
【发布时间】：2021-01-13 17:58:32
【问题描述】：

我想以编程方式配置 wpf 网格。

我希望能够设置一个有 2 列的网格，第一列占用 20% 的可用空间，第二列占用 80%。在 xaml 中，我会使用 * 运算符，但我不知道如何以编程方式执行此操作。

在 Xaml 中我会这样做：

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition width="20*" />
    <ColumnDefinition width="80*" />
</Grid>

在我想做的代码中：

Grid grid = new Grid();
grid.ColumnDefinitions.Add( new ColumnDefinition(20*) );
grid.ColumnDefinitions.Add( new ColumnDefinition(80*) );

请有人建议。

【问题讨论】：

Grid Star-Size in code behind的可能重复

标签： wpf grid

【解决方案1】：

Grid grid = new Grid();
ColumnDefinition c1 = new ColumnDefinition();
c1.Width = new GridLength(20, GridUnitType.Star);
ColumnDefinition c2 = new ColumnDefinition();
c2.Width = new GridLength(80, GridUnitType.Star);
grid.ColumnDefinitions.Add(c1);
grid.ColumnDefinitions.Add(c2);

【讨论】：

还有 MVVM 方式？我的意思是，您可以通过 viewmodel 属性设置 int 值，但是“star”呢？
您可以通过 DependencyProperty 或 INotifyPropertyChanged 绑定到 GridLength 类型的视图模型属性。 "1*" 只是 GridLength struct 的字符串表示形式。
如何只设置星星

【解决方案2】：

假设您在页面中有一些按钮（水平对齐）并且需要根据某些状态隐藏/显示某些按钮。

<Grid HorizontalAlignment="Center" Grid.Column="1" Width="340" VerticalAlignment="Center" Background="Transparent">

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*" x:Name="colOne"></ColumnDefinition>
        <ColumnDefinition Width="0" x:Name="colTwo"></ColumnDefinition>
        <ColumnDefinition Width="0" x:Name="colThree"></ColumnDefinition>
        <ColumnDefinition Width="0" x:Name="colFour"></ColumnDefinition>
    </Grid.ColumnDefinitions>

    <Button x:Name="btnOne"  Grid.Column="0" Height="50" Width="50" Content="One" Cursor="Hand" />
    <Button x:Name="btnTwo"  Grid.Column="1" Height="50" Width="50" Content="Two" Cursor="Hand" />
    <Button x:Name="btnThree"  Grid.Column="2" Height="50" Width="50" Content="Thre" Cursor="Hand" />
    <Button x:Name="btnFour"  Grid.Column="3" Height="50" Width="50" Content="Four" Cursor="Hand" />

</Grid>

这里btnOne在执行时会在页面中可见。 btnOne 也将在中心对齐。现在，如果我们希望在单击 One 时显示 3 和 4 并隐藏 1，我们可以使用以下代码：

private void btnOne_Click(object sender, RoutedEventArgs e)
{
    SetGridColWidth(colOne, false);
    SetGridColWidth(colThree, true);
    SetGridColWidth(colFour, true);
}

private void SetGridColWidth(ColumnDefinition column, bool show)
{
    if (show)
        column.Width = new GridLength(2, GridUnitType.Star);
    else
        column.Width = new GridLength(0);
}

您可以在运行时切换任何按钮的可见性。

希望这对某人有所帮助！

【讨论】：

【解决方案3】：

MVVM 方法

查看 (XAML)

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="{Binding FirstColumn}"/>
        <ColumnDefinition Width="{Binding SecondColumn}"/>
    </Grid.ColumnDefinitions>
</Grid>

ViewModel (C#)

public class MyViewModel : BindableBase
{
    private GridLength _firstColumn;
    private GridLength _secondColumn;

    public MyViewModel()
    {
        _firstColumn = new GridLength(75, GridUnitType.Star);
        _secondColumn = new GridLength(25, GridUnitType.Star);
    }

    public GridLength FirstColumn
    {
        get { return _firstColumn; }
        set { SetProperty(ref _firstColumn, value); }
    }

    public GridLength SecondColumn
    {
        get { return _secondColumn; }
        set { SetProperty(ref _secondColumn, value); }
    }

    private void NotifyToggleFullScreen(bool isToggleExpansion)
    {
        if (isToggleExpansion)
        {
            FirstColumn = new GridLength(0, GridUnitType.Auto);
            SecondColumn = new GridLength(100, GridUnitType.Star);
        }
        else
        {
            FirstColumn = new GridLength(75, GridUnitType.Star);
            SecondColumn = new GridLength(25, GridUnitType.Star);
        }
    }
}

【讨论】：

这就是我要找的东西

【解决方案4】：

您可以使用自动：

var c1 = new ColumnDefinition() { Width = GridLength.Auto };

【讨论】：