Comment Définir la Colonne de la Grille MaxWidth en fonction de la Fenêtre ou de la Taille de l'Écran en XAML

J'ai un 3 grille de colonne dans une fenêtre avec un GridSplitter sur la première colonne. Je veux mettre le MaxWidth de la première colonne à un tiers de la mère de la Fenêtre ou de la Page Width (ou ActualWidth) et je préfère le faire dans le code XAML, si possible.

C'est quelques exemples de XAML pour jouer avec dans XamlPad (ou similaire) qui montre ce que je suis en train de faire.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="Column1" Width="200"/>
            <ColumnDefinition x:Name="Column2" MinWidth="50" />
            <ColumnDefinition x:Name="Column3" Width="{ Binding ElementName=Column1, Path=Width }"/>
            </Grid.ColumnDefinitions>

        <Label Grid.Column="0" Background="Green" />
        <GridSplitter Grid.Column="0" Width="5" />
        <Label Grid.Column="1" Background="Yellow" />
        <Label Grid.Column="2" Background="Red" />
    </Grid>
</Page>

Comme vous pouvez le voir, le droit de la largeur de colonne est lié à la largeur de la première colonne, de sorte que lorsque vous faites glisser la colonne de gauche en utilisant le séparateur, la colonne de droite fait la même chose 🙂
Si vous faites glisser la colonne de gauche vers la droite, finalement, il va glisser plus de la moitié de la page/fenêtre et sur le côté droit de la fenêtre, en repoussant la colonne 2 et 3.

Je veux éviter ce par la définition de la MaxWidth de la colonne 1 à un tiers de la largeur de la fenêtre (ou quelque chose comme ça). Je peux le faire dans le code derrière assez facilement, mais comment le faire dans "XAML Seulement"?

EDIT: David Schmitt suggéré d'utiliser SharedSizeGroup au lieu de liaison, ce qui est une excellente suggestion. Mon exemple de code devrait ressembler à ceci ensuite:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
        <Grid IsSharedSizeScope="True">
            <Grid.ColumnDefinitions>
                <ColumnDefinition x:Name="Column1" SharedSizeGroup="ColWidth" Width="40"/>
                <ColumnDefinition x:Name="Column2" MinWidth="50" Width="*" />
                <ColumnDefinition x:Name="Column3" SharedSizeGroup="ColWidth"/>
            </Grid.ColumnDefinitions>
            <Label Grid.Column="0" Background="Green" />
            <GridSplitter Grid.Column="0" Width="5" />
            <Label Grid.Column="1" Background="Yellow" />
            <Label Grid.Column="2" Background="Red" />
        </Grid>
</Page>

OriginalL'auteur Johan Danforth | 2008-09-17

  1. 7

    Je pense que le XAML seule approche est quelque peu tortueux, mais ici, c'est une façon de le faire.

    <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:sys="clr-namespace:System;assembly=mscorlib"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

    <!-- This contains our real grid, and a reference grid for binding the layout-->
    <Grid x:Name="Container">

      <!-- hidden because it's behind the grid below -->
      <Grid x:Name="LayoutReference">
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*"/>
          <ColumnDefinition Width="*"/>
          <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <!-- We need the border, because the column doesn't have an ActualWidth -->
        <Border x:Name="ReferenceBorder" 
                Background="Black" />
        <Border Background="White" Grid.Column="1" />
        <Border Background="Black" Grid.Column="2" />
      </Grid>

      <!-- I made this transparent, so we can see the reference -->
      <Grid Opacity="0.9">
          <Grid.ColumnDefinitions>
              <ColumnDefinition x:Name="Column1" 
                                MaxWidth="{Binding ElementName=ReferenceBorder,Path=ActualWidth}"/>
              <ColumnDefinition x:Name="Column2" 
                                MinWidth="50"  />
              <ColumnDefinition x:Name="Column3" 
                                Width="{ Binding ElementName=Column1, Path=Width }"/>
              </Grid.ColumnDefinitions>

          <Label Grid.Column="0" Background="Green"/>
          <GridSplitter Grid.Column="0" Width="5" />
          <Label Grid.Column="1" Background="Yellow" />
          <Label Grid.Column="2" Background="Red" />
      </Grid>
    </Grid>

</Page>
    Veuillez utiliser un SharedSizeGroup au lieu de la Liaison à la Largeur de la colonne d'autres!
    J'ai essayé le code xaml ci-dessus dans XamlPad et il se comportait un peu bizarre, mais je vois votre point de vue! Merci.

    OriginalL'auteur Christopher Bennage

  2. 0

    Trop paresseux pour le fait de l'écrire moi-même, mais vous devriez être capable d'utiliser une mathématique convertisseur et le lier à votre parent windows largeur (soit par leur nom, ou avec un RelativeSource ancêtre de recherche). 

    //I know I borrowed this from someone, sorry I forgot to add a comment from whom
public class ScaledValueConverter : IValueConverter
{
  public Object Convert(Object value, Type targetType, Object parameter, System.Globalization.CultureInfo culture)
  {
     Double scalingFactor = 0;
     if (parameter != null)
     {
        Double.TryParse((String)(parameter), out scalingFactor);
     }

     if (scalingFactor == 0.0d)
     {
        return Double.NaN;
     }

     return (Double)value * scalingFactor;
  }

  public Object ConvertBack(Object value, Type targetType, Object parameter, System.Globalization.CultureInfo culture)
  {
     throw new Exception("The method or operation is not implemented.");
  }
}

    OriginalL'auteur Thomas