3

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

我有一个必须显示一些图像的列表框，并且每个图像必须放在一个矩形或方形边框内。这很简单，我知道。事实上，这个列表框每行必须始终显示 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 属性，因为它们必须依赖于统一的网格列宽。

你有一些提示吗？

非常感谢！

4

2 回答 2

8

从边框中删除 Margin 并将其设置在 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"到您的 ListBox 并且图像应该正确调整大小。见下图。

编辑二：

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

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

图像周围的边框

于 2012-01-11T11:04:48.757 回答
1

试试这个

<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>
于 2012-01-11T12:20:11.200 回答