Click here to Skip to main content
15,896,269 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 291.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">
    
    <ResourceDictionary.MergedDictionaries>        
        <ResourceDictionary Source="pack://application:,,,/QuickZip.UserControls;component/Themes/Brushes.xaml" />
    </ResourceDictionary.MergedDictionaries>

    <!--Modified from the template provided in http://www.codeproject.com/Articles/37366/Styling-A-ScrollViewer-Scrollbar-In-WPF.aspx-->

    <!-- Style for overall  ScrollViewer -->
    <Style x:Key="SimpleScrollViewerStyle" TargetType="{x:Type ScrollViewer}">
        <Style.Resources>
            <LinearGradientBrush x:Key="ListBoxBackgroundBrush" StartPoint="0,0" EndPoint="1,0.001">
                <GradientBrush.GradientStops>
                    <GradientStopCollection>
                        <GradientStop Color="White" Offset="0.0" />
                        <GradientStop Color="White" Offset="0.6" />
                        <GradientStop Color="#DDDDDD" Offset="1.2"/>
                    </GradientStopCollection>
                </GradientBrush.GradientStops>
            </LinearGradientBrush>

            <LinearGradientBrush x:Key="StandardBrush" StartPoint="0,0" EndPoint="0,1">
                <GradientBrush.GradientStops>
                    <GradientStopCollection>
                        <GradientStop Color="#FFF" Offset="0.0"/>
                        <GradientStop Color="#CCC" Offset="1.0"/>
                    </GradientStopCollection>
                </GradientBrush.GradientStops>
            </LinearGradientBrush>
            <SolidColorBrush x:Key="GlyphBrush" Color="#444" />
            <LinearGradientBrush x:Key="PressedBrush" 
			StartPoint="0,0" EndPoint="0,1">
                <GradientBrush.GradientStops>
                    <GradientStopCollection>
                        <GradientStop Color="#BBB" Offset="0.0"/>
                        <GradientStop Color="#EEE" Offset="0.1"/>
                        <GradientStop Color="#EEE" Offset="0.9"/>
                        <GradientStop Color="#FFF" Offset="1.0"/>
                    </GradientStopCollection>
                </GradientBrush.GradientStops>
            </LinearGradientBrush>

            <!-- SrollViewer ScrollBar Repeat Buttons (at each end) -->
            <Style x:Key="ScrollBarLineButton" TargetType="{x:Type RepeatButton}">
                <Setter Property="SnapsToDevicePixels" Value="True"/>
                <Setter Property="OverridesDefaultStyle" Value="true"/>
                <Setter Property="Focusable" Value="false"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type RepeatButton}">
                            <Border Name="Border" Margin="1"  CornerRadius="2" Background="{StaticResource NormalBrush}"
                            BorderBrush="{StaticResource NormalBorderBrush}" BorderThickness="1">
                                <Path HorizontalAlignment="Center" VerticalAlignment="Center" Fill="{StaticResource GlyphBrush}"
                                Data="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" />
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsPressed" Value="true">
                                    <Setter TargetName="Border" Property="Background" 
								Value="{StaticResource PressedBrush}" />
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="false">
                                    <Setter Property="Foreground" 
								Value="{StaticResource DisabledForegroundBrush}"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <!-- SrollViewer ScrollBar Repeat Buttons (The part in the middle, 
             not the thumb the long area between the buttons ) -->
            <Style x:Key="ScrollBarPageButton" TargetType="{x:Type RepeatButton}">
                <Setter Property="SnapsToDevicePixels" Value="True"/>
                <Setter Property="OverridesDefaultStyle" Value="true"/>
                <Setter Property="IsTabStop" Value="false"/>
                <Setter Property="Focusable" Value="false"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type RepeatButton}">
                            <Border Background="Transparent" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <!-- ScrollViewer ScrollBar Thumb, that part that can be dragged
            up/down or left/right Buttons -->
            <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
                <Setter Property="SnapsToDevicePixels" Value="True"/>
                <Setter Property="OverridesDefaultStyle" Value="true"/>
                <Setter Property="IsTabStop" Value="false"/>
                <Setter Property="Focusable" Value="false"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Thumb}">
                            <Border CornerRadius="2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <ControlTemplate x:Key="VerticalScrollBar" 
			TargetType="{x:Type ScrollBar}">
                <Grid >
                    <Grid.RowDefinitions>
                        <RowDefinition MaxHeight="8"/>
                        <RowDefinition Height="0.00001*"/>
                        <RowDefinition MaxHeight="8"/>
                    </Grid.RowDefinitions>
                    <Border Grid.RowSpan="3" CornerRadius="2" Background="#F0F0F0" />
                    <RepeatButton Grid.Row="0" Style="{StaticResource ScrollBarLineButton}" Height="8" 
                          Command="ScrollBar.LineUpCommand" Content="M 0 4 L 8 4 L 4 0 Z" />
                    <Track Name="PART_Track" Grid.Row="1" IsDirectionReversed="true">
                        <Track.DecreaseRepeatButton>
                            <RepeatButton  Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageUpCommand" />
                        </Track.DecreaseRepeatButton>
                        <Track.Thumb>
                            <Thumb Style="{StaticResource ScrollBarThumb}"  Margin="1,0,1,0"  
                           Background="{StaticResource HorizontalNormalBrush}" BorderBrush="{StaticResource HorizontalNormalBorderBrush}" />
                        </Track.Thumb>
                        <Track.IncreaseRepeatButton>
                            <RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageDownCommand" />
                        </Track.IncreaseRepeatButton>
                    </Track>
                    <RepeatButton Grid.Row="3" Style="{StaticResource ScrollBarLineButton}" Height="8" Command="ScrollBar.LineDownCommand" 
                          Content="M 0 0 L 4 4 L 8 0 Z"/>
                </Grid>
            </ControlTemplate>
            <!-- HorizontalScrollBar Template using the previously created Templates -->
            <ControlTemplate x:Key="HorizontalScrollBar" 
			TargetType="{x:Type ScrollBar}">
                <Grid >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition MaxWidth="8"/>
                        <ColumnDefinition Width="0.00001*"/>
                        <ColumnDefinition MaxWidth="8"/>
                    </Grid.ColumnDefinitions>
                    <Border Grid.ColumnSpan="3" CornerRadius="2" Background="#F0F0F0" />
                    <RepeatButton Grid.Column="0" Style="{StaticResource ScrollBarLineButton}" Width="8" Command="ScrollBar.LineLeftCommand"
                            Content="M 4 0 L 4 8 L 0 4 Z" />
                    <Track Name="PART_Track" Grid.Column="1" IsDirectionReversed="False">
                        <Track.DecreaseRepeatButton>
                            <RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageLeftCommand" />
                        </Track.DecreaseRepeatButton>
                        <Track.Thumb>
                            <Thumb Style="{StaticResource ScrollBarThumb}" Margin="0,1,0,1" Background="{StaticResource NormalBrush}"
                            BorderBrush="{StaticResource NormalBorderBrush}" />
                        </Track.Thumb>
                        <Track.IncreaseRepeatButton>
                            <RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageRightCommand" />
                        </Track.IncreaseRepeatButton>
                    </Track>
                    <RepeatButton Grid.Column="3" Style="{StaticResource ScrollBarLineButton}" Width="8" Command="ScrollBar.LineRightCommand"
                          Content="M 0 0 L 4 4 L 0 8 Z"/>
                </Grid>
            </ControlTemplate>
            <!-- Style for overall  ScrollBar -->
            <Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
                <Setter Property="SnapsToDevicePixels" Value="True"/>
                <Setter Property="OverridesDefaultStyle" Value="true"/>
                <Style.Triggers>
                    <Trigger Property="Orientation" Value="Horizontal">
                        <Setter Property="Width" Value="Auto"/>
                        <Setter Property="Height" Value="8" />
                        <Setter Property="Template" 
						Value="{StaticResource HorizontalScrollBar}" />
                    </Trigger>
                    <Trigger Property="Orientation" Value="Vertical">
                        <Setter Property="Width" Value="8"/>
                        <Setter Property="Height" Value="Auto" />
                        <Setter Property="Template" 
						Value="{StaticResource VerticalScrollBar}" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Style.Resources>
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ScrollViewer}">
                    <Grid>
                        <Grid.ColumnDefinitions>                            
                            <ColumnDefinition/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>

                        <ScrollContentPresenter Grid.Column="0"/>

                        <ScrollBar Name="PART_VerticalScrollBar" Grid.Column="1" Value="{TemplateBinding VerticalOffset}" Maximum="{TemplateBinding ScrollableHeight}"
                                    ViewportSize="{TemplateBinding ViewportHeight}" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
                        <ScrollBar Name="PART_HorizontalScrollBar" Orientation="Horizontal" Grid.Row="1" Grid.Column="0"
                                    Value="{TemplateBinding HorizontalOffset}" Maximum="{TemplateBinding ScrollableWidth}"
                                    ViewportSize="{TemplateBinding ViewportWidth}" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </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