c# - 创建一个正方形边框，其内部的图像和宽度和高度取决于统一的网格列

我认为这是一个棘手的问题。

我有一个列表框，必须显示一些图像，并且每个图像都必须放在矩形或正方形边框内。我知道这很简单。事实是，此列表框必须每行始终显示3个元素，无论是屏幕分辨率还是窗口大小。

为了获得它，我对列表框进行了如下模板化：

<ListBox Grid.Column="2" Grid.Row="1" x:Name="_productsLB" SelectedIndex="0"
             ItemsSource="{Binding Products}" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
             HorizontalContentAlignment="Stretch">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Columns="3" Rows="4"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Border BorderThickness="1" Background="White" BorderBrush="Black" Margin="8"
                    Width="Auto" Height="Auto" HorizontalAlignment="Stretch">
                    <Image Source="{Binding ImagePath}" Stretch="Uniform"/>
                </Border>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

问题是我在列表框周围获得了矩形边框，而不是在框框周围获得了方形边框。

请记住，我无法指定width属性，因为它们必须取决于统一的网格列宽度。

你有什么提示吗？

非常感谢！

最佳答案

从边框中移除边距并将其设置在Image上，将在Image周围创建一个边框，该边框与ListviewItem一样大。见图片。

如果那不是您期望的，请更清楚地定义。

  <Border BorderThickness="1" Background="White" BorderBrush="Black" Margin="8"
          Width="Auto" Height="{Binding RelativeSource={RelativeSource Self}, Path=ActualWidth}"
          HorizontalAlignment="Stretch">
    <Image Source="{Binding ImagePath}" Stretch="Uniform"/>

编辑：

将VerticalContentAlignment="Stretch"添加到您的列表框，并且图像应正确调整大小。见下图。

编辑二：

如果希望图像显示为正方形，则必须将“边框的高度”设置为当前的“宽度”：

Height="{Binding RelativeSource={RelativeSource Self}, Path=ActualWidth}"