0

我有一个 BitmapSources 的 ObservableCollection，我想将它们全部显示在一个网格中并覆盖选定和未选定的样式。我一直在寻找很多不同的方法来做到这一点，但没有设法让我满意。我最近的尝试是这样的：

<ListBox ItemsSource={Binding Images}>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel ItemsHost="True">
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Border BorderBrush="Black" BorderThickness="3">
                <Image Source={Binding}>
            </Border>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

这确实显示图像，但 WrapPanel 总是只有一行......我不想水平滚动，所以我希望它自己进行换行或能够告诉它它应该只有 3每行的项目或类似的东西。如果没有 WrapPanel，图像每行占一行。另外，我真的不明白如何覆盖所选项目的样式等，因为 DataTemplate 的 DataType 现在是 BitmapSource，而不是 ListBoxItem ...

我还尝试了具有类似结果的 DataGrid（这似乎更合适）。

我该怎么做呢？

4

3 回答 3

2

定义UniformGrid为您的ItemsPanel并将Columns值设置为您希望每行拥有的项目数。

          <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="3"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>

以及您的样式以覆盖默认选择背景和边框画笔设置：

           <ListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                    <Style.Resources>
                        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
                         Color="Transparent"/>
                    </Style.Resources>
                    <Setter Property="BorderThickness" Value="0.5"/>
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="BorderBrush" Value="blue"/>
                        </Trigger>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property="BorderBrush" Value="Red"/>
                        </Trigger>
                    </Style.Triggers>

                </Style>

            </ListBox.ItemContainerStyle>
于 2013-10-10T09:30:43.493 回答
1

您可以简单地禁用水平滚动。这将使 WrapPanel 包装它的孩子。

<ListBox ItemsSource="{Binding Images}"
         ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Border BorderBrush="Black" BorderThickness="3">
                <Image Stretch="None" Source="{Binding}"/>
            </Border>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>
于 2013-10-10T09:28:25.507 回答
1


-编辑-此答案中有关列表框宽度的部分不正确，请参阅 clemens答案

-原始帖子-
您需要通过设置宽度或使用其他一些父布局来限制列表框的宽度。否则，换行面板将要求所有可用宽度以将所有内容放在一行上。例如，在使用滚动窗格时，这发生在我身上很多

一个技巧是为元素设置不同的背景颜色，以查看谁实际占用了空间

您可以通过设置ItemsContainerStyle来更改所选样式

于 2013-10-10T09:16:00.507 回答