Introduction :
I was trying to create Vista style Login screen using Silverlight. I've seen couple of excellent custom Vista style UI designed in WPF by the known WPF gurus. Seeing their example I thought It's also possible to try something Vista style in Silverlight. Since Silverlight has many things common with WPF. So I started to get my feet wet to create a Vista style Login Screen using Silverlight 2 Beta 2.
Here's the screen shot of my SilverlightLoginUI in Design mode :
Diving deep into designing the LoginUI :
It's pretty simple to create this LoginUI using Xaml. Let's start by opening Expression Blend 2.5 June Preview. Click on the File Menu. Select New Project, this will bring up the project template dialog box, where you can select the type of project you want to create.
Select Silverlight 2 Application. Name the project SilverlightLoginScreen.
Now Right click over the SilverlightLoginScreen Project and select add UserControl.
This will bring up the following dialog box :
Name the UserControl LoginUI and select OK Button. This will add a UserControl Named LoginUI to our project.
Now select the Xaml View to see the Xaml created by the Expression Blend. You'll see Width and Height property of the UserControl set to 640 and 480 by default. Something like this :
d:DesignWidth="640" d:DesignHeight="480"
change this to :
Width="425" Height="400"
Inside the <UserControl> </UserControl> you'll see there's a Grid named LayoutRoot created by default, something like this :
<Grid x:Name="LayoutRoot" Background="White"/>
Remove the Background property from the Grid and set the Background like this :
<Grid x:Name="LayoutRoot">
<Grid.Background>
<LinearGradientBrush>
<GradientStop Color="#E44682B4" Offset="0.022"/>
<GradientStop Color="#E587CEEB" Offset="0.728"/>
<GradientStop Color="#E5ADD8E6" Offset="0.536"/>
</LinearGradientBrush>
</Grid.Background></Grid>
As you can see that I've set the main panel's Background which in this case is Grid named LayoutRoot to LinearGradientBrush and added three Gradient Stops to get my desired look and feel over the Main Layout panel. I've also played a little with the offset of the GradientStops. Now got back to the Design View, Under The Objects and Timeline panel select Layout Root.
Under the properties Panel reduce alpha value of all three GradientStops to 90%.
Setting alpha value to 90% will of all three GradientStops will produce the following Xaml in the <Grid.Background> section like the following :
<Grid.Background>
<LinearGradientBrush>
<GradientStop Color="#E44682B4" Offset="0.022"/>
<GradientStop Color="#E587CEEB" Offset="0.728"/>
<GradientStop Color="#E5ADD8E6" Offset="0.536"/>
</LinearGradientBrush>
</Grid.Background>
After setting the Background of the main Layout Panel, add some rows to the Main Layout Add five rows like this :
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="0"/>
<RowDefinition Height="35"/>
</Grid.RowDefinitions>
The Height property of the first three Rows has been set to Auto and the last two Rows to 0 and 35. Just after the closing tag of the RowDefinitions add a Border and name The border ImagePanel. Since this is the Panel where Image is reside in Windows Vista. Fix some properties of the Border like the Xaml shown below :
<Border x:Name="ImagePanel" Opacity="0.5"
Grid.Row="0" Width="150"
Height="150" Margin="137.5,20,137.5,5">
</Border>
Here Opacity of the Border has been fixed to 0.5 to get the desired look, Border has been placed in the Row number 0, Width and Height of the Border has been set to 150 respectively. Now we need to add BorderBrush to the Border. To do this, add <Border.BorderBrush> </Border.BorderBrush> section inside the Border just like we did for our main Panel Grid named LayoutRoot. Set the BorderBrush to LinearGradientBrush once again Just like the Grid . But this time with different Color and Opacity like the following Xaml :
<Border.BorderBrush>
<LinearGradientBrush>
<GradientStop Color="Green" Offset="0"/>
<GradientStop Color="Aqua" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
Here Color of the two GradientStops of the LinearGradientBrush has been set to Green and Aqua and offset has been set to 0 for the first and 1 for the second GradientStop.
Add Another Grid Inside the Border. This will be placed just after the closing BroderBrush tag of the Border like the following :
<Border x:Name="ImagePanel" Opacity="0.5" Grid.Row="0" Width="150"
Height="150" Margin="137.5,20,137.5,5">
<Border.BorderBrush>
<LinearGradientBrush>
<GradientStop Color="Green" Offset="0"/>
<GradientStop Color="Aqua" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Grid x:Name="grdImagePanel">
</Grid>
</Border>
Add a Canvas Inside the grid you just created which is names grdImagePanel. This the Grid Inside The Border named ImagePanel. That's why I've named this grdImagePanel. Set the Properties of the Canvas like the Xaml shown below:
<Canvas x:Name="Canvas1" Width="150" Height="150" Canvas.Left="0"
Canvas.Top="0"></Canvas>
Add a Path inside the Canvas a and Set the Properties of the Path exactly like the following :
<Path x:Name="Path1" Width="150" Height="150" Canvas.Left="0"
Canvas.Top="0" Stretch="Fill"
StrokeThickness="1.33319"
StrokeLineJoin="Round" Stroke="#FF000000"
Data="F1 M 189.42,22.7504C 195.199,20.306
250.876,17.7504 275.532,17.7504C 300.188,17.7504 359.999,20.8198 364.422,23.7504C
368.845,26.6811 369.067,27.7923 370.088,30.4164C 372.233,32.2089 376.088,80.2348
376.088,114.973C 376.088,149.711 377.067,174.57 370.088,203.418C 368.706,206.875
366.817,208.181 363.422,210.084C 334.65,216.848 310.203,218.084 274.199,218.084C
238.195,218.084 198.539,212.459 189.42,210.084C 185.733,208.959 184.067,207.514
181.754,204.418C 176.511,175.514 175.754,157.647 175.754,114.306C 175.754,70.9657
179.421,33.3045 182.754,29.4164C 185.372,25.2991 185.206,25.5908 189.42,22.7504 Z ">
</Path>
By adding this Path you'll get some new designed or shaped look into your UI for the first time.
Set the Fill property of the Path to LinearGradientBrush like this :
<Path.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#FF427183" Offset="0"/>
<GradientStop Color="#FF4C8AA8" Offset="1"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Path.Fill>
After setting the Fill property of the path you'll have UI like the screen shot below :
Add another Canvas Inside the grdImagePanel which will be placed just after the Canvas1 closing tag. Name this Canvas to Canvas2. Fix the properties of the Canvas like this :
<Canvas x:Name="Canvas2" Width="150" Height="150" Canvas.Left="0"
Canvas.Top="0"></Canvas>
Add a Path inside the Canvas 2 again like the previous Canvas. But this time with following properties fixed :
<Path x:Name="Path2" Width="148" Height="148" Canvas.Left="1"
Canvas.Top="1"
Stretch="Fill" StrokeThickness="1.33319"
StrokeLineJoin="Round"
Stroke="#FFFFFFFF"
Data="F1 M 190.257,23.4393C 195.986,21.0155
251.182,18.4815 275.625,18.4815C 300.068,18.4815 359.362,21.525 363.746,24.4309C
368.131,27.3368 368.351,28.4387 369.363,31.0407C 371.49,32.8181 375.311,80.4393
375.311,114.884C 375.311,149.329 376.282,173.979 369.363,202.584C 367.993,206.013
366.12,207.307 362.755,209.194C 334.232,215.901 309.996,217.127 274.303,217.127C
238.61,217.127 199.297,211.549 190.257,209.194C 186.602,208.079 184.95,206.646
182.658,203.576C 177.46,174.916 176.71,157.199 176.71,114.224C 176.71,71.2483
180.345,33.9044 183.649,30.0491C 186.244,25.9666 186.079,26.2558 190.257,23.4393 Z "/>
Add another Canvas and name it Canvas3 just after closing tag of Canvas2 and set properties like this :
<Canvas x:Name="Canvas3" Width="150" Height="150" Canvas.Left="0"
Canvas.Top="0"></Canvas>
Add Path again inside the Canvas3 withe the following property :
<Path x:Name="Path3" Width="130" Height="130" Canvas.Left="10"
Canvas.Top="10"
Stretch="Fill" StrokeThickness="1.33319"
StrokeLineJoin="Round"
Stroke="#FFFFFFFF" Fill="#FF185D7C"
Data="F1 M 196.596,30.1355L 355.245,30.1355C
358.927,30.1355 361.911,33.12 361.911,36.8015L 361.911,195.451C 361.911,199.132
358.927,202.117 355.245,202.117L 196.596,202.117C 192.914,202.117 189.93,199.132
189.93,195.451L 189.93,36.8015C 189.93,33.12 192.914,30.1355 196.596,30.1355 Z "/>
By now your UI should look like the following screen shot :
Alsmost Vista Style. Isn't it? Add another Canvas and name the Canvas to Canvas4 with properties shown below :
<Canvas x:Name="Canvas4" Width="150" Height="150" Canvas.Left="0" Canvas.Top="0">
</Canvas>
Now add Path inside the Canvas With the properties fixed like the this :
<Path x:Name="Path4" Width="128" Height="128" Canvas.Left="11" Canvas.Top="11"
Stretch="Fill" StrokeThickness="1.33319" StrokeLineJoin="Round"
Stroke="#FF000000"
Data="F1 M 197.8,31.4281L 353.783,31.4281C
357.464,31.4281 360.449,34.4126 360.449,38.0941L 360.449,194.077C 360.449,197.759
357.464,200.743 353.783,200.743L 197.8,200.743C 194.118,200.743 191.134,197.759
191.134,194.077L 191.134,38.0941C 191.134,34.4126 194.118,31.4281 197.8,31.4281 Z ">
<Path.Fill>
<LinearGradientBrush StartPoint="0.0578296,0.0262506" EndPoint="0.995431,0.963852">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#7FFFFFFF" Offset="0"/>
<GradientStop Color="#26FFFFFF" Offset="0.488584"/>
<GradientStop Color="#00FFFFFF" Offset="0.525114"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Path.Fill>
</Path>If you look at your Design View to have a look at the UI, You'll find
:
If you look at the picture above clearly you'll see little bit of reflected effect. It's because of 4th Canvas's Path, which was filled with LinearGradientBrush to get the desired look.
Add one more and last Canvas to finish creating the ImagePanel of our LoginUI and set properties exactly like this :
<Canvas x:Name="Canvas5" Width="150" Height="150" Canvas.Left="0" Canvas.Top="0">
</Canvas>
Add another path inside our last Canvas which is named Canvas5 with the following property :
<Path x:Name="Path5" Width="144" Height="77" Canvas.Left="3" Canvas.Top="3"
Stretch="Fill" Data="F1 M 191.246,23.7614C 196.974,21.3376 252.17,18.8035
276.613,18.8035C 301.056,18.8035 360.35,21.847 364.734,24.753C 369.119,27.6589
369.339,28.7607 370.351,31.3627C 372.478,33.1402 374.299,72.7613 374.299,107.206C
374.299,112.46 316.899,122.449 275.291,122.449C 233.683,122.449 177.698,111.925
177.698,107.546C 177.698,64.5703 181.333,34.2265 184.637,30.3712C 187.233,26.2886
187.067,26.5778 191.246,23.7614 Z ">
<Path.Fill>
<LinearGradientBrush StartPoint="0.51537,-0.00653635" EndPoint="0.51537,0.992601">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#7FFFFFFF" Offset="0"/>
<GradientStop Color="#26FFFFFF" Offset="1"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Path.Fill></Path>
And if everything you've done accrording to my instruction you'll be able to see this UI :
We've completed creating the ImagePanel of our Silverlight Login UI. For Now It's Over for me. If anyone has any other idea behind this ImagePanel to give this more effective look, I would love to hear from them.
The last this we'll do here is , we will add a TextBox Just beneath the ImagePanel. To Get the curvy look around the TextBox I've used a Border here and put my TextBox inside the Border. I'm not going to explain now assuming that you've learnt enough to understand the Xaml below :
<Border HorizontalAlignment="Stretch" Margin="127,8,137.5,-9"
VerticalAlignment="Stretch" Grid.Row="4" CornerRadius="10,10,10,10"
BorderThickness="4,2,5,3">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF0A445A"/>
<GradientStop Color="#FF0EB3F1" Offset="1"/>
<GradientStop Color="#FE0A526C" Offset="0.558"/>
</LinearGradientBrush>
</Border.Background>
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF7A7A7A"/>
<GradientStop Color="#FF424544" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<TextBox Height="28" Width="147.5" Text="" TextWrapping="Wrap"
BorderThickness="6,5,4,3" RenderTransformOrigin="4.5,4.5" >
<TextBox.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF474545"/>
<GradientStop Color="#FF9B9B9B" Offset="1"/>
<GradientStop Color="#FF646262" Offset="0.513"/>
</LinearGradientBrush>
</TextBox.BorderBrush>
</TextBox>
</Border>
When you add this LoginUI control to you'r maing page declaratively or procedurally and run the program, you'll get the Silverlight LoginUI like the Image below:
This is not complete by any means but another example of how powerful Xaml can be. Hope you've enjoyed this trip of creating Vista Style LoginUI with Silverlight.
Happy coding and Happy Silverlight .
I’ve used Expression Blend in many occasions but I’ve never experimented with expression design since the release of this product. After the release of version 2.0 Beta of Expression Design this is the first time I’m using Microsoft Expression Design. In this demonstration I’ll fix design of my control using Expression Design. Let’s dig into the story .
First open Expression Design 2.0 Beta . From the File menu click New or press CTRL+N.
. 
In the New Document Dialog Box choose the name for the document to your linking. Specify the Width and Height to adjust the output area of your file . You can change these values by clicking on each field, or choose a width and height from the Presets drop-down list. Also, live effects are only visible within the artboard area. In general, you should match the document size to your output size. In the New Document dialog box you will see a drop-down list named presets . I’ve chosen 800 X 600 for my document from the available presets. Choose a value in the Resolution field. This is the resolution at which live effects will be rasterized. If everything is set according to my instruction the New Document dialog box should look like the screen shot below :
Before delve into the design demonstration one more information on the files supported by the Expression Design are : Photoshop 7 and earlier (.psd), TIFF, JPEG (or JPG or JFIF), GIF, PNG, BMP (or DIB or RLE), Windows Media Photo (WDP, HD Photo, or HDP), ICO. Adobe Illustrator PDF file or a native .AI file, if Illustrator's Create PDF Compatible File feature is enabled can also be imported by clicking Import on the File menu . The objects in the PDF file will be converted to Expression Design objects as closely as possible. In some cases, the objects may be altered; for example, text may convert to outlines. I hope this information should help the folks who are interested in the designing stuff.
Now start designing the visual interface for the control. In the center of the drawing area you’ll see a rectangular area which is known as artboard. The role of the artboard is to represent the intended output area of the document. At first select a Rectangle from the Toolbox which contains all the tools you need for designing stuff.
Draw the Rectangle over the artboard. Set the Corner Radius of the rectangle to 75 px to make your this Rectangle a little bit rounded shape in each corner of the rectangle. You can adjust this property according to your needs. It’s actually depends on what shape you want to give to your control or what look you want to give your control. Select the Rectangle. Under the properties panel select appearance to fix the appearance of the Rectangle. Select Gradient Brush. Adjust the color key of the both sides according to your choice. I have played here with the blue color keys of the both sides. Select the Rectangle add some effects by selecting the add effects option there you’ll see the list of effects. I’ve added here drop Shadow and Paint Daubs. If everything is done in the way I’ve mentioned, you should have designed a rectangle shown below :
Select the Rectangle to increase the stroke width. I’ve just set here 11 px.
Change the stroke color by selecting in the appearance section there’s plenty of options available for you and that’s the richness of Expression Design.
Select the options you need. I’ve chosen here from the Beach swatches.
I’ve finished designing here only working with the one layer. You can use as many layers as you like to give your control a unique look. Now from the Select Menu choose All or press CTRL+A to select all the objects.
From the Edit menu choose Copy XAML or press Ctrl+Shift+C .
Now Open Expression Blend , select New Project from the File Menu and then Select Silverlight 2 Application from project template. Name the project according to your liking. I’ve named it SilverlightControlDesign. Specify the location where you want to reside your project.
Now in the Page.xaml paste the xaml you’ve copied from Expression design. It doesn’t makes sense to paste the complete xaml which has been copied. So I’ve paste it in a Notepad and copied only the xaml inside the layout panel . The Xaml generated from the Design was some thing like this :
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="Layer_1_0" Width="800" Height="600" Canvas.Left="0" Canvas.Top="0">
<Path Width="709.611" Height="242.023" Canvas.Left="47.9296" Canvas.Top="74.7544" Stretch="Fill" StrokeThickness="11" StrokeLineJoin="Round" Stroke="#FF3C78C3" Data="M 128.43,80.2544L 673.04,80.2544C 714.461,80.2544 752.04,109.832 752.04,151.254L 752.04,230.479C 752.04,271.9 714.461,311.277 673.04,311.277L 128.43,311.277C 87.0082,311.277 53.4296,277.699 53.4296,236.277L 53.4296,155.254C 53.4296,113.833 87.0082,80.2544 128.43,80.2544 Z ">
<Path.Fill>
<LinearGradientBrush StartPoint="0.518626,-0.166413" EndPoint="2.84322,-0.166413">
<LinearGradientBrush.RelativeTransform>
<TransformGroup>
<SkewTransform CenterX="0.518626" CenterY="-0.166413" AngleX="26.5812" AngleY="0"/>
<RotateTransform CenterX="0.518626" CenterY="-0.166413" Angle="86.298"/>
</TransformGroup>
</LinearGradientBrush.RelativeTransform>
<LinearGradientBrush.GradientStops>
<GradientStop Color="#FF0CE6F1" Offset="0"/>
<GradientStop Color="#FF0C47A2" Offset="0.589041"/>
<GradientStop Color="#FF0A42C0" Offset="0.737903"/>
<GradientStop Color="#FF083EDE" Offset="1"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Path.Fill>
<Path.BitmapEffect>
<DropShadowBitmapEffect Softness="0.377953" ShadowDepth="18.8976" Opacity="0.599998" Color="#FF000000" Direction="315" Noise="0"/>
</Path.BitmapEffect>
</Path>
</Canvas>
So I’ve Copied only the Xaml which is inside the Canvas and Paste it in the Page.xaml’s <Grid> </Grid> Section. I had a major setback cause if you look at the xaml you’ll notice that <Path.BitmapEffect> section is underlined with red curvy line indicating error . You’ll be able to see in the results window a message : The member “Bitmap Effect” is not recognized or not accessible.
Unfortunately Silverlight doesn’t provide any support for Bitmap effect class. This support is available in WPF. I had to find some other way to give my control a unique look. So I Delete the <Path.BitmapEffect> Section from the Xaml. Change the width of the opening <Path> section which is just next to Grid named LayoutRoot . Set the Width to 300 and Height to 102.043 to make my Control Look Like this :
Now I need a drop shadow effect without any help of Bitmap effect class. I’ll try here to get that effect by using a Border. Without going into detail to show you step by step process, here’s the Xaml for you to customize the look of the Border :
<Border Margin="166,186,165,185" Opacity="0.37" CornerRadius="36,36,36,36">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF2C56A1"/>
<GradientStop Color="#FFB5C3F2" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Border.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF060F70"/>
<GradientStop Color="#FF071AEC" Offset="1"/>
<GradientStop Color="#FF1042F4" Offset="0.585"/>
</LinearGradientBrush>
</Border.OpacityMask>
</Border>
Now the control should look like this :
You can change this if you don’t like this output. I’ve just played with Blue color keys here of the Background and Opacity Mask. Now open visual Studio play with this design using your own Style or ControlTemplate and have fun.
I was searching for some WPF videos, after googling I found a site named contentpresenter . I found couple of interesting video there on WPF. After releasing of Silverlight 2.0 beta , my intention is implementing those WPF stuff in Silverlight as much as possible cause they're quite similar now. Let's start how I did this.
I found a video at contentpresenter on reflection. The idea behind this is video running on media element will be reflected. Much like mirror effect we've seen created in photoshop. Reflection will exactly be the reverse of original video which will be reflected on a rectangle located just beneath the media element. I have done that by changing XAML a little bit and the job was done. Here's my XAML step by step:
Inside my root Grid I have set both the Horizontal and Vertical alignment to center. This will center anything inside this Grid.Fixed it's width to 800 and height to 640 something like this :
<Grid x:Name="LayoutRoot" HorizontalAlignment="Center"
VerticalAlignment="Center" Width="800" Height="640"
MouseLeftButtonDown="TopElement_OnFullScreenChaged">
</Grid>
After this I've Open Expression Blend 2.5 March 2008 Preview to Fill
the background of my grid named LayoutRoot. Here's screen shot :
Note that Under the interaction panel(Objects and Timeline) which is in this case
LayOutRoot name of my root grid has been selected to fix the Background color. I've
selected LinearGradientBrush to change the Background of my grid and this created the
following XAML :
<Grid.Background>
<LinearGradientBrush EndPoint="0.493999987840652,1"
StartPoint="0.505999982357025,0">
<GradientStop Color="#FF000000"/>
<GradientStop Color="#FFA29C9C" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
Next I've used StackPanel to have my Video top of the StackPanel and the reflection of the video bottom of the StackPanel.In the first section of the stack panel is the Border to add some border around MediaElement, you can also use the Grid .
Inside this Border I've placed my MediaElement. The MediaElement which i've named mElement is selected under the properties panel selecting the media tab and changing the source property has set the source of the video. Here's the Screen Shot :
MediaElement is now inside the border. To absolutely size the media element I've set the width and height of the border to 328 and 248.I've fixed the background of my Broder to LinearGraidient.To stretching all the way through the border I've fixed the horizontal and vertical alignment to stretch.To bring in each side to 4 pixels I've set margin to 4 pixels to have that border.
Now it's time to paint the actual video file to Rectangle. At first I have set the fill property of the Rectangle to fix the Background. This going to serve as reflection.
I've just set the Rectangle.Fill property to VideoBrush and set it's SourceName property to the the Border grdVideo that contains the media element. Now we can have perfect copy of the video playing beneath the original video painted over a Rectangle. But it's not the reflection of the video because it's actually needs to be flipped on the Y axes.To do that we can use transform property of the VideoBrush.
First it has been scaled on Y axes and then translated so I needed to use TransformGroup to allow multiple transform. Under the <TransformGroup> tag I've used the ScaleTransform and set it's ScaleY to negative 1. This flips on the Y axes.
To translate to the Y axes I've set the TranslateTransform Y property equal to our Border's height which is 248.Here's the screen shot on full screen mode :
This looks good but this is bit too strong cause in reflection opacity is much lighter and fades out towards the bottom. To achieve this I've played a bit with the opacity mask of the Rectangle. I've used the Gradient Brush for the opacity masks. First i've selected the right color key of the gradient and set it's alpha value to 0 and Left color key somewhere round 30. I've used the gradient transform tool change the direction of the gradient by holding shift key for the perfection.Below is the screen shot after this modifications:
Now it's much more realistic. You can add video of your choice and play with the gradient background,Rectangle opacity mask etc. as much as you like to make it more realistic. Here's my XAML after all of this :
<UserControl x:Class="SilverlightReflection.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="800" Height="640" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" OpacityMask="#FF000000" >
<Grid x:Name="LayoutRoot" HorizontalAlignment="Center" VerticalAlignment="Center" Width="800" Height="640" MouseLeftButtonDown="TopElement_OnFullScreenChaged">
<Grid.Background>
<LinearGradientBrush EndPoint="0.474999994039536,0.523000001907349" StartPoint="0.47299998998642,0.181999996304512">
<GradientStop Color="#FF8E8C8C"/>
<GradientStop Color="#E9928F8F" Offset="0.8880000114440918"/>
<GradientStop Color="#FFA4A4A4" Offset="0.656"/>
<GradientStop Color="#FF6D6B6B" Offset="0.451"/>
<GradientStop Color="#FF7E7C7C" Offset="0.21899999678134918"/>
</LinearGradientBrush>
</Grid.Background>
<StackPanel Margin="0,0,0,0">
<Border x:Name="grdVideo" Width="328" Height="248" MouseLeftButtonDown="grid_MouseLeftButtonDown">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.493999987840652,1.79799997806549">
<GradientStop Color="#FF000000"/>
<GradientStop Color="#FF686565" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<MediaElement x:Name="mElement" Source="Media/sl1.wmv" Margin="4,4,4,4" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<MediaElement.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF000000"/>
<GradientStop Color="#FF878383" Offset="1"/>
</LinearGradientBrush>
</MediaElement.OpacityMask>
</MediaElement>
</Border>
<Rectangle x:Name="recVideo" Width="328" Height="248" Margin="4,1,4,1" StrokeThickness="4" RenderTransformOrigin="0.5,0.5">
<Rectangle.OpacityMask>
<LinearGradientBrush EndPoint="0.50900000333786,0.83899998664856" StartPoint="0.5,-0.208000004291534">
<GradientStop Color="#4D000000"/>
<GradientStop Color="#00FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.OpacityMask>
<Rectangle.Fill>
<VideoBrush SourceName="mElement">
<VideoBrush.Transform>
<TransformGroup>
<ScaleTransform ScaleY="-1"/>
<TranslateTransform Y="248"/>
</TransformGroup>
</VideoBrush.Transform>
</VideoBrush>
</Rectangle.Fill>
</Rectangle>
</StackPanel>
</Grid>
</UserControl>
To wire some event and get this in Full Screen I've added something in my Page.xaml.cs section which is quite simple and shown below :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Interop;
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;
namespace SilverlightReflection
{
public partial class Page : UserControl
{
private SilverlightHost slHost = new SilverlightHost();
public Page()
{
InitializeComponent();
}
private void TopElement_OnFullScreenChaged(object sender,
EventArgs e)
{
SizeUI();
}
private void SizeUI()
{
grdVideo.Width = this.ActualWidth/2;
grdVideo.Height =this.ActualHeight/2;
recVideo.Width = grdVideo.Width;
recVideo.Height = grdVideo.Height;
}
private void grid_MouseLeftButtonDown(object sender,
MouseEventArgs e)
{
if (slHost.Content.IsFullScreen)
{
slHost.Content.IsFullScreen = false;
}
else
{
slHost.Content.IsFullScreen = true;
}
}
}
}
That's all . Expecting your opinion and suggestion to do much better than this.
Happy coding.
