Thursday, December 15, 2011

How to build xaml icons using basic objects?

introduction

Hi, I am no designer but some time we have to make some simple objects that can be used as icons, in one of my project I had to make some quick and rusty icons, didn’t know what to do then use some of the xaml’s basic objects to create icons, the screen shot bellow shows 4 icons that I made. The icons are not that much impressive but not that much bad either.
image
This give me lot of confidence on making xaml basic objects. Bellow I have shared the xaml markup that is been used to icon 3 and 4 from left to right.

xaml for icon of with x and y

<Style x:Key="button2Style" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Grid>
                    <Rectangle StrokeThickness="0.5" Stroke="#232323" Cursor="Hand">
                        <Rectangle.Fill>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Color="Silver" Offset="0.0" />
                                <GradientStop Color="Gray" Offset="1.0" />
                            </LinearGradientBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition></ColumnDefinition>
                            <ColumnDefinition></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <TextBlock Padding="5,4" Grid.Column="0">X</TextBlock>
                        <TextBlock Padding="5,4" Grid.Column="1">Y</TextBlock>
                    </Grid>
                    <Rectangle Width="0.5" Fill="Black" HorizontalAlignment="Center"></Rectangle>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

xaml for icon of three black box

<Style x:Key="button3Style" TargetType="Button">
        <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Grid>
                    <Rectangle StrokeThickness="0.5" Stroke="#232323" Cursor="Hand">
                        <Rectangle.Fill>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Color="Silver" Offset="0.0" />
                                <GradientStop Color="Gray" Offset="1.0" />
                            </LinearGradientBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                    <Canvas>
                        <Rectangle StrokeThickness="0.5" Stroke="#232323" Width="12.5" 
                        Height="7" Fill="#696969" Margin="4,4,0,0">
                        </Rectangle>
                        <Rectangle StrokeThickness="0.5" Stroke="#232323" Width="12.5" 
                        Height="7" Fill="#696969" Margin="19,4,0,0">
                        </Rectangle>
                        <Rectangle StrokeThickness="0.5" Stroke="#232323" Width="12.5" 
                        Height="7" Fill="#696969" Margin="4,14,0,0">
                        </Rectangle>
                        <TextBlock Margin="20,2.5,0,0" Foreground="#232323" Padding="0" 
                        FontSize="15">...</TextBlock>
                    </Canvas>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Not bad right?. Yes using basic objects and effects we can make good looking objects that can be used as reusable objects. Note that I have used gradient effect and just few rectangle and text block to build these two icons.
Hope this will help some one, until next time, bye bye.

No comments:

Post a Comment