Scale Images to fit all into a horizontal aligned Listbox

Question

I have a horizontal Listbox bound to an enum including a EnumToImageSource Converter working and need the Listbox/view to get a selectedItem.

I need the images in the Listbox to scale down their width to be all visible side by side without a horizontal scrollbar appearing even when resizing the window.

The Solutions in this question only work for normal vertical Listviews. Can this even be done what i'm trying to archive?

<ListBox HorizontalContentAlignment="Stretch" 
                         ScrollViewer.HorizontalScrollBarVisibility="Hidden" 
                         ItemsSource="{Binding Source={StaticResource shoeValuesProvider}}">
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>

                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Image Source="{Binding Converter={StaticResource ShoeToImageConverter}}"/>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>

Have you tried `UniformGrid` as `ItemsPanelTemplate`? Are you using `ListBox` to have `SelectedItem`? I don't see binding, maybe you don't need `ListBox` at all? — Sinatr, Mar 23 '16 at 11:14
Edited my question, i indeed use it to get a `SelectedItem` - `Uniformgrid` wraps the Images on a new line without scaling them down — d-fens_, Mar 23 '16 at 11:19
@Sinatr my posted Answer works, but when selecting the last Image the View Scrolls for a few pixels to the left, how can i solve that? It seems there is a border somewhere that consumes a few pixels space — d-fens_, Mar 23 '16 at 12:12
Ask a new question about it. Don't forget to add screenshot and corresponding code. Here is [my guess](http://stackoverflow.com/q/373778/1997232). — Sinatr, Mar 23 '16 at 12:48

score 0 · Accepted Answer · edited May 23 '17 at 12:15

Thanks to Sinatr's comment i found out the solution which indeed uses a UniformGrid with one Row defined and setting the width to the ancestor ScrollContentPresenter as noted here:

<StackPanel x:Name="ReferenceStackPanel">
            <ListBox HorizontalContentAlignment="Stretch" 
                         ScrollViewer.HorizontalScrollBarVisibility="Hidden" 
                         SelectedItem="{Binding ShoeModel}" 
                         ItemsSource="{Binding Source={StaticResource shoeValuesProvider}}">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <UniformGrid  Margin="0" Rows="1" Width="{Binding ActualWidth,RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ScrollContentPresenter}}}"></UniformGrid>
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Image Source="{Binding Converter={StaticResource ShoeToImageConverter}}"/>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </StackPanel>

Scale Images to fit all into a horizontal aligned Listbox

1 Answers1