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>

问题是我在图像周围获得了一个矩形边框，而不是listboxitem周围的方形边框。 请记住，我不能指定width属性，因为它们必须依赖于统一的网格列宽度。 你有什么提示吗？

---

非常感谢你

从边框中删除边距并将其设置在图像上，会在图像周围创建一个与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"/>

试试这个

<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> 
            <Grid>
            <Border BorderThickness="1" Background="White" BorderBrush="Black" Margin="8" 
                Width="{Binding ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=Grid}}" Height="="{Binding ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=Grid}}" > 
                <Image Source="{Binding ImagePath}" Stretch="Uniform" />                         
            </Border>
            </Grid>                    
        </DataTemplate> 
    </ListBox.ItemTemplate> 
</ListBox> 

如果删除Width=“Auto”Height=“Auto”并将水平对齐更改为“Center”？相同的结果：/n如果在边框内放置网格，h/v对齐拉伸，然后将图像设置为h/v对齐中心，该怎么办？您的列表框项目是一个图像，我想您的问题是在边框上设置了边距=“8”，您可以将其设置为零，然后在图像上设置边距。我提出了与BigL建议的相同的解决方案：删除边框边距将使其与listviewItem一样大。也许发布一张你期望得到的结果的图片？这是我想要的结果，但是我试图展示的图像有不同的分辨率（这是均匀拉伸的原因）。在这个解决方案中，您使用的是标准的Windows背景，它们都是1024*768图像。我的图像大小不一。有的是肖像画，有的是风景画，有的几乎是正方形。我试过你的建议，但结果不变。你确定这对不同纵横比的图像也适用吗？好的，现在我明白你的问题了。查看我的编辑并尝试一下。是图像还是那些边框是矩形的，我以为OP希望它们是方形的？@Bob你说得对，我没有将边框高度设置为方形。修正了类似于你的方法，效果很好。如果不清楚，我很抱歉。“正方形”的意思是宽度=高度。谢谢你们！
<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> 
            <Grid>
            <Border BorderThickness="1" Background="White" BorderBrush="Black" Margin="8" 
                Width="{Binding ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=Grid}}" Height="="{Binding ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=Grid}}" > 
                <Image Source="{Binding ImagePath}" Stretch="Uniform" />                         
            </Border>
            </Grid>                    
        </DataTemplate> 
    </ListBox.ItemTemplate> 
</ListBox>