How to keep grid cell height and width

Question

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

Working code using 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> 

Thanks HB for the idea of ​​using viewBox! :)

Answer 1

The “right” way to do this probably uses the general capabilities of the Grid control, but this, unfortunately, prevents the entire grid from stretching. eg.

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

You can host this in the Viewbox , but the resize behavior is probably not what you want, as it zooms in on the content. Perhaps you can find a way to make it suitable for use in your context.

Answer 2

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

To keep things square, just bind the grid Width property to the ActualHeight property of your ActualHeight :

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

Answer 3

I think you should use UniformGrid , 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>