El presente video más que una explicación o enseñar cómo crear algo es una muestra de cómo es la forma de trabajo de Silverlight. y como con poco trabajo se pueden logran resultados elegantes y profesionales, y mas allá de eso, si no solo hablamos de apariencia, sino de funcionalidad, pues decir que los resultados son excelentes.
Lo utilizado para crear aplicaciones en Silverlight es manejar el XAML, lenguaje de etiquetado basado en el estándar XML, también como se comento en el video, trabajamos con Expression Blend 4 y Microsoft Visual Studio 2010. Esta es la primera aplicación que realizo, solo estoy comenzando aprender esta nueva tecnología pero cuando me encuentre mas avanzado en mis estudios estare compartiendo tutoriales interesantes y además colgando proyectos para que lso interesados puedan descargar.
Este es el XAML del proyecto:
1 <UserControl 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 5 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 6 xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input" x:Class="SilverlightPractica1.MainPage" 7 mc:Ignorable="d" d:DesignWidth="380" Background="#FF451515" Width="400" Height="380"> 8 <UserControl.Resources> 9 <Storyboard x:Name="animacionIzquierda"> 10 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="Anim1"> 11 <EasingDoubleKeyFrame KeyTime="0" Value="0"/> 12 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-127"/> 13 <EasingDoubleKeyFrame KeyTime="0:0:0.98" Value="-342.057"/> 14 <EasingDoubleKeyFrame KeyTime="0:0:1.46" Value="1.784"/> 15 </DoubleAnimationUsingKeyFrames> 16 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="Anim3"> 17 <EasingDoubleKeyFrame KeyTime="0" Value="0"/> 18 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-127"/> 19 <EasingDoubleKeyFrame KeyTime="0:0:0.98" Value="-342.057"/> 20 <EasingDoubleKeyFrame KeyTime="0:0:1.46" Value="1.784"/> 21 </DoubleAnimationUsingKeyFrames> 22 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="Anim2"> 23 <EasingDoubleKeyFrame KeyTime="0" Value="0"/> 24 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-175"/> 25 <EasingDoubleKeyFrame KeyTime="0:0:0.96" Value="173.757"/> 26 <EasingDoubleKeyFrame KeyTime="0:0:1.08" Value="135.757"/> 27 <EasingDoubleKeyFrame KeyTime="0:0:1.24" Value="109.775"/> 28 <EasingDoubleKeyFrame KeyTime="0:0:1.42" Value="55.414"/> 29 <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0.414"/> 30 <EasingDoubleKeyFrame KeyTime="0:0:1.72" Value="0.414"/> 31 </DoubleAnimationUsingKeyFrames> 32 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="Anim2"> 33 <EasingDoubleKeyFrame KeyTime="0:0:1.42" Value="0"/> 34 <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="1086.156"/> 35 <EasingDoubleKeyFrame KeyTime="0:0:1.72" Value="1790.737"/> 36 </DoubleAnimationUsingKeyFrames> 37 </Storyboard> 38 </UserControl.Resources> 39 40 <Grid x:Name="LayoutRoot" > 41 <Grid.Background> 42 <LinearGradientBrush EndPoint="-0.757,0.051" StartPoint="0.338,0.891"> 43 <LinearGradientBrush.RelativeTransform> 44 <TransformGroup> 45 <ScaleTransform CenterY="0.5" CenterX="0.5"/> 46 <SkewTransform CenterY="0.5" CenterX="0.5"/> 47 <RotateTransform CenterY="0.5" CenterX="0.5"/> 48 <TranslateTransform X="0.562" Y="0.359"/> 49 </TransformGroup> 50 </LinearGradientBrush.RelativeTransform> 51 <GradientStop Color="Black"/> 52 <GradientStop Color="#FF20B45F" Offset="1"/> 53 <GradientStop Color="#FF09341B" Offset="0.401"/> 54 <GradientStop Color="#FF136F3A" Offset="0.763"/> 55 </LinearGradientBrush> 56 </Grid.Background> 57 <dataInput:Label Height="30" Margin="89,8,73,0" VerticalAlignment="Top" Foreground="#FFEDF9F6" BorderBrush="#FF9FE4E9" Content="Validacion de Usuario" FontSize="21.333" FontFamily="Harrington" FontWeight="Bold"/> 58 <dataInput:Label Height="30" Margin="37,70,0,0" VerticalAlignment="Top" Foreground="#FFEDF9F6" BorderBrush="#FF9FE4E9" Content="Nombre:" FontSize="21.333" FontFamily="Harrington" HorizontalAlignment="Left" Width="99"/> 59 <dataInput:Label Margin="37,118,0,137" Foreground="#FFEDF9F6" BorderBrush="#FF9FE4E9" Content="Contraseña:" FontSize="21.333" FontFamily="Harrington" HorizontalAlignment="Left" Width="114"/> 60 <PasswordBox x:Name="CajaPasword" Margin="167,167,53,184" FontSize="18.667" ToolTipService.ToolTip="Escriba Su Contraseña"> 61 <PasswordBox.Foreground> 62 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 63 <GradientStop Color="Black" Offset="0"/> 64 <GradientStop Color="#FF208079" Offset="1"/> 65 </LinearGradientBrush> 66 </PasswordBox.Foreground> 67 <PasswordBox.Background> 68 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 69 <GradientStop Color="Black" Offset="0"/> 70 <GradientStop Color="White" Offset="0.388"/> 71 </LinearGradientBrush> 72 </PasswordBox.Background> 73 </PasswordBox> 74 <TextBox x:Name="CajaNombre" Height="30" Margin="167,70,53,0" TextWrapping="Wrap" VerticalAlignment="Top" FontFamily="Ravie" FontSize="13.333" ToolTipService.ToolTip="Escriba su Nombre de Usuario" Text="felix hernandez"> 75 <TextBox.Background> 76 <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0"> 77 <GradientStop Color="Black"/> 78 <GradientStop Color="#FFF9EDED" Offset="0.349"/> 79 </LinearGradientBrush> 80 </TextBox.Background> 81 <TextBox.Foreground> 82 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 83 <GradientStop Color="Black" Offset="0"/> 84 <GradientStop Color="#FF208079" Offset="1"/> 85 </LinearGradientBrush> 86 </TextBox.Foreground> 87 </TextBox> 88 <Button x:Name="BotonEntrar" Content="Validar" Height="32" Margin="37,0,0,69" VerticalAlignment="Bottom" FontFamily="Ravie" Background="#FF1794FD" HorizontalAlignment="Left" Width="131"> 89 <Button.Foreground> 90 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 91 <GradientStop Color="Black" Offset="0"/> 92 <GradientStop Color="#FF208079" Offset="1"/> 93 </LinearGradientBrush> 94 </Button.Foreground> 95 </Button> 96 <Ellipse x:Name="Anim1" HorizontalAlignment="Left" Height="23" Margin="0,0,0,9" Stroke="Black" VerticalAlignment="Bottom" Width="23" RenderTransformOrigin="0.5,0.5"> 97 <Ellipse.RenderTransform> 98 <TransformGroup> 99 <ScaleTransform/> 100 <SkewTransform/> 101 <RotateTransform/> 102 <TranslateTransform/> 103 </TransformGroup> 104 </Ellipse.RenderTransform> 105 <Ellipse.Fill> 106 <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0"> 107 <GradientStop Color="Black" Offset="1"/> 108 <GradientStop Color="#FF78BC79" Offset="0.539"/> 109 </LinearGradientBrush> 110 </Ellipse.Fill> 111 </Ellipse> 112 <Ellipse x:Name="Anim2" Height="23" Margin="180,0,177,9" Stroke="Black" VerticalAlignment="Bottom" RenderTransformOrigin="0.5,0.5" Width="23"> 113 <Ellipse.RenderTransform> 114 <TransformGroup> 115 <ScaleTransform/> 116 <SkewTransform/> 117 <RotateTransform/> 118 <TranslateTransform/> 119 </TransformGroup> 120 </Ellipse.RenderTransform> 121 <Ellipse.Fill> 122 <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0"> 123 <GradientStop Color="Black" Offset="1"/> 124 <GradientStop Color="#FF78BC79" Offset="0.539"/> 125 </LinearGradientBrush> 126 </Ellipse.Fill> 127 </Ellipse> 128 <Ellipse x:Name="Anim3" HorizontalAlignment="Right" Height="23" Margin="0,0,0,9" Stroke="Black" VerticalAlignment="Bottom" Width="23" RenderTransformOrigin="0.5,0.5"> 129 <Ellipse.RenderTransform> 130 <TransformGroup> 131 <ScaleTransform/> 132 <SkewTransform/> 133 <RotateTransform/> 134 <TranslateTransform/> 135 </TransformGroup> 136 </Ellipse.RenderTransform> 137 <Ellipse.Fill> 138 <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0"> 139 <GradientStop Color="Black" Offset="1"/> 140 <GradientStop Color="#FF78BC79" Offset="0.539"/> 141 </LinearGradientBrush> 142 </Ellipse.Fill> 143 </Ellipse> 144 </Grid> 145 </UserControl> 146
Ahora, como siempre pueden Descargar el Proyecto para que jueguen un poco:
