Click here to Skip to main content
15,894,362 members
Articles / Programming Languages / C# 4.0

Silverlight 4 Drag and Drop File Manager

Rate me:
Please Sign up or sign in to vote.
5.00/5 (18 votes)
6 May 2010Ms-PL9 min read 131.9K   4.5K   61  
A Silverlight file manager that allows drag and drop multiple file uploads
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:MVVMFileManager="clr-namespace:MVVMFileManager" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:System="clr-namespace:System;assembly=mscorlib" xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" mc:Ignorable="d"
	x:Class="MVMFileManager.MainPage"
	Width="600" Height="400">
	<UserControl.Resources>
		<sdk:HierarchicalDataTemplate x:Key="SilverlightFolderTemplate" ItemsSource="{Binding SubFolders}">
			<StackPanel Orientation="Horizontal">
				<Image Height="16" Source="Images/folder.png" Stretch="Fill" Width="16" Margin="0"/>
				<TextBlock Text="{Binding FolderName}" Margin="7,0,0,0"/>
			</StackPanel>
		</sdk:HierarchicalDataTemplate>
		<DataTemplate x:Key="SilverlightFileTemplate">
			<StackPanel Orientation="Horizontal">
				<Image Height="16" Source="Images/page_white.png" Stretch="Fill" Width="16"/>
				<HyperlinkButton Content="{Binding FileName}" NavigateUri="{Binding FilePath}"/>
			</StackPanel>
		</DataTemplate>
		<sdk:HierarchicalDataTemplate x:Key="SilverlightFolderTemplate1" ItemsSource="{Binding SubFolders}">
			<StackPanel>
				<TextBlock Text="{Binding FolderName}"/>
				<TextBlock Text="{Binding FullPath}"/>
			</StackPanel>
		</sdk:HierarchicalDataTemplate>
		<DataTemplate x:Key="SilverlightFileTemplate1">
			<StackPanel>
				<TextBlock Text="{Binding FileName}"/>
				<TextBlock Text="{Binding FilePath}"/>
			</StackPanel>
		</DataTemplate>
		<ControlTemplate x:Key="ValidationToolTipTemplate">
			<Grid x:Name="Root" Margin="5,0" Opacity="0" RenderTransformOrigin="0,0">
				<Grid.RenderTransform>
					<TranslateTransform x:Name="xform" X="-25"/>
				</Grid.RenderTransform>
				<VisualStateManager.VisualStateGroups>
					<VisualStateGroup x:Name="OpenStates">
						<VisualStateGroup.Transitions>
							<VisualTransition GeneratedDuration="0"/>
							<VisualTransition GeneratedDuration="0:0:0.2" To="Open">
								<Storyboard>
									<DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="X" Storyboard.TargetName="xform">
										<DoubleAnimation.EasingFunction>
											<BackEase Amplitude=".3" EasingMode="EaseOut"/>
										</DoubleAnimation.EasingFunction>
									</DoubleAnimation>
									<DoubleAnimation Duration="0:0:0.2" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
								</Storyboard>
							</VisualTransition>
						</VisualStateGroup.Transitions>
						<VisualState x:Name="Closed">
							<Storyboard>
								<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
							</Storyboard>
						</VisualState>
						<VisualState x:Name="Open">
							<Storyboard>
								<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="X" Storyboard.TargetName="xform"/>
								<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
							</Storyboard>
						</VisualState>
					</VisualStateGroup>
				</VisualStateManager.VisualStateGroups>
				<Border Background="#052A2E31" CornerRadius="5" Margin="4,4,-4,-4"/>
				<Border Background="#152A2E31" CornerRadius="4" Margin="3,3,-3,-3"/>
				<Border Background="#252A2E31" CornerRadius="3" Margin="2,2,-2,-2"/>
				<Border Background="#352A2E31" CornerRadius="2" Margin="1,1,-1,-1"/>
				<Border Background="#FFDC000C" CornerRadius="2"/>
				<Border CornerRadius="2">
					<TextBlock Foreground="White" MaxWidth="250" Margin="8,4,8,4" TextWrapping="Wrap" Text="{Binding (Validation.Errors)[0].ErrorContent}" UseLayoutRounding="false"/>
				</Border>
			</Grid>
		</ControlTemplate>
		<Style x:Key="ScrollViewerStyleOuterMVVM" TargetType="ScrollViewer">
			<Setter Property="HorizontalContentAlignment" Value="Left"/>
			<Setter Property="VerticalContentAlignment" Value="Top"/>
			<Setter Property="VerticalScrollBarVisibility" Value="Visible"/>
			<Setter Property="Padding" Value="4"/>
			<Setter Property="BorderThickness" Value="1"/>
			<Setter Property="BorderBrush" Value="{x:Null}"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="ScrollViewer">
						<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2">
							<Grid Background="{TemplateBinding Background}">
								<Grid.ColumnDefinitions>
									<ColumnDefinition Width="*"/>
									<ColumnDefinition Width="Auto"/>
								</Grid.ColumnDefinitions>
								<Grid.RowDefinitions>
									<RowDefinition Height="*"/>
									<RowDefinition Height="Auto"/>
								</Grid.RowDefinitions>
								<ScrollContentPresenter x:Name="ScrollContentPresenter" Cursor="{TemplateBinding Cursor}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}"/>
								<Rectangle Grid.Column="1" Fill="#FFE9EEF4" Grid.Row="1" Visibility="Collapsed"/>
								<ScrollBar x:Name="VerticalScrollBar" Grid.Column="1" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Margin="0,5,5,5" Minimum="0" Orientation="Vertical" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{TemplateBinding VerticalOffset}" ViewportSize="{TemplateBinding ViewportHeight}" Width="18" Style="{StaticResource ScrollBarStyleMVVM}"/>
								<ScrollBar x:Name="HorizontalScrollBar" Grid.Column="0" Height="18" IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Margin="5,0,5,5" Minimum="0" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{TemplateBinding HorizontalOffset}" ViewportSize="{TemplateBinding ViewportWidth}" Style="{StaticResource ScrollBarStyleMVVM}"/>
							</Grid>
						</Border>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
			<Setter Property="Margin" Value="5"/>
		</Style>
		<Style x:Key="ScrollViewerStyleInnerMVVM" TargetType="ScrollViewer">
			<Setter Property="HorizontalContentAlignment" Value="Left"/>
			<Setter Property="VerticalContentAlignment" Value="Top"/>
			<Setter Property="Padding" Value="4"/>
			<Setter Property="BorderThickness" Value="1"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="ScrollViewer">
						<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="6" Background="{TemplateBinding Background}">
							<Border x:Name="BGroundOverlay" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="6" Opacity="0.95">
								<Border.Background>
									<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
										<GradientStop Color="#E5FFFFFF" Offset="0"/>
										<GradientStop Color="#E5FFFFFF" Offset="1"/>
										<GradientStop Color="White" Offset="0.4"/>
										<GradientStop Color="White" Offset="0.6"/>
									</LinearGradientBrush>
								</Border.Background>
								<Grid>
									<Grid.ColumnDefinitions>
										<ColumnDefinition Width="*"/>
										<ColumnDefinition Width="Auto"/>
									</Grid.ColumnDefinitions>
									<Grid.RowDefinitions>
										<RowDefinition Height="*"/>
										<RowDefinition Height="Auto"/>
									</Grid.RowDefinitions>
									<ScrollContentPresenter x:Name="ScrollContentPresenter" Cursor="{TemplateBinding Cursor}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}"/>
									<Rectangle Grid.Column="1" Fill="#FFE9EEF4" Grid.Row="1" Visibility="Collapsed"/>
									<ScrollBar x:Name="VerticalScrollBar" Grid.Column="1" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Margin="0,5,5,5" Minimum="0" Orientation="Vertical" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{TemplateBinding VerticalOffset}" ViewportSize="{TemplateBinding ViewportHeight}" Width="18" Style="{StaticResource ScrollBarStyleMVVM}"/>
									<ScrollBar x:Name="HorizontalScrollBar" Grid.Column="0" Height="18" IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Margin="5,0,5,5" Minimum="0" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{TemplateBinding HorizontalOffset}" ViewportSize="{TemplateBinding ViewportWidth}" Style="{StaticResource ScrollBarStyleMVVM}"/>
								</Grid>
							</Border>
						</Border>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		<LinearGradientBrush x:Key="BackGroundGradient" EndPoint="0.5,1" StartPoint="0.5,0" Opacity="1">
			<GradientStop Color="#FFC25353" Offset="0"/>
			<GradientStop Color="#FFFFC7C7" Offset="0.4"/>
			<GradientStop Color="#FFC04E4E" Offset="0.978"/>
			<GradientStop Color="#FFFFC7C7" Offset="0.6"/>
		</LinearGradientBrush>
		<Style x:Key="ListBoxStyleMVVM" TargetType="ListBox">
			<Setter Property="Padding" Value="1"/>
			<Setter Property="Background" Value="Red"/>
			<Setter Property="Foreground" Value="#FF000000"/>
			<Setter Property="HorizontalContentAlignment" Value="Left"/>
			<Setter Property="VerticalContentAlignment" Value="Top"/>
			<Setter Property="IsTabStop" Value="False"/>
			<Setter Property="BorderThickness" Value="1"/>
			<Setter Property="TabNavigation" Value="Once"/>
			<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
			<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
			<Setter Property="BorderBrush" Value="#FFC00000"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="ListBox">
						<Grid>
							<VisualStateManager.VisualStateGroups>
								<VisualStateGroup x:Name="ValidationStates">
									<VisualState x:Name="Valid"/>
									<VisualState x:Name="InvalidUnfocused">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ValidationErrorElement">
												<DiscreteObjectKeyFrame KeyTime="0">
													<DiscreteObjectKeyFrame.Value>
														<Visibility>Visible</Visibility>
													</DiscreteObjectKeyFrame.Value>
												</DiscreteObjectKeyFrame>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="InvalidFocused">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ValidationErrorElement">
												<DiscreteObjectKeyFrame KeyTime="0">
													<DiscreteObjectKeyFrame.Value>
														<Visibility>Visible</Visibility>
													</DiscreteObjectKeyFrame.Value>
												</DiscreteObjectKeyFrame>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsOpen" Storyboard.TargetName="validationTooltip">
												<DiscreteObjectKeyFrame KeyTime="0">
													<DiscreteObjectKeyFrame.Value>
														<System:Boolean>True</System:Boolean>
													</DiscreteObjectKeyFrame.Value>
												</DiscreteObjectKeyFrame>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
							<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="7">
								<ScrollViewer x:Name="ScrollViewer" BorderThickness="0" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" TabNavigation="{TemplateBinding TabNavigation}" Style="{StaticResource ScrollViewerStyleInnerMVVM}" BorderBrush="{TemplateBinding BorderBrush}">
									<ItemsPresenter/>
								</ScrollViewer>
							</Border>
							<Border x:Name="ValidationErrorElement" BorderBrush="#FFDB000C" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="7" Visibility="Collapsed">
								<ToolTipService.ToolTip>
									<ToolTip x:Name="validationTooltip" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" Placement="Right" PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Template="{StaticResource ValidationToolTipTemplate}">
										<ToolTip.Triggers>
											<EventTrigger RoutedEvent="Canvas.Loaded">
												<BeginStoryboard>
													<Storyboard>
														<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="validationTooltip">
															<DiscreteObjectKeyFrame KeyTime="0">
																<DiscreteObjectKeyFrame.Value>
																	<System:Boolean>true</System:Boolean>
																</DiscreteObjectKeyFrame.Value>
															</DiscreteObjectKeyFrame>
														</ObjectAnimationUsingKeyFrames>
													</Storyboard>
												</BeginStoryboard>
											</EventTrigger>
										</ToolTip.Triggers>
									</ToolTip>
								</ToolTipService.ToolTip>
								<Grid Background="Transparent" HorizontalAlignment="Right" Height="10" Margin="0,-4,-4,0" VerticalAlignment="Top" Width="10">
									<Path Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 z" Fill="#FFDC000C" Margin="-1,3,0,0"/>
									<Path Data="M 0,0 L2,0 L 8,6 L8,8" Fill="#ffffff" Margin="-1,3,0,0"/>
								</Grid>
							</Border>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		<Style x:Key="ListBoxItemStyleMVVM" TargetType="ListBoxItem">
			<Setter Property="Padding" Value="3"/>
			<Setter Property="HorizontalContentAlignment" Value="Left"/>
			<Setter Property="VerticalContentAlignment" Value="Top"/>
			<Setter Property="Background" Value="Transparent"/>
			<Setter Property="BorderThickness" Value="1"/>
			<Setter Property="TabNavigation" Value="Local"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="ListBoxItem">
						<Grid Background="{TemplateBinding Background}">
							<VisualStateManager.VisualStateGroups>
								<VisualStateGroup x:Name="CommonStates">
									<VisualState x:Name="Normal"/>
									<VisualState x:Name="MouseOver">
										<Storyboard>
											<DoubleAnimation Duration="0" To=".35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="Disabled">
										<Storyboard>
											<DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
								<VisualStateGroup x:Name="SelectionStates">
									<VisualState x:Name="Unselected"/>
									<VisualState x:Name="Selected">
										<Storyboard>
											<DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
								<VisualStateGroup x:Name="FocusStates">
									<VisualState x:Name="Focused">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
												<DiscreteObjectKeyFrame KeyTime="0">
													<DiscreteObjectKeyFrame.Value>
														<Visibility>Visible</Visibility>
													</DiscreteObjectKeyFrame.Value>
												</DiscreteObjectKeyFrame>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="Unfocused"/>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
							<Rectangle x:Name="fillColor" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
							<Rectangle x:Name="fillColor2" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
							<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"/>
							<Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed"/>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		<ControlTemplate x:Key="CommonValidationToolTipTemplate" TargetType="ToolTip">
			<Grid x:Name="Root" Margin="5,0" Opacity="0" RenderTransformOrigin="0,0">
				<Grid.RenderTransform>
					<TranslateTransform x:Name="Translation" X="-25"/>
				</Grid.RenderTransform>
				<VisualStateManager.VisualStateGroups>
					<VisualStateGroup x:Name="OpenStates">
						<VisualStateGroup.Transitions>
							<VisualTransition GeneratedDuration="0"/>
							<VisualTransition GeneratedDuration="0:0:0.2" To="Open">
								<Storyboard>
									<DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="X" Storyboard.TargetName="Translation">
										<DoubleAnimation.EasingFunction>
											<BackEase Amplitude=".3" EasingMode="EaseOut"/>
										</DoubleAnimation.EasingFunction>
									</DoubleAnimation>
									<DoubleAnimation Duration="0:0:0.2" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
								</Storyboard>
							</VisualTransition>
						</VisualStateGroup.Transitions>
						<VisualState x:Name="Closed">
							<Storyboard>
								<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
							</Storyboard>
						</VisualState>
						<VisualState x:Name="Open">
							<Storyboard>
								<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="X" Storyboard.TargetName="Translation"/>
								<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
							</Storyboard>
						</VisualState>
					</VisualStateGroup>
				</VisualStateManager.VisualStateGroups>
				<Border Background="#052A2E31" CornerRadius="5" Margin="4,4,-4,-4"/>
				<Border Background="#152A2E31" CornerRadius="4" Margin="3,3,-3,-3"/>
				<Border Background="#252A2E31" CornerRadius="3" Margin="2,2,-2,-2"/>
				<Border Background="#352A2E31" CornerRadius="2" Margin="1,1,-1,-1"/>
				<Border Background="#FFDC000C" CornerRadius="2">
					<TextBlock Foreground="White" MaxWidth="250" Margin="8,4,8,4" TextWrapping="Wrap" Text="{Binding (Validation.Errors)[0].ErrorContent}" UseLayoutRounding="false"/>
				</Border>
			</Grid>
		</ControlTemplate>
		<Style x:Key="TreeViewStyleMVVM" TargetType="sdk:TreeView">
			<Setter Property="Background" Value="Red"/>
			<Setter Property="Foreground" Value="#FF000000"/>
			<Setter Property="HorizontalContentAlignment" Value="Left"/>
			<Setter Property="VerticalContentAlignment" Value="Top"/>
			<Setter Property="Cursor" Value="Arrow"/>
			<Setter Property="BorderThickness" Value="1"/>
			<Setter Property="BorderBrush" Value="#FFC00000"/>
			<Setter Property="IsTabStop" Value="True"/>
			<Setter Property="TabNavigation" Value="Once"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="sdk:TreeView">
						<Grid>
							<VisualStateManager.VisualStateGroups>
								<VisualStateGroup x:Name="CommonStates">
									<VisualState x:Name="Normal"/>
									<VisualState x:Name="MouseOver"/>
									<VisualState x:Name="Pressed"/>
									<VisualState x:Name="Disabled"/>
								</VisualStateGroup>
								<VisualStateGroup x:Name="FocusStates">
									<VisualState x:Name="Unfocused"/>
									<VisualState x:Name="Focused"/>
								</VisualStateGroup>
								<VisualStateGroup x:Name="ValidationStates">
									<VisualState x:Name="Valid"/>
									<VisualState x:Name="InvalidUnfocused">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Validation">
												<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="InvalidFocused">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Validation">
												<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsOpen" Storyboard.TargetName="ValidationToolTip">
												<DiscreteObjectKeyFrame KeyTime="0">
													<DiscreteObjectKeyFrame.Value>
														<System:Boolean>True</System:Boolean>
													</DiscreteObjectKeyFrame.Value>
												</DiscreteObjectKeyFrame>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
							<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="7">
								<Border Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" CornerRadius="6">
									<ScrollViewer x:Name="ScrollViewer" BorderBrush="Transparent" BorderThickness="0" Background="{x:Null}" HorizontalScrollBarVisibility="Auto" IsTabStop="False" TabNavigation="Once" VerticalScrollBarVisibility="Auto" Style="{StaticResource ScrollViewerStyleInnerMVVM}">
										<ItemsPresenter Margin="5"/>
									</ScrollViewer>
								</Border>
							</Border>
							<Border x:Name="Validation" BorderBrush="#FFDB000C" BorderThickness="{TemplateBinding BorderThickness}" Grid.Column="1" CornerRadius="2" Visibility="Collapsed">
								<ToolTipService.ToolTip>
									<ToolTip x:Name="ValidationToolTip" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" IsHitTestVisible="True" Placement="Right" PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Template="{StaticResource CommonValidationToolTipTemplate}"/>
								</ToolTipService.ToolTip>
								<Grid Background="Transparent" HorizontalAlignment="Right" Height="10" Margin="0,-4,-4,0" VerticalAlignment="Top" Width="10">
									<Path Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 Z" Fill="#FFDC000C" Margin="-1,3,0,0"/>
									<Path Data="M 0,0 L2,0 L 8,6 L8,8" Fill="#FFFFFFFF" Margin="-1,3,0,0"/>
								</Grid>
							</Border>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
			<Setter Property="Padding" Value="0"/>
		</Style>
	</UserControl.Resources>
	<Canvas x:Name="LayoutRoot" Background="{StaticResource BackGroundGradient}">
		<i:Interaction.Triggers>
			<i:EventTrigger>
				<i:InvokeCommandAction CommandParameter="{Binding ElementName=FileDetails, Mode=OneWay}" Command="{Binding SetDropUIElementCommand}"/>
			</i:EventTrigger>
		</i:Interaction.Triggers>
		<Canvas.DataContext>
			<MVVMFileManager:MainViewModel/>
		</Canvas.DataContext>
		<ContentControl x:Name="PictureFrame" Style="{StaticResource PictureFrameControl}" Width="600" Height="400" BorderThickness="50"/>
		<Grid Height="300" Canvas.Top="50" Width="500" Canvas.Left="50" Background="{StaticResource BackGroundGradient}">
			<Grid.ColumnDefinitions>
				<ColumnDefinition Width="0.493*"/>
				<ColumnDefinition Width="0.507*"/>
			</Grid.ColumnDefinitions>
			<ScrollViewer x:Name="FileFolders" Margin="0,0,5,0" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" d:DataContext="{d:DesignData /SampleData/MainViewModelSampleData.xaml}" Style="{StaticResource ScrollViewerStyleOuterMVVM}">
				<sdk:TreeView x:Name="treeView" ItemTemplate="{StaticResource SilverlightFolderTemplate}" ItemsSource="{Binding SilverlightFolders}" Style="{StaticResource TreeViewStyleMVVM}">
					<i:Interaction.Triggers>
						<i:EventTrigger EventName="SelectedItemChanged">
							<i:InvokeCommandAction Command="{Binding SetFilesCommand}" CommandParameter="{Binding SelectedItem, ElementName=treeView, Mode=OneWay}"/>
						</i:EventTrigger>
					</i:Interaction.Triggers>
				</sdk:TreeView>
			</ScrollViewer>
			<sdk:GridSplitter HorizontalAlignment="Left" Width="10" Margin="-5,80,0,80" Grid.Column="1" Style="{StaticResource GridSplitterStyleMVVM}"/>
			<ScrollViewer x:Name="FileDetails" Grid.Column="1" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" d:DataContext="{d:DesignData /SampleData/MainViewModelSampleData.xaml}" Style="{StaticResource ScrollViewerStyleOuterMVVM}" Margin="5,0,0,0">
				<ListBox ItemTemplate="{StaticResource SilverlightFileTemplate}" ItemsSource="{Binding SilverlightFiles}" Style="{StaticResource ListBoxStyleMVVM}">
					<ListBox.ItemContainerStyle>
						<Style TargetType="ListBoxItem">
							<Setter Property="Padding" Value="3"/>
							<Setter Property="HorizontalContentAlignment" Value="Left"/>
							<Setter Property="VerticalContentAlignment" Value="Top"/>
							<Setter Property="Background" Value="Transparent"/>
							<Setter Property="BorderThickness" Value="1"/>
							<Setter Property="TabNavigation" Value="Local"/>
							<Setter Property="Template">
								<Setter.Value>
									<ControlTemplate TargetType="ListBoxItem">
										<Grid Background="{TemplateBinding Background}">
											<VisualStateManager.VisualStateGroups>
												<VisualStateGroup x:Name="CommonStates">
													<VisualState x:Name="Normal"/>
													<VisualState x:Name="MouseOver">
														<Storyboard>
															<DoubleAnimation Duration="0" To=".35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/>
														</Storyboard>
													</VisualState>
													<VisualState x:Name="Disabled">
														<Storyboard>
															<DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
														</Storyboard>
													</VisualState>
												</VisualStateGroup>
												<VisualStateGroup x:Name="SelectionStates">
													<VisualState x:Name="Unselected"/>
													<VisualState x:Name="Selected">
														<Storyboard>
															<DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/>
														</Storyboard>
													</VisualState>
												</VisualStateGroup>
												<VisualStateGroup x:Name="FocusStates">
													<VisualState x:Name="Focused">
														<Storyboard>
															<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
																<DiscreteObjectKeyFrame KeyTime="0">
																	<DiscreteObjectKeyFrame.Value>
																		<Visibility>Visible</Visibility>
																	</DiscreteObjectKeyFrame.Value>
																</DiscreteObjectKeyFrame>
															</ObjectAnimationUsingKeyFrames>
														</Storyboard>
													</VisualState>
													<VisualState x:Name="Unfocused"/>
												</VisualStateGroup>
											</VisualStateManager.VisualStateGroups>
											<Rectangle x:Name="fillColor" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
											<Rectangle x:Name="fillColor2" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
											<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"/>
											<Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed"/>
										</Grid>
									</ControlTemplate>
								</Setter.Value>
							</Setter>
						</Style>
					</ListBox.ItemContainerStyle>
				</ListBox>
			</ScrollViewer>
		</Grid>
		<toolkit:BusyIndicator IsBusy="{Binding FileUploadingProperty}" Height="58" Canvas.Left="221" Canvas.Top="173" Width="157" BusyContent="{Binding FileuploadPercentProperty}">
			<toolkit:BusyIndicator.Resources>
				<ResourceDictionary>
					<ResourceDictionary.MergedDictionaries>
						<ResourceDictionary Source="BusyIndicator.xaml"/>
					</ResourceDictionary.MergedDictionaries>
				</ResourceDictionary>
			</toolkit:BusyIndicator.Resources>
			<toolkit:BusyIndicator.Style>
				<StaticResource ResourceKey="BusyIndicatorStyleMVVM"/>
			</toolkit:BusyIndicator.Style>
		</toolkit:BusyIndicator>
	</Canvas>
</UserControl>

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 Microsoft Public License (Ms-PL)


Written By
Software Developer (Senior) http://ADefWebserver.com
United States United States
Michael Washington is a Microsoft MVP. He is a ASP.NET and
C# programmer.
He is the founder of
AiHelpWebsite.com,
LightSwitchHelpWebsite.com, and
HoloLensHelpWebsite.com.

He has a son, Zachary and resides in Los Angeles with his wife Valerie.

He is the Author of:

Comments and Discussions