Programowe ustawianie szerokości kolumny siatki z * w WPF

Question

Chcę programowo skonfigurować siatkę wpf.

Chcę móc ustawić siatkę z 2 kolumnami, pierwsza zajmuje 20% dostępnej przestrzeni, a druga zajmuje 80%. W Xaml użyłbym operatora *, ale nie mogę tego zrobić programowo.

w XAML zrobiłbym:

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

W kodzie chcę zrobić:

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

Proszę może ktoś doradzić.

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

Załóżmy, że masz kilka przycisków (wyrównanych poziomo) na stronie i musisz je ukryć/pokazać w zależności od pewnego statusu.

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

Tutaj btnOne będzie widoczny na stronie po uruchomieniu. btnOne będzie również wyrównany w środku. Teraz, jeśli chcemy, trzy i cztery na wyświetlenie i jeden być ukryte po kliknięciu na jednym, możemy użyć tego kodu:

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

Można przełączać między widoczności jakiegokolwiek przycisku przy starcie.

Mam nadzieję, że to pomoże komuś!

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