Question

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!

Answer 1

Use the following UniformGrid as ItemsPanel:

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

Disable horizontal scrolling:

<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">

Modify ItemTemplate:

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