Click here to Skip to main content
15,886,199 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 289.1K   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.Themes"
    xmlns:mvvm="http://www.quickzip.org/MVVM"
    xmlns:uc="http://www.quickzip.org/UserControls"
    xmlns:classic="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Classic"
    >
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="Common.xaml" />
        <ResourceDictionary Source="NavigatorItem.xaml" />

        <ResourceDictionary Source="pack://application:,,,/QuickZip.UserControls;component/Themes/Brushes.xaml" />
        <ResourceDictionary Source="pack://application:,,,/QuickZip.UserControls;component/Themes/Converters.xaml" />
        <ResourceDictionary Source="pack://application:,,,/QuickZip.UserControls;component/Themes/Geometry.xaml" />
        <ResourceDictionary Source="pack://application:,,,/QuickZip.UserControls;component/Themes/Styles.xaml" />
        <ResourceDictionary Source="pack://application:,,,/QuickZip.UserControls;component/Themes/Templates.xaml" />

        <ResourceDictionary Source="pack://application:,,,/QuickZip.UserControls;component/Themes/Styles/W7TreeViewItem.xaml" />
    </ResourceDictionary.MergedDictionaries>

    <Style x:Key="qz_Navigator_Style" TargetType="{x:Type uc:Navigator2}">
        <Setter Property="ItemsSource" Value="{Binding NavigationHistory}" />
        <Setter Property="ItemTemplate" Value="{DynamicResource ViewerViewModel_DataTemplate}" />
        <Setter Property="ItemContainerStyle" Value="{DynamicResource qz_NavigatorItem_Style}" />
        <Setter Property="SelectedItem" Value="{Binding CurrentBrowserViewModel, Mode=OneWay}" />
        <Setter Property="SelectedIndex" Value="{Binding NavigationPosition, Mode=TwoWay}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type uc:Navigator2}">
                    <Grid Name="MainGrid">
                        <DockPanel DockPanel.Dock="Top" x:Name="MainDock" >


                            <Button x:Name="btnBack" DockPanel.Dock="Left" Style="{DynamicResource leftNavButtonStyle}" Margin="2,0" 
                                    Command="{Binding GoBackCommand, RelativeSource={RelativeSource TemplatedParent}}"
                                    />
                            <Button x:Name="btnNext" DockPanel.Dock="Left" Style="{DynamicResource rightNavButtonStyle}" 
                                    Command="{Binding GoNextCommand, RelativeSource={RelativeSource TemplatedParent}}"
                                    />

                            <Grid  SnapsToDevicePixels="True" >
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="0"  />
                                </Grid.ColumnDefinitions>

                                <StackPanel x:Name="basePanel" SnapsToDevicePixels="True" Orientation="Horizontal" Grid.Column="0" Margin="0" >

                                    <ToggleButton IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" 
                                              x:Name="buttonExpand"  Width="10" BorderThickness="0" Padding="0" Margin="0" BorderBrush="Transparent" Background="Transparent"
                                              MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" VerticalAlignment="Stretch"
                                              KeyboardNavigation.IsTabStop="False" Focusable="False"                                               >
                                        <ToggleButton.Template>
                                            <ControlTemplate>
                                                <classic:ClassicBorderDecorator Background="{TemplateBinding Panel.Background}" BorderStyle="Raised" BorderBrush="{TemplateBinding Border.BorderBrush}" BorderThickness="3,3,3,3" Name="ContentContainer" SnapsToDevicePixels="True">
                                                    <ContentPresenter RecognizesAccessKey="True" Content="{TemplateBinding ContentControl.Content}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" Margin="{TemplateBinding Control.Padding}" HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
                                                </classic:ClassicBorderDecorator>
                                            </ControlTemplate>
                                        </ToggleButton.Template>
                                        <ToggleButton.Content>
                                            <Path Stroke="Black" Fill="Black" Data="{StaticResource expandlArrow}" />
                                        </ToggleButton.Content>
                                    </ToggleButton>


                                </StackPanel>

                                <Popup IsOpen="{TemplateBinding ComboBox.IsDropDownOpen}" 
                                       Placement="Bottom"    PlacementTarget="{Binding ElementName=MainDock}"
                                       MinWidth="{Binding ElementName=basePanel, Path=ActualWidth}"
                                       PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}"                                               
                                       AllowsTransparency="True" x:Name="PART_Popup" Margin="1,1,1,1"  Grid.ColumnSpan="2">
                                    <Border BorderThickness="1,1,1,1" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" 
                                            Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" Name="DropDownBorder">
                                        <ScrollViewer CanContentScroll="True" VerticalScrollBarVisibility="Auto">
                                            <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
                                        </ScrollViewer>
                                    </Border>
                                </Popup>

                            </Grid>
                        </DockPanel>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

        <!--Do not enable Virtualization, or BringToView is not working.-->
        <!--<Setter Property ="VirtualizingStackPanel.IsVirtualizing" Value="True" />
        <Setter Property="VirtualizingStackPanel.VirtualizationMode" Value="Standard" />-->

    </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