ARTICLE

Alert Icon in Expression Blend 4

Posted by Sonia Vishvkarma Articles | Expression Studio September 17, 2012
Let's design an alert icon.
Reader Level:

Step 1

Open Expression Blend 4 -> select Silverlight-Application -> select Silverlight-Application + Website -> change Name and Location accordingly -> hit OK.

Step 2

Select Assets -> select Triangle -> draw Triangle -> manage width & height, color, stroke color and stroke thickness as shown below:

Triangle-Shape-in-Expression-Blend4.png

Step 3

Select Text-Block from Tool-Box , hit Exclamation Mark from the Keyboard with Shift-Key inside Text-Block , manage width & height, color, stroke color and stroke thickness as shown below:

Exclamation-Mark-in-Expression-Blend4.png

Step 4

Again, select Text-Block from the Tool-Box, Write Alert,  manage width & height, color, stroke color and stroke thickness as shown below:

Alert-Text-in-Expression-Blend4.png

Step 5

Have a look at the XAML code as shown below:

<ed:RegularPolygon InnerRadius="1" PointCount="3" Stretch="Fill" Stroke="White" UseLayoutRounding="False" Margin="192,115,212,171" StrokeThickness="2">

    <ed:RegularPolygon.Effect>

        <DropShadowEffect/>

    </ed:RegularPolygon.Effect>

    <ed:RegularPolygon.Fill>

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

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

            <GradientStop Color="#FF00FFED" Offset="1"/>

        </LinearGradientBrush>

    </ed:RegularPolygon.Fill>

</ed:RegularPolygon>

<TextBlock Margin="289,171,312,199" TextWrapping="Wrap" Text="!" Foreground="White" FontSize="96" FontWeight="Bold">

                     <TextBlock.Effect>

                           <DropShadowEffect/>

                     </TextBlock.Effect>

</TextBlock>

<TextBlock Height="52" Margin="259,0,273,101" TextWrapping="Wrap" Text="Alert" VerticalAlignment="Bottom" FontSize="32" FontWeight="Bold" Foreground="White">

                     <TextBlock.Effect>

                           <DropShadowEffect ShadowDepth="10"/>

                     </TextBlock.Effect>

</TextBlock>

 

Step 6

Here's the Alert Icon as shown below:

Alert-Icon-in-Expression-Blend4.png

Summary

Here, we can see the Alert-Icon using Triangle Shape and Text-Block in Expression Blend 4.

Login to add your contents and source code to this article
post comment
     
COMMENT USING
PREMIUM SPONSORS
Over-C is a holistic consortium of communications and technology specialists. We build, deploy and market both business as well as consumer products and solutions.
SPONSORED BY
  • PDF reports have never been easier to create. With our included WYSIWYG Designer, you can layout your reports, set up your data source and let DynamicPDF ReportWriter do the rest.
Get Career Advice from Experts