ZoomIn ZoomOut using Silver Light

Hi There,

There is a very good option of doing animation in the silver light. We just need to explore them while doing some task i get an article where i have seen such feature so here in this post i m describing you that how can we create the ZoomIn & ZoomOut feature using the silver light. There is a object called "Double Animation" i have used the same for creating this feature. A story board is used to handle the object and inside the double animation we have simply set the height and width and the duration for sliding effect.

please use the following XAML code for the same. you can simply copy and paste the below code in the XAML file of the application.

UserControl x:Class="ZooInOut.MainPage"
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"
mc:Ignorable="d"
d:DesignHeight="507" d:DesignWidth="564">
UserControl.Resources>
x:Name="storyboard" Storyboard.TargetName="image1">
DoubleAnimation Storyboard.TargetProperty="Width" To="600" Duration="0:0:2">
>
DoubleAnimation Storyboard.TargetProperty="Height" To="600" Duration="0:0:5">>
>
>

Grid x:Name="LayoutRoot" Width="610" Height="610">
Image Height="40" HorizontalAlignment="Left" Name="image1" VerticalAlignment="Top" Width="50" Margin="0,42,0,0" />
Button Content="Zoom In" Height="35" HorizontalAlignment="Left" Name="btnZoomIn" VerticalAlignment="Top" Width="94" Margin="0,472,0,0" Click="btnZoomIn_Click" />
Button Content="Zoom Out" Height="35" HorizontalAlignment="Left" Name="btnZoomOut" VerticalAlignment="Top" Width="94" Margin="114,472,0,0" Click="btnZoomOut_Click" />
Button Content=" Load Image" HorizontalAlignment="Right" Width="94" Name="btnLoad" Margin="0,472,288,103" Click="btnLoad_Click" />
>

>

(Due to browser problem the starting "<" symbol is clipped, please add them before building the applciation.)

Here we have a taken 3 buttons for ZoomIn, ZoomOut and Load. In the code we simply set the story board as start and stop. Please check the following code for the rest.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.IO;
using System.Windows.Media.Imaging;

namespace ZooInOut
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}


private void btnLoad_Click(object sender, RoutedEventArgs e)
{
OpenFileDialog fd1 = new OpenFileDialog();
// fd1.Filter = "Image File (*.JPEG)|*.JPEG"; // You can apply filter for various image format.
if (fd1.ShowDialog() == true)
{
BitmapImage imageSource = new BitmapImage();
imageSource.SetSource(fd1.File.OpenRead());
image1.Source = imageSource;
}
}

private void btnZoomIn_Click(object sender, RoutedEventArgs e)
{

storyboard.Begin();
}

private void btnZoomOut_Click(object sender, RoutedEventArgs e)
{
storyboard.Stop();
}
}
}

Isn't it Easy?? Yeah this is simple we can explore more option using the animation. In this post i have simply describe the zoom in feature will come up with more option soon. Please fell free to post the comment, i am waiting for the comments.

Thanks
Anil Kumar Pandey
Micorsoft MVP (C#)
Navi Mumbai,
Maharashtra

Multiple selection in Silverlight ListBox

Hi All,

We can easily make any list box as enable to select multiple items in silver light.We just need to set the "SelectionMode" property of that list box below is the example for doing so.

ListBox Margin="5" x:Name="lbItems"
ItemsSource="{Binding Item, ElementName=MainPageView}"
SelectionMode="Multiple">
ListBox.ItemTemplate>
DataTemplate>
StackPanel Orientation="Horizontal" Margin="4">
TextBlock FontWeight="Bold" FontSize="12"
Foreground="#ff005588" Text="{Binding Text}">
/TextBlock>
/StackPanel>
/DataTemplate>
/ListBox.ItemTemplate>
/ListBox>


There are 3 options for the SelectionMode property that are:

Single -> Used to select only one item.

Multiple -> Used to select multiple items using Ctrl or Shift key.

Extended -> Used to select multiple items but here using Shift key you can select items range by just pressing one item, holding Shift and pressing another one.

Hope this is going to help you out... Enjoy!!!!!!

Thanks
Anil Kumar Pandey
Micorsoft MVP (C#)
Navi Mumbai, 
Maharashtra

Creating a Media Player in the Silverlight

Hi All,
This is very interesting, the silver light is giving us so much power to create user friendly application. In this reason i have found that, we can create a media player using the silverlight and this is very easy. We do not need to bother about the code there is not that much code is involved, there is just a single component which we can use to create the Media player. That control is " MEDIA ELEMENT. "

Please check the following code to create the media Player. I have taken the Media element inside the Canvas and there is only 3 Buttons for PLAY, PAUSE , LOAD and STOP. Just pass the file name in the Source Property of that media element..

x:Class="VideoPlayer.MainPage"
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"
mc:Ignorable="d"
d:DesignHeight="640" d:DesignWidth="550">

x:Name="LayoutRoot" Background="White">
>
x:Name="medPlayer" Width="640" Height="480" AutoPlay="True" />
x:Name="btnPlay" Background="Green" Width="100" Height="45" Canvas.Left="8" Canvas.Top="497" Content="Play" Click="bPlay_Click" />
x:Name="btnPause" Background="Yellow" Width="100" Height="45" Canvas.Left="112" Canvas.Top="497" Content="Pause" Click="bPause_Click" />
x:Name="btnStop" Background="Red" Width="100" Height="45" Canvas.Left="216" Canvas.Top="497" Content="Stop" Click="bStop_Click" />
x:Name="btnOpen" Background="Green" Width="100" Height="45" Canvas.Left="320" Canvas.Top="497" Content="Load" Click="bOpen_Click" />
>
>
>

C# code for media Player

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

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

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

private void btnOpen_Click(object sender, RoutedEventArgs e)
{ string myUrl = "http://localhost:4065/VideoPlayer.Web/Files/Grass_loop.wmv";
Uri myUri = new Uri(myUrl);
medPlayer.Source = myUri;
}

Enjoy!!!!!!!!!!

Thanks
Anil Kumar Pandey
Micorsoft MVP (C#)
Navi Mumbai, Maharshtra