Click here to Skip to main content
15,892,537 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.
<ResourceDictionary    
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:conv="clr-namespace:QuickZip.Converters"            
    xmlns:local="clr-namespace:QuickZip.UserControls"            
    xmlns:sys="clr-namespace:System;assembly=mscorlib" >
    
    <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>

    <ControlTemplate x:Key="RoundButton" TargetType="{x:Type Button}">
        <Grid Height="30" Width="30">
            <Ellipse Name="_outer" Margin="1" Stretch="Uniform" Fill="Transparent"
                     Visibility="Hidden"/>
            <Ellipse Name="_inner" Margin="2" Stretch="Uniform" Fill="Transparent" />

            <ContentControl Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter TargetName="_outer" Property="Visibility" Value="Visible" />
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
                <Setter TargetName="_inner" Property="Fill" Value="Silver" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <!--http://blogs.msdn.com/coding4fun/archive/2006/11/30/1178193.aspx-->

    <ControlTemplate x:Key="NavMask">
        <Ellipse Height="25" Width="25" HorizontalAlignment="Center" 
         VerticalAlignment ="Center" Stroke ="Transparent" x:Name ="FadeMask"
         StrokeThickness="1" Opacity ="0">
            <Ellipse.Fill>
                <SolidColorBrush Color ="AliceBlue"/>
            </Ellipse.Fill>
        </Ellipse>
    </ControlTemplate>
    <ControlTemplate x:Key="NavHighlight">
        <Ellipse Height="25" Width="25" HorizontalAlignment="Center" VerticalAlignment ="Center" 
         x:Name ="Highlight" StrokeThickness ="2" Stroke ="Transparent">
            <Ellipse.Fill>
                <DrawingBrush>
                    <DrawingBrush.Drawing>
                        <GeometryDrawing>
                            <GeometryDrawing.Brush>
                                <LinearGradientBrush Opacity ="0.6" StartPoint ="0,0" EndPoint ="0,1">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStop Color ="White" Offset ="0"/>
                                        <GradientStop Color ="#AAFFFFFF" Offset ="1"/>
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </GeometryDrawing.Brush>
                            <GeometryDrawing.Geometry>
                                <EllipseGeometry Center ="0.5,0.5" RadiusX ="0.25" RadiusY ="0.35"/>
                            </GeometryDrawing.Geometry>
                        </GeometryDrawing>
                    </DrawingBrush.Drawing>
                    <DrawingBrush.RelativeTransform>
                        <ScaleTransform CenterX ="0.5" CenterY ="0" ScaleX ="1" ScaleY ="0.5"/>
                    </DrawingBrush.RelativeTransform>
                </DrawingBrush>
            </Ellipse.Fill>
        </Ellipse>
    </ControlTemplate>

    <ControlTemplate x:Key="RNavButton" TargetType="{x:Type Button}">
        <Grid>
            <Ellipse x:Name ="BackGrad" Height="25" Width="25" HorizontalAlignment="Center" 
                VerticalAlignment ="Center" StrokeThickness="1" Stroke ="DarkBlue" Fill="{StaticResource NavButtonBrush}">
            </Ellipse>

            <ContentControl Template="{StaticResource NavMask}" />
            <Path x:Name="Arrow" Stroke="{StaticResource NavForegroundBrush}" StrokeThickness="2" HorizontalAlignment="Center" 
                VerticalAlignment="Center"  SnapsToDevicePixels="False" 
                Data="M8,0 L13,5 8,10 M0,5 L13,5"/>
            <ContentControl Template="{StaticResource NavHighlight}" />
        </Grid>

        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter TargetName="BackGrad" Property="Fill" Value="{StaticResource NavButtonActiveBrush}" />
                <Setter TargetName="Arrow" Property="Stroke" Value="{StaticResource NavForegroundActiveBrush}" />
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter TargetName="BackGrad" Property="Fill" Value="{StaticResource NavButtonDisabledBrush}" />
                <Setter TargetName="Arrow" Property="Stroke" Value="{StaticResource NavForegroundDisabledBrush}" />
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
                <Setter TargetName="BackGrad" Property="Fill" Value="{StaticResource NavButtonSelectedBrush}" />
                <Setter TargetName="Arrow" Property="Stroke" Value="{StaticResource NavForegroundSelectedBrush}" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <ControlTemplate x:Key="LNavButton" TargetType="{x:Type Button}">
        <Grid>
            <Ellipse x:Name ="BackGrad" Height="25" Width="25" HorizontalAlignment="Center" 
         VerticalAlignment ="Center" StrokeThickness="1" Stroke ="DarkBlue" Fill="{StaticResource NavButtonBrush}">
            </Ellipse>

            <ContentControl Template="{StaticResource NavMask}" />

            <Path x:Name="Arrow" Stroke="{StaticResource NavForegroundBrush}" StrokeThickness="2" HorizontalAlignment="Center"    
                VerticalAlignment="Center" SnapsToDevicePixels="False" StrokeLineJoin="Round"
                Data="M8,0 L1,5 8,10 M0,5 L13,5"/>

            <ContentControl Template="{StaticResource NavHighlight}" />

        </Grid>

        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter TargetName="BackGrad" Property="Fill" Value="{StaticResource NavButtonActiveBrush}" />
                <Setter TargetName="Arrow" Property="Stroke" Value="{StaticResource NavForegroundActiveBrush}" />
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter TargetName="BackGrad" Property="Fill" Value="{StaticResource NavButtonDisabledBrush}" />
                <Setter TargetName="Arrow" Property="Stroke" Value="{StaticResource NavForegroundDisabledBrush}" />
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
                <Setter TargetName="BackGrad" Property="Fill" Value="{StaticResource NavButtonSelectedBrush}" />
                <Setter TargetName="Arrow" Property="Stroke" Value="{StaticResource NavForegroundSelectedBrush}" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

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