Tips, Tutorial y Truco: Boton con Efecto de Vidrio (Button Glass) en SilverLight

Hola a todos,

Me gustaría compartir este pequeño tutorial de como obtener un botón con efecto de vidrio dándole una vistosidad bastante interesante a la interfaz de usuario.

Para ello me base en un articulo publicado en: http://www.sixin.nl/antoni-dol-blog/09-11-15/Silverlight_Style_GlassBorderStyle.aspx

Y el Código de Ejemplo de este Tutorial esta Aquí y la pagina origina esta Aqui:

Así que ni mas ni mas el truco:

1. Creamos nuestro proyecto en Visual Studio o en Expression Blend (Donde mas guste yo estoy usando Blend a la final el código estará en XAML)

2. Agregamos un botón a nuestro UserControl.

3. Le daremos Botón derecho del mouse sobre el control Button, para seleccionar la opción Editar una Copia. Este paso es si utilizan Expression Blend, para los que usan Visual Studio 2008 todavía no se desesperen ya les pasare el XAML a pegar en su UserControl recuerden que VS2008 no soporta el Diseño de SilverLight en VS 2010 es la misma secuencia que Blend 🙂

4. Saldra una Ventana como esta donde le daremos el nombre a la plantilla y ubicacion a guardar, en nuestro caso sera dentro del mismo UserControl.

5. Este será el Código que veremos al darle aceptar y ubicarnos en el XAML:

6. De ese código a mostrar cambiaremos el seteo de Propiedad del BackGround, Padding, Borderthickness, BorderBrush y agregaremos un Effects:

BackGround:

        <Style x:Key="ButtonGlass" TargetType="Button">
            <Setter Property="Background">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.75,1" StartPoint="0.25,0"> 
                    <GradientStop Color="#33FFFFFF" Offset="0"/> 
                    <GradientStop Color="#C0FFFFFF" Offset="0.287"/> 
                    <GradientStop Color="#4011322D" Offset="0.683"/> 
                    <GradientStop Color="#33FFFFFF" Offset="1"/> 
                </LinearGradientBrush> 
            </Setter.Value>
        </Setter>

Padding y Borderthickness :

            <Setter Property="Padding" Value="5"/>
            <Setter Property="BorderThickness" Value="5"/>

BorderBrush:

           <Setter Property="BorderBrush">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
                        <GradientStop Color="#5811322D" Offset="0"/> 
                        <GradientStop Color="#3EFFFFFF" Offset="0.25"/> 
                        <GradientStop Color="#FFFFFFFF" Offset="0.5"/> 
                        <GradientStop Color="#3EFFFFFF" Offset="0.75"/> 
                        <GradientStop Color="#BFFFFFFF" Offset="1"/> 
                    </LinearGradientBrush> 
                </Setter.Value>
            </Setter>

Effects:

            <Setter Property="Effect"> 
                <Setter.Value> 
                    <DropShadowEffect BlurRadius="3" ShadowDepth="3" Opacity="0.5"/> 
                </Setter.Value> 
               </Setter> 

Ahora al boton sencillamente le aplicaremos este template en la propiedad Style le daremos el nombre del Template (ejemplo Style='{StaticResource ButtonGlass}’):

                   <Button Height="54" HorizontalAlignment="Left" Margin="119,0,0,137" 
                             VerticalAlignment="Bottom" Width="169" Content="Button" 
                             Style='{StaticResource ButtonGlass}'/>

Con esto tenemos lo siguiente:

Aquí les dejo el Código Completo del XAML (UserControl y Template del Boton):

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="DemoGlassButton.MainPage"
    Width="640" Height="480">
    <UserControl.Resources>
        <Style x:Key="ButtonGlass" TargetType="Button">
            <Setter Property="Background">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.75,1" StartPoint="0.25,0"> 
                    <GradientStop Color="#33FFFFFF" Offset="0"/> 
                    <GradientStop Color="#C0FFFFFF" Offset="0.287"/> 
                    <GradientStop Color="#4011322D" Offset="0.683"/> 
                    <GradientStop Color="#33FFFFFF" Offset="1"/> 
                </LinearGradientBrush> 
            </Setter.Value>
        </Setter>
            <Setter Property="Foreground" Value="#FF000000"/>
            <Setter Property="Padding" Value="5"/>
            <Setter Property="BorderThickness" Value="5"/>
            <Setter Property="BorderBrush">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
                        <GradientStop Color="#5811322D" Offset="0"/> 
                        <GradientStop Color="#3EFFFFFF" Offset="0.25"/> 
                        <GradientStop Color="#FFFFFFFF" Offset="0.5"/> 
                        <GradientStop Color="#3EFFFFFF" Offset="0.75"/> 
                        <GradientStop Color="#BFFFFFFF" Offset="1"/> 
                    </LinearGradientBrush> 
                </Setter.Value>
            </Setter>
            <Setter Property="Effect"> 
                <Setter.Value> 
                    <DropShadowEffect BlurRadius="3" ShadowDepth="3" Opacity="0.5"/> 
                </Setter.Value> 
               </Setter> 

            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity">
                                                <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <SplineColorKeyFrame KeyTime="0" Value="#F2FFFFFF"/>
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
                                                <SplineColorKeyFrame KeyTime="0" Value="#CCFFFFFF"/>
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
                                                <SplineColorKeyFrame KeyTime="0" Value="#7FFFFFFF"/>
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
                                                <SplineColorKeyFrame KeyTime="0" Value="#FF6DBDD1"/>
                                            </ColorAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity">
                                                <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
                                                <SplineColorKeyFrame KeyTime="0" Value="#D8FFFFFF"/>
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <SplineColorKeyFrame KeyTime="0" Value="#C6FFFFFF"/>
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
                                                <SplineColorKeyFrame KeyTime="0" Value="#8CFFFFFF"/>
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
                                                <SplineColorKeyFrame KeyTime="0" Value="#3FFFFFFF"/>
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity">
                                                <SplineDoubleKeyFrame KeyTime="0" Value=".55"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity">
                                                <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unfocused"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="Background" Background="White" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3">
                                <Grid Margin="1" Background="{TemplateBinding Background}">
                                    <Border x:Name="BackgroundAnimation" Opacity="0" Background="#FF448DCA"/>
                                    <Rectangle x:Name="BackgroundGradient">
                                        <Rectangle.Fill>
                                            <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                                                <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                                <GradientStop Color="#F9FFFFFF" Offset="0.375"/>
                                                <GradientStop Color="#E5FFFFFF" Offset="0.625"/>
                                                <GradientStop Color="#C6FFFFFF" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Rectangle.Fill>
                                    </Rectangle>
                                </Grid>
                            </Border>
                            <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                            <Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" RadiusX="3" RadiusY="3" IsHitTestVisible="false" Opacity="0"/>
                            <Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1" StrokeThickness="1" RadiusX="2" RadiusY="2" Margin="1" IsHitTestVisible="false" Opacity="0"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="#FFFCFAFA">
        <Button Height="47" Margin="230,158,287,0" VerticalAlignment="Top" Content="Button" Style='{StaticResource ButtonGlass}'/>
    </Grid>
</UserControl>