ListBox 显示水平图像 WPF [英] ListBox Displaying Horizontal Images WPF

问题描述

我正在尝试在 wpf/xaml 中创建一个控件，该控件将显示图像的水平列表.要固定的列表框的宽度(无滚动条).添加新项目时，现有项目会减少显示的图像数量以适应它(实际图像不会仅减少显示的图像数量).该功能类似于将新列添加到具有相对宽度属性(*")的网格中，并且该列包含具有固定宽度的图像.到目前为止，这是我的代码:

I'm trying to create a control in wpf/xaml that will display a horizontal list of images. The width of the listbox to be fixed (no scrollbar). When a new item is added the existing items reduce the amount of the image diplayed to accomodate it (the actual image doesn't reduce just the amount of the image shown). The functionality would be similar to adding a new column to a grid with a relative width property ("*") and the column contains an image with a fixed width. Here's my code so far:

<Window.Resources>
    <ItemsPanelTemplate x:Key="ListBox_HorizontalItems">
        <StackPanel Orientation="Horizontal" />
    </ItemsPanelTemplate>

    <DataTemplate x:Key="ListBox_DataTemplate">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50" />
            </Grid.ColumnDefinitions>
            <Image Width="150" Source="{Binding ImageSource}" />
        </Grid>
    </DataTemplate>

    <Style x:Key="ListBox_Style_Horizontal" TargetType="ListBox">
        <Setter Property="Width" Value="150" />-->
        <Setter Property="ItemTemplate" Value="{StaticResource ListBox_DataTemplate}" />
        <Setter Property="ItemsPanel" Value="{StaticResource ListBox_HorizontalItems}" />
    </Style>
</Window.Resources>

<Grid>
    <ListBox Name="lbxImages" Style="{StaticResource ListBox_Style_Horizontal}" Width="250"  Height="100" />
</Grid>

这非常接近我的需要！但是，当将新项目添加到列表中时，我无法弄清楚如何减少显示的图像数量.当前添加新项目时会出现滚动条.如果我没有很好地解释自己，这里有一些屏幕截图显示了我需要的功能:

Which is very close to what I need! However I can't work out how to reduce the amount of the image shown when a new item is added to the list. Currently a scrollbar appears when a new item is added. Incase I'm not explaining myself very well here are some screenshots showing the functionality I need:

谁能告诉我如何做到这一点?感谢您的帮助！

Can anybody show me how to achieve this? Thanks for any help!

推荐答案

使用以下 UniformGrid 作为 ItemsPanel:

Use the following UniformGrid as ItemsPanel:

<ItemsPanelTemplate>
    <UniformGrid Columns="{Binding Path=Items.Count,RelativeSource={RelativeSource AncestorType={x:Type ListBox}}}"/>
</ItemsPanelTemplate>

禁用水平滚动:

<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">

修改项目模板:

<DataTemplate>
    <Image Source="{Binding ImageSource}"
           Stretch="None"
           HorizontalAlignment="Center"/>
</DataTemplate>

这篇关于ListBox 显示水平图像 WPF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！