Reader Level:
Articles

Alert Icon in Expression Blend 4

By Sonia Bhadouria Vishvkarma on September 17, 2012
Let's design an alert icon.
  • 1
  • 0
  • 3104

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.

COMMENT USING

Trending up