显示水平图像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">

修改ItemTemplate:

Modify ItemTemplate:

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

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