title: Breadcrumb style with WPF-ListView
body: <p>I want to create a simple breadcrumb bar with ListView. Following a simple wireframe screenshot what I would like to archive in the future:</p>
  
  <p><img src="https://i.stack.imgur.com/38YQg.png" alt="This is what I am looking for"></p>
  
  <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/TJcCa.png" alt="This is what I currently achieved"></p>
  
  <ul>
  <li>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... </li>
  <li>The other problem is the visual style of the first and last items</li>
  </ul>
  
  <p>Here's the actual code:</p>
  
  <pre><code>&lt;ListView DockPanel.Dock="Left" ItemsSource="{Binding TagList}"
                  MinWidth="300" Background="Transparent" BorderThickness="0"
                  ScrollViewer.HorizontalScrollBarVisibility="Hidden" 
                  ScrollViewer.VerticalScrollBarVisibility="Hidden" Margin="8,0,0,0"&gt;
  
                      &lt;ListView.ItemsPanel&gt;
                          &lt;ItemsPanelTemplate&gt;
                              &lt;StackPanel Orientation="Horizontal"&gt;&lt;/StackPanel&gt;
                          &lt;/ItemsPanelTemplate&gt;
                      &lt;/ListView.ItemsPanel&gt;
                      &lt;ListView.ItemTemplate&gt;
                          &lt;DataTemplate&gt;
                              &lt;Grid Margin="-8,0,0,0"&gt;
                                  &lt;Grid&gt;
                                      &lt;Grid.ColumnDefinitions&gt;
                                          &lt;ColumnDefinition Width="8"/&gt;
                                          &lt;ColumnDefinition Width="Auto" /&gt;
                                          &lt;ColumnDefinition Width="8"/&gt;
                                      &lt;/Grid.ColumnDefinitions&gt;
                                      &lt;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"/&gt;
                                      &lt;Grid HorizontalAlignment="Stretch" Height="Auto" VerticalAlignment="Stretch" Width="Auto" Grid.Column="1"&gt;
                                          &lt;Rectangle Stretch="Fill" Fill="#FFC64242" HorizontalAlignment="Stretch" Height="Auto" Margin="0.5" VerticalAlignment="Stretch" Width="Auto"/&gt;
                                          &lt;Path Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 128,144L 160,144" HorizontalAlignment="Stretch" Height="1" Margin="0" VerticalAlignment="Top" Width="Auto"/&gt;
                                          &lt;Path Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 128,176L 160,176" HorizontalAlignment="Stretch" Height="1" Margin="0" VerticalAlignment="Bottom" Width="Auto"/&gt;
                                      &lt;/Grid&gt;
                                      &lt;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"/&gt;
                                      &lt;DockPanel LastChildFill="True" Grid.ColumnSpan="2" Grid.Column="1"&gt;
                                          &lt;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"/&gt;
                                          &lt;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"/&gt;
                                          &lt;!--&lt;Border Background="#FFf7f7f7" BorderBrush="#FFc9c9c9" BorderThickness="1" CornerRadius="4" HorizontalAlignment="Left" Margin="0,0,0,5.96" d:LayoutOverrides="Height"/&gt;     --&gt;
                                      &lt;/DockPanel&gt;
                                  &lt;/Grid&gt;
                              &lt;/Grid&gt;
                          &lt;/DataTemplate&gt;
                      &lt;/ListView.ItemTemplate&gt;
                  &lt;/ListView&gt;
  </code></pre>