Click here to Skip to main content
15,889,842 members
Articles / Desktop Programming / WPF

WPF: A Nice View BreadCrumb Manager

Rate me:
Please Sign up or sign in to vote.
4.97/5 (80 votes)
16 Mar 2010CPOL20 min read 131K   3K   105  
A re-usable breadcrumb control for WPF.
<UserControl x:Class="BreadCrumbControl.BreadCrumbViewManager"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:BreadCrumbControl"
	xmlns:transitionals="clr-namespace:Transitionals;assembly=Transitionals"
	xmlns:transitionalsControls="clr-namespace:Transitionals.Controls;assembly=Transitionals"
    HorizontalAlignment="Stretch" VerticalAlignment="Stretch">


    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="../Resources/AppStyles.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>


    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>


        <Expander ExpandDirection="Down" Margin="0" Grid.Row="0" IsExpanded="False"
                      Style="{StaticResource ExpanderStyle1}">
            <Grid HorizontalAlignment="Stretch" Height="Auto" Background="Black">
                <StackPanel Orientation="Horizontal" Background="Black" 
                            HorizontalAlignment="Right" Height="Auto">
                    <Label Content="Pick Transition" FontFamily="Verdana" 
                            FontSize="10" VerticalContentAlignment="Center" 
                            VerticalAlignment="Center"
                       Foreground="LightGray"/>
                    <Button  Width="24" Height="24" ToolTip="Fade And Grow" 
                             Margin="3" Tag="FadeAndGrow"
                             Style="{StaticResource transitonButtonStyle}" 
                             Click="TransitionButton_Click">
                        <Image Source="../Images/grow.png" VerticalAlignment="Center" 
                           HorizontalAlignment="Center" Width="16" Height="16"/>
                    </Button>

                    <Button  Width="24" Height="24" ToolTip="Fade And Blur" 
                             Margin="3" Tag="FadeAndBlur" 
                             Style="{StaticResource transitonButtonStyle}" 
                             Click="TransitionButton_Click">
                        <Image Source="../Images/grow.png" VerticalAlignment="Center" 
                           HorizontalAlignment="Center" Width="16" Height="16"/>
                    </Button>

                    <Button  Width="24" Height="24" ToolTip="Translate" 
                             Margin="3" Tag="Translate"  
                             Style="{StaticResource transitonButtonStyle}" 
                             Click="TransitionButton_Click">
                        <Image Source="../Images/move.png" VerticalAlignment="Center" 
                           HorizontalAlignment="Center" Width="16" Height="16"/>
                    </Button>

                    <Button  Width="24" Height="24" ToolTip="Rotate" 
                             Margin="3" Tag="Rotate"  
                             Style="{StaticResource transitonButtonStyle}" 
                             Click="TransitionButton_Click">
                        <Image Source="../Images/rotate.png" VerticalAlignment="Center" 
                           HorizontalAlignment="Center" Width="16" Height="16"/>
                    </Button>

                </StackPanel>

            </Grid>
        </Expander>


        <transitionalsControls:TransitionElement Grid.Row="1"
            x:Name="transitionBox" 
            Transition="{Binding}" />


        <local:FrictionScrollViewer x:Name="ScrollViewer" Grid.Row="2"
                      Style="{StaticResource ScrollViewerStyle}">

            <ItemsControl x:Name="items" ItemsSource="{Binding}">

                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel
                            IsItemsHost="True"
                            Orientation="Horizontal"  />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>

                    <ItemsControl.ItemTemplate>
                        <DataTemplate>

                            <ToggleButton x:Name="btn" 
                                    Style="{StaticResource crumbButtonStyle}" 
                                    Margin="15,5,15,5" 
                                    ToolTip="{Binding Value[0].BreadCrumbItem.DisplayName}">

                                <Grid>

                                 

                                    <Label Content="{Binding Value.Count}"
                                           Margin="0,0,-40,0" 
                                           VerticalAlignment="Bottom" 
                                           HorizontalAlignment="Right"
                                           FontWeight="Bold" 
                                           FontSize="16"
                                           VerticalContentAlignment="Center"
                                           HorizontalContentAlignment="Center"
                                           Foreground="Orange"/>

                                  
                                    
                              

                                    <ContentPresenter Width="Auto" Height="Auto"
                                        HorizontalAlignment="Center" 
                                        VerticalAlignment="Center"
                                        Content="{Binding Value[0].BreadCrumbItem, 
                                        Converter={StaticResource crumbImageConv}}"/>

                                    
                                    <Popup x:Name="pop"  
                                           Placement="RelativePoint"
                                           VerticalOffset="-25"
                                           HorizontalOffset="0"
                                           IsOpen="{Binding ElementName=btn,Path=IsChecked}"
                                           Width="200" Height="200"
                                           AllowsTransparency="True"
                                           StaysOpen="true"
                                           PopupAnimation="Scroll">

                                        <Border Background="Black" HorizontalAlignment="Stretch"
                                                    VerticalAlignment="Stretch"
                                                    BorderBrush="LightGray" 
                                                    BorderThickness="3" 
                                                    CornerRadius="5,5,5,5">

                                            <Grid Background="Black">

                                                <Grid.RowDefinitions>
                                                    <RowDefinition Height="Auto"/>
                                                    <RowDefinition Height="*"/>
                                                </Grid.RowDefinitions>

                                                <Thumb Grid.Row="0" Width="Auto" Height="40" 
                                                           Tag="{Binding ElementName=pop}"
                                                           local:PopupBehaviours.IsMoveEnabledProperty="true">
                                                    <Thumb.Template>
                                                        <ControlTemplate>
                                                            <Border  Width="Auto" Height="40" BorderBrush="#FF000000" 
                                                                     Background="LightGray" VerticalAlignment="Top" 
                                                                     CornerRadius="5,5,0,0" Margin="-2,-2,-2,0">
                                                                
                                                                <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                                                    <Grid.ColumnDefinitions>
                                                                        <ColumnDefinition Width="*"/>
                                                                        <ColumnDefinition Width="Auto"/>
                                                                    </Grid.ColumnDefinitions>


                                                                    <StackPanel Grid.Column="0"
                                                                            Orientation="Horizontal" 
                                                                            HorizontalAlignment="Stretch" 
                                                                            VerticalAlignment="Center">

                                                                        <Label Content="("
                                                                           FontSize="18"
                                                                           FontWeight="Bold"
                                                                           Foreground="Black"
                                                                           VerticalContentAlignment="Center"
                                                                           Margin="5,0,0,0" />


                                                                        <Label Content="{Binding Value.Count}"
                                                                           FontSize="18"
                                                                           FontWeight="Bold"
                                                                           Foreground="Black"
                                                                           VerticalContentAlignment="Center"
                                                                           Margin="0,0,0,0" />

                                                                        <Label Content=") Crumbs"
                                                                           FontSize="18"
                                                                           FontWeight="Bold"
                                                                           Foreground="Black"
                                                                           VerticalContentAlignment="Center"
                                                                           Margin="0,0,0,0" />

                                                                    </StackPanel>


                                                                    <Button Width="40" Height="30" Grid.Column="1" 
                                                                            Style="{StaticResource crumbControlButtonStyle}"
                                                                            Tag="{Binding ElementName=pop}" Margin="5"
                                                                            ToolTip="View Crumb" Click="HidePopup_Click" 
                                                                            VerticalAlignment="Center" HorizontalAlignment="Left">
                                                                        <Image Source="../Images/close.png" Width="22" Height="22"
                                                                               HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                                                    </Button>


                                                                </Grid>
                                                                
                                                                
                                                            </Border>
                                                        </ControlTemplate>
                                                    </Thumb.Template>
                                                </Thumb>


                                                <local:FrictionScrollViewer Background="Black" Grid.Row="1"
                                                        Style="{StaticResource ScrollViewerStyle}" Margin="0">
                                                
                                                

                                                    <ItemsControl x:Name="items" 
                                                          Margin="0" AlternationCount="2"
                                                          ItemsSource="{Binding Value}">

                                                        <ItemsControl.ItemsPanel>
                                                            <ItemsPanelTemplate>
                                                                <StackPanel Orientation="Vertical" 
                                                                    Width="Auto" Height="Auto"
                                                                    IsItemsHost="True" />
                                                            </ItemsPanelTemplate>
                                                        </ItemsControl.ItemsPanel>

                                                        <ItemsControl.ItemTemplate>
                                                            <DataTemplate>

                                                                        
                                                                
                                                                <Grid x:Name="grid" Background="Black" 
                                                                      HorizontalAlignment="Stretch" 
                                                                      VerticalAlignment="Stretch">
                                                                    
                                                                    <Grid.RowDefinitions>
                                                                        <RowDefinition Height="*"/>
                                                                        <RowDefinition Height="*"/>
                                                                    </Grid.RowDefinitions>
                                                                    
                                                                    
                                                                    <Grid.ColumnDefinitions>
                                                                        <ColumnDefinition Width="Auto"/>
                                                                        <ColumnDefinition Width="Auto"/>
                                                                        <ColumnDefinition Width="*"/>
                                                                    </Grid.ColumnDefinitions>

                                                              
                                                                    <Border x:Name="imgBord" Background="Black" 
                                                                            Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" 
                                                                            Margin="3" CornerRadius="5" Width="Auto" Height="Auto" 
                                                                            VerticalAlignment="Center">
                                                                        <Rectangle 
                                                                               VerticalAlignment="Center" HorizontalAlignment="Left"
                                                                               Fill="{Binding BreadCrumbItemAsBrush}"
                                                                               Width="130" Height="65" Margin="3">
                                                                            <Rectangle.ToolTip>
                                                                                <Rectangle Fill="{Binding BreadCrumbItemAsBrush}" 
                                                                                Width="450" Height="225" Margin="2"/>
                                                                            </Rectangle.ToolTip>
                                                                        </Rectangle>

                                                                    </Border>

                                                                    <Button Width="40" Height="30" Grid.Column="1" Grid.Row="0"
                                                                            Style="{StaticResource crumbControlButtonStyle}"
                                                                            Tag="{Binding}" Margin="5"
                                                                            ToolTip="Remove Crumb" Click="RemoveCrumb_Click" 
                                                                            VerticalAlignment="Center" HorizontalAlignment="Left">
                                                                        <Image Source="../Images/trash.png" Width="22" Height="22"
                                                                               HorizontalAlignment="Center" VerticalAlignment="Center">
                                                                            <Image.Effect>
                                                                                <DropShadowEffect Color="Black" Direction="320" 
                                                                                                  Opacity="0.8" BlurRadius="12" ShadowDepth="8"/>
                                                                            </Image.Effect>
                                                                        </Image>
                                                                    </Button>
                                                                    
                                                                    <Button Width="40" Height="30" Grid.Column="1" Grid.Row="1"
                                                                            Style="{StaticResource crumbControlButtonStyle}"
                                                                            Tag="{Binding}" Margin="5"
                                                                            ToolTip="View Crumb" Click="ViewCrumb_Click" 
                                                                            VerticalAlignment="Center" HorizontalAlignment="Left">
                                                                        <Image Source="../Images/view.png" Width="22" Height="22"
                                                                               HorizontalAlignment="Center" VerticalAlignment="Center">

                                                                            <Image.Effect>
                                                                                <DropShadowEffect Color="Black" Direction="320" 
                                                                                                  Opacity="0.8" BlurRadius="12" ShadowDepth="8"/>
                                                                            </Image.Effect>
                                                                        </Image>
                                                                    </Button>

                                                                </Grid>
                                       

                                                                <DataTemplate.Triggers>
                                                                    

                                                                    <Trigger Property="ItemsControl.AlternationIndex" Value="0">
                                                                        <Setter TargetName="imgBord" Property="Background" Value="LightGray"/>
                                                                    </Trigger>
                                                                    
                                                                    <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                                                                        <Setter TargetName="grid" Property="Background" Value="LightGray"/>
                                                                    </Trigger>

                                                                </DataTemplate.Triggers>

                                                            </DataTemplate>
                                                        </ItemsControl.ItemTemplate>
                                                    </ItemsControl>
                                                </local:FrictionScrollViewer>
                                            </Grid>
                                        </Border>
                                    </Popup>

                                </Grid>

                            </ToggleButton>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>

            </ItemsControl>

        </local:FrictionScrollViewer>

    </Grid>
</UserControl>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
United Kingdom United Kingdom
I currently hold the following qualifications (amongst others, I also studied Music Technology and Electronics, for my sins)

- MSc (Passed with distinctions), in Information Technology for E-Commerce
- BSc Hons (1st class) in Computer Science & Artificial Intelligence

Both of these at Sussex University UK.

Award(s)

I am lucky enough to have won a few awards for Zany Crazy code articles over the years

  • Microsoft C# MVP 2016
  • Codeproject MVP 2016
  • Microsoft C# MVP 2015
  • Codeproject MVP 2015
  • Microsoft C# MVP 2014
  • Codeproject MVP 2014
  • Microsoft C# MVP 2013
  • Codeproject MVP 2013
  • Microsoft C# MVP 2012
  • Codeproject MVP 2012
  • Microsoft C# MVP 2011
  • Codeproject MVP 2011
  • Microsoft C# MVP 2010
  • Codeproject MVP 2010
  • Microsoft C# MVP 2009
  • Codeproject MVP 2009
  • Microsoft C# MVP 2008
  • Codeproject MVP 2008
  • And numerous codeproject awards which you can see over at my blog

Comments and Discussions