Click here to Skip to main content
15,884,388 members
Articles / Desktop Programming / WPF

XPlorerBar: A WPF Windows XP Style Explorer Bar Control

Rate me:
Please Sign up or sign in to vote.
4.95/5 (168 votes)
9 Dec 2008CPOL11 min read 341K   9.3K   408  
A fully customizable WPF implementation of the left side pane that was introduced in Windows XP's Explorer.
<!--   
    Copyright © 2008, Zona-Tools, all rights reserved.   

    This source code is licensed under the Code Project Open License (CPOL).
    Check out http://www.codeproject.com/info/cpol10.aspx for further details.
    
    -->

<Window x:Class="ZonaTools.XPlorerBar.DemoApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:xpbar="clr-namespace:ZonaTools.XPlorerBar;assembly=ZonaTools.XPlorerBar"
        Title="XPlorerBar Demo Application" 
        Height="750" Width="1040" 
        WindowStartupLocation="CenterScreen" >
    
    <Window.Resources>
    
        <!-- Window background -->
        <LinearGradientBrush x:Key="MainWindowBackground" StartPoint="0,0" EndPoint="0,1">
            <GradientStop Offset="0.00" Color="White"/>
            <GradientStop Offset="1.00" Color="Silver"/>
        </LinearGradientBrush>
        
    </Window.Resources>
    
    <DockPanel Background="{StaticResource MainWindowBackground}" LastChildFill="True">
        
        <Border BorderThickness="0" HorizontalAlignment="Left" DockPanel.Dock="Left" Width="230" Margin="10">
            
            <!-- Border shadow -->
            <Border.BitmapEffect>
                <DropShadowBitmapEffect Color="Black" Opacity="0.75" ShadowDepth="7"/>
            </Border.BitmapEffect>
            
            <!-- XPlorerBar -->
            <xpbar:XPlorerBar x:Name="ZT_XPlorerBar"
                              VerticalAlignment="Stretch" Width="Auto"
                              AllowMultipleExpands="{Binding ElementName=chMultipleExpands, Path=IsChecked}" 
                              xpbar:ThemeManager.Theme="LunaBlue">

                <!-- Music Tasks -->
                <xpbar:XPlorerSection Header="Music Tasks" IsExpanded="True" HeaderImage="/Images/MyMusic32.png"
                                      IsPrimary="{Binding ElementName=chPrimary, Path=IsChecked}">
                    <StackPanel Orientation="Vertical">
                        <xpbar:XPlorerItem ItemText="Play all" 
                                           ItemImage="/Images/PlayAll16.png" Click="XPlorerItem_Click" />
                        <xpbar:XPlorerItem ItemText="Shop for music online"
                                           ItemImage="/Images/MusicOnLine16.png" Click="XPlorerItem_Click" />
                    </StackPanel>
                </xpbar:XPlorerSection>

                <!-- File and Folder Tasks -->
                <xpbar:XPlorerSection Header="File and Folder Tasks" IsExpanded="True" IsPrimary="False">
                    <StackPanel>
                        <xpbar:XPlorerItem ItemText="Rename this file" 
                                           ItemImage="/Images/Rename16.png" Click="XPlorerItem_Click" />
                        <xpbar:XPlorerItem ItemText="Move this file"
                                           ItemImage="/Images/Move16.png" Click="XPlorerItem_Click" />
                        <xpbar:XPlorerItem ItemText="Copy this file"
                                           ItemImage="/Images/Copy16.png" Click="XPlorerItem_Click" />
                        <xpbar:XPlorerItem ItemText="E-mail this file"
                                           ItemImage="/Images/MailFile16.png" Click="XPlorerItem_Click" />
                        <xpbar:XPlorerItem ItemText="Delete this file"
                                           ItemImage="/Images/Delete16.png" Click="XPlorerItem_Click" />
                    </StackPanel>
                </xpbar:XPlorerSection>
                
                <!-- Other Places -->
                <xpbar:XPlorerSection Header="Other Places" IsExpanded="True" IsPrimary="False">
                    <StackPanel>
                        <xpbar:XPlorerItem ItemText="Shared Music" 
                                           ItemImage="/Images/SharedMusic16.png" Click="XPlorerItem_Click" />
                        <xpbar:XPlorerItem ItemText="My Music"
                                           ItemImage="/Images/SharedMusic16.png" Click="XPlorerItem_Click" />
                        <xpbar:XPlorerItem ItemText="My Computer"
                                           ItemImage="/Images/MyComputer16.png" Click="XPlorerItem_Click" />
                        <xpbar:XPlorerItem ItemText="My Network Places"
                                           ItemImage="/Images/MyNetwork16.png" Click="XPlorerItem_Click" />
                    </StackPanel>
                </xpbar:XPlorerSection>
                
                <!-- About... -->
                <xpbar:XPlorerSection Header="About..." IsExpanded="False" IsPrimary="False">
                    <StackPanel Orientation="Vertical">
                        <TextBlock Text="XPlorerBar" HorizontalAlignment="Center" Margin="0,15" FontSize="18" FontWeight="Bold" />
                        <TextBlock Text="Version 1.1" HorizontalAlignment="Center" />
                        <TextBlock Text="© 2008, Zona-Tools, all rights reserved." HorizontalAlignment="Center" FontSize="9" Margin="0,25,0,5" />
                    </StackPanel>
                </xpbar:XPlorerSection>
            </xpbar:XPlorerBar>
        </Border>
        
        <Border BorderThickness="0" Width="Auto" Margin="0,10,10,10" Background="Transparent" Padding="10,10,10,0">
            <!-- Document reader -->
            <FlowDocumentReader>
                <FlowDocument FontFamily="Calibri" FontSize="14">
                    
                    <!-- Title -->
                    <Paragraph FontSize="35" FontWeight="Bold">
                        XPlorerBar
                        <LineBreak/>
                        <Span FontSize="18" Foreground="Transparent">xxxxxxxxxxxxx</Span>
                        <Span FontSize="18" FontWeight="Bold" FontStyle="Italic" Foreground="Silver">a Zona-Tools' component.</Span>
                    </Paragraph>
                    
                    <!-- Overview -->
                    <Paragraph FontSize="18" FontWeight="Bold" Foreground="Silver">Overview</Paragraph>
                    <Paragraph>
                        XPlorerBar is a WPF implementation of the left side pane that was introduced in Windows XP's explorer.
                        <LineBreak/>
                        This component allows you to easily organize your application's user interface into different sections
                    of related items, visually distinct from one another.
                    </Paragraph>
                    
                    <!-- Key features -->
                    <Paragraph FontSize="18" FontWeight="Bold" Foreground="Silver">Key features</Paragraph>
                    <List MarkerStyle="Square">
                        <ListItem>
                            <Paragraph>
                                displays a vertical list of expandable/collapsible panels,
                            </Paragraph>
                        </ListItem>

                        <ListItem>
                            <Paragraph>
                                any panel can host any sort of content, and image and text can be placed in the header,
                            </Paragraph>
                        </ListItem>

                        <ListItem>
                            <Paragraph>
                                an optional flag can be set to only allow a single panel to be expanded at a given time,
                            </Paragraph>
                        </ListItem>

                        <ListItem>
                            <Paragraph>
                                8 built-in themes are included and match with the real Windows themes,
                            </Paragraph>
                        </ListItem>

                        <ListItem>
                            <Paragraph>
                                if no specific theme is applied to the XPlorerBar, it automatically obtains its colors from the active Windows theme,
                            </Paragraph>
                        </ListItem>

                        <ListItem>
                            <Paragraph>
                                any panel can be set as "Primary" to be displayed differently than "normal" panels,
                            </Paragraph>
                        </ListItem>

                        <ListItem>
                            <Paragraph>
                                expanders use animations to fade and slide when expanding or collapsing,
                            </Paragraph>
                        </ListItem>

                        <ListItem>
                            <Paragraph>
                                a vertical scrollbar is automatically added when expanders height exceed XPlorerBar height.
                            </Paragraph>
                        </ListItem>
                    </List>

                    <!-- See it in action -->
                    <Paragraph FontSize="18" FontWeight="Bold" Foreground="Silver">See it in action</Paragraph>
                    <BlockUIContainer>
                        <StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="Choose a theme:   " VerticalAlignment="Center"/>
                                <ComboBox x:Name="cbTheme" Width="200" SelectionChanged="OnThemeChanged" SelectedIndex="-1"/>
                            </StackPanel>
                            <CheckBox x:Name="chPrimary" 
                                      Margin="15,20,0,0" IsChecked="True" 
                                      Content="  Set first section as 'Primary'."/>
                            <CheckBox x:Name="chMultipleExpands" 
                                      Margin="15,10,0,0" IsChecked="True" 
                                      Content="  Allow multiple expands."/>
                        </StackPanel>
                    </BlockUIContainer>
                    
                    <!-- Documentation -->
                    <Paragraph FontSize="18" FontWeight="Bold" Foreground="Silver">Documentation</Paragraph>
                    <Paragraph>
                        The library's API is fully documented in MSDN-style.
                    </Paragraph>
                    
                    <!-- Feedback -->
                    <Paragraph FontSize="18" FontWeight="Bold" Foreground="Silver">Feedback</Paragraph>
                    <Paragraph>
                        This project has the goals of being helpful and instructive to developers who are interested in WPF programming
                        and so, your comments and suggestions are extremely helpful.
                        <LineBreak/>
                        Please let me know what you did or didn't like about this project or any other idea or suggestion you could have
                        (new features, new components, ...).
                    </Paragraph>

                    <List MarkerStyle="Square">
                        <ListItem>
                            <Paragraph>
                                Send me an e-mail at:
                                <LineBreak/>
                                osimon.zonatools@gmail.com
                            </Paragraph>
                        </ListItem>
                        <ListItem>
                            <Paragraph>
                                Check out my blog at:
                                <LineBreak/>
                                www.oliviersimon.wordpress.com
                            </Paragraph>
                        </ListItem>
                    </List>
                    
                </FlowDocument>
            </FlowDocumentReader>
        </Border>

    </DockPanel>
    
</Window>

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
Team Leader
France France
I have been developing and managing projects for real-time embedded softwares for eight years. Then, I moved from Paris to the south of France and began to lead a team who was developping Java applications.

My main occupation right now is to continue my journey in the WPF world.

You can check out my blog here. [^]

Comments and Discussions