使网格中的图像大小相同

Question

我创建了一个包含3行3列的网格，其中中心网格的位置是边缘列的两倍。

网格本身是可拉伸的，因此行和列的大小没有固定。

网格中的4个位置包含一个带有箭头的图像，我希望这4个箭头的大小相同，但是当网格本身变大时让它们增长。因为网格不是一个理想的正方形，所以4张图像的大小不完全相同，我想知道如何实现此目标？

这是带有图像的网格的样子：

XAML代码非常基本，但是我不知道该怎么做。 XAML代码如下所示：

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

我认为我必须以最短的宽度或高度并将此宽度或高度设置为其他3张图像的宽度或高度吗？

Answer 1

您可以选择一个您认为合适的尺寸，然后将其他尺寸的高度和宽度绑定到该尺寸。

例如。

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