Question

我正在创建一个应该占用用户屏幕宽度的Silverlight应用程序。此应用程序有一个水平行，迎接用户。然后，它下面有两列。右列始终是固定大小。我希望左栏占据任何剩余空间。为了实现这一目标，我使用以下XAML：

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

奇怪的是，两个较低的柱子的尺寸均匀分开。如何让左列占用所有剩余空间？

谢谢！

Answer 1

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

使用*作为网格列以获取剩余的可用空间。请记住，父容器还需要占用整个区域才能使其正常工作！

Answer 2

您可以指定列的宽度而不是“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>

Silverlight - 布局问题

2 个答案: