如何以百分比指定网格行高?

时间:2017-08-10 08:51:06

标签: wpf xaml

我有两行:

 <Grid.RowDefinitions>
    <RowDefinition Height="85.7*" />
    <RowDefinition Height="14.3*" />
 </Grid.RowDefinitions>

第一个是空的,第二个包含一个组合框:

<ComboBox Grid.Row="1" Grid.RowSpan="1" ItemsSource="{Binding Names}" SelectedIndex="{Binding NameIndex}"/>

虽然我指定第二行的高度应该只有14.3%,但两行的高度都相等。也许我在这里错过了一些概念?

完整代码:

     <ListViewItem>
                                <Grid>

                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="0.857*" />
                                        <RowDefinition Height="0.143*" />
                                    </Grid.RowDefinitions>

                                    <Image Name="thumbImage" Grid.Row="0" Grid.RowSpan="2" Stretch="UniformToFill" Source="{Binding MainThumbImagePath}"/>

                                    <Image Name="contTitleImage" Grid.Row="0" Grid.RowSpan="2" Stretch="UniformToFill" Source="{Binding SlideTitleImagePath}"></Image>


                                    <ComboBox  Name="Names" Grid.Row="1" Grid.RowSpan="1" SelectedIndex="{Binding NameIndex}"/>


                                </Grid>
</ListViewItem>

2 个答案:

答案 0 :(得分:1)

假设您允许Grid占用所有可用空间,您应该拥有以下内容:

<Grid>
   <Grid.RowDefinitions>
      <RowDefinition Height="0.143*"/>
      <RowDefinition Height="0.857*"/>
   </Grid.RowDefinitions>
   <Grid.ColumnDefinitions>
      <ColumnDefinition/>
      <ColumnDefinition/>
   </Grid.ColumnDefinitions>
</Grid>  

看来我的电脑显示的结果与其他人不同。如果我将0.143*放入使用14.3%的可用空间。因此,如果我们有2个项目,那么该行将占据屏幕可用50%的14.3%。但是,如果我指定14.3*,则需要占屏幕可用50%的143% 的修改
根据{{​​3}}星级网格测量定义为:

  

星号大小用于按加权比例分配可用空间。   在可扩展应用程序标记语言(XAML)中,星号表示为*或2 *。在第一种情况下,行或列将接收可用空间的一倍;在第二种情况下,行或列将接收可用空间的两倍,依此类推。

答案 1 :(得分:1)

回应评论

  

然而,要求是图片占据整个项目空间并且组合框位于其顶部并覆盖底部图片的那一小部分

不要与RowSpan一起玩这类游戏。而是使用嵌套网格:

<Grid>
    <Image x:Name="FullSpaceContent"/>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="857*"/>
            <RowDefinition Height="143*"/>
        </Grid.RowDefinitions>
        <ComboBox Grid.Row="1" x:Name="BottomPartContentOverlappingTheImage"/>
    </Grid>
</Grid>

只需确保外部网格大小适合图像,内部网格大小跨越其父级大小。