Blend For ActionScript Coders #2: List Controls.
This is second tutorial about Microsoft Blend, I strongly recommend you to read previous part of this tutorial, you may find some basic information about editing code, basis of C# syntax and some links.
In this tutorial we will learn how to use list based controls in .Net and also how to load an images in System.Windows.Controls.Image control. Lets create new project called “List” in Blend and open in your C# IDE.
Greetings List
In Blend create new ListBox control, to do this press on the arrow on button control in toolbox, and select ListBox, then double click on it. Call newly created ListBox - “list”, now switch to C# IDE and add following code to constuctor:
list.Items.Add("hello");
list.Items.Add("good morning");
list.Items.Add("good afternoon");
list.Items.Add("good evening");
list.Items.Add("hi");
Press F5 and look at what you have done :D. As you can see we’ve just created list control which simply shows us our greetings. Quite boring isn’t it? Lets make list with custom item renderer which will show us images of oranges.
Loading Media
To load an image to Image control, we are to create an instance of System.Windows.Media.Imaging.BitmapImage first, in order to do this we add using statement - using System.Windows.Media.Imaging;, from this point we can use BitmapImage class. This is our images:
There is a funny thing about list based controls. They accept instances of any serializable class. Back in Flex Framework, we used to assignin’ collection of non-visual objects as dataProvider, .NET Framework has no such limitations. It is possible to add either any non-visual instances as text, or visual instances “as is”. For example, you can change “Hello” to new Button() and that’s ok. To put an image into a cell you are to add a new Image() to it. However, I suggest to use derived class from Image.
Add following code right after Window1 class declaration (in same file, in same namespace):
string, url of desired image
public OrangeImage(string url)
: base()
{
Source = new BitmapImage(new Uri(url));
}
}
internal class OrangeImage : Image - in ActionScript we would write class OrangeImage extends Image, without public since it inner class
public OrangeImage(string url) : base() - base() is analog of super() in ActionScript.
And lets create some loop which will fill our list:
string urlTemplate = "http://lab.orangeflash.eu/blend/firstTutorial/listAssets/";
for (int i = 1; i <= 8; i++)
{
list.Items.Add(new OrangeImage(urlTemplate + i.ToString() + ".jpg"));
}
Full listing:
using System;
using System.IO;
using System.Net;
using System.Threading;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Media.Animation;
using System.Windows.Navigation;
namespace List
{
///
/// Main application class
///
public partial class Window1
{
///
/// Application Constuctor, initializes application and fills ListBox instance with OrangeImage objects
///
public Window1()
{
this.InitializeComponent();
// Insert code required on object creation below this point.
string urlTemplate = “http://lab.orangeflash.eu/blend/firstTutorial/listAssets/”;
for (int i = 1; i <= 8; i++)
{
list.Items.Add(new OrangeImage(urlTemplate + i.ToString() + ".jpg"));
}
}
}
///
/// Image class which load image automaticaly.
///
internal class OrangeImage : Image
{
///
/// Constructo
///
///
string, url of desired image
public OrangeImage(string url)
: base()
{
Source = new BitmapImage(new Uri(url));
}
}
}
That’s all folks in next tutorial we will create RSS reader.