Question

I want to create a simple breadcrumb bar with ListView. Following a simple wireframe screenshot what I would like to archive in the future:

Now, I already created already some code, mainly doing it with DataTemplates, which works actually quite well, but I have some visual problems I am not able to solve:

• Main problem concerns the different width of the items. The center of an “arrow” should be stretched and the tail and head should be a fixed width…
• The other problem is the visual style of the first and last items

Here’s the actual code:

<ListView DockPanel.Dock="Left" ItemsSource="{Binding TagList}"
                MinWidth="300" Background="Transparent" BorderThickness="0"
                ScrollViewer.HorizontalScrollBarVisibility="Hidden" 
                ScrollViewer.VerticalScrollBarVisibility="Hidden" Margin="8,0,0,0">

                    <ListView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal"></StackPanel>
                        </ItemsPanelTemplate>
                    </ListView.ItemsPanel>
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <Grid Margin="-8,0,0,0">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="8"/>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="8"/>
                                    </Grid.ColumnDefinitions>
                                    <Path Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFC64242" Data="F1 M 112,144L 104,144L 112,160L 104,176L 112,176" HorizontalAlignment="Stretch" Height="Auto" VerticalAlignment="Stretch" Width="Auto"/>
                                    <Grid HorizontalAlignment="Stretch" Height="Auto" VerticalAlignment="Stretch" Width="Auto" Grid.Column="1">
                                        <Rectangle Stretch="Fill" Fill="#FFC64242" HorizontalAlignment="Stretch" Height="Auto" Margin="0.5" VerticalAlignment="Stretch" Width="Auto"/>
                                        <Path Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 128,144L 160,144" HorizontalAlignment="Stretch" Height="1" Margin="0" VerticalAlignment="Top" Width="Auto"/>
                                        <Path Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 128,176L 160,176" HorizontalAlignment="Stretch" Height="1" Margin="0" VerticalAlignment="Bottom" Width="Auto"/>
                                    </Grid>
                                    <Path Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFC64242" Data="F1 M 168,144L 176,160L 168,176" Height="Auto" VerticalAlignment="Center" Width="8" HorizontalAlignment="Right" Grid.Column="2" d:LayoutOverrides="GridBox"/>
                                    <DockPanel LastChildFill="True" Grid.ColumnSpan="2" Grid.Column="1">
                                        <Label DockPanel.Dock="Left"  FontSize="12" Content="{Binding Content, FallbackValue=Tagname n/a}" HorizontalAlignment="Left" Grid.Column="0" VerticalAlignment="Center" d:LayoutOverrides="Height" Margin="8,0"/>
                                        <Button DockPanel.Dock="Right" Content="X" Background="Transparent" FontSize="12" Command="{Binding RemoveTagBtn}" Grid.Column="0" Width="13.077" d:LayoutOverrides="Height" VerticalAlignment="Center" Margin="0,0,8,0"/>
                                        <!--<Border Background="#FFf7f7f7" BorderBrush="#FFc9c9c9" BorderThickness="1" CornerRadius="4" HorizontalAlignment="Left" Margin="0,0,0,5.96" d:LayoutOverrides="Height"/>     -->
                                    </DockPanel>
                                </Grid>
                            </Grid>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>

Answer 1

Now as I had to find an answer myself in short time, this is my current solution. Also if you do not need the “selectable” feature of ListBox, you can exchange it with ItemControl.

Here’s the code. Please be aware that I’ve commented out the “IsSelected” Triggers for the ItemStyleContainer…

 <ListBox Padding="0" DockPanel.Dock="Left" ItemsSource="{Binding TagList}"
                MinWidth="300" Background="Transparent" BorderThickness="0"
                ScrollViewer.HorizontalScrollBarVisibility="Hidden" 
                ScrollViewer.VerticalScrollBarVisibility="Hidden">
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Margin="8,0,0,0" Orientation="Horizontal"></StackPanel>
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                    <ListBox.ItemContainerStyle>
                        <Style TargetType="{x:Type ListBoxItem}">
                            <Setter Property="Background" Value="{DynamicResource LXBarButtonBackgroundNormal}"/>
                            <Setter Property="BorderBrush" Value="{DynamicResource LXBarButtonBorderNormal}"/>
                            <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
                            <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
                            <Setter Property="Padding" Value="0"/>
                            <Setter Property="SnapsToDevicePixels" Value="true"/>
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="ListBoxItem">

                                        <DockPanel LastChildFill="True" Margin="-8,0,0,0">
                                            <Path DockPanel.Dock="Left"  Stroke="{DynamicResource LXBarButtonBorderNormal}" Fill="{DynamicResource LXBarButtonBackgroundNormal}" Data="F1 M 112,144L 104,144L 112,160L 104,176L 112,176" Stretch="Fill" Height="32" Width="8" />  
                                            <Path DockPanel.Dock="Right" Stroke="{DynamicResource LXBarButtonBorderNormal}" Fill="{DynamicResource LXBarButtonBackgroundNormal}" Data="F1 M 168,144L 176,160L 168,176" Stretch="Fill" Height="32" Width="8" />
                                            <Border Name="Border" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" Padding="{TemplateBinding Padding}" BorderThickness="0,1" VerticalAlignment="Center">
                                                      <ContentPresenter />
                                                    <!--
                                                    <ControlTemplate.Triggers>
                                                      <Trigger Property="IsSelected" Value="true">
                                                        <Setter TargetName="Border" Property="Background"
                                                                Value="Blue"/>
                                                      </Trigger>
                                                      <Trigger Property="IsEnabled" Value="false">
                                                        <Setter Property="Foreground"
                                                                Value="Red"/>
                                                      </Trigger>
                                                    </ControlTemplate.Triggers>
                                                    -->
                                            </Border>
                                        </DockPanel>

                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </ListBox.ItemContainerStyle>
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                                    <DockPanel VerticalAlignment="Center" Height="30">
                                        <local:LXImageButton BorderThickness="0" Style="{DynamicResource LXBarImageButton}" Padding="0"  DockPanel.Dock="Right" Background="Transparent" Command="{Binding RemoveTagBtn}" Height="16" Width="16"
                                        NormalImage="/com.example.Views;component/Resources/Icons/Buttons/btnCloseXS_normal.png"
                                        ActiveImage="/com.example.Views;component/Resources/Icons/Buttons/btnCloseXS_active.png"
                                        HoverImage="/com.example.Views;component/Resources/Icons/Buttons/btnCloseXS_hover.png"
                                        PressedImage="/com.example.Views;component/Resources/Icons/Buttons/btnCloseXS_hover.png"
                                        DisabledImage="/com.example.Views;component/Resources/Icons/Buttons/btnCloseXS_passive.png"
                                         />
                                        <Label DockPanel.Dock="Left"  FontSize="12" Content="{Binding Content, FallbackValue=Tagname n/a}" VerticalAlignment="Center"/>
                                    </DockPanel>   
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>