WPF正方形自适应父容器大小

3

我在我的WPF项目中有一个UniformGrid对象,它有2行3列,其宽度和高度都设置为自动(同时将两个对齐方式设置为Stretch)。

这个网格将容纳6个正方形,我希望它们能够充满它们所在单元格的尽可能大的空间,并在水平和垂直方向上居中。

我需要添加什么来允许这些正方形根据父元素的动态大小调整它们的长度/宽度?例如,当窗口被调整大小时。

以下是我的XAML代码:

    <UniformGrid Rows="2" Columns="3">
        <Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100"/>
        <Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100"/>
        <Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100"/>
        <Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100"/>
        <Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100"/>
        <Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100"/>
    </UniformGrid>

编辑:

Rectangle 对象需要保持正方形。

3个回答

4
<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>
<UniformGrid Rows="2" Columns="3">
<Viewbox Stretch="Uniform"><Rectangle Height="100" Width="100" Fill="#FFF4F4F5" Stroke="Black" /></Viewbox>
<Viewbox Stretch="Uniform"><Rectangle Height="100" Width="100" Fill="#FFF4F4F5" Stroke="Black" /></Viewbox>
<Viewbox Stretch="Uniform"><Rectangle Height="100" Width="100" Fill="#FFF4F4F5" Stroke="Black" /></Viewbox>
<Viewbox Stretch="Uniform"><Rectangle Height="100" Width="100" Fill="#FFF4F4F5" Stroke="Black" /></Viewbox>
<Viewbox Stretch="Uniform"><Rectangle Height="100" Width="100" Fill="#FFF4F4F5" Stroke="Black" /></Viewbox>
<Viewbox Stretch="Uniform"><Rectangle Height="100" Width="100" Fill="#FFF4F4F5" Stroke="Black" /></Viewbox>
    </UniformGrid>
  </Grid>
</Page>

1
请注意,这将缩放矩形,而不是调整其大小。 - Emond

1
你可以这样做:
<UniformGrid.Resources>
    <Style TargetType="Rectangle">
        <Setter Property="Width"
                Value="{Binding RelativeSource={RelativeSource Mode=Self},Path=ActualHeight}" />
    </Style>
</UniformGrid.Resources>

或者你可以将高度绑定到实际宽度。

不幸的是,这样并不能使它们保持最大拉伸状态。


-1
如果您删除heightwidth属性,它将只做那个。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接