agregando graficos
En Silverlight, se puede añadir gráficos mediante el uso de las clases de formas. Puede crear formas simples, como rectángulos, o formas más complejas, tales como polígonos. Los cepillos se utilizan para objetos de color o pintura en Silverlight.
Vamos a empezar por la adición de un StackPanel alrededor del TextBlock. Un panel es un contenedor que se utiliza para agrupar y diseñar los elementos de interfaz de usuario. Cada aplicación debe tener al menos un panel. Un StackPanel expone cada elemento, uno tras otro, ya sea vertical u horizontal, dependiendo de la orientación. Paneles Grid y Canvas permite un posicionamiento más exacto de los elementos.
La forma que va a crear es una elipse. La Elipse aparecerá después de que el TextBlock en el StackPanel. Se especifica la altura de la elipse, así como el relleno. Para el relleno, se debe especificar un pincel para pintar la elipse.
En lugar de utilizar la vista Diseño, en esta ocasión vamos a trabajar en la vista XAML.
- Cierre la ventana Toolbox.
- En la vista XAML, busque el TextBlock que ha agregado.
- Remplace el elemento TextBlock con el siguiente código XAML.
XAML
<StackPanel>
<TextBlock FontSize="50" Text="Hello, World!" />
<Ellipse Fill="Blue" Height="150" Width="300"
Name="FirstEllipse" />
</StackPanel>
- Presione F5 para correr la aplicación.
La siguiente imagen del emulador muestra la aplicación hasta ahora. No hay interacción con el usuario, sin embargo, por lo que no hace mucho, pero vamos a añadir más controles que viene.
- Para detener el debugging, seleccione Debug->Stop Debugging.
agregando un boton
Lo siguiente que vamos a añadir a su aplicación es un control de botón. Los controles son una manera los usuarios pueden interactuar con las aplicaciones de Silverlight. Silverlight tiene una rica biblioteca de controles que incluye un botón, un cuadro de texto, ListBox, y muchos más.
Hay dos partes a la adición de un botón. La primera parte consiste en añadir un elemento de botón para el XAML. La segunda parte consiste en añadir un poco de lógica para la gestión de eventos generados por la interacción del usuario, como hacer clic en el botón.
- En la vista XAML, agregue el siguiente XAML despues del tag <Ellipse />.
XAML
<Button Height="150"
Width="300"
Name="FirstButton"
Content="Tap" />
El atributo Name le da al botón de un valor de nombre de "FirstButton", de modo que usted puede tener acceso al botón del código. El Contentattribute especifica el texto que aparece en el botón. Los atributos de altura y ancho de especificar la altura y la anchura del botón.
Silverlight es un modelo de aplicación orientada a eventos. Cuando ocurren ciertas cosas en su aplicación, como por ejemplo un usuario hace clic en un Buttonor se carga la aplicación, se genera un evento. Puede agregar código, denominado controlador de eventos, que hace algo cuando ocurre un evento. Vamos a añadir un controlador de eventos para el evento Click.
Visual Studio puede crear manipuladores de eventos por ti
- En vista de diseño, selecciona el boton.
- En la ventana de propiedades, click el tab Events. Aparecera una lista de eventos para el boton.
- Doble-click en el evento Click.
El archivo MainPage.xaml.cs se abre y usted debería ver el controlador de eventos FirstButton_Click.
- Dentro de las llaves, agregue el siguiente código al controlador de eventos.
C#
private void FirstButton_Click(object sender, RoutedEventArgs e)
{
if (FirstButton.Content as string == "Tap")
{
FirstButton.Content = "Tap Again";
}
else
{
FirstButton.Content = "Tap";
}
}
Visual Basic
Private Sub FirstButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
If (CType(FirstButton.Content,String) = "Tap") Then
FirstButton.Content = "Tap Again"
Else
FirstButton.Content = "Tap"
End If
End Sub
El evento
FirstButton_Click ejecuta la siguiente accion. Cuando al boton se le da click, el texto que se muestra en el botón alterna entre "Tap" y "Tap Again".
- Presiona F5 para correr la aplicacion.
La muestra en vivo se muestra el controlador de eventos click. Para tratar de esta muestra en vivo, haga clic en el botón.
En el XAML para el boton, note que un atributo Click ha sido agregado.
XAML
<StackPanel>
<TextBlock FontSize="50" Text="Hello, World!" />
<Ellipse Fill="Blue" Height="150" Width="300"
Name="FirstEllipse" />
<Button Height="150"
Width="300"
Content="Tap"
Name="FirstButton"
Click="FirstButton_Click" />
</StackPanel>
No hay comentarios:
Publicar un comentario