创建一个方形边框,图像内部,宽度和高度取决于统一网格列

Question

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

我有一个ListBox必须呈现一些图像,每个图像必须放在一个矩形或方形边框内.我知道,这很简单.事实是,这个列表框必须每行显示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>

问题是我获得了图像周围的矩形边框,而不是"listboxitem"周围的方形边框.

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

你有一些提示吗？

非常感谢!

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,图像应正确调整大小.见下图.

编辑二:

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

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