Scroll To Top
Reader Level:
Expression Studio

Draw "Comment Icon" in Expression Blend 4

By Sonia Bhadouria Vishvkarma on Sep 13, 2012
Today we are going to Design "Comment-Icon".

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


       Width="640" Height="480">


    <Grid x:Name="LayoutRoot" Background="White">

        <Path Data="M73.872551,-6.4960461 L66.703796,27.115192 L41.290764,26.888084 z" Margin="231.936,224.996,0,200.425" RenderTransformOrigin="0.5,0.5" Stretch="Fill" UseLayoutRounding="False" HorizontalAlignment="Left" Width="52.982">


                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                    <GradientStop Color="Black" Offset="0"/>

                    <GradientStop Color="White" Offset="1"/>




                <DropShadowEffect ShadowDepth="4"/>



                <CompositeTransform Rotation="179.489" TranslateX="67.671724122270092" TranslateY="66.091230526341292"/>



        <Path Data="M0.5,0.5 L277.5,0.5 L277.5,145.5 L0.5,145.5 z" Margin="192,142.667,170,191.333" Stretch="Fill" UseLayoutRounding="False">


                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                    <GradientStop Color="Black" Offset="0"/>

                    <GradientStop Color="White" Offset="1"/>










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

<html xmlns="" >

    <!-- saved from url=(0014)about:internet -->




        <style type="text/css">

            html {

           height: 100%;

           overflow: auto;


       body {

           height: 100%;

           padding: 0;

           margin: 0;


       #silverlightControlHost {

           height: 100%;



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



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






        <!-- 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/SilverlightApplication1.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="" style="text-decoration: none;">

                    <img src="" alt="Get Microsoft Silverlight" style="border-style: none"/>



            <iframe id='_sl_historyFrame' style='visibility:hidden;height:0;width:0;border:0px'></iframe>





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


Hit F5 to build the application.


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