Click here to Skip to main content
15,892,517 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 290.4K   9.4K   228  
This article describe how to construct FileExplorer controls included DirectoryTree and FileList, using Model-View-ViewModel (MVVM) pattern.
<Window x:Class="QuickZip.Dialogs.OverwriteDialog"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:mwt="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
    xmlns:conv="http://www.quickzip.org/Converters"   
    xmlns:uc="http://www.quickzip.org/UserControls"   
    xmlns:htb="clr-namespace:QuickZip.UserControls.HtmlTextBlock"    
    xmlns:trans="clr-namespace:QuickZip.Translation;assembly=QuickZip.Translation"
    xmlns:pidlTools="clr-namespace:System.IO.Tools;assembly=QuickZip.IO.PIDL"
    SizeToContent="WidthAndHeight"
    x:Name="root"
    Title="{x:Static trans:Texts.strOverwrite}"    
    >
    <Window.Resources>

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

            <!--Style-->
            <Style x:Key="h1" TargetType="{x:Type TextBlock}">
                <Setter Property="Foreground" Value="Blue" />
                <Setter Property="FontSize" Value="15" />
            </Style>
            <Style x:Key="large" TargetType="{x:Type Button}">
                <Style.Setters>
                    <Setter Property="Background" Value="Transparent" />
                    <Setter Property="BorderThickness" Value="0" />
                    <Setter Property="BorderBrush" Value="Transparent" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Grid>
                                    <mwt:ButtonChrome Background="Transparent" BorderBrush="Transparent" 
                                              RenderDefaulted="{TemplateBinding Button.IsDefaulted}" RenderMouseOver="{TemplateBinding UIElement.IsMouseOver}" 
                                              RenderPressed="{TemplateBinding ButtonBase.IsPressed}" Name="Chrome" SnapsToDevicePixels="True" Opacity="1">

                                        <ContentPresenter RecognizesAccessKey="True" Content="{TemplateBinding ContentControl.Content}" Opacity="1"
                                          ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" 
                                          ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" 
                                          Margin="{TemplateBinding Control.Padding}" HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}" 
                                          VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}" 
                                          SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />


                                    </mwt:ButtonChrome>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style.Setters>
            </Style>

            <!--DataTemplates-->
            <DataTemplate x:Key="ft" DataType="{x:Type pidlTools:OverwriteInfo}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="80" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Image Source="{Binding Icon, Converter={StaticResource btbi}}" Width="50" Height="50" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
                    <StackPanel Orientation="Vertical" Grid.Column="1">
                        <TextBlock Text="{Binding Label}" FontWeight="Bold" />
                        <StackPanel Orientation="Horizontal" TextBlock.Foreground="Blue" >
                            <TextBlock Text="{Binding Name}" />
                            <TextBlock Text=" (" />
                            <TextBlock Text="{Binding Path}" />
                            <TextBlock Text=") " />
                        </StackPanel>

                        <StackPanel Orientation="Horizontal" >
                            <TextBlock Text="{x:Static trans:Texts.strSize}"  />
                            <TextBlock Text="{Binding Length}" />
                        </StackPanel>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{x:Static trans:Texts.strLastModified}" />
                            <TextBlock Text="{Binding Time}" />
                        </StackPanel>
                        <StackPanel Orientation="Horizontal" >
                            <TextBlock Text="{x:Static trans:Texts.strCRC}" />
                            <TextBlock Text="{Binding CRC}" />
                        </StackPanel>
                    </StackPanel>
                </Grid>

            </DataTemplate>
            
            <DataTemplate x:Key="dt" DataType="{x:Type pidlTools:OverwriteInfo}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="80" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Image Source="{Binding Icon, Converter={StaticResource btbi}}" Width="50" Height="50" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
                    <StackPanel Orientation="Vertical" Grid.Column="1">
                        <TextBlock Text="{Binding Label}" FontWeight="Bold" />
                        <StackPanel Orientation="Horizontal" TextBlock.Foreground="Blue" >
                            <TextBlock Text="{Binding Name}" />
                            <TextBlock Text=" (" />
                            <TextBlock Text="{Binding Path}" />
                            <TextBlock Text=") " />
                        </StackPanel>                        
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{x:Static trans:Texts.strLastModified}" />
                            <TextBlock Text="{Binding Time}" />
                        </StackPanel>                        
                    </StackPanel>
                </Grid>

            </DataTemplate>

            <DataTemplate x:Key="fileTemplate">
                <Grid Margin="5" Height="450" Width="500">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="auto" />
                        <!--CancelButton -->
                    </Grid.RowDefinitions>
                    <StackPanel Orientation="Vertical" Grid.Row="0" Margin="10">
                        <TextBlock Text="{x:Static trans:Texts.strFileAlreadyExists}" Style="{StaticResource h1}" />
                        <TextBlock Text="{x:Static trans:Texts.strSelectFileToKeep}" />
                    </StackPanel>
                    <StackPanel Orientation="Vertical" Grid.Row="1" Margin="20,0">
                        <Button x:Name="overwrite" HorizontalContentAlignment="Left" Style="{StaticResource large}"  >
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="auto" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="auto" />
                                    <RowDefinition Height="auto" />
                                    <RowDefinition Height="auto" />
                                </Grid.RowDefinitions>

                                <Image Source="pack://application:,,,/QuickZip.UserControls;component/Resources/arrow.png" Grid.Column="0" Grid.Row="0" Width="14" Height="14" Margin="5" />
                                <TextBlock Text="{x:Static trans:Texts.strCopyAndReplace}"  Grid.Column="1" Grid.Row="0" TextAlignment="Left" Style="{StaticResource h1}" />
                                <TextBlock Text="{x:Static trans:Texts.strCopyAndReplaceDescription}" Grid.Column="1" Grid.Row="1" TextAlignment="Left" />

                                <ContentControl  Content="{Binding ElementName=root, Path=SourceFile}" Grid.Column="1" Grid.Row="2" Margin="10" 
                                                ContentTemplate="{StaticResource ft}" />
                            </Grid>
                        </Button>
                        <Button x:Name="dontoverwrite" HorizontalContentAlignment="Left" Style="{StaticResource large}" >
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="auto" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="auto" />
                                    <RowDefinition Height="auto" />
                                    <RowDefinition Height="auto" />
                                    <!--<RowDefinition Height="auto" />-->
                                </Grid.RowDefinitions>

                                <Image Source="pack://application:,,,/QuickZip.UserControls;component/Resources/arrow.png" Grid.Column="0" Grid.Row="0" Width="14" Height="14" Margin="5" />
                                <TextBlock Text="{x:Static trans:Texts.strKeep}"  Grid.Column="1" Grid.Row="0" TextAlignment="Left" Style="{StaticResource h1}" />
                                <TextBlock Text="{x:Static trans:Texts.strKeepDescription }" Grid.Column="1" Grid.Row="1" TextAlignment="Left" />

                                <ContentControl Content="{Binding ElementName=root, Path=DestinationFile}" Grid.Column="1" Grid.Row="2" Margin="10" 
                                                ContentTemplate="{StaticResource ft}"/>
                            </Grid>
                        </Button>
                    </StackPanel>

                    <DockPanel Grid.Row="2" Margin="10" LastChildFill="False" >
                        <CheckBox Content="{x:Static trans:Texts.strApplyAll}" 
                                  IsChecked="{Binding ElementName=root, Path=ApplyAll, Mode=TwoWay}" DockPanel.Dock="Left" x:Name="cbApplyAll" />
                        <Button Content="{x:Static trans:Texts.strCancel}" DockPanel.Dock="Right" Width="75" Height="25" />
                    </DockPanel>
                </Grid>
            </DataTemplate>

            <DataTemplate x:Key="dirTemplate">
                <Grid Margin="5" Height="325" Width="425">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="auto" />
                        <!--CancelButton -->
                    </Grid.RowDefinitions>
                    <StackPanel Orientation="Vertical" Grid.Row="0" Margin="10">
                        <StackPanel Orientation="Horizontal" >
                            <TextBlock Text="{x:Static trans:Texts.strFolderAlreadyExists}" />
                            <TextBlock Text="{Binding Path=Source.Label}" />
                        </StackPanel>
                        <htb:HtmlTextBlock Html="{x:Static trans:Texts.strFolderAlreadyExistsDescription}" />
                    </StackPanel>
                    <StackPanel Orientation="Vertical" Grid.Row="1" Margin="20,0">
                        <TextBlock Text="{x:Static trans:Texts.strUseThisFolder }" />
                        <ContentControl Content="{Binding ElementName=root, Path=SourceFile}" Margin="10" 
                                        ContentTemplate="{StaticResource dt}"/>

                        <TextBlock Text="{x:Static trans:Texts.strReplaceThisFolder }" />

                        <ContentControl Content="{Binding ElementName=root, Path=DestinationFile}" Margin="10"
                                        ContentTemplate="{StaticResource dt}"/>
                    </StackPanel>

                    <DockPanel Grid.Row="2" Margin="10" LastChildFill="False" >
                        <CheckBox Content="{x:Static trans:Texts.strApplyAll}" IsChecked="{Binding ElementName=root, Path=ApplyAll, Mode=TwoWay}" DockPanel.Dock="Left" x:Name="cbApplyAll" />
                        <Button Content="{x:Static trans:Texts.strCancel}" DockPanel.Dock="Right" Width="75" Height="25" Margin="5,0" />
                        <Button x:Name="dontoverwrite" Content="{x:Static trans:Texts.strNo}" DockPanel.Dock="Right" Width="75" Height="25" Margin="5,0" />
                        <Button x:Name="overwrite" Content="{x:Static trans:Texts.strYes}" DockPanel.Dock="Right" Width="75" Height="25" Margin="5,0" />
                    </DockPanel>
                </Grid>
            </DataTemplate>
        </ResourceDictionary>
    </Window.Resources>
    <!--<ContentControl x:Name="rootControl" ContentTemplate="{StaticResource dirTemplate}" />-->
</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 GNU Lesser General Public License (LGPLv3)


Written By
Founder
Hong Kong Hong Kong

Comments and Discussions