web-dev-qa-db-fra.com

Définition par programmation de la largeur d'une colonne de grille avec * dans WPF

Je veux configurer par programmation une grille wpf.

Je veux pouvoir définir une grille à 2 colonnes, la première occupant 20% de l'espace disponible, la seconde occupant 80%. Dans xaml, j'utiliserais l'opérateur *, mais je ne sais pas comment faire cela par programme.

En Xaml je ferais:

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

Dans le code que je veux faire:

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

S'il vous plaît quelqu'un pourrait-il conseiller.

wpfgrid
38
user589195
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);
92
Klaus78

Supposons que vous ayez quelques boutons (alignés horizontalement) dans une page et que vous ayez besoin de masquer/afficher certains en fonction de certains statuts.

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

Ici, btnOne sera visible dans la page lors de son exécution. btnOne sera également aligné au centre. Maintenant, si nous voulons que trois et quatre soient affichés et un soit caché lorsque vous cliquez sur un, nous pouvons utiliser ce code:

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

Vous pouvez basculer entre la visibilité de n'importe quel bouton lors de l'exécution.

J'espère que cela aide quelqu'un!

18
Venugopal M
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);
        }
    }
}
4
Sathya Ram