Click here to Skip to main content
15,880,796 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 288.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:uc="clr-namespace:QuickZip.UserControls">
    <ResourceDictionary.MergedDictionaries>
        
    </ResourceDictionary.MergedDictionaries>

    <Style x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type uc:VirtualWrapPanelView}, ResourceId=virtualWrapPanelViewDSK}" 
                                        TargetType="{x:Type ListView}" BasedOn="{StaticResource {x:Type ListBox}}"
       >
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>

        <Setter Property="ItemContainerStyle" 
          Value="{Binding (ListView.View).ItemContainerStyle,
          RelativeSource={RelativeSource Self}}"/>

        <Setter Property="ItemTemplate" 
          Value="{Binding (ListView.View).ItemTemplate,
          RelativeSource={RelativeSource Self}}"/>

        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <uc:VirtualWrapPanel Width="{Binding (FrameworkElement.ActualWidth),
                   RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
                   Orientation="{Binding (ListView.View).Orientation, RelativeSource={RelativeSource AncestorType=ListView}}"                      
                   SmallChanges="{Binding (ListView.View).SmallChanges, RelativeSource={RelativeSource AncestorType=ListView}}"                      
                   ItemWidth="{Binding (ListView.View).ItemWidth, RelativeSource={RelativeSource AncestorType=ListView}}"
                   MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}"
                   ItemHeight="{Binding (ListView.View).ItemHeight, RelativeSource={RelativeSource AncestorType=ListView}}"/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="lvItemSelectStyle" TargetType="{x:Type ListViewItem}" BasedOn="{StaticResource {x:Type ListBoxItem}}">
        <Style.Resources>
            <ResourceDictionary Source="pack://application:,,,/QuickZip.UserControls;component/Themes/Brushes.xaml" />
        </Style.Resources>
        <!--<Setter Property="Margin" Value="1,2,1,1"/>-->
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="HorizontalContentAlignment" Value="Left" />
        <Setter Property="VerticalContentAlignment" Value="Stretch" />

        <!--<Setter Property="Background" Value="{TemplateBinding ListViewItem.Background}" />-->
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBoxItem}">
                    <Border x:Name="border" BorderBrush="{StaticResource LightBorderBrush}" 
                            BorderThickness="0" Padding="1" Background="{TemplateBinding Background}" >                        
                            <ContentPresenter Margin="5,0" />                        
                    </Border>
                    <ControlTemplate.Triggers>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver" Value="True" />
                                <Condition Property="IsSelected" Value="False"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Background" Value="{StaticResource HotTrackBrush}" />
                            <Setter TargetName="border" Property="Padding" Value="0" />
                            <Setter TargetName="border" Property="BorderThickness" Value="1" />
                        </MultiTrigger>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property="Background" Value="{StaticResource SelectedBackgroundBrush}" />
                            <Setter TargetName="border" Property="Padding" Value="0" />
                            <Setter TargetName="border" Property="BorderThickness" Value="1" />
                        </Trigger>
                        <Trigger Property="uc:SelectionHelper.IsDragging" Value="True">
                            <Setter Property="Background" Value="{StaticResource HotTrackBrush}" />
                            <Setter TargetName="border" Property="Padding" Value="0" />
                            <Setter TargetName="border" Property="BorderThickness" Value="1" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type uc:VirtualWrapPanelView}, ResourceId=virtualWrapPanelViewItemDSK}" 
           TargetType="{x:Type ListViewItem}" BasedOn="{StaticResource lvItemSelectStyle}" >

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