Juanma Santoyo

En ocasiones me llaman friki

Introducción al componente ScatterView de Surface (2: ScatterViews con C#)

| No hay comentarios

Ya hemos visto como podemos usar los ScatterView a base de XAML, pero muchas veces vamos a tener la necesidad de tratarlos desde C#.

En este artículo, veremos cómo podemos trabajar con ScatterViews de forma dinámica.

Preparamos el proyecto

Antes de iniciar el Visual Studio, debemos haber iniciado el emulador de Surface que viene con el SDK. Si no lo has hecho así, cierra el Visual Studio y inícialo todo en el orden correcto.

Usaremos el proyecto HelloScatterView que creamos en el primer artículo, y crearemos una nueva ventana XAML llamada “CSharpSample“. Tendremos que modificar el archivo App.xml (atrubito StartupUri) para que inicie la aplicación en la nueva ventana.

ScatterViews simples con C#

Vamos a considerar un XAML muy básico, sin ScatterViewItems. Sí que vamos a añadir tres botones que nos proporcionarán un mínimo de funcionalidad.

	<s:SurfaceWindow 
		x:Class="HelloScatterView.SurfaceWindow1"
		xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
		xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
		xmlns:s="http://schemas.microsoft.com/surface/2008"
		Title="HelloScatterView">

		<s:SurfaceWindow.Resources>
			<ImageBrush x:Key="WindowBackground" 
					  Stretch="None" Opacity="0.6" 
					  ImageSource="pack://application:,,,/Resources/WindowBackground.jpg"/>
		</s:SurfaceWindow.Resources>

		<DockPanel>
			<UniformGrid Background="Black" Height="50" DockPanel.Dock="Top" Columns="3">
				<s:SurfaceButton Content="Add" Click="Add" Foreground="White"/>
				<s:SurfaceButton Content="Remove" Click="Remove" Foreground="White"/>
				<s:SurfaceButton Content="Clear" Click="Clear" Foreground="White"/>
			</UniformGrid>
			<s:ScatterView x:Name="Scatter"/>
		</DockPanel>
	</s:SurfaceWindow>

Por ahora esto es todo el XAML que vamos a usar. La parte importante del código, la hacemos desde C#, en el archivo CSharpSample.xaml.cs.

Antes de continuar vamos a dejar claro que hará cada botón:

  • El botón Add añadirá un ScatterViewItem con una de las imágenes (se seguirá un orden cíclico).
  • El botón Remove quitará el último ScatterViewItem añadido.
  • El botón Clear quitará todos los ScatterViewItems.

Inicializamos

Creamos en el .cs una propiedad global que será una lista con los nombres de las imágenes, y otra propiedad que será un String con la ruta del directorio que las contiene, de forma que al concatenar el directorio con nombre de imagen tengamos la ruta completa. Daremos los correspondientes valores a ambas propiedades.

namespace HelloScatterView
{
    public partial class CSharpSample : SurfaceWindow
    {
        string folder = string.Empty;
        List<string> images = new List<string>();

        public CSharpSample()
        {
            this.folder = "Resources/Img/";

            images.Add("fuente_tres_chorros.jpg");
            images.Add("kiyoumizu_dera.jpg");
            images.Add("laputa_robot.jpg");

            InitializeComponent();

            // Add handlers for Application activation events
            AddActivationHandlers();
        }
	}
}

Eventos de los botones

El evento click del botón añadir creará un ScatterViewItem, le asignará la imagen y lo añadirá al contenedor ScatterView. Para saber que imagen añadir, se basará en el total de imágenes añadidas.

private void Add(object sender, RoutedEventArgs e)
{            
	// Calculamos el indice de la imagen a mostrar en función de la cantidad de elementos en el ScatterView
	int index = this.Scatter.Items.Count % this.images.Count;

	// Creamos el ScatterViewItem que vamos a añadir
	BitmapImage bmp = new BitmapImage(new Uri(this.folder + this.images[index], UriKind.Relative));
	Image img = new Image();
	img.Source = bmp;

	ScatterViewItem svi = new ScatterViewItem();
	svi.Content = img;

	Scatter.Items.Add(svi);
}

El evento click del botón eliminar, accederá a la última imagen añadida en el contenedor ScatterView y la eliminará:

private void Remove(object sender, RoutedEventArgs e)
{
	// Averiguamos el índice del último elemento añadido
	int index = this.Scatter.Items.Count - 1;

	if (index >= 0)
	{
		this.Scatter.Items.Remove(this.Scatter.Items[index]);
	}
}

El evento click del botón borrar limpiará complétamente el contenedor ScatterView:

private void Clear(object sender, RoutedEventArgs e)
{
	this.Scatter.Items.Clear();
}

Añadir ScatterViews con Data Binding

Pero vamos a aprovechar las características de .Net para añadir los ScatterViewItems de una forma más potente. En realidad, podemos definir un origen de datos de forma que .Net añadirá todas las imágenes que contenga al contenedor ScatterView.

Dicho de otra forma, en pocas líneas de código podemos conseguir añadir al ScatterView todas las imágenes que haya, por ejemplo; en un directorio determinado. Vamos a hacer un ajuste en el constructor de CSharpSample y en el nodo s:ScatterView del XAML:

En el C#

public CSharpSample()
{
	this.folder = "Resources/Img/";

	images.Add("fuente_tres_chorros.jpg");
	images.Add("kiyoumizu_dera.jpg");
	images.Add("laputa_robot.jpg");

	InitializeComponent();

	// Add handlers for Application activation events
	AddActivationHandlers();

	String[] files = System.IO.Directory.GetFiles("Resources/Img", "*.jpg");
	this.Scatter.ItemsSource = files;
}

Lo importante son las últimas lineas: obtienen la lista de imágenes en un directorio y la establecen como el origen de datos del ScatterView.

En el XAML#

<s:ScatterView x:Name="Scatter">
	<s:ScatterView.ItemTemplate>
		<DataTemplate>
			<s:ScatterViewItem>
				<Image Source="{Binding}" />
			</s:ScatterViewItem>
		</DataTemplate>
	</s:ScatterView.ItemTemplate>
</s:ScatterView>

Lo importante es el nodo ItemTemplate: hemos establecido una plantilla que es la que usarán los elementos en el origen de datos.

Es todo por hoy

Ahora ya sabemos crear ScatterVirews desde XAML y desde C#, pero esto es sólo el principio. Como comenté en el primer artículo, un ScatterViewItem es mucho más que una imagen; y eso es lo que veremos en el próximo artículo sobre ScatterViews.

Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInEmail this to someone

Deja un comentario

Los campos obligatorios están marcados con *.