如何更好地在 WPF 中对图像列表框进行样式化？

Question

我已经将一个 List 从我的代码隐藏绑定到一个 ListBox，但我很难对外观进行样式化以获得我想要的。我想一次显示最多 8 张图像，但不向下滚动就不会超过这个。当窗口调整大小时，我希望图像大小随之缩放，但仍然显示不超过 8 个。这是我当前的 XAML：

<ListBox ItemsSource="{Binding PictureImagesList}">

    <ListBox.Template>

        <ControlTemplate TargetType="ListBox">

            <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">

                <ItemsPresenter/>

            </ScrollViewer>

        </ControlTemplate>

    </ListBox.Template>

    <ListBox.ItemsPanel>

        <ItemsPanelTemplate>

            <UniformGrid Columns="4" HorizontalAlignment="Center" VerticalAlignment="Top" />

        </ItemsPanelTemplate>

    </ListBox.ItemsPanel>

    <ListBox.ItemTemplate>

        <DataTemplate>

            <Image Source="{Binding}"/>

        </DataTemplate>

    </ListBox.ItemTemplate>

    <ListBox.ItemContainerStyle>

        <Style TargetType="ListBoxItem">

            <Setter Property="Background" Value="Transparent" />

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="{x:Type ListBoxItem}" >

                        <Grid Background="{TemplateBinding Background}">

                            <Border HorizontalAlignment="Center" VerticalAlignment="Center"

                        BorderBrush="{TemplateBinding BorderBrush}">

                                <ContentPresenter />

                            </Border>

                        </Grid>

                        <ControlTemplate.Triggers>

                            <Trigger Property="IsSelected" Value="True">

                                <Setter Property="BorderBrush" Value="Yellow" />

                            </Trigger>

                        </ControlTemplate.Triggers>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

    </ListBox.ItemContainerStyle>

</ListBox>

这是此 XAML 生成的图片。如您所见，图像太大了，我们只看到第二行的上半部分。如果我弄乱了 ListBoxItem 边距，我可以让它们变小，但这并不理想，因为它只有在屏幕分辨率保持不变的情况下才有效。

Answer 1

将您的图像尺寸设置为相同并使用 WrapPanel 代替：&nbsp; &nbsp; &nbsp; &nbsp; <Setter Property="ItemTemplate">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Setter.Value>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <DataTemplate>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Border Margin="5" >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Image Source="{Binding}" Stretch="Uniform" Width="400" Height="400"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Border>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </DataTemplate>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Setter.Value>&nbsp; &nbsp; &nbsp; &nbsp; </Setter>&nbsp; &nbsp; &nbsp; &nbsp; <Setter Property="ItemsPanel">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Setter.Value>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ItemsPanelTemplate>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <WrapPanel />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ItemsPanelTemplate>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Setter.Value>&nbsp; &nbsp; &nbsp; &nbsp; </Setter>或者，如果您想要固定数量的列，则根本不指定图像尺寸，而是使用 UniformGrid：&nbsp; &nbsp; &nbsp; &nbsp; <Setter Property="ItemTemplate">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Setter.Value>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <DataTemplate>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Border Margin="5" >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Image Source="{Binding}" Stretch="Uniform" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Border>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </DataTemplate>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Setter.Value>&nbsp; &nbsp; &nbsp; &nbsp; </Setter>&nbsp; &nbsp; &nbsp; &nbsp; <Setter Property="ItemsPanel">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Setter.Value>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ItemsPanelTemplate>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <UniformGrid Columns="3" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ItemsPanelTemplate>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Setter.Value>&nbsp; &nbsp; &nbsp; &nbsp; </Setter>更新：我现在有点不知所措，无法准确了解您要做什么，您发布的图片与您的描述不符。如果您希望面板是方形的，并且图像可以均匀地放大到它们周围并带有细边框，那么您必须做一些事情：1）将您的 ListBoxItem ControlTemplate 更改为具有透明背景的边框和其中的 ContentPresenter。这将确保您的黄色边框不会填满整个框，并且框的其余部分在选中时不会突出显示，但您仍然可以单击它的任意位置来选择它。2）将您的 ItemTemplate 更改为网格（以便填充所有可用空间），边框居中并带有填充（以便您在选择时能够看到黄色边框），然后将您的 Image里面的内容，但换行。这应该做的工作：<Style TargetType="{x:Type ListBox}" x:Key="PictureListBoxStyle">&nbsp; &nbsp; <Setter Property="ItemTemplate">&nbsp; &nbsp; &nbsp; &nbsp; <Setter.Value>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <DataTemplate>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid Margin="5">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Border Padding="5" HorizontalAlignment="Center" VerticalAlignment="Center">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Border.Style>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Style TargetType="Border">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Setter Property="Background" Value="Transparent" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Style.Triggers>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListBoxItem}}" Value="True">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Setter Property="Background" Value="Yellow" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </DataTrigger>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Style.Triggers>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Style>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Border.Style>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Image Source="{Binding}" Stretch="Uniform" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Border>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </DataTemplate>&nbsp; &nbsp; &nbsp; &nbsp; </Setter.Value>&nbsp; &nbsp; </Setter>&nbsp; &nbsp; <Setter Property="ItemsPanel">&nbsp; &nbsp; &nbsp; &nbsp; <Setter.Value>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ItemsPanelTemplate>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <UniformGrid Columns="3" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ItemsPanelTemplate>&nbsp; &nbsp; &nbsp; &nbsp; </Setter.Value>&nbsp; &nbsp; </Setter>&nbsp; &nbsp; <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" /></Style><Style TargetType="{x:Type ListBoxItem}">&nbsp; &nbsp; <Setter Property="Template">&nbsp; &nbsp; &nbsp; &nbsp; <Setter.Value>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ControlTemplate TargetType="{x:Type ListBoxItem}" >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Border Background="Transparent">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ContentPresenter&nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Border>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ControlTemplate>&nbsp; &nbsp; &nbsp; &nbsp; </Setter.Value>&nbsp; &nbsp; </Setter></Style>如果仍然不是，那么您需要更清楚地定义您的要求。

Answer 2

您可以使用 UniformGrid 作为 ItemsPanel 与适当的HorizontalAlignment和VerticalAlignment。还要从 DataTemplate 中删除多余的 Border 元素。<ListBox ItemsSource="{Binding PictureImagesList}">&nbsp; &nbsp; <ListBox.ItemsPanel>&nbsp; &nbsp; &nbsp; &nbsp; <ItemsPanelTemplate>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <UniformGrid Columns="4" HorizontalAlignment="Left" VerticalAlignment="Top"/>&nbsp; &nbsp; &nbsp; &nbsp; </ItemsPanelTemplate>&nbsp; &nbsp; </ListBox.ItemsPanel>&nbsp; &nbsp; <ListBox.ItemTemplate>&nbsp; &nbsp; &nbsp; &nbsp; <DataTemplate>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Image Width="200" Height="200" Margin="5" Source="{Binding}"/>&nbsp; &nbsp; &nbsp; &nbsp; </DataTemplate>&nbsp; &nbsp; </ListBox.ItemTemplate></ListBox>更新：为了使黄色选择边框直接围绕图像，请使用如下所示的 ListBoxItem 样式。要将图像缩放到完整 ListBox 宽度的（一小部分），请添加适当的 ControlTemplate。<ListBox ItemsSource="{Binding PictureImagesList}">&nbsp; &nbsp; <ListBox.Template>&nbsp; &nbsp; &nbsp; &nbsp; <ControlTemplate TargetType="ListBox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ScrollViewer HorizontalScrollBarVisibility="Disabled"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; VerticalScrollBarVisibility="Auto">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ItemsPresenter/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ScrollViewer>&nbsp; &nbsp; &nbsp; &nbsp; </ControlTemplate>&nbsp; &nbsp; </ListBox.Template>&nbsp; &nbsp; <ListBox.ItemsPanel>&nbsp; &nbsp; &nbsp; &nbsp; <ItemsPanelTemplate>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <UniformGrid Columns="4" HorizontalAlignment="Left" VerticalAlignment="Top"/>&nbsp; &nbsp; &nbsp; &nbsp; </ItemsPanelTemplate>&nbsp; &nbsp; </ListBox.ItemsPanel>&nbsp; &nbsp; <ListBox.ItemTemplate>&nbsp; &nbsp; &nbsp; &nbsp; <DataTemplate>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Image Source="{Binding}"/>&nbsp; &nbsp; &nbsp; &nbsp; </DataTemplate>&nbsp; &nbsp; </ListBox.ItemTemplate>&nbsp; &nbsp; <ListBox.ItemContainerStyle>&nbsp; &nbsp; &nbsp; &nbsp; <Style TargetType="ListBoxItem">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Setter Property="Background" Value="LightGray" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Setter Property="Template">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Setter.Value>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ControlTemplate TargetType="{x:Type ListBoxItem}" >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid Background="{TemplateBinding Background}">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Border HorizontalAlignment="Center" VerticalAlignment="Center"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; BorderThickness="5"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; BorderBrush="{TemplateBinding BorderBrush}">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ContentPresenter />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Border>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ControlTemplate.Triggers>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Trigger Property="IsSelected" Value="True">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Setter Property="BorderBrush" Value="Yellow" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Trigger>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ControlTemplate.Triggers>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ControlTemplate>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Setter.Value>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Setter>&nbsp; &nbsp; &nbsp; &nbsp; </Style>&nbsp; &nbsp; </ListBox.ItemContainerStyle></ListBox>