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 .
LoginUI.zip
