Step 1
Open Expression Blend 4 -> select Silverlight -> select Silverlight Application + Website, hit OK, a blank window appears.
Step 2
Select Assets -> select Shapes -> select Rectangle, manage width & height, color and shadow effect as shown below:
![Rectangle-Shape-in-expression-blend4.png]()
Step 3
Again, select Rectangle, draw a rectangle and move the Plus Sign accordingly and give shape to the rectangle according to your choice, manage the width & height, color and shadow effect as shown below:
![Share-Rectangle1-in-expression-blend4.png]()
Note: Here, when we select a Rectangle Shape, a Plus Sign exists above the shape. So that we can create any shape according to our choice.
Step 4
Select Assets -> select Shapes -> select Triangle (Regular Polygon), draw a triangle, manage the width & height, color and shadow effect as shown below:
![Triangle1-in-expression-blend4.png]()
Step 5
Follow Steps 3-4, copy & paste the rectangle and triangle again, send them back to the previous rectangle and triangle using the "Send to Back Option" of the Order Tool from the Object Menu as shown below:
![Rectangle-Triangle2-in-expression-blend4.png]()
Step 6
Go To Tool-Box -> select Line Tool, draw a line, manage its width & height, color and shadow effect as shown below:
![Line-Shape-in-Expression-Blend4.png]()
Step 7
Select Text-Block from the ToolBox, write Share, manage the width & height, foreground color, font family, font size and shadow effect as shown below:
![Text-Block-in-Expression-Blend4.png]()
Step 8
Have a look at the XAML code shown below:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
x:Class="Third_Article.MainPage"
Width="640" Height="480">
<Grid x:Name="LayoutRoot" Background="White">
<Rectangle Fill="Black" Margin="208,164,239,200" RadiusY="14" RadiusX="14" Stroke="Black"/>
<ed:RegularPolygon Fill="#FF2B868D" InnerRadius="1" Margin="269,219,0,239" PointCount="3" Stretch="Fill" UseLayoutRounding="False" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" Width="25">
<ed:RegularPolygon.Effect>
<DropShadowEffect Color="White"/>
</ed:RegularPolygon.Effect>
<ed:RegularPolygon.RenderTransform>
<CompositeTransform Rotation="-182.135"/>
</ed:RegularPolygon.RenderTransform>
</ed:RegularPolygon>
<ed:RegularPolygon Fill="#FF2B868D" InnerRadius="1" Margin="317,210,298,0" PointCount="3" Stretch="Fill" UseLayoutRounding="False" RenderTransformOrigin="0.5,0.5" Height="22" VerticalAlignment="Top">
<ed:RegularPolygon.Effect>
<DropShadowEffect Color="White"/>
</ed:RegularPolygon.Effect>
<ed:RegularPolygon.RenderTransform>
<CompositeTransform Rotation="-182.135"/>
</ed:RegularPolygon.RenderTransform>
</ed:RegularPolygon>
<Rectangle Fill="#FF2B868D" Height="40" VerticalAlignment="Top" Margin="284,179,291,0" RadiusY="14" RadiusX="14">
<Rectangle.Effect>
<DropShadowEffect Color="White"/>
</Rectangle.Effect>
</Rectangle>
<TextBlock Margin="280,0,316,213" TextWrapping="Wrap" Text="Share" Foreground="White" FontSize="16" FontWeight="Bold" FontFamily="Segoe UI" Height="20" VerticalAlignment="Bottom"/>
<Rectangle Fill="#FF2B868D" Margin="259,188,316,0" RadiusY="14" RadiusX="14" Height="40" VerticalAlignment="Top">
<Rectangle.Effect>
<DropShadowEffect Color="White"/>
</Rectangle.Effect>
</Rectangle>
<Path Data="M135,187 L171,187" Fill="White" HorizontalAlignment="Left" Height="3" Margin="271,197,0,0" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Top" Width="10" Stroke="White">
<Path.Effect>
<DropShadowEffect/>
</Path.Effect>
</Path>
<Path Data="M135,187 L171,187" Fill="White" HorizontalAlignment="Left" Height="3" Margin="271,204,0,0" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Top" Width="10" Stroke="White">
<Path.Effect>
<DropShadowEffect/>
</Path.Effect>
</Path>
<Path Data="M135,187 L171,187" Fill="White" HorizontalAlignment="Left" Height="3" Margin="271,210,0,0" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Top" Width="10" Stroke="White">
<Path.Effect>
<DropShadowEffect/>
</Path.Effect>
</Path>
<Path Data="M135,187 L171,187" Fill="White" HorizontalAlignment="Left" Height="3" Margin="271,215,0,0" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Top" Width="10" Stroke="White">
<Path.Effect>
<DropShadowEffect/>
</Path.Effect>
</Path>
<Path Data="M135,187 L171,187" Fill="White" HorizontalAlignment="Left" Height="3" Margin="288.342,197,0,0" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Top" Width="10" Stroke="White">
<Path.Effect>
<DropShadowEffect/>
</Path.Effect>
</Path>
<Path Data="M135,187 L171,187" Fill="White" HorizontalAlignment="Left" Height="3" Margin="288.342,204,0,0" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Top" Width="10" Stroke="White">
<Path.Effect>
<DropShadowEffect/>
</Path.Effect>
</Path>
<Path Data="M135,187 L171,187" Fill="White" HorizontalAlignment="Left" Height="3" Margin="288.342,210,0,0" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Top" Width="10" Stroke="White">
<Path.Effect>
<DropShadowEffect/>
</Path.Effect>
</Path>
<Path Data="M135,187 L171,187" Fill="White" HorizontalAlignment="Left" Height="3" Margin="288.342,215,0,0" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Top" Width="10" Stroke="White">
<Path.Effect>
<DropShadowEffect/>
</Path.Effect>
</Path>
<Path Data="M135,187 L171,187" Fill="White" Height="3" Margin="303.016,197,0,0" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Top" Stroke="White" HorizontalAlignment="Left" Width="10">
<Path.Effect>
<DropShadowEffect/>
</Path.Effect>
</Path>
<Path Data="M135,187 L171,187" Fill="White" Height="3" Margin="303.016,204,0,0" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Top" Stroke="White" HorizontalAlignment="Left" Width="10">
<Path.Effect>
<DropShadowEffect/>
</Path.Effect>
</Path>
<Path Data="M135,187 L171,187" Fill="White" Height="3" Margin="303.016,210,0,0" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Top" Stroke="White" HorizontalAlignment="Left" Width="10">
<Path.Effect>
<DropShadowEffect/>
</Path.Effect>
</Path>
<Path Data="M135,187 L171,187" Fill="White" Height="3" Margin="303.016,215,0,0" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Top" Stroke="White" HorizontalAlignment="Left" Width="10">
<Path.Effect>
<DropShadowEffect/>
</Path.Effect>
</Path>
</Grid>
</UserControl>
Step 9
Here's the HTML code as shown below:
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<!-- saved from url=(0014)about:internet -->
<head>
<title>Third-Article</title>
<style type="text/css">
html {
height: 100%;
overflow: auto;
}
body {
height: 100%;
padding: 0;
margin: 0;
}
#silverlightControlHost {
height: 100%;
}
</style>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript">
function onSilverlightError(sender, args) {
var appSource = "";
if (sender != null && sender != 0) {
appSource = sender.getHost().Source;
}
var errorType = args.ErrorType;
var iErrorCode = args.ErrorCode;
if (errorType == "ImageError" || errorType == "MediaError")
return;
var errMsg = "Unhandled Error in Silverlight Application " + appSource + "\n" ;
errMsg += "Code: "+ iErrorCode + " \n";
errMsg += "Category: " + errorType + " \n";
errMsg += "Message: " + args.ErrorMessage + " \n";
if (errorType == "ParserError")
{
errMsg += "File: " + args.xamlFile + " \n";
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
else if (errorType == "RuntimeError")
{
if (args.lineNumber != 0)
{
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
errMsg += "MethodName: " + args.methodName + " \n";
}
throw new Error(errMsg);
}
</script>
</head>
<body>
<!-- Runtime errors from Silverlight will be displayed here.
This will contain debugging information and should be removed or hidden when debugging is completed -->
<div id='errorLocation' style="font-size: small;color: Gray;"></div>
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/Third-Article.xap"/>
<param name="onerror" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.60310.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.60310.0" style="text-decoration: none;">
<img src="http://go.microsoft.com/fwlink/?LinkID=161376" alt="Get Microsoft Silverlight" style="border-style: none"/>
</a>
</object>
<iframe id='_sl_historyFrame' style='visibility:hidden;height:0;width:0;border:0px'></iframe>
</div>
</body>
</html>
Step 10
Here's the Share Icon as shown below:
![Share-Icon-in-Expression-Blend4.png]()
Summary
We can design various types of Icons in Expression Blend 4 using the Toolbox, Shapes and Property Panel.