如何保持网格单元的高度和宽度相同

发布于 2024-11-05 08:31:21 字数 1283 浏览 5 评论 0原文

调整大小时我需要保持 Grid 单元格高度 = 宽度。

使用 viewBox 的工作代码：

  <Viewbox>
        <Grid>
            <Grid.RowDefinitions>
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="1*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Label Grid.Row="0" Grid.Column="0" Background="Black" Width="{Binding RelativeSource={RelativeSource Self}, Path=ActualHeight}"></Label>
                <Label Grid.Row="1" Grid.Column="0" Background="Gray" Width="{Binding RelativeSource={RelativeSource Self}, Path=ActualHeight}"></Label>
                <Label Grid.Row="0" Grid.Column="1" Background="Gray" Width="{Binding RelativeSource={RelativeSource Self}, Path=ActualHeight}"></Label>
                <Label Grid.Row="1" Grid.Column="1" Background="Black" Width="{Binding RelativeSource={RelativeSource Self}, Path=ActualHeight}"></Label>
            </Grid>
        </Viewbox>

感谢 HB 提出使用 viewBox 的想法！ :)

原文

I need to keep the Grid cell height = width when resizing.

The working code using a viewBox:

  <Viewbox>
        <Grid>
            <Grid.RowDefinitions>
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="1*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Label Grid.Row="0" Grid.Column="0" Background="Black" Width="{Binding RelativeSource={RelativeSource Self}, Path=ActualHeight}"></Label>
                <Label Grid.Row="1" Grid.Column="0" Background="Gray" Width="{Binding RelativeSource={RelativeSource Self}, Path=ActualHeight}"></Label>
                <Label Grid.Row="0" Grid.Column="1" Background="Gray" Width="{Binding RelativeSource={RelativeSource Self}, Path=ActualHeight}"></Label>
                <Label Grid.Row="1" Grid.Column="1" Background="Black" Width="{Binding RelativeSource={RelativeSource Self}, Path=ActualHeight}"></Label>
            </Grid>
        </Viewbox>

Thank's to H.B. for the idea to use a viewBox! :)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

烙印 2024-11-12 08:31:21

执行此操作的“正确”方法可能是使用 Grid 控件的共享大小功能，但遗憾的是这会阻止拉伸整个网格。例如，

<Grid Grid.IsSharedSizeScope="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition SharedSizeGroup="A"/>
        <ColumnDefinition SharedSizeGroup="A"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition SharedSizeGroup="A"/>
        <RowDefinition SharedSizeGroup="A"/>
    </Grid.RowDefinitions>
    <Label Grid.Row="0" Grid.Column="0" Background="Red"   Content="Lorem"/>
    <Label Grid.Row="1" Grid.Column="0" Background="White" Content="Lorem ipsum"/>
    <Label Grid.Row="0" Grid.Column="1" Background="White" Content="Lorem ipsum dolor"/>
    <Label Grid.Row="1" Grid.Column="1" Background="Red"   Content="Lorem ipsum dolor sit"/>
</Grid>

可以将其放置在 Viewbox 中，但其调整大小行为可能不是您想要的，因为它会缩放内容。也许您可以找到一种方法使其在您的环境中可用。

The "proper" way to do this is probably using the shared-size features of the Grid control, but this sadly prevents stretching the whole grid. e.g.

<Grid Grid.IsSharedSizeScope="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition SharedSizeGroup="A"/>
        <ColumnDefinition SharedSizeGroup="A"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition SharedSizeGroup="A"/>
        <RowDefinition SharedSizeGroup="A"/>
    </Grid.RowDefinitions>
    <Label Grid.Row="0" Grid.Column="0" Background="Red"   Content="Lorem"/>
    <Label Grid.Row="1" Grid.Column="0" Background="White" Content="Lorem ipsum"/>
    <Label Grid.Row="0" Grid.Column="1" Background="White" Content="Lorem ipsum dolor"/>
    <Label Grid.Row="1" Grid.Column="1" Background="Red"   Content="Lorem ipsum dolor sit"/>
</Grid>

One could place this in a Viewbox but the resize behavior of that is probably not what you want, since it zooms the contents. Maybe you can find a way to make this usable in your context.

回复收藏 0 原文

泪痕残 2024-11-12 08:31:21

WPF 提供了一个 UniformGrid - 您可能会发现这对您想要做的事情更有帮助。这是一篇文章来演示它：
http://www.c-sharpcorner.com/UploadFile/yougerthen/308222008124636PM /3.aspx

为了保持正方形，只需绑定网格将 Width 属性设置为其自己的 ActualHeight 属性：

Width="{Binding RelativeSource={RelativeSource Self}, Path=ActualHeight}"

WPF provides a UniformGrid - you might find this more helpful for what you are trying to do. Here is an article that demonstrates it:
http://www.c-sharpcorner.com/UploadFile/yougerthen/308222008124636PM/3.aspx

To keep things square just bind the grid's Width property to its own ActualHeight property:

Width="{Binding RelativeSource={RelativeSource Self}, Path=ActualHeight}"

回复收藏 0 原文

梦言归人 2024-11-12 08:31:21

我认为你应该使用 UniformGrid相反，或者你可以尝试类似的方法：

<Grid ShowGridLines="True" x:Name="grid" >
  <Grid.RowDefinitions>
    <RowDefinition Height="100" />
    <RowDefinition Height="50" />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="{Binding ElementName=grid, Path=RowDefinitions[0].Height}" />
    <ColumnDefinition Width="{Binding ElementName=grid, Path=RowDefinitions[1].Height}" />
  </Grid.ColumnDefinitions>
</Grid>

I think you should use a UniformGrid instead, or you can try something like:

<Grid ShowGridLines="True" x:Name="grid" >
  <Grid.RowDefinitions>
    <RowDefinition Height="100" />
    <RowDefinition Height="50" />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="{Binding ElementName=grid, Path=RowDefinitions[0].Height}" />
    <ColumnDefinition Width="{Binding ElementName=grid, Path=RowDefinitions[1].Height}" />
  </Grid.ColumnDefinitions>
</Grid>

回复收藏 0 原文

~没有更多了~