RSS Icon in Expression Blend 4

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 Ellipse-Shape -> draw an Ellipse -> manage the width & height, color, stroke color, Shadow Effect and stroke thickness as shown below:


Step 3

Select Assets -> Select Arc-Shape -> Draw Arc -> Manage the width & height, color, stroke color, Shadow Effect and stroke thickness as shown below:


Step 4

Repeat Step 3 or copy & paste the Arc-Shape from Step 3 and draw another arc shape below the previous one as shown below:


Step 5

Repeat Step 2 or copy & paste the Arc-Shape from Step 2 and draw another ellipse shape as shown below:


Note: We can change the color of the ellipse shape according to our choice as shown above.

Step 6

Have a look at the XAML code as shown below:

<UserControl xmlns="" xmlns:x="" xmlns:d="" xmlns:mc="" xmlns:ed="" mc:Ignorable="d"


       Width="640" Height="480">


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

        <Ellipse Margin="207,129,212,148" StrokeThickness="5" StrokeDashArray="0" Stroke="#FF98A339">


                <DropShadowEffect BlurRadius="10"/>



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

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

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

                    <GradientStop Color="#FF00EDFF" Offset="0.434"/>




        <ed:Arc ArcThickness="20" ArcThicknessUnit="Pixel" EndAngle="90" Stretch="None" StartAngle="0" UseLayoutRounding="False" Margin="189,173.667,257,138" StrokeThickness="2" Fill="White" Stroke="#FF98A339" RenderTransformOrigin="0.5,0.5">


                <CompositeTransform Rotation="-4.599"/>






        <ed:Arc ArcThickness="22" ArcThicknessUnit="Pixel" EndAngle="90" Stretch="None" StartAngle="0" UseLayoutRounding="False" Margin="198,203.667,285,138" StrokeThickness="2" Fill="White" Stroke="#FF98A339" RenderTransformOrigin="0.5,0.5">


                <CompositeTransform Rotation="-4.599" TranslateX="1.233" TranslateY="0.713"/>






        <Ellipse Margin="262,0,0,191" StrokeThickness="2" Fill="White" Stroke="#FF98A339" Height="45" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="49">





        <Image HorizontalAlignment="Left" Height="25" Margin="236,129,0,0" Source="bookmark.png" Stretch="Fill" VerticalAlignment="Top" Width="28" OpacityMask="Black" d:IsHidden="True"/>

        <Image Height="25" Margin="295,129,313,0" Source="1347855135_featured.png" Stretch="Fill" VerticalAlignment="Top" OpacityMask="#C1C1C1C1" Width="28" d:IsHidden="True"/>

        <Image HorizontalAlignment="Left" Height="32" Margin="188,0,0,159" Source="1347855138_featured.png" Stretch="Fill" VerticalAlignment="Bottom" Width="32" OpacityMask="Black" d:IsHidden="True"/>

        <Image Margin="178,102,182,123" Source="1347852229_rss_blue.png" Stretch="Fill" d:IsHidden="True"/>




Step 7

Here's the RSS Icon as shown below:



This articles helps you to create something "New" using a ellipse shape and an arc shape.

Up Next
    Ebook Download
    View all
    View all