Lập trình thiết lập chiều rộng của cột lưới với * trong WPF

Question

Tôi muốn lập cấu hình lưới wpf theo lập trình.

Tôi muốn có thể đặt lưới bằng 2 cột, lần đầu tiên chiếm 20% dung lượng còn trống, thứ hai chiếm 80%. Trong xaml tôi sẽ sử dụng toán tử * nhưng tôi không thể tìm ra cách thực hiện điều này theo lập trình.

Trong XAML tôi sẽ làm:

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

Trong mã tôi muốn làm:

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

Hãy ai đó có thể tư vấn cho.

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

Giả sử bạn có một số nút (căn chỉnh theo chiều ngang) trong trang và cần ẩn/hiển thị các nút nhất định tùy thuộc vào một số trạng thái.

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

Tại đây, btnOne sẽ hiển thị trong trang khi được thực thi. btnOne cũng sẽ được căn chỉnh ở giữa. Bây giờ nếu chúng ta muốn Ba và Bốn được hiển thị và Một để được ẩn khi nhấp vào Một, chúng ta có thể sử dụng mã này:

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

Bạn có thể chuyển đổi giữa mức hiển thị của bất kỳ nút nào khi chạy.

Hy vọng điều này sẽ giúp ai đó!

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