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

发布于 2024-12-26 06:27:09 字数 1239 浏览 0 评论 0原文

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

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

你有一些提示吗？

太感谢了！

原文

I think this is a little tricky problem.

I have a ListBox that must present some images and each image must be put inside a rectangle or a square border. This is simple, I know. The fact is that this listbox must show always 3 elements per row, whether the screen resolution or window size.

In order to obtain it I've templated the listbox like this:

<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>

The problem is that I obtain a rectangular border around the image instead of a square border "around" the listboxitem.

Remember that I can't specifiy width property because they must be dependent to the uniform grid column width.

Do you have some hints?

Thank you so much!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

悲欢浪云 2025-01-02 06:27:09

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

编辑 II：

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

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

图像边框

Removing the Margin from the border and setting it on the Image, creates a Border around the Image which is exactly as big as a ListviewItem is. See picture.

If that is not what you expected, please define more clearly.

  <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"/>

EDIT:

Add VerticalContentAlignment="Stretch" to your ListBox and the images should resize properly. See picture below.

EDIT II:

If you want the images to appear as squares, you have to set the Border's Height to its current Width:

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

Border around images

回复收藏 0 原文

快乐很简单 2025-01-02 06:27:09

试试这个

<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>

Try this

<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>

回复收藏 0 原文

~没有更多了~