Building an Error Icon in WPF

When you launch a XBAP application you can sometimes stumble over the XBAP error page which might look something like this:

Here's a WPF user control that you can drop into any application that simulates the error icon you see. It's a simple Canvas control with two Grids and uses Paths and Elipses to define the graphical look.

First create a new WPF User Control in your project or a library. Name it whatever you like, I called mine ErrorIcon. It'll be a type derived from UserControl so go into the XAML and change this to Canvas and also update the ErrorIcon.xaml.cs class to derive from Canvas instead of UserControl.

<Canvas x:Class="WpfApplication1.UserControl1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Height="300" Width="300">

    <Grid>

 

    </Grid>

</Canvas>

namespace WpfApplication1

{

    /// <summary>

    /// Interaction logic for UserControl1.xaml

    /// </summary>

    public partial class UserControl1 : Canvas

    {

        public UserControl1()

        {

            InitializeComponent();

        }

    }

}

Now drop in the following XAML code into your newly created Canvas:

<Canvas x:Class="WpfApplication1.ErrorIcon" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Uid="ErrorCanvas" Margin="0,3,0,0" Width="44">

    <Grid Name="RedWarning" x:Uid="RedWarning" Width="44" Height="44" Visibility="Visible">

        <Ellipse x:Uid="Ellipse1">

            <Ellipse.Fill>

                <LinearGradientBrush x:Uid="LinearGradientBrush14" StartPoint="0,0" EndPoint="0,1">

                    <LinearGradientBrush.GradientStops>

                        <GradientStopCollection x:Uid="GradientStopCollection4">

                            <GradientStop x:Uid="GradientStop32" Color="OrangeRed" Offset="0" />

                            <GradientStop x:Uid="GradientStop33" Color="DarkRed" Offset="1" />

                        </GradientStopCollection>

                    </LinearGradientBrush.GradientStops>

                </LinearGradientBrush>

            </Ellipse.Fill>

            <Ellipse.Stroke>

                <LinearGradientBrush x:Uid="LinearGradientBrush15" StartPoint="0,0" EndPoint="0,1">

                    <LinearGradientBrush.GradientStops>

                        <GradientStopCollection x:Uid="GradientStopCollection5">

                            <GradientStop x:Uid="GradientStop34" Color="transparent" Offset="0" />

                            <GradientStop x:Uid="GradientStop35" Color="#44ffffff" Offset="1" />

                        </GradientStopCollection>

                    </LinearGradientBrush.GradientStops>

                </LinearGradientBrush>

            </Ellipse.Stroke>

        </Ellipse>

        <Ellipse x:Uid="Ellipse2" Opacity="0.5" Stroke="Transparent" Margin="1">

            <Ellipse.Fill>

                <LinearGradientBrush x:Uid="LinearGradientBrush16" StartPoint="0,0" EndPoint="0,1">

                    <LinearGradientBrush.GradientStops>

                        <GradientStopCollection x:Uid="GradientStopCollection6">

                            <GradientStop x:Uid="GradientStop36" Color="white" Offset="0" />

                            <GradientStop x:Uid="GradientStop37" Color="transparent" Offset="1" />

                        </GradientStopCollection>

                    </LinearGradientBrush.GradientStops>

                </LinearGradientBrush>

            </Ellipse.Fill>

        </Ellipse>

        <Path x:Uid="Path1" Stretch="Fill" Width="19.878" Height="19.878" StrokeThickness="5" Stroke="#FFFFFFFF" StrokeStartLineCap="Round" StrokeEndLineCap="Round" Data="M 200,0 L 0,200 M 0,0 L 200,200" />

    </Grid>

    <Grid x:Uid="RedReflection" Width="44" Height="44" Visibility="Visible" Canvas.Top="80" Canvas.Left="0">

        <Grid.OpacityMask>

            <LinearGradientBrush x:Uid="LinearGradientBrush20" StartPoint="0,1" EndPoint="0,0">

                <GradientStop x:Uid="GradientStop44" Offset="0" Color="#3000" />

                <GradientStop x:Uid="GradientStop45" Offset="0.9" Color="Transparent" />

            </LinearGradientBrush>

        </Grid.OpacityMask>

        <Grid.RenderTransform>

            <ScaleTransform x:Uid="ScaleTransform2" ScaleX="1" ScaleY="-0.85" />

        </Grid.RenderTransform>

        <Ellipse x:Uid="Ellipse3">

            <Ellipse.Fill>

                <LinearGradientBrush x:Uid="LinearGradientBrush17" StartPoint="0,0" EndPoint="0,1">

                    <LinearGradientBrush.GradientStops>

                        <GradientStopCollection x:Uid="GradientStopCollection7">

                            <GradientStop x:Uid="GradientStop38" Color="OrangeRed" Offset="0" />

                            <GradientStop x:Uid="GradientStop39" Color="DarkRed" Offset="1" />

                        </GradientStopCollection>

                    </LinearGradientBrush.GradientStops>

                </LinearGradientBrush>

            </Ellipse.Fill>

            <Ellipse.Stroke>

                <LinearGradientBrush x:Uid="LinearGradientBrush18" StartPoint="0,0" EndPoint="0,1">

                    <LinearGradientBrush.GradientStops>

                        <GradientStopCollection x:Uid="GradientStopCollection8">

                            <GradientStop x:Uid="GradientStop40" Color="transparent" Offset="0" />

                            <GradientStop x:Uid="GradientStop41" Color="#44ffffff" Offset="1" />

                        </GradientStopCollection>

                    </LinearGradientBrush.GradientStops>

                </LinearGradientBrush>

            </Ellipse.Stroke>

        </Ellipse>

        <Ellipse x:Uid="Ellipse4" Opacity="0.5" Stroke="Transparent" Margin="1">

            <Ellipse.Fill>

                <LinearGradientBrush x:Uid="LinearGradientBrush19" StartPoint="0,0" EndPoint="0,1">

                    <LinearGradientBrush.GradientStops>

                        <GradientStopCollection x:Uid="GradientStopCollection9">

                            <GradientStop x:Uid="GradientStop42" Color="white" Offset="0" />

                            <GradientStop x:Uid="GradientStop43" Color="transparent" Offset="1" />

                        </GradientStopCollection>

                    </LinearGradientBrush.GradientStops>

                </LinearGradientBrush>

            </Ellipse.Fill>

        </Ellipse>

        <Path x:Uid="Path2" Stretch="Fill" Width="19.878" Height="19.878" StrokeThickness="5" Stroke="#FFFFFFFF" StrokeStartLineCap="Round" StrokeEndLineCap="Round" Data="M 200,0 L 0,200 M 0,0 L 200,200" />

    </Grid>

</Canvas>

Bam! You've got an error icon that looks like this:

To use it, just take any surface and add in a reference to the custom Canvas. Here it is in a pseudo-MessageBox like window:

Enjoy!

No Comments