Draw "Comment Icon" in Expression Blend 4

Step 1

Open Expression Blend 4 -> select Silverlight -> select Silverlight Applicatio+Website, change Name and Location accordingly, hit OK, a Blank Window appears.

Step 2

Select ToolBox -> Rectangle -> Draw Rectangle -> Select Rectangle-Shape -> Manage the width & height, Margin, Fill Color, Stroke Color, Stroke Thickness and Shadow Effect from the Property Panel as shown below:

Step 3

Select Assets -> Shapes -> Triangle, Draw Triangle -> Select Triangle-Shape -> Select Object Menu -> Path -> Convert To Path -> Select Direct Select Tool(A) from the ToolBox -> Manage the width & height, Margin, Fill Color, Stroke Color, Stroke Thickness and Shadow Effect from the Property Panel as shown below:

Step 4

Have a look at the final result as "Comment-Icon" as shown below:

Note: Have a look at XAML-Coding as shown below:

<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" mc:Ignorable="d"

x:Class="SilverlightApplication1.MainPage"

Width="640" Height="480">

<Path.Fill>

</LinearGradientBrush>

</Path.Fill>

<Path.Effect>

</Path.Effect>

<Path.RenderTransform>

</Path.RenderTransform>

</Path>

<Path.Fill>

</LinearGradientBrush>

</Path.Fill>

<Path.Effect>

</Path.Effect>

</Path>

</Grid>

</UserControl>

Step 5

Along with the XAML code, the HTML code also exists because along with the Silverlight Application the Website Application is also added when we choose Silverlight Application + Website Option. The HTML code exists automatically according to the design. So, have a look at the design of 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>SilverlightApplication1</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>

Note: Have a look at Object and Timeline Window for the HTML file as shown below:

Hit F5 to build the application.

Summary

Through this article you can learn about XAML code, HTML code and various uses of Rectangle and Triangle shapes.