WTF WPF!

A break from traditional image-based icons

Code Snippets

Tags: , ,

April 26, 2010 463

Icons in your app are probably the last thing you put effort into.  Personally, I prefer using vector icons as opposed to alpha-blended PNGs — they’re lighter weight and easier to create now than ever with the progression of Expression Design.  Any time you’re using an image for an icon, you’re drawing potentially unnecessary resources that just take up memory.  However, there are some reasons why you might just want to find some stock-icons and slap them in. For example, many controls in WPF are better suited to using the Image control where you can simply assign the string path of the image.  Here are some path-based methods you may choose over images.

Path Geometry Place this in your resources somewhere

    <PathGeometry x:Key="ApplicationCloseIconGeometry">
        <PathGeometry.Figures>
            <PathFigureCollection>
                <PathFigure StartPoint="3.535645,75.535645">
                    <PathFigure.Segments>
                        <PathSegmentCollection>
                            <LineSegment Point="74.246094,4.824707" />
                        </PathSegmentCollection>
                    </PathFigure.Segments>
                </PathFigure>
                <PathFigure StartPoint="4.824707,3.535645">
                    <PathFigure.Segments>
                        <PathSegmentCollection>
                            <LineSegment Point="75.535645,74.246094" />
                        </PathSegmentCollection>
                    </PathFigure.Segments>
                </PathFigure>
            </PathFigureCollection>
        </PathGeometry.Figures>
    </PathGeometry>

Button XAML Simple, un-styled button that references the path geometry resource

<Button Height="25" 
		Width="25">
	<Viewbox HorizontalAlignment="Center" VerticalAlignment="Center">
		<Path Margin="0"
			  Stretch="Fill"
			  StrokeThickness="15"
			  Stroke="Black"
			  Data="{StaticResource ApplicationCloseIconGeometry}">
		</Path>
	</Viewbox>
</Button>

Result

Not so bad for a default WPF control, right?  In my next post I’m going go into depth on how to apply a simple HLSL shader effect to the button to give you a well-performing mouse-over effect without having to store multiple versions of an image [had you used a PNG].

Share

463 Comments

« Older Comments
Newer Comments »

Leave a Reply