Silverlight - 佈局問題

我正在創建一個Silverlight應用程序，該應用程序應占用用戶屏幕的寬度。這個應用程序有一個問候用戶的水平行。然後，它下面的兩列。右欄總是固定的大小。我希望左欄佔據任何剩餘空間。爲了實現此目的，我使用以下XAML：Silverlight - 佈局問題

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

奇怪的是，兩個較低的列在大小上均勻分割。如何讓左欄佔據所有剩餘的空間？

謝謝！

來源

2010-02-15 user70192

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

對網格列使用*表示剩下的可用空間。請記住，父容器還需要佔用整個區域才能使其工作！

來源

2010-02-15 21:56:39

我的問題是，「rightGrid」寬值是動畫的。因爲它是動畫效果，所以這種方法不起作用。我添加了「100」作爲佔位符。 – user70192 2010-02-15 22:02:45

我懂了！我做了第二個ColumnDefinition「auto」的寬度。謝謝！ – user70192 2010-02-15 22:04:00

+1但是*的含義稍微深一點。首先想到的就是「1 *」。其他列或行也可以定義「1 *」或「2 *」或「3 *」等。*的所有係數總和。「剩餘可用」空間除以這個總和，並且有效地變成*的值。每行或列將獲得其可用空間的N *比例。 – AnthonyWJones 2010-02-16 09:18:52

您可以指定列的寬度，而不是你的「rightGrid」，例如：

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

來源

2010-02-15 22:04:57

Silverlight - 佈局問題

回答

相關問題