Click here to Skip to main content
15,896,153 members
Articles / Web Development / HTML

WPF x FileExplorer x MVVM

Rate me:
Please Sign up or sign in to vote.
4.99/5 (52 votes)
24 Nov 2012LGPL323 min read 291K   9.4K   228  
This article describe how to construct FileExplorer controls included DirectoryTree and FileList, using Model-View-ViewModel (MVVM) pattern.
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="clr-namespace:QuickZip.UserControls.Explorer"
    xmlns:mvvm="http://www.quickzip.org/MVVM"
    xmlns:uc="http://www.quickzip.org/UserControls"
    >
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="Common.xaml" />
        <ResourceDictionary Source="pack://application:,,,/QuickZip.UserControls;component/Themes/Converters.xaml" />
        <ResourceDictionary Source="pack://application:,,,/QuickZip.UserControls;component/Themes/Converters.xaml" />
        <ResourceDictionary Source="pack://application:,,,/QuickZip.UserControls;component/UserControls/BreadcrumbItem/BreadcrumbItem.xaml" />
        <ResourceDictionary Source="pack://application:,,,/QuickZip.UserControls;component/Themes/Brushes.xaml" />
        <ResourceDictionary Source="pack://application:,,,/QuickZip.UserControls;component/Themes/Geometry.xaml" />
    </ResourceDictionary.MergedDictionaries>

    <!--<HierarchicalDataTemplate x:Key="BVMTemplate" ItemsSource="{Binding SubDirectories}">
        <DockPanel HorizontalAlignment="Left" >
            <Image Height="16" Width="16"  Source="{Binding EmbeddedEntryViewModel.SmallIcon.Item1.Value}" 
                   Visibility="{Binding IsSubItem, Converter={StaticResource btv}}"
                   />
            <TextBlock Text="{Binding EmbeddedEntryViewModel.EmbeddedModel.Label}" Margin="2,0,0,0" />
        </DockPanel>
    </HierarchicalDataTemplate>-->



    <DataTemplate DataType="{x:Type uc:Suggestion}">
        <StackPanel Orientation="Horizontal">
            <Grid Width="16" Height="16">
                <Path x:Name="dirPath" Data="{StaticResource Folder}" Fill="WhiteSmoke"  Stroke="DimGray"  
                          StrokeThickness="1" StrokeLineJoin="Round" Visibility="Collapsed"  />
                <Path x:Name="zipPath" Data="{StaticResource FolderZip}" Fill="WhiteSmoke"  Stroke="DimGray"  
                          StrokeThickness="1" StrokeLineJoin="Round" Visibility="Collapsed"  />
                <Grid x:Name="searchPath" Visibility="Collapsed">
                    <Path Data="{StaticResource MagnifierHandle}" Fill="WhiteSmoke"  Stroke="DimGray"  StrokeThickness="2.5" StrokeLineJoin="Round" StrokeEndLineCap="Round" />
                    <Path Data="{StaticResource MagnifierGlass}" Stroke="DimGray"  StrokeThickness="1.4" StrokeLineJoin="Round"  />
                </Grid>
            </Grid>
            <uc:HtmlHighlightTextBlock Html="{Binding Header}" Highlight="{Binding Lookup}" Margin="6,0,0,0" />
            <!--<TextBlock Text="{Binding Header}" Margin="6,0,0,0" />-->
        </StackPanel>
        <DataTemplate.Triggers>
            <DataTrigger Binding="{Binding SuggestionType}" Value="dir">
                <Setter TargetName="dirPath" Property="Visibility" Value="Visible" />
            </DataTrigger>
            <DataTrigger Binding="{Binding SuggestionType}" Value="zip">
                <Setter TargetName="dirPath" Property="Visibility" Value="Visible" />
                <Setter TargetName="zipPath" Property="Visibility" Value="Visible" />
            </DataTrigger>
            <DataTrigger Binding="{Binding SuggestionType}" Value="srt">
                <Setter TargetName="searchPath" Property="Visibility" Value="Visible" />
            </DataTrigger>
        </DataTemplate.Triggers>
    </DataTemplate>



    <ControlTemplate x:Key="BreadcrumbTemplate" TargetType="{x:Type uc:Breadcrumb2}">
        <Border x:Name="bdr">
            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1">
                <Grid x:Name="BreadcrumbBackgroundGrid" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="20" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>

                    <ProgressBar Grid.ColumnSpan="3" Opacity="0.9" x:Name="pBar"
                         Visibility="{Binding IsLoading, Mode=OneWay, 
                                        RelativeSource={RelativeSource Mode=TemplatedParent},
                                        Converter ={StaticResource btv}}"
                         Background="{TemplateBinding Background}" 
                         Foreground="{DynamicResource {x:Static SystemColors.HotTrackBrushKey}}"
                         IsIndeterminate="True" 
                          />

                    <ToggleButton x:Name="btnToggle"  Grid.Column="0"  Padding="2,0"
                                  IsChecked="{Binding IsBreadcrumbVisible}" 
                                  Template="{StaticResource BaseBreadcrumbButton}" Background="Transparent" >
                        <Grid>
                            <Image Height="16"  Width="16"
                                Source="{Binding CurrentEntryViewModel.SmallIcon.Item2.Value}" 
                                   Visibility="Visible" />
                            <!--<Grid Width="16" Height="16" Visibility="{Binding IsBreadcrumbVisible, Converter={StaticResource fbtv}}" >
                                <Grid Visibility="{Binding IsSearch, ElementName=tbox, Converter={StaticResource btv}}" >
                                    <Path Data="{StaticResource MagnifierHandle}" Fill="WhiteSmoke"  Stroke="DimGray"  StrokeThickness="2.5" StrokeLineJoin="Round" StrokeEndLineCap="Round" />
                                    <Path Data="{StaticResource MagnifierGlass}" Stroke="DimGray"  StrokeThickness="1.4" StrokeLineJoin="Round"  />
                                </Grid>
                                <Grid Visibility="{Binding IsFolder, ElementName=tbox, Converter={StaticResource btv}}" >
                                    <Path Data="{StaticResource Folder}" Fill="WhiteSmoke"  Stroke="DimGray"  StrokeThickness="1" StrokeLineJoin="Round"  />
                                </Grid>
                                <Grid Visibility="{Binding IsFileBasedFS, ElementName=tbox, Converter={StaticResource btv}}">
                                    <Path Data="{StaticResource Folder}" Fill="WhiteSmoke" Stroke="DimGray"  StrokeThickness="1" StrokeLineJoin="Round"  />
                                    <Path Data="{StaticResource FolderZip}" Fill="WhiteSmoke" Stroke="DimGray"  StrokeThickness="1" StrokeLineJoin="Round" Margin="-1,0,1,0" />
                                </Grid>
                            </Grid>-->
                        </Grid>
                    </ToggleButton>

                    <uc:SimpleAutoCompleteTextBox x:Name="tbox" Grid.Column="1"                                        
                                       Visibility="{Binding IsBreadcrumbVisible, Converter={StaticResource fbtv}}"
                                       Background="Transparent" VerticalContentAlignment="Center"
                                       DropDownPlacementTarget="{Binding ElementName=bdr}"
                                       Height="{Binding ActualHeight, ElementName=bcore}"
                                                 BorderThickness="1"
                                       HasSuggestions="{Binding SearchViewModel.HasSuggestions, Mode=OneWay}"
                                        Text="{Binding SearchViewModel.UIConfirmedParseName, Mode=TwoWay, UpdateSourceTrigger=Explicit}"
                                        SearchText="{Binding SearchViewModel.SearchParseName, Mode=OneWayToSource, UpdateSourceTrigger=Explicit}"        
                                        Suggestions="{Binding SearchViewModel.Suggestions, Mode=OneWay}"
                                       >

                    </uc:SimpleAutoCompleteTextBox>

                    <uc:BreadcrumbCore x:Name="bcore" Grid.Column="1" IsHitTestVisible="True"
                           ItemsSource="{Binding Hierarchy}"
                                       ItemTemplate="{TemplateBinding ItemTemplate}"
                           Visibility="{Binding IsBreadcrumbVisible, Converter={StaticResource btv}}"                           
                           >
                        <uc:BreadcrumbCore.Resources>
                            <Style x:Key="{x:Type uc:BreadcrumbItem}" TargetType="{x:Type uc:BreadcrumbItem}" >
                                <Setter Property="HeaderTemplate" Value="{DynamicResource Breadcrumb_EntryDataTemplate}" />
                                <Setter Property="IsDropDownOpen" Value="{Binding IsDropDownOpen, Mode=TwoWay}" />
                                <Setter Property="ShowCaption" Value="{Binding ShowCaption, Mode=TwoWay}" />
                                <Setter Property="ShowToggle" Value="{Binding EmbeddedEntryViewModel.HasSubDirectories, Mode=OneWay}" />
                                <Setter Property="IsItemVisible" Value="{Binding IsItemVisible, Mode=OneWayToSource}" />
                                <Setter Property="IsShadowItem" Value="{Binding IsShadowItem, Mode=OneWay}" />
                                <Setter Property="IsSeparator" Value="{Binding IsSeparator, Mode=OneWay}" />                                
                                <!--<Setter Property="IsLoading" Value="{Binding IsLoading, Mode=TwoWay}" />-->
                            </Style>
                        </uc:BreadcrumbCore.Resources>
                        <uc:BreadcrumbCore.ContextMenu>
                            <ContextMenu x:Name="bcoreCM">

                            </ContextMenu>
                        </uc:BreadcrumbCore.ContextMenu>
                    </uc:BreadcrumbCore>

                    <ContentPresenter Content="{TemplateBinding Content}" Grid.Column="2"
                                       Visibility="{Binding IsBreadcrumbVisible, Converter={StaticResource btv}}"
                                      />

                </Grid>
            </Border>
        </Border>
    </ControlTemplate>


    <Style x:Key="qz_Breadcrumb_Style" TargetType="{x:Type uc:Breadcrumb2}">
        <Setter Property="VerticalAlignment" Value="Stretch" />
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Padding" Value="2" />
        <Setter Property="Focusable" Value="False" />
        <Setter Property="Opacity" Value="0.7" />
        <Setter Property="SelectedValue" Value="{Binding UISelectedNavigationViewModel, Mode=OneWayToSource}" />
        <Setter Property="BorderBrush" Value="{StaticResource SolidBorderBrush}" />
        <Setter Property="Template" Value="{StaticResource BreadcrumbTemplate}" />
        <Setter Property="ItemTemplate" Value="{DynamicResource Breadcrumb_EntryDataTemplate}" />
    </Style>


</ResourceDictionary>

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 GNU Lesser General Public License (LGPLv3)


Written By
Founder
Hong Kong Hong Kong

Comments and Discussions