Vanguarsoft Developers blog

Ing. Javier Leal -Desarrollador CPANAX C.A / Microsoft Student Partners – VENEZUELA

Contenedores en Silverlight Parte I

1 comentario

Buenos dias amigos hoy les traigo una verie de Articulos basados en contenedores en Silverlight, aunque a su vez silverlgiht y su ampliacion en la diversidad de plataformas, como Windows Phone y ahora app. Metro para Windows 8 les sera muy util en todos esos ambitos.

Comenzaremos con el primero de 3.

StackPanel

Canvas

Grid

WrapPanels

Que es el Stackpanel:

Organiza los elementos secundarios en una única línea que se puede orientar horizontal o verticalmente.

Fuente y mas información: http://msdn.microsoft.com/es-es/library/system.windows.controls.stackpanel.aspx

 

Como Trabajar el StackPanel a Nivel de Codigo XAML

<StackPanel></StackPanel>

Este control permite agregar dentro de el cualquier objeto que herede de UIElement y se estara apilando de forma verticar de manera estandar si queremos cambiar la orientacion lo hacemos con su propiedad

<StackPanel Orientation="Horizontal"></StackPanel>

Establecidad la propiedad Orientacion estas ahora se apilaran en forma Horizontal, sus elementos se apilan dentro en forma de pertenencia

<StackPanel Orientation="Horizontal">

<Button Width="20"></Button>

<Rectangle Width="20"></Rectangle>

<Ellipse Width="10" Fill="Aqua"></Ellipse>

</StackPanel>

image

Este contenedor podria encontranse dentro de otro contenedor de cualquier tipo, agregar un stackpanel dentro de Otro Stackpanel y logran y excelente ordenamiento de elementos…

<StackPanelOrientation="Horizontal">

<Button Width="20"></Button>

<Rectangle Width="20"></Rectangle>

<Ellipse Width="10"Fill="Aqua"></Ellipse>

<StackPanel>

<Rectangle Fill="Black" Height="20" Width="30"></Rectangle>

<Button Content="Hola"></Button>

<Ellipse Fill="Aquamarine" Height="20"></Ellipse>

</StackPanel>

</StackPanel>

image

Todos estos Elementos son ejemplos sencillos que nos permites que nuestras interfases grafican esten mejor ordenadas, pero hay algo mucho mas util en el uso de estos contenedores yu es la capacidad de poderlos crear de manera Dinamica a travez de codigo Visual Basic o C shard y ahora eso es a lo que vamos.

Como Trabajar el StackPanel a Nivel de Codigo C Shard

Para trabajar de esta manera hay que tener en cuanto que hay que agregar un contenedor base, Cuando creamos una nueva aplicacion podemos ver que por defecto se crea un Grid llamado LayoutRoot

<UserControl x:Class="DemoContenedores.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d"

    d:DesignHeight="100" d:DesignWidth="200">

 

    <Grid x:Name="LayoutRoot" Background="White">

 

    </Grid>

</UserControl>

A este señor es con el que vamos a agregar dinamicamente nuestros StackPanel.

Agregamos un Boton y nos vamos a su evento click para aca hacer la construccion Dinamica de nuestro StackPanel.

<Grid x:Name="LayoutRoot" Background="White">

    <Button Content="StackPanel Dinamico" Height="20" Name="StackPanelDinamy" Click="StackPanelDinamy_Click" VerticalAlignment="Top" />

</Grid>

Esto es lo unico que estara construido con XAML, ahora todo el resto sera codigo, para agregar un nuevo StackPanel debemos crear una nueva variable de Tipo StackPanel e inicializarla lo hacemos en el evento click del boton que acabamos de crear.

StackPanel Panel = new StackPanel();

Con esta variable panel le podemos comenzar a agregar parametros.

Panel.Orientation = Orientation.Horizontal;

Como pueden ver a diferencia de XAML la propiedad recibe directamente la orientacion pero para efectos directos de codigo recible un Enumerable llamado Orientation que dentro tiene los valores vertical y Horizontal.

Ahora agregemos un boton a este StackPanel.

Button boton = new Button();

boton.Content = "Boton Dinamico";

Panel.Children.Add(boton);

Como pueden ver al igual que el StackPanel agregamos una variable de tipo boton, modificamos su propiedad content y a travez de la propiedad Childern de los contenedores y el metodo Add agregamos nuestro objeto al StackPanel.

Para colocarlo un poco mas interesantes vamos a manejar el evento click de el boton que acabamos de crear solamente agregamos luego del evento click los valores += y presionas dos veces tabulador y automaticamente se creara un nuevo evento que pertenece a ese boton, y agregamos el stackpanel principal de manera global para poder seguir agregando.

StackPanel Panel;

private void StackPanelDinamy_Click(object sender, RoutedEventArgs e)

{

    

    Panel.Orientation = Orientation.Horizontal;

    Button boton = new Button();

    boton.Content = "Boton Dinamico";

    boton.Click += new RoutedEventHandler(boton_Click);

    Panel.Children.Add(boton);

    

}

Le agregamos un elipse y vamos a agregare un Fill.

void boton_Click(object sender, RoutedEventArgs e)

{

    

    Ellipse elipse = new Ellipse();

    elipse.Fill = new SolidColorBrush(Colors.Blue);

    elipse.Width = 20;

    Panel.Children.Add(elipse);

    

}

Como pueden ver agregar un color al fill de un rectangulo tambien recibe un Brush y puedes agregale cualquiera de los que tiene disponible Silverlight entre ellos esta SolidColorBrush al cual le podemos parar el enumerable Colors con una valor que seria el color que elijas.

Para que esto pueda surgir efecto debemos inicializar la variable Panel y agregar el Panel al layoutRoot que es el grid base, lo agregamos ambos debajo del InitializeComponent del constructor de la clase de la pantalla.

public MainPage()

{

    InitializeComponent();

    Panel = new StackPanel();

    LayoutRoot.Children.Add(Panel);

}

Esto al Compilarlo quedaria asi.

image

Al presional sobre el Boton;

image

Al presional sobre el Boton que se acaba de Generar;

image

Cabe destacar que caba ver que se presione el primer se agregara los boton dinamicos, y al presionar cualquiera de los botones dinamicos quese genere hara un ellipse nueva y la agregara

image

Por ultimo si deseas limpiar para iniciar de nuevo  puedes utilizar el siguiente codigo en el evento que tu desees para que se limpie.

Panel.Children.Clear();

Espero que les guste y nos vemos en la Part II.

Autor: Ing. Javier J. Leal H.

Desarrollador en CPANAX C.A, Microsoft Student Partners de Venezuela Amantes de nuevas Tecnologías Desarrollador es Silverlight 5, Windows 8, Windows Phone, Influenciador y Orador en Actividades Tecnológicas Microsoft

Un pensamiento en “Contenedores en Silverlight Parte I

  1. Pingback: Agenda de la Comunidad « MSExpertos

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s