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

Question

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

我有一个必须显示一些图像的列表框，并且每个图像都必须放在矩形或方形边框内。这很简单，我知道。事实上，这个列表框必须始终每行显示 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>

问题是我获得了图像周围的矩形边框，而不是列表框项目“周围”的方形边框。

请记住，我不能指定宽度属性，因为它们必须依赖于统一的网格列宽。

你有什么提示吗？

非常感谢!

Answer 1

从边框移除边距并将其设置在图像上，在图像周围创建一个与 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" 添加到您的 ListBox 中，图像应该可以正确调整大小。见下图。

编辑二:

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

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