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

Silverlight Simple Drag And Drop / Or Browse View Model / MVVM File Upload Control

Rate me:
Please Sign up or sign in to vote.
4.96/5 (28 votes)
25 Jun 2011Ms-PL3 min read 106.6K   2.9K   54  
An example of a Silverlight Drag And Drop / Or Browse File Upload Control using View Model / MVVM
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:SimpleMVVMFileUpload" xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:System="clr-namespace:System;assembly=mscorlib" x:Class="SimpleMVVMFileUpload.MainPage"
    d:DesignHeight="452" d:DesignWidth="647" mc:Ignorable="d" >
	<UserControl.Resources>
		<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}" Background="#00121111" Foreground="#FF2A2B2B"/>
			</StackPanel>
		</DataTemplate>
		<LinearGradientBrush x:Key="StaticControlBackground" EndPoint="0.5,1" StartPoint="0.5,0">
			<GradientStop Color="#FFE2E2E2" Offset="0" />
			<GradientStop Color="#FFC6C6C6" Offset="1" />
		</LinearGradientBrush>
		<DropShadowEffect x:Key="ControlShadowEffect" BlurRadius="3" Color="#000000" Direction="-90" Opacity="0.55" ShadowDepth="1" />
		<!--LinksBorderStyle-->
		<Style x:Key="LinksBorderStyle" TargetType="Border">
			<Setter Property="Background" Value="{StaticResource StaticControlBackground}" />
			<Setter Property="Effect" Value="{StaticResource ControlShadowEffect}" />
			<Setter Property="Height" Value="38" />
			<Setter Property="Margin" Value="0" />
			<Setter Property="HorizontalAlignment" Value="Stretch" />
			<Setter Property="VerticalAlignment" Value="Top" />
		</Style>
		<!--NavLinksBorderStyle-->
		<Style x:Key="NavLinksBorderStyle" TargetType="Border" BasedOn="{StaticResource LinksBorderStyle}">
			<Setter Property="Margin" Value="0" />
		</Style>
		<!-- 
    ***************************************************************************
    Green Accents
    ***************************************************************************
    -->
		<LinearGradientBrush x:Key="InputSelectionBrush" EndPoint="0.5,1" StartPoint="0.5,0">
			<GradientStop Color="#FF98B913" Offset="0" />
			<GradientStop Color="#FF75A20A" Offset="1" />
		</LinearGradientBrush>
		<SolidColorBrush x:Key="NavigationInactiveForegroundColorBrush" Color="#FF58585D" />
		<!-- Font Families. -->
		<FontFamily x:Key="ContentFontFamily">Trebuchet MS</FontFamily>

		<System:Double x:Key="Heading5FontSize">15</System:Double>
		<SolidColorBrush x:Key="ColorAccentSolidBrush" Color="#FF75A20A" />

		<LinearGradientBrush x:Key="StaticControlBackgroundOver" EndPoint="0.5,1" StartPoint="0.5,0">
			<GradientStop Color="#FFF8F8F8" Offset="0" />
			<GradientStop Color="#FFD0D0D0" Offset="1" />
		</LinearGradientBrush>

    <!-- 
    ***************************************************************************
    Navigation
    ***************************************************************************
    -->

		<Color x:Key="NavigationActiveForegroundColor">White</Color>
    <!--LinkStyle-->
		<Style x:Key="LinkStyle" TargetType="HyperlinkButton">
			<Setter Property="BorderThickness" Value="1" />
			<Setter Property="Background" Value="{StaticResource InputSelectionBrush}" />
			<Setter Property="BorderBrush" Value="{x:Null}" />
			<Setter Property="Foreground" Value="{StaticResource NavigationInactiveForegroundColorBrush}" />
			<Setter Property="FontFamily" Value="{StaticResource ContentFontFamily}" />
			<Setter Property="FontSize" Value="{StaticResource Heading5FontSize}" />
			<Setter Property="FontWeight" Value="Bold" />
			<Setter Property="TextOptions.TextHintingMode" Value="Animated" />
			<Setter Property="Cursor" Value="Hand" />
			<Setter Property="Height" Value="47" />
			<Setter Property="VerticalContentAlignment" Value="Center" />
			<Setter Property="HorizontalContentAlignment" Value="Center" />
			<Setter Property="Padding" Value="24,4" />
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="HyperlinkButton">
						<Grid x:Name="ButtonGrid" Cursor="{TemplateBinding Cursor}">
							<VisualStateManager.VisualStateGroups>
								<VisualStateGroup x:Name="CommonStates">
									<VisualState x:Name="Normal" />
									<VisualState x:Name="MouseOver">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="InteractiveElementBorder" Storyboard.TargetProperty="(UIElement.Visibility)">
												<DiscreteObjectKeyFrame KeyTime="00:00:00">
													<DiscreteObjectKeyFrame.Value>
														<Visibility>Visible</Visibility>
													</DiscreteObjectKeyFrame.Value>
												</DiscreteObjectKeyFrame>
											</ObjectAnimationUsingKeyFrames>
											<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="InteractiveElementBorder" Storyboard.TargetProperty="(UIElement.Opacity)">
												<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.95" />
											</DoubleAnimationUsingKeyFrames>
											<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="InteractiveBorder" Storyboard.TargetProperty="(UIElement.Opacity)">
												<EasingDoubleKeyFrame KeyTime="00:00:00" Value="1" />
											</DoubleAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="Pressed">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="InteractiveElementBorder" Storyboard.TargetProperty="(UIElement.Visibility)">
												<DiscreteObjectKeyFrame KeyTime="00:00:00">
													<DiscreteObjectKeyFrame.Value>
														<Visibility>Visible</Visibility>
													</DiscreteObjectKeyFrame.Value>
												</DiscreteObjectKeyFrame>
											</ObjectAnimationUsingKeyFrames>
											<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="InteractiveElementBorder" Storyboard.TargetProperty="(UIElement.Opacity)">
												<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.8" />
											</DoubleAnimationUsingKeyFrames>
											<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="InteractiveBorder" Storyboard.TargetProperty="(UIElement.Opacity)">
												<EasingDoubleKeyFrame KeyTime="00:00:00" Value="1" />
											</DoubleAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="Disabled">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="DisabledOverlay" Storyboard.TargetProperty="Visibility">
												<DiscreteObjectKeyFrame KeyTime="0">
													<DiscreteObjectKeyFrame.Value>
														<Visibility>Visible</Visibility>
													</DiscreteObjectKeyFrame.Value>
												</DiscreteObjectKeyFrame>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(FrameworkElement.VerticalAlignment)">
												<DiscreteObjectKeyFrame KeyTime="00:00:00">
													<DiscreteObjectKeyFrame.Value>
														<VerticalAlignment>Center</VerticalAlignment>
													</DiscreteObjectKeyFrame.Value>
												</DiscreteObjectKeyFrame>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="DisabledOverlay" Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)">
												<DiscreteObjectKeyFrame KeyTime="00:00:00">
													<DiscreteObjectKeyFrame.Value>
														<HorizontalAlignment>Center</HorizontalAlignment>
													</DiscreteObjectKeyFrame.Value>
												</DiscreteObjectKeyFrame>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="DisabledOverlay" Storyboard.TargetProperty="(FrameworkElement.VerticalAlignment)">
												<DiscreteObjectKeyFrame KeyTime="00:00:00">
													<DiscreteObjectKeyFrame.Value>
														<VerticalAlignment>Center</VerticalAlignment>
													</DiscreteObjectKeyFrame.Value>
												</DiscreteObjectKeyFrame>
											</ObjectAnimationUsingKeyFrames>
											<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="DisabledOverlay" Storyboard.TargetProperty="(UIElement.Opacity)">
												<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.5" />
											</DoubleAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
								<VisualStateGroup x:Name="LinkStates">
									<VisualState x:Name="ActiveLink">
										<Storyboard>
											<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ActiveBorder" Storyboard.TargetProperty="(UIElement.Opacity)">
												<EasingDoubleKeyFrame KeyTime="00:00:00" Value="1" />
											</DoubleAnimationUsingKeyFrames>
											<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="(UIElement.Opacity)">
												<EasingDoubleKeyFrame KeyTime="00:00:00" Value="1" />
											</DoubleAnimationUsingKeyFrames>
											<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Indicator" d:IsOptimized="True" />
											<ColorAnimation To="{StaticResource NavigationActiveForegroundColor}" BeginTime="00:00:00" Duration="00:00:00" Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(UIElement.Foreground).(SolidColorBrush.Color)" />
										</Storyboard>
									</VisualState>
									<VisualState x:Name="InactiveLink" />
								</VisualStateGroup>
								<VisualStateGroup x:Name="FocusStates">
									<VisualState x:Name="Focused">
										<Storyboard>
											<DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity">
												<SplineDoubleKeyFrame KeyTime="0" Value="0.35" />
											</DoubleAnimationUsingKeyFrames>
											<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="(Rectangle.RadiusX)">
												<EasingDoubleKeyFrame KeyTime="00:00:00" Value="1" />
											</DoubleAnimationUsingKeyFrames>
											<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="(Rectangle.RadiusY)">
												<EasingDoubleKeyFrame KeyTime="00:00:00" Value="1" />
											</DoubleAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="Unfocused" />
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
							<Path x:Name="Indicator" Width="15" Height="9" Stretch="Fill" Data="M0,0 L1,0 L0.5,1 Z" Fill="{StaticResource ColorAccentSolidBrush}" VerticalAlignment="Bottom" Margin="0,0,0,0" Effect="{StaticResource ControlShadowEffect}" Opacity="0" />
							<Grid Margin="0,0,0,9">
								<Rectangle x:Name="FocusVisualElement" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="2" Opacity="0" Margin="-1" RadiusX="1" RadiusY="1" />
								<Border x:Name="InteractiveBorder" MinWidth="{TemplateBinding MinWidth}" MinHeight="{TemplateBinding MinHeight}" Background="{StaticResource StaticControlBackgroundOver}" Opacity="0" />
								<Border x:Name="InteractiveElementBorder" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Visibility="Collapsed" />
								<Border x:Name="ActiveBorder" MinWidth="{TemplateBinding MinWidth}" MinHeight="{TemplateBinding MinHeight}" Background="{StaticResource InputSelectionBrush}" Opacity="0" />
								<TextBlock x:Name="DisabledOverlay" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" Text="{TemplateBinding Content}" Foreground="Purple" Visibility="Collapsed" />
								<Border x:Name="ContentBorder" MinWidth="{TemplateBinding MinWidth}" MinHeight="{TemplateBinding MinHeight}" Opacity="1" BorderBrush="Transparent" BorderThickness="0.5,0" />
								<ContentControl x:Name="ContentPresenter" FontWeight="{TemplateBinding FontWeight}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Opacity="1" />
							</Grid>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		<SolidColorBrush x:Key="NavigationForegroundColorBrush" Color="{StaticResource NavigationActiveForegroundColor}" />
		<FontFamily x:Key="HeadingFontFamily">Trebuchet MS</FontFamily>
		<System:Double x:Key="Heading3FontSize">21</System:Double>
		<Style x:Key="ApplicationNameStyle" TargetType="TextBlock">
			<Setter Property="Foreground" Value="{StaticResource NavigationForegroundColorBrush}" />
			<Setter Property="FontFamily" Value="{StaticResource HeadingFontFamily}" />
			<Setter Property="FontSize" Value="{StaticResource Heading3FontSize}" />
			<Setter Property="FontWeight" Value="Bold" />
			<Setter Property="TextOptions.TextHintingMode" Value="Animated" />
			<Setter Property="Opacity" Value="0.5" />
			<Setter Property="Margin" Value="30,17,0,0" />
			<Setter Property="VerticalAlignment" Value="Center" />
			<Setter Property="HorizontalAlignment" Value="Left" />
		</Style>

	</UserControl.Resources>

	<UserControl.DataContext>
		<local:MainViewModel/>
	</UserControl.DataContext>

	<toolkit:BubbleCremeTheme>

		<Grid x:Name="LayoutRoot">
			<Grid.RowDefinitions>
				<RowDefinition/>
			</Grid.RowDefinitions>
			<i:Interaction.Triggers>
				<i:EventTrigger>
					<i:InvokeCommandAction Command="{Binding GetFilesCommand}"/>
				</i:EventTrigger>
			</i:Interaction.Triggers>
			<Border x:Name="LinksBorder" Style="{StaticResource NavLinksBorderStyle}" Height="Auto" VerticalAlignment="Top" >
				<HyperlinkButton Style="{StaticResource LinkStyle}" Content="http://Silverlight.ADefWebserver.com" NavigateUri="http://silverlight.adefwebserver.com" HorizontalAlignment="Left" ToolTipService.ToolTip="Click here to navigate to ADefWebserver.com" Height="Auto" VerticalAlignment="Top" />
			</Border>
			<TextBlock x:Name="ApplicationNameTextBlock" Style="{StaticResource ApplicationNameStyle}" Text="Upload Control" VerticalAlignment="Top" Foreground="#FF666565" Height="26" HorizontalAlignment="Stretch" Margin="322,4,178,0" d:LayoutOverrides="Width" />
			<StackPanel HorizontalAlignment="Left" Orientation="Vertical" Width="212" d:LayoutOverrides="Height" Margin="8,45,0,188">
				<StackPanel Orientation="Vertical" VerticalAlignment="Bottom">
					<TextBlock HorizontalAlignment="Left" Height="16" TextWrapping="Wrap" Text="File Upload:" Width="78" Foreground="#FF747272"/>
					<local:ADefUploadControl DataContext="{Binding ADefUploadControlViewModel_VM, Mode=TwoWay}"/>
				</StackPanel>
				<TextBlock HorizontalAlignment="Left" Height="18" Margin="1,15,0,0" TextWrapping="Wrap" Text="Files:" Width="104"/>
				<ListBox ItemTemplate="{StaticResource SilverlightFileTemplate}" ItemsSource="{Binding SilverlightFiles}" Margin="1,5,3,0" Height="150" VerticalAlignment="Top"/>
				<TextBlock Height="17" Margin="0,0,-40,0" TextWrapping="Wrap" Text="(uploaded files are deleted every 5 minutes)" FontStyle="Italic" FontSize="8" Foreground="#FF979090"/>
			</StackPanel>
			<Button Content="Upload" HorizontalAlignment="Left" Height="20" Margin="163,101,0,0" VerticalAlignment="Top" Width="55" Command="{Binding UploadFileCommand}"/>
		</Grid>
	</toolkit:BubbleCremeTheme>
</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