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="Ellipse_1">
<Ellipse.Fill>
<LinearGradientBrush x:Uid="LinearGradientBrush_14" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection x:Uid="GradientStopCollection_4">
<GradientStop x:Uid="GradientStop_32" Color="OrangeRed" Offset="0" />
<GradientStop x:Uid="GradientStop_33" Color="DarkRed" Offset="1" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Ellipse.Fill>
<Ellipse.Stroke>
<LinearGradientBrush x:Uid="LinearGradientBrush_15" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection x:Uid="GradientStopCollection_5">
<GradientStop x:Uid="GradientStop_34" Color="transparent" Offset="0" />
<GradientStop x:Uid="GradientStop_35" Color="#44ffffff" Offset="1" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
<Ellipse x:Uid="Ellipse_2" Opacity="0.5" Stroke="Transparent" Margin="1">
<Ellipse.Fill>
<LinearGradientBrush x:Uid="LinearGradientBrush_16" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection x:Uid="GradientStopCollection_6">
<GradientStop x:Uid="GradientStop_36" Color="white" Offset="0" />
<GradientStop x:Uid="GradientStop_37" Color="transparent" Offset="1" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Path x:Uid="Path_1" 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="LinearGradientBrush_20" StartPoint="0,1" EndPoint="0,0">
<GradientStop x:Uid="GradientStop_44" Offset="0" Color="#3000" />
<GradientStop x:Uid="GradientStop_45" Offset="0.9" Color="Transparent" />
</LinearGradientBrush>
</Grid.OpacityMask>
<Grid.RenderTransform>
<ScaleTransform x:Uid="ScaleTransform_2" ScaleX="1" ScaleY="-0.85" />
</Grid.RenderTransform>
<Ellipse x:Uid="Ellipse_3">
<Ellipse.Fill>
<LinearGradientBrush x:Uid="LinearGradientBrush_17" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection x:Uid="GradientStopCollection_7">
<GradientStop x:Uid="GradientStop_38" Color="OrangeRed" Offset="0" />
<GradientStop x:Uid="GradientStop_39" Color="DarkRed" Offset="1" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Ellipse.Fill>
<Ellipse.Stroke>
<LinearGradientBrush x:Uid="LinearGradientBrush_18" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection x:Uid="GradientStopCollection_8">
<GradientStop x:Uid="GradientStop_40" Color="transparent" Offset="0" />
<GradientStop x:Uid="GradientStop_41" Color="#44ffffff" Offset="1" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
<Ellipse x:Uid="Ellipse_4" Opacity="0.5" Stroke="Transparent" Margin="1">
<Ellipse.Fill>
<LinearGradientBrush x:Uid="LinearGradientBrush_19" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection x:Uid="GradientStopCollection_9">
<GradientStop x:Uid="GradientStop_42" Color="white" Offset="0" />
<GradientStop x:Uid="GradientStop_43" Color="transparent" Offset="1" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Path x:Uid="Path_2" 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!