CODEWITHSUNDEEP
wpfxaml
Roel Balink
Roel Balink

Reputation: 417

Make images in grid same size

I have created a Grid that contains 3 rows and 3 columns, where the center grid location is twice the size of the edge columns.

The Grid itself is stretchable and thus doesn't have a fixed size for the rows and columns.

4 Locations in the Grid contain an image with an arrow, I want these 4 arrows to be the same size, but let them grow when the grid itself gets larger. Because the Grid isn't a perfect square the, 4 images aren't exactly the same size and I'm wondering how I can achieve this?

This is how the grid with the images looks like: Arrows in Grid

The XAML code is very basic, but I have no idea how to do this. The XAML code looks like this:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="2*"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Image Grid.Column="1" Grid.Row="0" Source="/Images/Arrow Up.png" />
    <Image Grid.Column="0" Grid.Row="1" Source="/Images/Arrow Left.png"/>
    <Image Grid.Column="1" Grid.Row="1" Source="/Images/Light Diodes 2019.png" />
    <Image Grid.Column="2" Grid.Row="1" Source="/Images/Arrow Right.png"/>
    <Image Grid.Column="1" Grid.Row="2" Source="/Images/Arrow Down.png"/>
</Grid>

I think somehow I have to get the shortest Width or Height and set this Width or Height to the Width or Height of the other 3 images?

Upvotes: 0

Views: 564

Answers (1)

Andy
Andy

Reputation: 12276

You could pick one of them you think is a good size and bind the height and width of the others to that one.

For example.

  <Grid>
    <Grid.Resources>
        <Style TargetType="Image" x:Key="sameSizeImage">
            <Setter Property="Width" Value="{Binding ActualWidth, ElementName=im1}"   />
            <Setter Property="Height" Value="{Binding ActualHeight, ElementName=im1}"   />
        </Style>
    </Grid.Resources>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="2*"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Image Name="im1" Grid.Column="1" Grid.Row="0"  Source="/Images/AddItem_16x.png" />
    <Image Style="{StaticResource sameSizeImage}" Grid.Column="0" Grid.Row="1" Source="/Images/AddItem_16x.png" />
    <Image Grid.Column="1" Grid.Row="1" Source="/Images/AddItem_16x.png" />
    <Image Style="{StaticResource sameSizeImage}" Grid.Column="2" Grid.Row="1" Source="/Images/AddItem_16x.png"/>
    <Image  Style="{StaticResource sameSizeImage}" Grid.Column="1" Grid.Row="2" Source="/Images/AddItem_16x.png"/>
</Grid>

Upvotes: 1

Related Questions