kineck y Realidad Aumentada – TecnoNoticias

Hace poco instantes veo un articulo sobre Kinect y realidad aumentada y me sorprendio es algo de verdad increible lo que se puede lograr no es la primera vez que he visto demostraciones de realidad aumentada con tecnologia Kinect pero esto si que me sorprendio, este proyecto de la Univerdad de Califormia añade agua y crea paisajes solo con una caja de arena. es increible lo pueden ver en vivo con este video espero les gusto… desde hoy abro en mi blog uan seccion de TecnoNoticias para estas areas.

Vean el video aca:

http://www.youtube.com/watch?feature=player_embedded&v=j9JXtTj0mzE

Marketplace de Windows Phone Disponible para Venezuela

Si estas desarrollando para Windows Phone te tengo una excelente noticia, ya para Venezuela esta disponible el Markectplace, Me disculpo por que antes habia informado que se podrás subir aplicaciones pero aun no esta disponible subir aplicaciones si no descargarla, pero a pesar de todo ello es un muy importante mensaje que demuestra que falta poco para que des arrolladores de Windows Phone en Venezuela pueda subir y ganar dinero con sus aplicaciones.

En caso de que no los hayan probado, buscar y comprar aplicaciones en Marketplace en web es una alternativa sencilla y conveniente para tu teléfono. Si son nuevos en Windows Phone, aquí un pequeño tutorial para ver cómo trabaja.

Puedes Ver el nuevo MarketPlace AQUI: http://www.windowsphone.com/eS-VE/marketplace

Aunque no este disponible subir apps es la hora de que empieces a desatollar tus aplicaciones si eres desarrollador ya que falta poco o ya puedes empezar a descargar las aplicaciones que desees si eres usuario.

Ya Windows Phone tiene marca Venezolana:

Fuente: http://goo.gl/EpblK

Propiedades Dependientes para tus controles en Silverlight

En Silverlight al momento de querer crear una propiedad de Dependencia de manera que se pueda hacer un Binding de datos y Mostrar los valores directamente desde XAML se realiza de la siguiente manera:

Para Iniciar vamos a agregar un nuevo proyecto, y luego agregamos un nuevo User dControl a la solución siendo el segundo proyecto el control que queremos construir y el primero la aplicación donde haremos uso del mismo.

Construí Un pequeño control usando canvas y agregándole sus propiedades X y Y, cree un rectángulo color azul que se mostrara según en el canvas en las posiciones que nos digas la propiedad X y Y.

CODIGO DEL CONTROL A APLICAR EL EJEMPLO

public partial class ControlCanvas : UserControl

    {

        Rectangle CursorCanvas;

        public ControlCanvas()

        {

            InitializeComponent();

            CursorCanvas = new Rectangle();

            CursorCanvas.Width = 10;

            CursorCanvas.Height = 10;

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

        }

        public double X 

        {

            get 

            {

                return Canvas.GetLeft(Cursor);

            }

            set 

            {

                Canvas.SetLeft(Cursor,value);

                MovilObject.Children.Clear();

                MovilObject.Children.Add(Cursor);

            }

        }

        public double Y

        {

            get

            {

                return Canvas.GetTop(Cursor);

            }

            set

            {

                Canvas.SetTop(Cursor, value);

                MovilObject.Children.Clear();

                MovilObject.Children.Add(Cursor);

            }

        }

    }

Donde MovilObject Es un Canvas colocado en la Pantalla del UserdControl.

Si quisiera hacer una animación con estas dos propiedades o Simplemente Hacer Un Binding para enlazarla a datos no lo permitiría por que sencillamente estas propiedades X y Y no son del Tipo Propiedad Dependiente.

Ahora es muy importante que sepas como hacer que tus propios controles tengas sus propiedades dependientes por lo tanto vamos a seguir los pasos necesarios.

PASO 1.

Prácticamente necesitaremos dos propiedades Dependientes una para X y otra para Y, para construir la primera debemos seguir las reglas de una propiedad dependiente que comienza con el Modificador de Acceso Publico (Public), esta propiedad deber ser estatica (Static), también debe ser de solo lectura (readonly) de Tipo de datos (DependecyProperty), luego viene el nombre de la propiedad seguida del sufijo (Property) es decir NombrePropiedad + Property vamos a colocar lo que acabamos de describir para las propiedades X Y Y.

public static readonly DependencyProperty XProperty

        public static readonly DependencyProperty YProperty

PASO 2.

Luego hay que registrar esta propiedad a través de la propiedad register de la clase dependencyProperty y agregarnos los parámetros que exige que son: Nombre de la propiedad, Tipo de datos, Tipo del Dueño y la Medatada que es lo que va a hacer esa propiedad a medida que cambie de valor, lo que tenemos antes lo igualamos al valor que deseamos tomando en cuanta que la ultima propiedad puede ser valor null si lo deseas pero debemos programarla porque de lo contrario si hacemos una animación esta no funcionara.

public static readonly DependencyProperty XProperty = DependencyProperty.Register("X",typeof(double),typeof(ControlCanvas),null);

public static readonly DependencyProperty YProperty = DependencyProperty.Register("Y", typeof(double), typeof(ControlCanvas), null);

Antes de crear el código de la metadata vamos a agregar a nuestras propiedades que ya existen en el proyecto le borraremos todo lo que contiene en sus métodos get y Set, y como nuestra clase que hereda ya de userdControls ya de por si es de tipo dependencyProperty de lo contrario tendríamos que implementar la interfaz de propiedad dependientes para tener acceso a los métodos getValue y SetValue,

PASO 3.

En el Get de cada propiedad hará un return llamando a la propiedad GetValue y asignándole a sus parámetros el nombre de la clase tu control con el nombre de la propiedad dependiente que acabamos de crear para dicha propiedad lo que retorne debemos hacerle un cast al valor que este devuelve que este caso en un Double, para el Set llamamos a la propiedad SetValue y recibe como parámetros igual que el GetValue el nombre de la clase dueña de la propiedad dependiente con el nombre de la propiedad dependiente que creamos para dicha propiedad esto quedaría asi para ambas propiedades.

public double X 

        {

            get 

            {

                //return Canvas.GetLeft(Cursor);

                return (double)GetValue(ControlCanvas.XProperty);

            }

            set 

            {

                //Canvas.SetLeft(Cursor,value);

                //MovilObject.Children.Clear();

                //MovilObject.Children.Add(Cursor);

                SetValue(ControlCanvas.XProperty,value);

            }

        }

        public double Y

        {

            get

            {

                //return Canvas.GetTop(Cursor);

                return (double)GetValue(ControlCanvas.YProperty);

            }

            set

            {

                //Canvas.SetTop(Cursor, value);

                //MovilObject.Children.Clear();

                //MovilObject.Children.Add(Cursor);

                SetValue(ControlCanvas.YProperty,value);

            }

        }

Se coloco en comentario en valor como estaban anteriormente.

PASO 4.

Para poder animar este control debemos agregar la metadata para capturar los cambios de valor entonces al momento de crear la propiedad dependiente en el parámetro metadatata hacemos una nueva instancia de PropertyMetadata y como parámetro le agregamos una instancia del delegado PropertyChangeCallBack como se trata de un delegado podemos hacerle una expresión lambda para capturar la propiedad de cambio le agregamos a sus parámetros y entre paréntesis dos valores que representara en sender y el EventArt seguido de un igual mas un signo mayor que y abrimos y cerramos paréntesis seguido de un punto y coma, cerramos todos los paréntesis pendientes por cerrar y dentro de este evento colocaremos lo que queramos que ocurra en este control al cambiar dicho valor mientras tantos mostraremos como vamos.

public static readonly DependencyProperty XProperty = DependencyProperty.Register("X",typeof(double),typeof(ControlCanvas),new PropertyMetadata(new 

            PropertyChangedCallback((s,a) =>

            {

            }

            )));

        public static readonly DependencyProperty YProperty = DependencyProperty.Register("Y", typeof(double), typeof(ControlCanvas), new PropertyMetadata(new

            PropertyChangedCallback((s, a) =>

            {

            }

            )));

PASO 5

A cada una de las propiedades se le puede capturar en Sender y del EventArt se puede capturar la propiedad NewValue esta trae el nuevo valor que ha sido asignado dicha propiedad y solo colocamos el código que anteriormente estaba en los set de cada propiedad luego de recibir el NewValue Quedando de esta manera.

public static readonly DependencyProperty XProperty = DependencyProperty.Register("X",typeof(double),typeof(ControlCanvas),new PropertyMetadata(new 

    PropertyChangedCallback((s,a) =>

    {

        ControlCanvas senser = s as ControlCanvas;

        Canvas.SetLeft(senser.CursorCanvas,(double)a.NewValue);

        senser.MovilObject.Children.Clear();

        senser.MovilObject.Children.Add(senser.CursorCanvas);

    }

    )));

public static readonly DependencyProperty YProperty = DependencyProperty.Register("Y", typeof(double), typeof(ControlCanvas), new PropertyMetadata(new

    PropertyChangedCallback((s, a) =>

    {

        ControlCanvas senser = s as ControlCanvas;

        Canvas.SetTop(senser.CursorCanvas, (double)a.NewValue);

        senser.MovilObject.Children.Clear();

        senser.MovilObject.Children.Add(senser.CursorCanvas);

    }

    )));

Una vez listo nuestro control con propiedades Dependientes implementadas ya podemos usar nuestro control, hacerle Binding a sus propiedad e Incluso animarla veamos la prueba.

Agreguemos como referencia la DLL que genero nuestro control o bien sea hacer la referencia al proyecto que pudiste construir.

En el MainPage de tu nuevo proyecto agregar la referencia directo desde XAML y agregar el control en el Grig principal. Puedes agregar algunos valores de prueba para ver que funcione perfectamente.

Ahora la primera prueba es ver si se le puede hacer Binding, para probarlo colocaremos dos slider uno para X y otro Para Y y enlazaremos los datos de cada slider en cada propiedad. Si puedes ver en nuestro nuevo control puedes visualizar las propiedades que nosotros programamos y las puedes enlazar con el pequeño punto negro que vez en pantalla.

Una vez presionado buscas el elemento al que quieres hacer enlace que puede ser su datacontex, un elemento, y valor relativo o un valor estático, en este caso elegiremos ElemenName para X elegiremos el SliderX que como pueden ver en la imagen anterior agregó en pantalla colocándole un Maximum de 1000.

Luego de elegir el nombre del elemento que es el Source ahora viene el Path que seria la propiedad de ese elemento en la cual va a estar enlazada que seria valué.

Pueden ver que funciona perfectamente si lo compilan gracias a las propiedades dependientes que me permiten Agregarle un enlace a datos.

La segunda prueba es que esas propiedades puedan ser animadas lo único que haremos es un StoryBoard Agregamos una animación bien simple para ambas propiedades para ellos debimos colocarle un nombre a nuestro control que en este caso le colocamos cc1 y las invocamos luego del InitianComponet de codeBehing de la pagina Mainpage.

<UserControl.Resources>

    <Storyboard x:Key="AnimateX">

        <DoubleAnimation From="0" To="500" Duration="00:00:05" Storyboard.TargetName="cc1" Storyboard.TargetProperty="X"></DoubleAnimation>

        <DoubleAnimation From="0" To="800" Duration="00:00:05" Storyboard.TargetName="cc1" Storyboard.TargetProperty="Y"></DoubleAnimation>

    </Storyboard>

</UserControl.Resources>

Ustedes no la prueden ver pero yo si se ha logrado hacer una animación con propiedades que hemos creado propiamente con nuestros propios controles gracias a las propiedades dependientes.

Obviamente los Slider dejaron de funcionar debido a que las animaciones tienen más precedencia que las propiedades enlodazada por Binding. Esto es todo espero que les guste.. y sea de mucha utilidad.

Codigo completo: http://sdrv.ms/IxU5ct

Utilidad de Expressiones Lambda en Silverlight

Muchos desarrolladores quiza han tendido a tener un poco de confunciones en lo que son las expressiones lambda por ellos aqui explico las diferentes maneras de unvocar un evento y la utilidad en aplicaciones silverlight.

Definicion:

"Una expresión lambda es una función anónima que puede contener expresiones e instrucciones y se puede utilizar para crear delegados o tipos de árboles de expresión"

Normalmente cuando queremos hacer un boton que tenga una funcion especifica simplemente lanzamos el boton a la pantalla y le damos soble click y ya podemos escribir el codigo del evento click, o nos vamos a propiedades eventos, seleccionamos el evento que deseamos doble click y ya tenemos el codigo.

En silverligh cuando ya entramos en un nivel mal alto de desarrollo en algun momento les tocara hacer codigo dinamico, donde el boton o el objeto ya no esta en pantalla ni podemos hacerle click ni eliges su evento sino que hacer directamente desde codigo un ejemplo sencillo es tenemos un nuevo proyecto.

Y queremos agregar un boton en pantalla de manera dinamica y al presionar click hacer un evento muy simple de esta manera hariamos el boton.

public partial class MainPage : UserControl

{

    public MainPage()

    {

        InitializeComponent();

        Button DinamyButton = new Button();

        DinamyButton.Height = 100;

        DinamyButton.Width = 100;

        DinamyButton.Content = "Boton Dinamico";

        LayoutRoot.Children.Add(DinamyButton);

    }

}

Con este codigo ya tenemos agregado a nuestra pantalla un toton de manera dinamico directo desde codigo sin diseñador aqui para nanejar los eventos existen dos maneras de que de este objeto o clase de tipo boton poder agregar una expression lambda para cualquier de sus eventos.

PRIMERA OPCION

Llamar al evento click agregar los valores += y presionar dos veces tabulador automaticamente se creara el evento en la clase actual.

public MainPage()

{

    InitializeComponent();

    Button DinamyButton = new Button();

    DinamyButton.Height = 100;

    DinamyButton.Width = 100;

    DinamyButton.Content = "Boton Dinamico";

    DinamyButton.Click +=new RoutedEventHandler(DinamyButton_Click);

    LayoutRoot.Children.Add(DinamyButton);

}

void DinamyButton_Click(object sender, RoutedEventArgs e)

{

    throw new NotImplementedException();

}

Ya sabemos que hacer con el nuevo metodo que se agrego recibiendo un sender y un EventArt

SEGUNDA OPCION

Al igual que la forma anterior usamos el += pero en vez de presionar tabulador agregamos entre parendersis dos variables separadas por coma, estas variables normalmente son s,e donde s es de sender y e de EventArt luego de estas variables se coloca => mas las llaves que lleva todo evento cerradas por un punto y coma y ya dentro de las llaves agregamos nuestro evento quedaria asi..

public MainPage()

{

    InitializeComponent();

    Button DinamyButton = new Button();

    DinamyButton.Height = 100;

    DinamyButton.Width = 100;

    DinamyButton.Content = "Boton Dinamico";

    DinamyButton.Click += (s, a) => 

    { 

        //codigo del evento del  boton

    };

    LayoutRoot.Children.Add(DinamyButton);

}

No solamente las expressiones lambda nos sirven para esto sino para un gran numero de ocaciones mas sin embargo el enfoque del articulo fue en silverlight pero aqui les dejo un material mas completo.

Forma de las expresiones lambda

Las expresiones lambda en C# se escriben según el patrón descrito a continuación, al que le siguen algunos ejemplos que lo ilustran e introducen algunas particularidades.

Forma general: parámetros => expresión, donde:
- parámetros: lista de parámetros separados por comas
- "=>" : separador.
- expresión: implementación de las operaciones a realizar

num => num * 2     // Lambda con un parámetro que retorna                   

                   // el doble del valor que se le pasa.

(a, b) => a + b    // Lambda con dos parámetros que retorna                   

                   // la suma de ambos

.num => {                     // Lambda con cuerpo que recibe un    

int x = new Random().Next();  // entero, y retorna la suma de éste   

return num+x;                 // con un número aleatorio.

}

() => DateTime.Now    // Lambda que no recibe parámetros                   

                      // y retorna la fecha y hora del sistema.

msg => Console.WriteLine(msg); // Recibe un parámetro, realiza una                                

                               // acción y no retorna nada.

Ganadores Imagine Cup 2012

Estudiantes de la Universidad Católica Andrés Bello representarán a Venezuela en la Copa de la Imaginación 2012

El proyecto identificado con el seudónimo “Arbel”, presentado por el equipo de la Universidad Católica “Andrés Bello” (UCAB) obtuvo el primer lugar en el concurso académico Copa de la Imaginación 2012, competencia organizada por Microsoft con el objetivo de estimular entre los estudiantes universitarios el desarrollo de proyectos innovadores orientados a mejorar la calidad de vida de las personas a través de la tecnología.

El proyecto ganador “Arbel”, es un sistema desarrollado para ir más allá de apoyar la educación innovadora, utilizando tecnología de punta. Con Arbel, un profesor puede dictar su clase, pero sin el uso de una pizarra tradicional. En lugar de eso, sólo es necesario un proyector (vdeobeam) y una computadora. El profesor no tiene que llevar rotuladores, sólo un LED Pen, ya que esto es lo que necesita para interactuar con la aplicación que se proyecta, las cuales hace las funciones de una pizarra virtual interactiva. Entre otra de sus características, Arbel cuenta con una aplicación móvil para Windows Phone, que le permite a estudiantes y profesores acceder a las funcionalidades de información básica como calendario, materias, entre otros.

En esta final nacional de la Copa de la Imaginación, participaron en buena lid, los proyectos de la Universidad Central de Venezuela y la Universidad “Nueva Esparta”. Según los miembros del jurado multidisciplinario, la decisión final fue muy cerrada ya que los 3 equipos realizaron un gran esfuerzo para el desarrollo de sus propuestas, las cuales se identificaron por su alto valor creativo y de amplia funcionalidad para la solución de varios retos asociados a innovación, especialmente en el área académica declaró Sara Linares, gerente de Audiencias Técnicas de Microsoft Venezuela y representante del jurado evaluador.

Binding Convirtiendo boolean a Visibility en Silverlight

i i Hola amigos me tope con este problema en uno de mis desarrollos y quisiera compartirlo, Muchos saben que hay propiedades a la cual requerimos hacerle un Binding pero no es posible debido a que no es de tipo dependecyProperty, es decir, no es una propiedad de dependencia por lo tanto no se le puede hacer un Binding en el Caso de la propiedad Visibility presente y todos los objetos visuales se puede utilizar un Bool para lorar esta funcionalidad.

1.- Lo primero es crear un nuevo proyecto y crearemos un nueva clase con el nombre que tu desees, en mi caso le colocare BoolToVisibitity y agregamos el siguiente codigo.

using System.Windows.Data;

using System;

using System.Windows;

namespace UtilidadesDemo.Tools

{

    public class BoolToVisibitity : IValueConverter

    {

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

        {

            bool visibility = (bool)value;

            return visibility ? Visibility.Visible : Visibility.Collapsed;

        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

        {

            Visibility visibility = (Visibility)value;

            return (visibility == Visibility.Visible);

        }

    }

}

Esta clase como ven implementa la interfaz con metodos como convert y ConverBlack para el caso contrario de convertir de Visibility a bool, a pesar que visibility tiene 3 valores el toma como true Visible y Como Flase Collapsed.

2.- Como segundo paso Instanciomos el Namespace Utilizado en la clase anterior y agregamos al Resourse de la pagina donde deseas hacer la conversion agregando un Key.

<UserControl.Resources>

    <Utils:BoolToVisibitity x:Key="ConvertBoolToVisibility"/>

</UserControl.Resources>

Si deseas tambien puedes agregarlo en el App de namera de que este disponible para toda la aplicacion.

3.- Como ejemplo Agregaremos el ViewModel de MainPage, Agreremos un Boton y un RadionButton, en El ViewModel Agregamos una Propiedad Bool Llamada IsVisible.

private bool _isVisible;

public bool IsVisible

{

    get { return _isVisible; }

    set { _isVisible = value; RaisePropertyChanged("IsVisible"); }

}

4.- Agrega el Codigo XAML Binding a la propiedad visibiliti de esta forma

<Button Content="Visible" Grid.Column="1"  Margin="50" Name="button1" Visibility="{Binding Path=IsVisible, Converter={StaticResource ConvertBoolToVisibility}}" />

Aca el codigo completo de la pantalla resaltando puntos importante para la implementacion de este codigo.

<UserControl x:Class="UtilidadesDemo.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"

    xmlns:Utils="clr-namespace:UtilidadesDemo.Tools"

             xmlns:base="clr-namespace:UtilidadesDemo"

    mc:Ignorable="d"

    d:DesignHeight="300" d:DesignWidth="400">

    <UserControl.Resources>

        <Utils:BoolToVisibitity x:Key="ConvertBoolToVisibility"/>

    </UserControl.Resources>

    <UserControl.DataContext>

        <base:MainPageViewModel/>

    </UserControl.DataContext>

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

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="79*" />

            <ColumnDefinition Width="321*" />

        </Grid.ColumnDefinitions>

        <Button Content="Visible" Grid.Column="1"  Margin="50" Name="button1" Visibility="{Binding Path=IsVisible, Converter={StaticResource ConvertBoolToVisibility}}" />

        <CheckBox Content="Visible" IsChecked="{Binding Path=IsVisible, Mode=TwoWay}"/>

    </Grid>

</UserControl>

Resultados.

Espero que les sea de mucha utilidad.

Contenedores en Silverlight Parte I

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>

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>

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.

Al presional sobre el Boton;

Al presional sobre el Boton que se acaba de Generar;

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

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.