Configurar programáticamente el ancho de una columna de cuadrícula con * en WPF

Question

Quiero configurar de forma programática una grilla wpf.

Quiero ser capaz de establecer una grilla con 2 columnas, la primera ocupa el 20% del espacio disponible, la segunda ocupa el 80%. En xaml usaría el operador * pero no puedo encontrar la manera de hacerlo mediante programación.

en XAML que haría:

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

En el código que quiero hacer:

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

Por favor, alguien podría aconsejar.

Answer 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); 

Answer 2

Supongamos que tiene algunos botones (alineados horizontalmente) en una página y necesita ocultar/mostrar ciertos dependiendo de algún estado.

<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> 

Aquí btnOne estará visible en la página cuando se ejecute. btnOne también estará alineado en el centro. Ahora bien, si queremos tres y cuatro que se mostrará y uno que se oculta cuando se hace clic en uno, podemos utilizar este código:

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); 
} 

Puede alternar entre la visibilidad de cualquier botón en tiempo de ejecución.

Espero que esto ayude a alguien!

Answer 3

In MVVM way: 
------------ 
*XAML(View) code:* 

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

**ViewModel (C#) code** 

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); 
     } 
    } 
}