Working with File Dialog box in Silverlight 2.0.

In this lab we will try to see OpenFileDialog class for Silverlight 2 application. OpenFileDialog class will all you to choose the files from Client. It can be used to upload the contents from client to server or you can do many things.

OpenFileDialog class gives you a very restricted access to client machine. So, it is secured.

So let’s start by

1) Creating a Silverlight 2.0 project by name “SLFileOpenDialogApplication” by using Visual Studio 2008.

2) Once you finished doing the same, open the same project by Expression Blend 2.0 and start designing the screen as shown bellow-

3) Write the Code as shown bellow-

<UserControl x:Class="SLFileOpenDialogApplication.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="640" Height="520">
    <Canvas x:Name="LayoutRoot" Background="Black">
        <Border Height="395" Width="590" Canvas.Left="25" Canvas.Top="35" 
Background="#FF000000" BorderBrush="#FFD1D448" BorderThickness="5,5,5,5" 
CornerRadius="10,10,10,10">
            <MediaElement Height="385" Width="580" Canvas.Left="25" Canvas.Top="35" 
Stretch="Fill" x:Name="MediaPlayer" Source="Bear.wmv" AutoPlay="False" />
        </Border>
        <Button Height="30" Width="50" Canvas.Left="119" Canvas.Top="434" 
Content="Play" x:Name="btnPlay" Click="btnPlay_Click"/>
        <Button Height="30" Width="50" Content="Pause" Canvas.Left="173" 
Canvas.Top="434" x:Name="btnPause" Click="btnPause_Click"/>
        <Button Height="30" Width="50" Content="Stop" Canvas.Left="477" 
Canvas.Top="434" x:Name="btnStop" Click="btnStop_Click"/>
        <Slider Height="29" Width="179.25" Canvas.Left="233.75" Canvas.Top="434" 
x:Name="ControlVolume" Maximum="100" ValueChanged="ControlVolume_ValueChanged"/>
        <TextBlock Height="18" Width="89.5" Canvas.Left="273.75" Canvas.Top="460" 
Text="Control Volume" TextWrapping="Wrap" Foreground="#FFFFFFFF"/>
        <Button Height="30" Width="50" Content="Mute" x:Name="btnMute" 
Canvas.Left="422" Canvas.Top="434" Click="btnMute_Click"/>
        <Button Height="30" Width="300" Content="Choose Your Video to Play !!" 
x:Name="btnChooseFile" Canvas.Left="173" Canvas.Top="480" FontWeight="Bold" 
FontFamily="Portable User Interface" FontStyle="Normal"/>
    </Canvas>
</UserControl>

4) Now, let’s start writing the code for Choosing “.WMV” file on the click event of the button “Choose Your Video to Play !!”. Before that let import the namespace System.IO;

FileInfo fileInfo;
private void btnChooseFile_Click(object sender, RoutedEventArgs e)
{
   OpenFileDialog openDialog = new OpenFileDialog()
   {
      Filter = "Media Wmv|*.wmv",
      Multiselect = false,
   };

   if (openDialog.ShowDialog() == true)
   {
      fileInfo = openDialog.File;
      MediaPlayer.SetSource(fileInfo.OpenRead());
   }
}

The above code will allow us to choose .WMV file and set it as a source for our media element.

5) Once you finished with this, let’s write the code for our “Play”, “Pause”, “Mute”, “Stop” buttons. and as well as write the code to control the volume as shown bellow-

private void btnPlay_Click(object sender, RoutedEventArgs e)
{
    MediaPlayer.Play();
}

private void btnPause_Click(object sender, RoutedEventArgs e)
{
    MediaPlayer.Pause();
}

private void btnStop_Click(object sender, RoutedEventArgs e)
{
    MediaPlayer.Stop();
}

private void ControlVolume_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    MediaPlayer.Volume = ControlVolume.Value;
}
bool flag = false;
private void btnMute_Click(object sender, RoutedEventArgs e)
{
    if (flag == false)
    {
        MediaPlayer.IsMuted = true;
        flag = true;
    }
    else
    {
        MediaPlayer.IsMuted = false;
        flag = false;
    }
}

6) That’s All !! Now Press F5 and see your own favourite videos on Silverlight applications !!

Now as you have completed writing the fifteenth Silverlight Lab, let’s have a closer look on sixteenth lab “Working with HttpAsyncUpload and HttpAsyncDownload.”