Share Icon in Expression Blend 4

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:

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:

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:

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:

Step 6

Go To Tool-Box -> select Line Tool, draw a line, manage its width & height, color and shadow effect as shown below:

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:

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">

<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>

</ed:RegularPolygon.Effect>

<ed:RegularPolygon.RenderTransform>

</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>

</ed:RegularPolygon.Effect>

<ed:RegularPolygon.RenderTransform>

</ed:RegularPolygon.RenderTransform>

</ed:RegularPolygon>

<Rectangle.Effect>

</Rectangle.Effect>

</Rectangle>

<Rectangle.Effect>

</Rectangle.Effect>

</Rectangle>

<Path.Effect>

</Path.Effect>

</Path>

<Path.Effect>

</Path.Effect>

</Path>

<Path.Effect>

</Path.Effect>

</Path>

<Path.Effect>

</Path.Effect>

</Path>

<Path.Effect>

</Path.Effect>

</Path>

<Path.Effect>

</Path.Effect>

</Path>

<Path.Effect>

</Path.Effect>

</Path>

<Path.Effect>

</Path.Effect>

</Path>

<Path.Effect>

</Path.Effect>

</Path>

<Path.Effect>

</Path.Effect>

</Path>

<Path.Effect>

</Path.Effect>

</Path>

<Path.Effect>

</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">

<head>

<title>Third-Article</title>

html {

height: 100%;

overflow: auto;

}

body {

height: 100%;

padding: 0;

margin: 0;

}

#silverlightControlHost {

height: 100%;

}

</style>

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 -->

</a>

</object>

</div>

</body>

</html>

Step 10

Here's the Share Icon as shown below:

Summary

We can design various types of Icons in Expression Blend 4 using the Toolbox, Shapes and Property Panel.