OrangeFlash

In the previous tutorial we’ve created very small Web Service, which provides us with news, images and weather. Now we will create client to our Web Service in Microsoft Blend

So lets start Blend and C# Express, and create new project called “MiniRIA”, and lets start to develop!

But before we’ll actualy start to develop, we need WebService proxy class that call remote operations on our server. We’ll do this same way we did with GlobalWeather service:

• Start your WebService from Visual Web Developer, and remmember it’s url, you can check in the Task Bar.
• Open Command Promt, and type: wsdl.exe HERE_IS_URL /out:Path\to\project\Service.cs

Now let’s think a bit (yeah we have to do this stuff sometimes), since I’m using Windows Vista I really miss old Windows XP window layout, do you remmember blue panel with expanding toolboxes on your left, and content of a folder on your right? We’ll do similar layout in our application. On left side we’ll place weather and media information, and news on right. So we have to create 3 main UI Controls:

• Weather control - holds information about weather.
• News control - with propaganda :D.
• Flickr control - with images.

Weather control will hold some Labels and TextBoxes controls, News and Flickr will contain ListBox instance, which will be filled with content (images for Flickr and news for News).

Weather

We’ll start from easiest part of our application - Weather control. Press File -> New Item -> UserControl, call it “GlobalWeather”, and leave “Include code file” checked.

Now lets switch LayoutRoot layout type to StackPanel.

We need StackPanel because it’s arranges all controls whithin in in vertical or horizontal order, now lets switch to XAML view and configure our control:

• Change x:Class value to OrangeFlash.MiniRIA.GUI.GlobalWeather, the OrangeFlash.MiniRIA.GUI is our namespace. Later we’ll change namespace in C# class file also.
• Configure StackPanel node:
  • VerticalAlignment/HorizontalAlignment: Top/Left.
  • Margin: 5,5,5,5.
  • Width: 190.
• Now lets add 3 Labels and TextBoxes for temperature, wind speed and visibility (temperature Label than TextBox, wind Label than TextBox, visibility Label, than TextBox).
• Label and TextBox properties:
• BorderThickness: 0,0,0,0.
• VericalAlignment/HorizontalAlignment: Top/Left.
• Width: 190.

Also set x:Name of top the TextBox to “temperatureBox”, middle: “windBox” and bottom: “visibilityBox”. Now we are set and ready, here is the XAML code if something gone wrong:

When you’ll switch to Design mode, you should see this:

Now open GlobalWeather.xaml.cs in C# Express, and change our namespace, than create new internal method Update()

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.Animation;
using System.Windows.Navigation;

using OrangeFlash.MiniRIA.Service;

namespace OrangeFlash.MiniRIA.GUI
{
	public partial class GlobalWeather
	{
        /// 

        ///
        /// 
		public GlobalWeather()
		{
			this.InitializeComponent();

			// Insert code required on object creation below this point.

		}

        internal void Update()
        {
            try
            {
                //Invoke remote operation
                CurrentWeather weather = new Service().GetWeather();
                //assign recieved values
                temperatureBox.Text = weather.Tempreature;
                windBox.Text = weather.WindSpeed;
                visibilityBox.Text = weather.Visibility;
            }
            catch (Exception e)
            {
                Console.WriteLine(e.ToString());
            }
        }

	}
}

As you can see, we are creating Service instance, and instantly invoking GetWeather method, which returns a CurrentWeather instance, than we simlpy assign values to our TextBoxes.

Now lets test our control, add Update invocation to the constructor of the the GlobalWeather class, and switch to Blend. In Blend go to MiniRIA.xaml file, and add our newly created component to the application: click on the double arrow button in tools panel, switch to “User Controls” in popup window and select GlobalWeather control.

Now you can press F5 and test our Weather control.

Flickr

Some more info on List-based controls in .NET.

Our next control is Flickr browser, lets repeat our routine from “Weather part”, when we’ve created User Control. Call this one “Flickr”, and set Height and Width propeties of the UserControl container as “Auto”, then create new ListBox control:

Now lets set the ListBox properties:

• Margin: 5,5,5,0
• Name: imgList
• Width: Auto
• Height: Auto
• IsEnabled: False
• HorizontalAlignment: Left
• VerticalAlignment: Top

Now switch to the C# Express. Open “Flickr.xaml.cs” and let’s see the documentation for the System.Windows.Controls.Image class. And we won’t find any Load method. Instead we have to create an instance of BitmapImage class, load image in it, and then assign the instance as Source of Image. Like this:

BitmapImage bmp = new BitmapImage();
bmp.BeginInit();
bmp.UriSource = new Uri(@url, UriKind.RelativeOrAbsolute);
bmp.EndInit();

Image img = new Image();
img.Source = bmp;

As you can see, we have to notify the BitmapImage instance that we are going to load data by invoking BeginInit() method. So here is our classes:

using System;
using System.Collections;
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.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;

using OrangeFlash.MiniRIA.Service;

namespace OrangeFlash.MiniRIA.GUI
{
	public partial class Flickr
	{
        public Flickr()
        {
            InitializeComponent();

            // Insert code required on object creation below this point.
        }
        /// 

        /// Updates data in Flickr control
        /// 
        internal void Update()
        {
            try
            {
                object[] urls = new Service().GetPhotos();

                foreach (string url in urls)
                {
                    imgList.Items.Add(new FlickrImage(url));
                }
            }
            catch (Exception e)
            {
                Console.WriteLine(”Flickr::”+e.ToString());
            }
        }

	}

    /// 

    /// Internal class, represents Image from Flickr.com.
    /// 
    internal class FlickrImage : Image
    {
        /// 

        /// Constructor, creates new FlickrImage and automaticaly loads image from url param.
        /// 
        ///
Image URL
        internal FlickrImage(string url)
            : base()
        {
            BitmapImage bmp = new BitmapImage();
            bmp.BeginInit();
            bmp.UriSource = new Uri(@url, UriKind.RelativeOrAbsolute);
            bmp.EndInit();

            Source = bmp;

            ToolTip = “url”;
        }
    }
}

As you can see code part, is very similar to the previous weather control.

In the next part of this tutorial, we’ll make control that displays text and do some layout work.

This entry was posted on Tuesday, January 9th, 2007 at 7:53 pm and is filed under Desktop, GUI/UI, .NET, XAML, RIA, Web Services, Tutorial, C#. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.