XAML Snippets - XAML Button with Icon

Print Page | Close Window

XAML Button with Icon

Printed From: Codejock Forums
Category: General
Forum Name: XAML Snippets
Forum Description: Post your XAML snippets here for everyone to enjoy :)
URL: http://forum.codejock.com/forum_posts.asp?TID=11825
Printed Date: 05 May 2024 at 2:31pm
Software Version: Web Wiz Forums 12.04 - http://www.webwizforums.com

Topic: XAML Button with Icon

Posted By: Ikkon
Subject: XAML Button with Icon
Date Posted: 14 August 2008 at 9:01am

Hello,

I am trying to make a button with styl that has a textBlock and image on the button.

I have the style working, so I tried to extend the style to add the textblock and image icon. but every time I add a control template in the extending style the first style vanishes...

anyone know how to do this or a bettter way? I just want to be able to add a button set the style and not have to worry about the text or icon


<Style x:Key="RegularButton">
                <Setter Property="Control.Margin" Value="2" />
                <Setter Property="Control.FontSize" Value="12" />
                <Setter Property="Control.Foreground" Value="Black"/>
                <Setter Property="Control.FontWeight" Value="bold"/>
                <Setter Property="Control.FontFamily" Value="Tohoma"/>
                <Setter Property="Control.Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Grid>
                                <Grid.BitmapEffect>
                                    <DropShadowBitmapEffect Opacity=".25" ShadowDepth="2.4" Softness=".05" />
                                </Grid.BitmapEffect>
                                <Rectangle x:Name="GelBackground" Opacity="1" RadiusX="4" RadiusY="4" StrokeThickness="2">
                                    <Rectangle.Stroke>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                            <GradientStop Color="#999999" Offset="0" />
                                            <GradientStop Color="#999999" Offset="1" />
                                        </LinearGradientBrush>
                                    </Rectangle.Stroke>
                                    <Rectangle.Fill>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                            <GradientStop Color="#ffffff" Offset=".15"/>
                                            <GradientStop Color="#cccccc" Offset=".9"/>
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle> 
                                <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Fill" TargetName="GelBackground">
                                        <Setter.Value>
                                            <RadialGradientBrush GradientOrigin="0,0.83" Center="0.8,0.4" Opacity=".9" RadiusX="5" RadiusY="0.8">
                                                <RadialGradientBrush.GradientStops>
                                                    <GradientStop Color="#97fafe" Offset="0" />
                                                    <GradientStop Color="#48e4ea" Offset="0.25" />
                                                    <GradientStop Color="#094254" Offset="0.63" />
                                                    <GradientStop Color="#0a4244" Offset="0.8" />
                                                </RadialGradientBrush.GradientStops>
                                            </RadialGradientBrush>
                                        </Setter.Value>
                                    </Setter>
                                </Trigger>
                                <Trigger Property="IsPressed" Value="true">
                                    <Setter Property="Fill" TargetName="GelBackground">
                                        <Setter.Value>
                                            <RadialGradientBrush GradientOrigin="0,0.83" Center="0.8,0.4" Opacity=".7" RadiusX="5" RadiusY="0.8">
                                                <RadialGradientBrush.GradientStops>
                                                    <GradientStop Color="#97fafe" Offset="0" />
                                                    <GradientStop Color="#48e4ea" Offset="0.25" />
                                                    <GradientStop Color="#094254" Offset="0.63" />
                                                    <GradientStop Color="#000000" Offset="0.8" />
                                                </RadialGradientBrush.GradientStops>
                                            </RadialGradientBrush>
                                        </Setter.Value>
                                    </Setter>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>                
            </Style>


        <!-- second style -->

            <Style x:Key="lastButton" BasedOn="{StaticResource RegularButton}" TargetType="Button">
            <Setter Property="Control.Foreground" Value="silver" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <StackPanel>
                            <TextBlock Margin="15,12,10,0" HorizontalAlignment="left" VerticalAlignment="Center" Text="Next"/>
                            <Image Margin="10,-16,20,20" Width="17" Height="16" HorizontalAlignment="right" VerticalAlignment="Center" Source="bottom-next.png"/>
                        </StackPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

the button I want to be something like

<Button Height="28" Width="100" Style="{StaticResource lastButton}"/>

Replies:

Posted By: Oleg
Date Posted: 14 August 2008 at 2:02pm

Hi,

Our Markup doesn't support ControlTemplate, BitmapEffect, RadialGradientBrush tags. Check readme.txt and our xaml samlpes for list of supported tags.

-------------
Oleg, Support Team
CODEJOCK SOFTWARE SOLUTIONS