Tips Arrastrar y Soltar (Drap and Drop) con SilverLight 4

Hola a todos..

Como ya sabrán hace poco anunciaron la beta de SilverLight 4, y con eso han surgido muchos demos yo no dejare de ser uno de los que muestre un demo 🙂 así que les explicare que como hacer el Drap and Drop (Arrastrar y Soltar) en nuestras aplicaciones de SilverLight.

1. La definición explicada por Rodrigo Díaz Concha en su pagina esta mas que genial así que hago referencia a su post: http://rdiazconcha.com/?p=487

Silverlight 4 cuenta con soporte de arrastrar uno o varios archivos desde afuera de la aplicación hacia adentro de ella y soltarlo(s) para poder leer su información y contenido.  Esta característica nos permite como desarrolladores crear mejores Experiencias para los Usuarios ya que evitan el número de cajas de diálogo y clics para abrir o leer un archivo o conjunto de archivos.

2. Abrimos nuestro Visual Studio 2010 Beta2 (el que estoy usando para esta explicación) y creamos una Aplicación SilverLight y le llamaremos Drap_and_Drop

 

Entra en Tips Arrastrar y Soltar (Drap and Drop) con SilverLight 4 para ver el resto de la publicacion con imagenes y codigo..!!

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.

Captura1

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 🙂

Captura2

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.

Captura3

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

Captura4

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:

image

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>

SilverLight 4 Beta: Nuevas Caracteristicas

Hola,

Gracias al Twitter logre enterarme de la salida de la beta de SilverLight 4 (lo hicieron publico en la Conferencia de desarrolladores de Professional de Microsoft (PDC), donde Scott Guthrie dio la gran noticia) cosa que me llama full la atención ya que incorpora una serie de funcionalidades súper excelentes que empezare a nombrar a continuación:

General

  1. Soporte de impresión
  2. Diseño implícita
  3. Soporte WebCam/micrófono
  4. Control de RichTextArea
  5. Eventos de botón derecho del ratón
  6. Acceso al Portapapeles
  7. Soporte UDP/multicast en red
  8. Hospedaje de HTML dentro de Silverlight 4
  9. Brocha HTML
  10. Acceso a Archivos Locales
  11. ViewBox
  12. Soporte para Google Chrome

Fuera de las mejoras de explorador

  1. Elevación de confianza  del control WebBrowser la ventana de notificación de Windows (por ejemplo, Outlook popup)
  2. Integración de COM

Mejoras de enlace de datos

  1. Enlace a DependencyObjects (utilizado para ser FrameworkElement)
  2. Extensión de marcado de StringFormat
  3. Extensión de marcado de TargetNullValue
  4. Extensión de marcado de FallbackValue
  5. Soporte para IDataErrorInfo y INotifyDataErrorInfo nueva para la generación de informes de errores de validación.
  6. Enlace a la cadena indizadores
  7. Soporte de GroupDescription en CollectionViewSource para la agrupación simplificada.

Quieres saber un poquito mas entra en: http://bit.ly/3UdQzS