Colabora
 

Botón Animado en Xaml

Uso de XamlPad

 

Fecha: 30/Abr/2007 (30/04/2007)
Autor: Pedro Alex Taya Yactayo - [email protected]
http://msdnlive.net/blogs/ataya/

 


Introducción

Hola amigos otra vez me tienen por acá en el Site del Guille pues ahora les tengo algo interesante, un botón con animación creado en XAML y espero les sirva.

Sobre XAMLPAD

El código que les muestro a continuación lo puedes ver con XAMLPAD que es un editor de Microsoft para este tipo de lenguaje, en él podrán hacer sus pruebas sin ningún problema.

El código:

<Canvas xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    Width="140" Height="129.948955543194" 
    Background="{x:Static Brushes.Transparent}">
    <Button x:Name="Button3" Canvas.Left="2" Canvas.Top="6" 
        Width="132" Height="119" FontFamily="Arial" FontSize="20" 
        Foreground="{x:Static Brushes.Gainsboro}" 
        Background="{x:Static Brushes.CadetBlue}" 
        Content="Aceptar">
        <Button.Style>
            <Style TargetType="{x:Type Button}">
                <Setter Property="Control.Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Border Name="Border" BorderBrush="{x:Static Brushes.Black}" 
                                    CornerRadius="5,5,5,5">
                                <Grid Background="{x:Static Brushes.Transparent}">
                                    <Grid.RowDefinitions>
                                        <RowDefinition />
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition />
                                    </Grid.ColumnDefinitions>
                                    <Ellipse Name="Ellipse" Fill="{TemplateBinding Panel.Background}" 
                                             Stroke="Black" StrokeThickness="2" Margin="-1,1,0,0" 
                                             Width="Auto" HorizontalAlignment="Stretch" Height="Auto" 
                                             VerticalAlignment="Stretch">
                                        <Ellipse.BitmapEffect>
                                            <BevelBitmapEffect BevelWidth="8.29304800975718" 
                                                Relief="0.3" LightAngle="135" 
                                                Smoothness="0.2" EdgeProfile="Linear" />
                                        </Ellipse.BitmapEffect>
                                    </Ellipse>
                                    <ContentPresenter Name="Presenter" 
                                HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}" 
                                VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}" 
                                Content="{TemplateBinding ContentControl.Content}"
                                ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" />
                                </Grid>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="UIElement.IsMouseOver" Value="True">
                                    <Setter TargetName="Ellipse" Property="UIElement.BitmapEffect">
                                        <Setter.Value>
                                            <BevelBitmapEffect BevelWidth="6.31721920390287" 
                                                Relief="0.3" 
                                                LightAngle="135" Smoothness="0.2" />
                                        </Setter.Value>
                                    </Setter>
                                </Trigger>
                                <Trigger Property="ButtonBase.IsPressed" Value="True">
                                    <Setter TargetName="Ellipse" Property="UIElement.BitmapEffect">
                                        <Setter.Value>
                                            <BevelBitmapEffect BevelWidth="8.29304800975718" 
                                                Relief="0.3" LightAngle="135" 
                                                Smoothness="0.2" EdgeProfile="BulgedUp" />
                                        </Setter.Value>
                                    </Setter>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="Panel.Background" Value="{x:Static Brushes.LightSkyBlue}" />
            </Style>
        </Button.Style>
    </Button>
</Canvas>

Aquí tienen el botón.

 


Código de ejemplo (comprimido):

 

Fichero con el código de ejemplo: alextaya_xaml1.zip - 1 KB

(MD5 checksum: 64BEE0666741CA47AE1AB4DB269798A1)

 


Ir al índice principal de el Guille