Silverlight - Mise en page Question

Je crée une application Silverlight qui devrait prendre toute la largeur de l'écran de l'utilisateur. Cette application a une ligne horizontale qui accueille l'utilisateur. Ensuite, deux colonnes en dessous. La colonne de droite est toujours une taille fixe. Je veux que la colonne de gauche prenne tout l'espace restant. Pour tenter d'y arriver, je suis en utilisant le code XAML suivant:Silverlight - Mise en page Question

<Grid x:Name="layoutRoot" Background="White"> 
    <Grid.RowDefinitions> 
    <RowDefinition Height="Auto" /> 
    <RowDefinition /> 
    </Grid.RowDefinitions> 

    <Grid x:Name="greetingGrid" Margin="0,0,0,8">    
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto" /> 
    </Grid.RowDefinitions> 

    <StackPanel Orientation="Horizontal"> 
     <TextBlock Text="Welcome " /> 
     <TextBlock x:Name="usernameTextBlock" /> 
    </StackPanel>    
    </Grid>  

    <Grid x:Name="contentGrid" Grid.Row="1">    
    <Grid.ColumnDefinitions> 
     <ColumnDefinition /> 
     <ColumnDefinition /> 
    </Grid.ColumnDefinitions> 

    <Grid x:Name="leftGrid" HorizontalAlignment="Stretch"> 
     <Border x:Name="leftBorder" BorderBrush="Black" Height="250"> 
     <!-- Insert Wrap Panel of Images --!> 
     </Border> 
    </Grid> 

    <Grid x:Name="rightGrid" Width="100" Grid.Column="1" HorizontalAlignment="Right" Margin="8,0,0,0"> 
     <Border BorderBrush="Black" BorderThickness="2"> 
     <StackPanel Orientation="Vertical"> 
     <TextBlock Text="How would you like to view the images?" /> 
     <ComboBox x:Name="optionComboBox"> 
     <ComboBoxItem Content="Name" /> 
     <ComboBoxItem Content="Date" /> 
     </ComboBox> 
     </StackPanel> 
     </Border> 
    </Grid> 
    </Grid> 
</Grid>

Bizarrement, les deux colonnes inférieure sont répartis également en taille. Comment faire pour que la colonne de gauche prenne tout l'espace restant?

Merci!

Source

2010-02-15 user70192

<Grid.ColumnDefinitions> 
    <ColumnDefinition width="*" /> 
    <ColumnDefinition width="250"/> 
</Grid.ColumnDefinitions>

Utilisez * pour que la colonne de la grille prenne le reste de l'espace disponible. Gardez à l'esprit que le conteneur parent doit également prendre toute la zone pour le faire fonctionner!

Source

2010-02-15 21:56:39

Mon problème est que la "rightGrid" Largeur la valeur est animée. Parce qu'il est animé, cette approche ne fonctionne pas. J'ai ajouté "100" comme espace réservé. – user70192

Je l'ai eu! J'ai fait la largeur de la deuxième ColumnDefinition "auto". Je vous remercie! – user70192

+1 Mais la signification de * est un peu plus profonde. Tout d'abord, pensez à "1 *". D'autres colonnes ou lignes peuvent également définir "1 *" ou "2 *" ou "3 *", etc. La somme de tous les coefficients de * est prise. Le "reste de l'espace disponible" est divisé par cette somme et cela devient effectivement la valeur de *. Chaque rangée ou colonne aura sa proportion N * de l'espace disponible. – AnthonyWJones

Vous pouvez spécifier les largeurs des colonnes plutôt que sur votre "rightGrid", par exemple:

<Grid x:Name="greetingGrid" Margin="0,0,0,8"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto" /> 
     </Grid.RowDefinitions> 

     <StackPanel Orientation="Horizontal"> 
      <TextBlock Text="Welcome " /> 
      <TextBlock x:Name="usernameTextBlock" /> 
     </StackPanel> 
    </Grid> 

    <Grid x:Name="contentGrid" Grid.Row="1"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="*" /> 
      <ColumnDefinition Width="100px" /> 
     </Grid.ColumnDefinitions> 

     <Grid x:Name="leftGrid" HorizontalAlignment="Stretch" Background="Fuchsia"> 
      <Border x:Name="leftBorder" BorderBrush="Black" Height="250"> 

    </Border> 
</Grid> 

<Grid x:Name="rightGrid" Grid.Column="1" HorizontalAlignment="Right" Margin="8,0,0,0"> 
    <Border BorderBrush="Black" BorderThickness="2"> 
    <StackPanel Orientation="Vertical"> 
    <TextBlock Text="How would you like to view the images?" /> 
    <ComboBox x:Name="optionComboBox"> 
    <ComboBoxItem Content="Name" /> 
    <ComboBoxItem Content="Date" /> 
    </ComboBox> 
    </StackPanel> 
    </Border> 
</Grid>

Source

2010-02-15 22:04:57

Silverlight - Mise en page Question

Répondre

Questions connexes