Hide breadcrumb items when longer than container

Question

I've created a breadcrumb in my XAML using a ListBox control. It works nicely. However, when I try to show add too many items, naturally it only shows some of them. I want to somehow hide the left-hand items until the right element is visible. Ideally it should leave some free space (on right) too. How can I do this?

                <ListBox Height="80" HorizontalAlignment="Stretch" x:Name="breadcrumb"
            MinWidth="300" Background="Transparent" BorderThickness="0"
            ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Hidden">
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Margin="8,0,0,0" Orientation="Horizontal" HorizontalAlignment="Stretch" Background="Transparent">
                            </StackPanel>
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                    <ListBox.ItemContainerStyle>
                        <Style TargetType="ListBoxItem">
                            <Setter Property="Background" Value="#111"/>
                            <Setter Property="BorderBrush" Value="#AAA"/>
                            <Setter Property="HorizontalContentAlignment" Value="Center"/>
                            <Setter Property="VerticalContentAlignment" Value="Center"/>
                            <Setter Property="Padding" Value="0"/>
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="ListBoxItem">
                                        <StackPanel Orientation="Horizontal" Margin="-8,0,0,0">
                                            <Image Source="Assets/breadcrumb.png" VerticalAlignment="Center" Margin="5,0,0,0"/>
                                            <ContentPresenter />
                                        </StackPanel>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </ListBox.ItemContainerStyle>
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel VerticalAlignment="Stretch">
                                <TextBlock FontSize="35" Text="{Binding Name}" VerticalAlignment="Center" Padding="5,10"/>
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>

Answer 1

You may need to build a custom Panel for the ListBox.ItemsPanelTemplate. Your required functionality could be created quite simply in this manner as you will essentially be able to measure each breadcrumb as it is rendered and only show the ones that fit.

If you have no experience of this yet, don't be put off... you can achieve some wonderful things with custom Panels. Here are some articles to help you if you need them:

Panels Overview (MSDN),

How to create a Custom Layout Panel in WPF

Creating Custom Panels In WPF