Thursday, January 28, 2010

Photo Gallery using Silverlight 4.0

Hi All,

 

After long time I am writing this Blog!! Was busy in couple of assignments. Anyways, Today I tried something similar which is a Photo Gallery. But for sure I am not going to Stop adding a functionalities in my application. My plan is to do something different than the existing Photo Galleries by adding Silverlight 4.0 Features. So,

For this time, I am showing you the existing application which I saw on one of the Blog - http://designwithsilverlight.com/2009/03/31/silverlight-3-photo-gallery-wall-application/

Take a look -

PhotoGallery1

 

This is just a .JPEG Image!! Below is a source code for the application -

1) This application has Auto Preview of all the Images with some nice animation.

2) You can click the Image thumb nail and Preview the Images.

Note – I have used my own images. You will need to use your own images.

MainPage.XAML

<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"
x:Class="PhotoGallaryApplication.MainPage"
Width="1024" Height="1024" Background="Black" mc:Ignorable="d">
<UserControl.Resources>
<Storyboard x:Name="MainImageAnimation2" Completed="MainImageAnimation2_Completed">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MainImage">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.99"/>
<EasingDoubleKeyFrame KeyTime="0:0:10" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="FooterMsg">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.99"/>
<EasingDoubleKeyFrame KeyTime="0:0:10" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="MainImageAnimation1" Completed="MainImageAnimation1_Completed">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MainImage">
<EasingDoubleKeyFrame KeyTime="0:0:8" Value="0.99"/>
<EasingDoubleKeyFrame KeyTime="0:0:10" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="FooterMsg">
<EasingDoubleKeyFrame KeyTime="0:0:8" Value="0.99"/>
<EasingDoubleKeyFrame KeyTime="0:0:10" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="ThumbNailBorderAnimation">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.5">
<DiscreteObjectKeyFrame.Value>
<Thickness>2</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="ThumbNailBorderAnimationReverse">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.5">
<DiscreteObjectKeyFrame.Value>
<Thickness>0</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>

<Canvas x:Name="LayoutRoot" Background="Black" Width="1024" Height="1024">
<Border x:Name="ThumbNailBorder" Height="500" Canvas.Left="77" Canvas.Top="61" Width="500" Background="White">
<Border.Projection>
<PlaneProjection RotationY="-25"/>
</Border.Projection>
<StackPanel Orientation="Vertical" Margin="0,14,-20,0" Width="500" Height="500">
<StackPanel Orientation="Horizontal" Margin="0,-11,0,0" Width="500" Height="120">
<Border x:Name="B1" Width="120" Height="110" BorderBrush="Black" MouseEnter="B_MouseEnter" MouseLeave="B_MouseLeave">
<Image x:Name="Img1" Height="100" Canvas.Left="87" Canvas.Top="117" Width="120" Source="firekid07.jpg" Stretch="Fill" Margin="0" MouseLeftButtonDown="Img_MouseLeftButtonDown">
<Image.Projection>
<PlaneProjection RotationY="-30"/>
</Image.Projection>
</Image>
</Border>
<Border x:Name="B2" Width="120" Height="110" BorderBrush="Black" MouseEnter="B_MouseEnter" MouseLeave="B_MouseLeave">
<Image x:Name="Img2" Height="100" Canvas.Left="198" Canvas.Top="117" Width="120" Source="Desert.jpg" Stretch="Fill" MouseLeftButtonDown="Img_MouseLeftButtonDown">
<Image.Projection>
<PlaneProjection RotationY="-30"/>
</Image.Projection>
</Image>
</Border>
<Border x:Name="B3" Width="120" Height="110" BorderBrush="Black" MouseEnter="B_MouseEnter" MouseLeave="B_MouseLeave">
<Image x:Name="Img3" Height="100" Canvas.Left="311" Canvas.Top="117" Width="120" Source="Jellyfish.jpg" Stretch="Fill" MouseLeftButtonDown="Img_MouseLeftButtonDown">
<Image.Projection>
<PlaneProjection RotationY="-30"/>
</Image.Projection>
</Image>
</Border>
<Border x:Name="B4" Width="120" Height="110" BorderBrush="Black" MouseEnter="B_MouseEnter" MouseLeave="B_MouseLeave">
<Image x:Name="Img4" Height="100" Canvas.Left="422" Canvas.Top="117" Width="120" Source="Hydrangeas.jpg" Stretch="Fill" MouseLeftButtonDown="Img_MouseLeftButtonDown">
<Image.Projection>
<PlaneProjection RotationY="-30"/>
</Image.Projection>
</Image>
</Border>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0" Width="500" Height="120">
<Border x:Name="B5" Width="120" Height="110" BorderBrush="Black" MouseEnter="B_MouseEnter" MouseLeave="B_MouseLeave">
<Image x:Name="Img5" Height="100" Canvas.Left="87" Canvas.Top="218" Width="120" Source="BackgroundForMSSlides.jpg" Stretch="Fill" MouseLeftButtonDown="Img_MouseLeftButtonDown">
<Image.Projection>
<PlaneProjection RotationY="-30"/>
</Image.Projection>
</Image>
</Border>
<Border x:Name="B6" Width="120" Height="110" BorderBrush="Black" MouseEnter="B_MouseEnter" MouseLeave="B_MouseLeave">
<Image x:Name="Img6" Height="100" Canvas.Left="198" Canvas.Top="218" Width="120" Source="180px-Navratridurgapuja.jpg" Stretch="Fill" MouseLeftButtonDown="Img_MouseLeftButtonDown">
<Image.Projection>
<PlaneProjection RotationY="-30"/>
</Image.Projection>
</Image>
</Border>
<Border x:Name="B7" Width="120" Height="110" BorderBrush="Black" MouseEnter="B_MouseEnter" MouseLeave="B_MouseLeave">
<Image x:Name="Img7" Height="100" Canvas.Left="311" Canvas.Top="218" Width="120" Source="Chrysanthemum.jpg" Stretch="Fill" MouseLeftButtonDown="Img_MouseLeftButtonDown">
<Image.Projection>
<PlaneProjection RotationY="-30"/>
</Image.Projection>
</Image>
</Border>
<Border x:Name="B8" Width="120" Height="110" BorderBrush="Black" MouseEnter="B_MouseEnter" MouseLeave="B_MouseLeave">
<Image x:Name="Img8" Height="100" Canvas.Left="422" Canvas.Top="218" Width="120" Source="butterfly-coloring-pages00017im.jpg" Stretch="Fill" MouseLeftButtonDown="Img_MouseLeftButtonDown">
<Image.Projection>
<PlaneProjection RotationY="-30"/>
</Image.Projection>
</Image>
</Border>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0" Width="500" Height="120">
<Border x:Name="B9" Width="120" Height="110" BorderBrush="Black" MouseEnter="B_MouseEnter" MouseLeave="B_MouseLeave">
<Image x:Name="Img9" Height="100" Canvas.Left="87" Canvas.Top="320" Width="120" Source="Penguins.jpg" Stretch="Fill" MouseLeftButtonDown="Img_MouseLeftButtonDown">
<Image.Projection>
<PlaneProjection RotationY="-30"/>
</Image.Projection>
</Image>
</Border>
<Border x:Name="B10" Width="120" Height="110" BorderBrush="Black" MouseEnter="B_MouseEnter" MouseLeave="B_MouseLeave">
<Image x:Name="Img10" Height="100" Canvas.Left="198" Canvas.Top="320" Width="120" Source="navratri.jpg" Stretch="Fill" MouseLeftButtonDown="Img_MouseLeftButtonDown">
<Image.Projection>
<PlaneProjection RotationY="-30"/>
</Image.Projection>
</Image>
</Border>
<Border x:Name="B11" Width="120" Height="110" BorderBrush="Black" MouseEnter="B_MouseEnter" MouseLeave="B_MouseLeave">
<Image x:Name="Img11" Height="100" Canvas.Left="311" Canvas.Top="320" Width="120" Source="woo-woo.jpg" Stretch="Fill" MouseLeftButtonDown="Img_MouseLeftButtonDown">
<Image.Projection>
<PlaneProjection RotationY="-30"/>
</Image.Projection>
</Image>
</Border>
<Border x:Name="B12" Width="120" Height="110" BorderBrush="Black" MouseEnter="B_MouseEnter" MouseLeave="B_MouseLeave">
<Image x:Name="Img12" Height="100" Canvas.Left="422" Canvas.Top="320" Width="120" Source="Tulips.jpg" Stretch="Fill" MouseLeftButtonDown="Img_MouseLeftButtonDown">
<Image.Projection>
<PlaneProjection RotationY="-30"/>
</Image.Projection>
</Image>
</Border>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0" Width="500" Height="120">
<Border x:Name="B13" Width="120" Height="110" BorderBrush="Black" MouseEnter="B_MouseEnter" MouseLeave="B_MouseLeave">
<Image x:Name="Img13" Height="100" Canvas.Left="87" Canvas.Top="421" Width="120" Source="Koala.jpg" Stretch="Fill" MouseLeftButtonDown="Img_MouseLeftButtonDown">
<Image.Projection>
<PlaneProjection RotationY="-30"/>
</Image.Projection>
</Image>
</Border>
<Border x:Name="B14" Width="120" Height="110" BorderBrush="Black" MouseEnter="B_MouseEnter" MouseLeave="B_MouseLeave">
<Image x:Name="Img14" Height="100" Canvas.Left="198" Canvas.Top="421" Width="120" Source="KidsFaces.jpg" Stretch="Fill" MouseLeftButtonDown="Img_MouseLeftButtonDown">
<Image.Projection>
<PlaneProjection RotationY="-30"/>
</Image.Projection>
</Image>
</Border>
<Border x:Name="B15" Width="120" Height="110" BorderBrush="Black" MouseEnter="B_MouseEnter" MouseLeave="B_MouseLeave">
<Image x:Name="Img15" Height="100" Canvas.Left="311" Canvas.Top="421" Width="120" Source="navaratri-vijayadashami-2009.jpg" Stretch="Fill" MouseLeftButtonDown="Img_MouseLeftButtonDown">
<Image.Projection>
<PlaneProjection RotationY="-30"/>
</Image.Projection>
</Image>
</Border>
<Border x:Name="B16" Width="120" Height="110" BorderBrush="Black" MouseEnter="B_MouseEnter" MouseLeave="B_MouseLeave">
<Image x:Name="Img16" Height="100" Canvas.Left="422" Canvas.Top="421" Width="120" Source="Lighthouse.jpg" Stretch="Fill" MouseLeftButtonDown="Img_MouseLeftButtonDown">
<Image.Projection>
<PlaneProjection RotationY="-30"/>
</Image.Projection>
</Image>
</Border>
</StackPanel>
</StackPanel>
</Border>
<Border x:Name="MainBorder" Height="500" Canvas.Left="487" Canvas.Top="61" Width="500">
<Border.Background>
<RadialGradientBrush>
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FF1E1D1D" Offset="1"/>
<GradientStop Color="#FFF9F9F9" Offset="0.49"/>
</RadialGradientBrush>
</Border.Background>
<Border.Projection>
<PlaneProjection RotationY="25"/>
</Border.Projection>
<StackPanel Orientation="Vertical" Margin="0" Width="500" Height="500">

<Image x:Name="MainImage" Height="450" Canvas.Left="198" Canvas.Top="421" Width="500" Source="firekid07.jpg" Stretch="Fill"/>
<Border x:Name="FooterMsg" Height="50" Canvas.Left="708" Width="500" Background="#FF5A5353" >
<TextBlock x:Name="txtFooter" Foreground="#FFD69A9A" FontSize="21.333" Height="30" Margin="28,9,22,11" TextWrapping="Wrap" Text="sddsfdsf" Width="450"/>
</Border>
</StackPanel>
</Border>
<Border x:Name="ThumbNailBorder_Copy" Height="500" Canvas.Left="29" Canvas.Top="568" Width="500" Background="White" RenderTransformOrigin="0.5,0.5" Opacity="0.05">
<Border.Projection>
<PlaneProjection RotationX="180" RotationY="25"/>
</Border.Projection>
<StackPanel Orientation="Vertical" Margin="0,14,-20,0" Width="500" Height="500">
<StackPanel Orientation="Horizontal" Margin="0,-11,0,0" Width="500" Height="120">
<Image x:Name="Img17" Height="110" Canvas.Left="87" Canvas.Top="117" Width="120" Source="firekid07.jpg" Stretch="Fill">
<Image.Projection>
<PlaneProjection RotationY="-30"/>
</Image.Projection>
</Image>
<Image x:Name="Img18" Height="110" Canvas.Left="198" Canvas.Top="117" Width="120" Source="Desert.jpg" Stretch="Fill">
<Image.Projection>
<PlaneProjection RotationY="-30"/>
</Image.Projection>
</Image>
<Image x:Name="Img19" Height="110" Canvas.Left="311" Canvas.Top="117" Width="120" Source="Jellyfish.jpg" Stretch="Fill">
<Image.Projection>
<PlaneProjection RotationY="-30"/>
</Image.Projection>
</Image>
<Image x:Name="Img20" Height="110" Canvas.Left="422" Canvas.Top="117" Width="120" Source="Hydrangeas.jpg" Stretch="Fill">
<Image.Projection>
<PlaneProjection RotationY="-30"/>
</Image.Projection>
</Image>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0" Width="500" Height="120">
<Image x:Name="Img21" Height="110" Canvas.Left="87" Canvas.Top="218" Width="120" Source="BackgroundForMSSlides.jpg" Stretch="Fill">
<Image.Projection>
<PlaneProjection RotationY="-30"/>
</Image.Projection>
</Image>
<Image x:Name="Img22" Height="110" Canvas.Left="198" Canvas.Top="218" Width="120" Source="180px-Navratridurgapuja.jpg" Stretch="Fill">
<Image.Projection>
<PlaneProjection RotationY="-30"/>
</Image.Projection>
</Image>
<Image x:Name="Img23" Height="110" Canvas.Left="311" Canvas.Top="218" Width="120" Source="Chrysanthemum.jpg" Stretch="Fill">
<Image.Projection>
<PlaneProjection RotationY="-30"/>
</Image.Projection>
</Image>
<Image x:Name="Img24" Height="110" Canvas.Left="422" Canvas.Top="218" Width="120" Source="butterfly-coloring-pages00017im.jpg" Stretch="Fill">
<Image.Projection>
<PlaneProjection RotationY="-30"/>
</Image.Projection>
</Image>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0" Width="500" Height="120">
<Image x:Name="Img25" Height="110" Canvas.Left="87" Canvas.Top="320" Width="120" Source="Penguins.jpg" Stretch="Fill">
<Image.Projection>
<PlaneProjection RotationY="-30"/>
</Image.Projection>
</Image>
<Image x:Name="Img26" Height="110" Canvas.Left="198" Canvas.Top="320" Width="120" Source="navratri.jpg" Stretch="Fill">
<Image.Projection>
<PlaneProjection RotationY="-30"/>
</Image.Projection>
</Image>
<Image x:Name="Img27" Height="110" Canvas.Left="311" Canvas.Top="320" Width="120" Source="woo-woo.jpg" Stretch="Fill">
<Image.Projection>
<PlaneProjection RotationY="-30"/>
</Image.Projection>
</Image>
<Image x:Name="Img28" Height="110" Canvas.Left="422" Canvas.Top="320" Width="120" Source="Tulips.jpg" Stretch="Fill">
<Image.Projection>
<PlaneProjection RotationY="-30"/>
</Image.Projection>
</Image>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0" Width="500" Height="120">
<Image x:Name="Img29" Height="110" Canvas.Left="87" Canvas.Top="421" Width="120" Source="Koala.jpg" Stretch="Fill">
<Image.Projection>
<PlaneProjection RotationY="-30"/>
</Image.Projection>
</Image>
<Image x:Name="Img30" Height="110" Canvas.Left="198" Canvas.Top="421" Width="120" Source="KidsFaces.jpg" Stretch="Fill">
<Image.Projection>
<PlaneProjection RotationY="-30"/>
</Image.Projection>
</Image>
<Image x:Name="Img31" Height="110" Canvas.Left="311" Canvas.Top="421" Width="120" Source="navaratri-vijayadashami-2009.jpg" Stretch="Fill">
<Image.Projection>
<PlaneProjection RotationY="-30"/>
</Image.Projection>
</Image>
<Image x:Name="Img32" Height="110" Canvas.Left="422" Canvas.Top="421" Width="120" Source="Lighthouse.jpg" Stretch="Fill">
<Image.Projection>
<PlaneProjection RotationY="-30"/>
</Image.Projection>
</Image>
</StackPanel>
</StackPanel>
</Border>
<Border x:Name="MainBorderReflection" Height="500" Canvas.Left="535" Canvas.Top="568" Width="500" RenderTransformOrigin="0.5,0.5" Opacity="0.05">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="180"/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
<Border.Background>
<RadialGradientBrush>
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FF1E1D1D" Offset="1"/>
<GradientStop Color="#FFF9F9F9" Offset="0.49"/>
</RadialGradientBrush>
</Border.Background>
<Border.Projection>
<PlaneProjection RotationY="25"/>
</Border.Projection>
<StackPanel Orientation="Vertical" Margin="0" Width="500" Height="500">

<Image x:Name="MainImage1" Height="450" Canvas.Left="198" Canvas.Top="421" Width="500" Source="firekid07.jpg" Stretch="Fill"/>
<Border x:Name="FooterMsg1" Height="50" Canvas.Left="708" Background="#FF5A5353" Width="500" >
<TextBlock x:Name="txtFooterReflection" Foreground="#FFD69A9A" FontSize="21.333" Height="30" TextWrapping="Wrap" Text="sddsfdsf" Width="450" Margin="39,10,11,10">
<TextBlock.Projection>
<PlaneProjection RotationY="180"/>
</TextBlock.Projection>
</TextBlock>
</Border>
</StackPanel>
</Border>
<TextBlock Height="36" Canvas.Left="327" TextWrapping="Wrap" Text="O" Canvas.Top="21" Width="35" FontFamily="Fonts/Fonts.zip#Chiller" Foreground="#FFF6FF00" FontSize="48" FontWeight="Bold">
<TextBlock.Projection>
<PlaneProjection RotationY="-25"/>
</TextBlock.Projection>
</TextBlock>
<TextBlock Foreground="#FFF6FF00" FontWeight="Bold" FontSize="48" FontFamily="Fonts/Fonts.zip#Chiller" Height="36" Canvas.Left="366" TextWrapping="Wrap" Text="T" Canvas.Top="10" Width="35">
<TextBlock.Projection>
<PlaneProjection RotationY="-25"/>
</TextBlock.Projection>
</TextBlock>
<TextBlock Foreground="#FFF6FF00" FontWeight="Bold" FontSize="48" FontFamily="Fonts/Fonts.zip#Chiller" Height="36" Canvas.Left="405" TextWrapping="Wrap" Text="O" Canvas.Top="25" Width="35">
<TextBlock.Projection>
<PlaneProjection RotationY="-25"/>
</TextBlock.Projection>
</TextBlock>
<TextBlock Foreground="#FFF6FF00" FontWeight="Bold" FontSize="48" FontFamily="Fonts/Fonts.zip#Chiller" Height="36" Canvas.Left="288" TextWrapping="Wrap" Text="H" Canvas.Top="10" Width="35">
<TextBlock.Projection>
<PlaneProjection RotationY="-25"/>
</TextBlock.Projection>
</TextBlock>
<TextBlock Foreground="#FFF6FF00" FontWeight="Bold" FontSize="48" FontFamily="Fonts/Fonts.zip#Chiller" Height="36" Canvas.Left="249" TextWrapping="Wrap" Text="P" Width="35">
<TextBlock.Projection>
<PlaneProjection RotationY="-25"/>
</TextBlock.Projection>
</TextBlock>
<TextBlock Foreground="#FFF6FF00" FontWeight="Bold" FontSize="48" FontFamily="Fonts/Fonts.zip#Chiller" Height="36" Canvas.Left="553" TextWrapping="Wrap" Text="G" Width="35" Canvas.Top="39">
<TextBlock.Projection>
<PlaneProjection RotationY="25"/>
</TextBlock.Projection>
</TextBlock>
<TextBlock Foreground="#FFF6FF00" FontWeight="Bold" FontSize="48" FontFamily="Fonts/Fonts.zip#Chiller" Height="36" Canvas.Left="588" TextWrapping="Wrap" Text="A" Width="35" Canvas.Top="10">
<TextBlock.Projection>
<PlaneProjection RotationY="25"/>
</TextBlock.Projection>
</TextBlock>
<TextBlock Foreground="#FFF6FF00" FontWeight="Bold" FontSize="48" FontFamily="Fonts/Fonts.zip#Chiller" Height="36" Canvas.Left="627" TextWrapping="Wrap" Text="L" Width="35" Canvas.Top="25">
<TextBlock.Projection>
<PlaneProjection RotationY="25"/>
</TextBlock.Projection>
</TextBlock>
<TextBlock Foreground="#FFF6FF00" FontWeight="Bold" FontSize="48" FontFamily="Fonts/Fonts.zip#Chiller" Height="36" Canvas.Left="666" TextWrapping="Wrap" Text="L" Width="35" Canvas.Top="8">
<TextBlock.Projection>
<PlaneProjection RotationY="25"/>
</TextBlock.Projection>
</TextBlock>
<TextBlock Foreground="#FFF6FF00" FontWeight="Bold" FontSize="48" FontFamily="Fonts/Fonts.zip#Chiller" Height="36" Canvas.Left="701" TextWrapping="Wrap" Text="E" Width="35" Canvas.Top="21">
<TextBlock.Projection>
<PlaneProjection RotationY="25"/>
</TextBlock.Projection>
</TextBlock>
<TextBlock Foreground="#FFF6FF00" FontWeight="Bold" FontSize="48" FontFamily="Fonts/Fonts.zip#Chiller" Height="36" Canvas.Left="740" TextWrapping="Wrap" Text="R" Width="35" Canvas.Top="8">
<TextBlock.Projection>
<PlaneProjection RotationY="25"/>
</TextBlock.Projection>
</TextBlock>
<TextBlock Foreground="#FFF6FF00" FontWeight="Bold" FontSize="48" FontFamily="Fonts/Fonts.zip#Chiller" Height="36" Canvas.Left="789" TextWrapping="Wrap" Text="Y" Width="35" Canvas.Top="10">
<TextBlock.Projection>
<PlaneProjection RotationY="25"/>
</TextBlock.Projection>
</TextBlock>
</Canvas>
</UserControl>



MainPage.XAML.CS



using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Media.Imaging;

namespace PhotoGallaryApplication
{
public partial class MainPage : UserControl
{
public MainPage()
{
// Required to initialize variables
InitializeComponent();
this.MainImageAnimation1.Completed += new EventHandler(MainImageAnimation1_Completed);
MainImageAnimation1.Begin();
txtFooter.Text="Silverlight 4.0 Photo Gallery !! WOW";
txtFooterReflection.Text="Silverlight 4.0 Photo Gallery !! WOW";
}
int imgCount=1;
void MainImageAnimation1_Completed(object sender, EventArgs e)
{
if(imgCount==16)
{
imgCount=1;
}
else
{
imgCount++;
}
Image Img=new Image();
Img = ((Image)this.FindName("Img" + imgCount));

MainImage.Source = Img.Source;
MainImage1.Source=Img.Source;
Img=null;
MainImageAnimation2.Begin();
MainImageAnimation2.Completed += new EventHandler(MainImageAnimation2_Completed);
}

void MainImageAnimation2_Completed(object sender, EventArgs e)
{
MainImageAnimation1.Begin();
}

private void B_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
{
ThumbNailBorderAnimation.Stop();
Border b=(Border)sender;
Storyboard.SetTarget(ThumbNailBorderAnimation,b);
ThumbNailBorderAnimation.Begin();
}

private void B_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)
{
ThumbNailBorderAnimationReverse.Stop();
Border b=(Border)sender;
Storyboard.SetTarget(ThumbNailBorderAnimationReverse,b);
ThumbNailBorderAnimationReverse.Begin();
}

private void Img_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
MainImageAnimation2.Stop();
MainImageAnimation2.Begin();
MainImage.Source=((Image)sender).Source;
MainImage1.Source = ((Image)sender).Source;

}
}
}


That’s all !! You are done with the Photo Gallery !! Enjoy!!

No comments:

Post a Comment