Silverlight C# Text and Graphics

DomainUpDown Controls with Silverlight 3

2009-07-17T05:01:00.000-07:00

The DomainUpDown control allows the user to spin through a collection of data objects, focusing on one at a time. DomainUpDown is one of the new controls available in the Silverlight 3 Toolkit.

To begin this tutorial, set up a new navigation application project as per my last post. This tutorial is informed by Jesse Liberty's video, which I recommend you watch on: silverlight.net

Data Classes

First, we need to create two classes to store the data. We use a Book class to represent each book, storing the Name and Author.


public class Book
{
 public string Name { get; set; }
 public string Author { get; set; }

 public Book(string name, string author)
 {
     Name = name;
     Author = author;
 }
}

The BookCollection object contains all of the books used in the tutorial:


public class BookCollection
{
 public static ObjectCollection Books
 {
     get
     {
        ObjectCollection books = new ObjectCollection();

        books.Add(new Book("Possession", "A.S. Byatt"));
        books.Add(new Book("Lord of the Rings", "J.R.R Tolkein"));
        books.Add(new Book("The Long Dark Tea-Time of the Soul", "Douglas Adams"));
        books.Add(new Book("The Sandman", "Neil Gaiman"));

        return books;
     }
 }    
}

Add references

Turning to the Silverlight project in the Solution Explorer, add references to the following two DLLs, which can be found in your Silverlight toolkit installation:

System.Windows.Controls.Toolkit
System.Windows.Controls.Input.Toolkit

Add a Namespace

Add the following namespace to the top of your page:

xmlns:in="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit"

Add the DomainUpDown Control

Add the following code to the Grid in your xaml file:


<Grid.ColumnDefinitions>
    <ColumnDefinition Width="0.5*"/>
    <ColumnDefinition Width="0.5*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition Height="0.2*"/>
    <RowDefinition Height="0.8*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0" VerticalAlignment="Bottom" Style="{StaticResource ContentPanelStyle}" >
    <ContentControl Content="Domain Up Down" VerticalAlignment="Top" HorizontalAlignment="Left"/>
    <in:DomainUpDown x:Name="DomainUD" ItemsSource="{Binding}" Height="90" FontSize="32" IsEditable="False">
 <in:DomainUpDown.ItemTemplate>
     <DataTemplate>
  <StackPanel>
      <TextBlock Text="{Binding Name}" FontSize="32" Foreground="#66000000" Height="50"/>
      <TextBlock Text="{Binding Author}" FontSize="24" Foreground="#33000000" Height="40" />
  </StackPanel>
     </DataTemplate>
 </in:DomainUpDown.ItemTemplate>
    </in:DomainUpDown>
</StackPanel>

Add the DataContext

Add the following line to your code-behind (.cs) page, just after the InitializeComponent() line:


DomainUD.DataContext = BookCollection.Books;

This will tell the binding engine to use our books collection. Once this step is done, we can press F5 and see our DomainUpDown control in action!

Editing the DomainUpDown

You'll notice in the code above that the DomainUpDown has its IsEditable attribute set to "False". If you set it to "True", you will need to add the following code to the Book object:


public override string ToString()
{
    return Name + " : " + Author;
}

The reason is that when the user clicks on the content of the DomainUpDown, a call is made to the Book's ToString() method (which by default will return what type of object it is). The code above overrides this default behaviour and returns a nicely formatted string containing the Name and Author fields.

Cycling

Another feature of the DomainUpDown is that you can set its IsCyclic attribute to "True" (it is False by default, restricting the user from browsing to a data object before the first, and after the last in the collection). Setting IsCyclic to "True" allows the user to cycle somewhat more seemlessly through the set of data.

Conclusion

Well that concludes this tutorial. I hope you have enjoyed learning how to create a DomainUpDown control, populate it with data, and how to tweak the control's attributes to change its behaviour.

A First Look at Silverlight 3

2009-07-14T01:23:00.000-07:00

Silverlight 3 is here and there are a lot of new goodies to check out. Let's take a first look :)

Installing Silverlight 3

Naturally, you will need to have Visual Studio 2008 SP1 installed. Uninstall Silverlight 2 if you already have it installed, and then install all the new Silverlight 3 tools, which you can download from Silverlight.net/GetStarted/

Make sure that you also install Expression Blend 3 with Sketchflow, as well as the Silverlight 3 browser plugin.

Hello Silverlight 3!

Open Visual Studio and navigate to File > New > Project and choose 'Silverlight Navigation Application'. I called my project 'Hello', and clicked 'Ok'. If you are working on my computer, Visual Studio will crash at this point (>.<) but the project is created. If this happens to you as well, just open Visual Studio again and attach the Web and Silverlight projects by navigating to File > Add > Existing Project.

Now we can build the project (by pressing F5) and see what it looks like in the browser. You can see placeholder text on the top left, 'Application Name' and on the top right you should see the navigation links to the 'home' and 'about' pages. In the browser's URL bar, you should see a URL ending with 'TestPage.html#/Home' or 'TestPage.html#/About' when you click on the 'about' link.

Adding Your Own Content

Open Mainpage.xaml and find the line below:


<TextBlock x:Name="ApplicationNameTextBlock" Style="{StaticResource ApplicationNameStyle}" Text="Application Name"/>

Change the Text="Application Name" attribute to read Text="Hello Silverlight 3". When you hit F5, you will see the text in the top right corner has changed.

Now, let's add a new page by right-clicking on the 'Views' folder in the Silverlight project and choosing 'Add > New Item > Silverlight Page'. Call it 'Info.xaml' and add the following inside the default Grid:


<ScrollViewer x:Name="PageScrollViewer" Style="{StaticResource PageScrollViewerStyle}">
<StackPanel x:Name="ContentStackPanel">
    <TextBlock x:Name="HeaderText" Style="{StaticResource HeaderTextStyle}"
    Text="Info"/>
    <TextBlock x:Name="ContentText" Style="{StaticResource ContentTextStyle}"
    Text="This is the info page"/>
</StackPanel>
</ScrollViewer>

We need to add the info page to the navigation. In MainPage.xaml add the following lines after the 'about' hyperlink:


<Rectangle x:Name="Divider2" Style="{StaticResource DividerStyle}"/>
<HyperlinkButton x:Name="Link3" Style="{StaticResource LinkStyle}" NavigateUri="/Info" TargetName="ContentFrame" Content="info"/>

Themes

Let's choose a theme for our Silverlight application. First, go to the Microsoft Expression themes gallery

You can download all the Silverlight 3 themes if you want to :)

Each theme should contain a .png that shows a preview of what the theme looks like and a Styles.xaml file. You can just drag and drop the Styles.xaml file to replace the Styles.xaml in your assets folder, to give your application a vastly different (and quite professional looking) look and feel.

Switching Pages and Passing Parameters in Silverlight

2009-04-30T02:40:00.000-07:00

My latest project has a few pages in it and I wanted to learn the best way to switch between them. I watched Jesse Liberty's videos and they really gave me a good understanding of the mechanisms involved. I recommend you watch them both!

I found the videos really informative, and wanted to write down a simple way of switching pages and passing parameters between them in Silverlight.

1. Setting the Landing Page

You can set the first page that loads when your Silverlight app starts up, by changing the following line in App.xaml.cs:


this.RootVisual = new MyProject.Login();

My first page is a login page, where the user enters their name and password. If their login is successful, I want the page to change to the success page. I'm using Web Services to check their username and password, but we won't go into all that here :)

(Do see my previous post to learn about Web Services though!)

2. Receiving Parameters

I put a textblock on the Success.xaml page, to show the parameters when they arrive:


<TextBlock Name="welcomeText"/>

I add this method to the Success.xaml.cs page:


public void WelcomeMessage(String parm)
{
    this.parm = parm;
    welcomeText.Text = "Welcome " + parm;
}

The WelcomeMessage() method sets the parm parameter to the welcomeText text block, creating a nice welcome message.

3. Changing the Page & Sending Parameters

My Login.xaml page has a textbox on it that folks use to enter their user names:


<TextBox Name="userText"/>

I add the following three lines of code to the Login.xaml.cs page, wherever I want to change pages. This could be in a button click event handler, or in the case of my login app - the completed method of a web service call. So let's assume that the user has logged in successfully - and now it is time to switch to the success page:


Success page = new Success();
page.WelcomeMessage(userText.Text);
this.Content = page;

In the first line, I create a new Success page object. Then, I pass the userText String parameter to the page object's WelcomeMessage() method. In the third line, I have this.Content = page, which loads the success page. When the success page loads, it will already have had the parameters passed to it, so it will display the welcome message ;)

Web Services and Silverlight

2009-04-23T02:20:00.000-07:00

I wanted to create a step-by-step guide for making a web service that I can connect to from my Silverlight applications. There are certain steps, that need to be followed in a certain order, and I hope to make this process easier :)

This tutorial is really great: (Video) Tim Heuer does an awesome job of explaining how to set up web services, so his video is highly recommended. Here is a link to his tutorial blog as well: (Tutorial Blog)

I am using Visual Studio 2008 with Silverlight enabled WCF services in this step-by-step guide:

1. Create the Project

In Visual Studio 2008 (with Silverlight installed), create a new Silverlight Application.

Right click on the website project (not the one with the XAML pages) and Add > New Item > Silverlight enabled WCF service. I called it 'SilverWCF.svc'.

Right-click on 'SilverWCF.svc' and choose 'View in Browser'. This is a very important step - and one to be repeated every time you make changes to the 'SilverWCF.svc.cs' file.

2. Add your service code

Change the DoWork() method to do something useful, like:


public string SayHello(string name)
{
    return "Hello " + name;
}

3. Create the Interface

On Page.xaml, add a stackpanel inside your Grid, containing a textbox, textblock and a button to create a simple interface:


<StackPanel>
    <TextBox Name="NameText"/>
    <TextBlock Name="ResultText"/>
    <Button Name="WCFButton" Content="Click" Click="Button_Click"/>
</StackPanel>

You can right click on "Button_Click" and choose 'Navigate to Event Handler' to generate the method.

4. Add a Service Reference

Right-click on the Silverlight project and choose 'Add Service Reference'. Click on the Discover button and name the reference. I called it 'SilverSVC'.

5. Set up the Event Handlers

The SayHelloAsync method calls the web service, passing it the value of the Text type in the NameText textbox. When the webservice completes, the SayHelloCompleted event handler puts the result string into the ResultText textblock:


private void Button_Click(object sender, RoutedEventArgs e)
{
    SilverSVC.SilverWCFClient proxy = new webservice.SilverSVC.SilverWCFClient();
    proxy.SayHelloCompleted += new EventHandler(proxy_SayHelloCompleted);
    proxy.SayHelloAsync(NameText.Text);
}

void proxy_SayHelloCompleted(object sender, webservice.SilverSVC.SayHelloCompletedEventArgs e)
{
    ResultText.Text = e.Result;
}

That's it, really - at this point you can build and run the project, type a name into the textbox, click the button and get a result from the web service :)

New Poll

2009-04-01T04:28:00.001-07:00

I wonder how many folks who visit this site have the Silverlight plug-in installed!

This is a tutorial site for learning about Silverlight, so I pretty much assumed that every visitor would have Silverlight already installed :)

It turns out that there are several folks who don't have Silverlight installed, so I have changed all the Silverlight controls into JPEG screen-shots for the moment. Now everyone can see what we are learning about.

Please vote in the poll...

(It's on the right of your screen - simply select 'yes' or 'no' and click VOTE)

I'd love to get an idea of how many visitors to this blog have Silverlight installed!

Creating Pie Charts with C# and Silverlight

2009-03-27T02:39:00.000-07:00

In this post, we'll create a pie chart, using Silverlight. You can see an example of the finished pie chart in the diagram to the left.

Below, I have listed the full page.xaml for the pie chart. It's quite simple - the chart itself is painted onto the canvas and there is a button to refresh the graph, using new data.

I also added a TextBlock, which I used to display any test output was needed.


<UserControl x:Class="piechart.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="400">
    <Grid x:Name="LayoutRoot" Background="White">
        <Canvas Background="#ffffff" Name="graphc">

            <TextBlock  Name="outtab" TextWrapping="Wrap" Canvas.Top="250"></TextBlock>
            <Button Name="Button" Width="400" Height="30" Click="Button_Click" Canvas.Top="370" Content="New Graph"></Button>
        </Canvas>
    </Grid>
</UserControl>

Listed below is the Page.xaml.cs. The button click event refreshes the graph, using new randomly generated data.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace piechart
{
    public partial class Page : UserControl
    {
        String[] hex = { "#ff336699", "#ff339966", "#ff9999cc", "#ffcc6699", "#ff6699cc" };

        Path[] paths = new Path[5];
        int r = 100;    //the radius of the circle
        piechart.Shape[] shapes = new piechart.Shape[5];
        
        public Page()
        {
            InitializeComponent();
            outtab.Text = draw();
        }

        public String draw()
        {
            String output = "";

            Point start = new Point(r, 0);
            Point centre = new Point(0, 0);

            //randomly assign data
            Double total = 0.0;
            Random rnd = new Random();
            int[] randoms = new int[shapes.Length];


            for (int i = 0; i < shapes.Length; i++)
            {
                try
                {
                    randoms[i] = rnd.Next();
                }
                catch { }
                
                total += randoms[i];
            }
            Array.Sort(randoms);

            double curangle = 0.0;

            //Set up the array of shapes
            for (int i = 0; i < shapes.Length; i++ )
            {
                shapes[i] = new Shape(randoms[i], r, start, centre, hex[i]);
                shapes[i].SetAngle(shapes[i].GetData()/total * 360);

                paths[i] = shapes[i].Pie(curangle);
                graphc.Children.Add(paths[i]);

                //increment the angle
                curangle += shapes[i].GetAngle();

                output += "" + "\n";
            }

            return output;
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            for (int i = 0; i < shapes.Length; i++)
            {
                graphc.Children.Remove(paths[i]);
            }

            if (outtab.Text.Length > 0)
            {
                outtab.Text = draw();
            }
        }
    }
}

Below is Shape.cs. This class is responsible for creating the pie slices:


using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace piechart
{
    public class Shape
    {
        int data = 0;

        public void SetData(int data)
        {
            this.data = data;
        }

        public int GetData()
        {
            return data;
        }

        Point point;

        public void SetPoint(Point point)
        {
            this.point = point;
        }

        public Point GetPoint()
        {
            return point;
        }


        Double angle;

        public void SetAngle(Double angle)
        {
            this.angle = angle;
        }

        public Double GetAngle()
        {
            return angle;
        }

        String output;

        public void SetOutput(String output)
        {
            this.output = output;
        }

        public String GetOutput()
        {
            return output;
        }

        int r = 0;
        Point start; 
        Point centre;
        String hex = "";

        public Shape(int data, int r, Point start, Point centre, String hex)
        {
            this.data = data;
            this.r = r;
            this.start = start;
            this.centre = centre;
            this.hex = hex;
        }

        public Path Pie(double rotangle)
        {
            Utils utils = new Utils();
            Path path1 = new Path();

            SolidColorBrush fb = new SolidColorBrush(utils.HexColor(hex));

            PathGeometry pg1 = new PathGeometry();
            PathFigure pf1 = new PathFigure();
            pf1.StartPoint = start;

            //calculate point

            double theta = (2 * Math.PI) / 360 * angle;

            double endX = (Math.Cos(theta) * r);
            double endY = (Math.Sin(theta) * r);
            SetPoint(new Point(endX, endY));

            output += theta + " " + endX + " " + endY;


            PathSegmentCollection segments = new PathSegmentCollection();

            
            //arc1
            ArcSegment arc1 = new ArcSegment();
            arc1.Point = point;
            arc1.Size = new Size(r, r);
            if (angle > 180)
            {
                arc1.IsLargeArc = true;
            }
            else
            {
                arc1.IsLargeArc = false;
            }
            arc1.SweepDirection = SweepDirection.Clockwise;
            segments.Add(arc1);
            
            //LineSegments
            LineSegment ls1 = new LineSegment();
            ls1.Point = start;
            segments.Add(ls1);

            LineSegment ls2 = new LineSegment();
            ls2.Point = centre;
            segments.Add(ls2);

            LineSegment ls3 = new LineSegment();
            ls3.Point = point;
            segments.Add(ls3);

            LineSegment ls4 = new LineSegment();
            ls4.Point = start;
            segments.Add(ls4);

            TransformGroup trans = new TransformGroup();

            //rotate
            RotateTransform rt = new RotateTransform();
            rt.Angle = rotangle;
            trans.Children.Add(rt);
            path1.RenderTransform = trans;

            //translate
            TranslateTransform tt = new TranslateTransform();
            tt.X = 100;
            tt.Y = 100;
            trans.Children.Add(tt);
            path1.RenderTransform = trans;

            pf1.Segments = segments;
            pg1.Figures.Add(pf1);
            path1.Data = pg1;
            path1.Fill = GetBrush(hex);
            path1.Stroke = fb;
            path1.SetValue(Canvas.TopProperty, 0.0);
            path1.SetValue(Canvas.LeftProperty, 0.0);
            path1.StrokeThickness = 0;
            path1.MouseEnter += path_MouseEnter;
            path1.MouseLeave += path_MouseLeave;

            return path1;
        }


        public Brush GetBrush(String hexcolor)
        {

            LinearGradientBrush fillBrush = new LinearGradientBrush();

            Color col = new Utils().HexColor(hexcolor);

            fillBrush.StartPoint = new Point(0, 0.0);
            fillBrush.EndPoint = new Point(0, 1.0);

            // First Gradient stop
            GradientStop gs1 = new GradientStop();
            gs1.Color = Color.FromArgb(0, col.R, col.G, col.B);
            gs1.Offset = 0.0;
            fillBrush.GradientStops.Add(gs1);

            // Second Gradient stop
            GradientStop gs2 = new GradientStop();
            gs2.Color = Color.FromArgb(col.A, col.R, col.G, col.B);
            gs2.Offset = 0.1;
            fillBrush.GradientStops.Add(gs2);

            // Third Gradient stop
            GradientStop gs3 = new GradientStop();
            gs3.Color = col;
            gs3.Offset = 1.0;
            fillBrush.GradientStops.Add(gs3);


            return fillBrush;       
        }

        private void path_MouseEnter(object o, MouseEventArgs e)
        {
            Path path = (Path)o;
            path.Fill = GetBrush("#6666cc");
        }

        private void path_MouseLeave(object o, MouseEventArgs e)
        {
            Path path = (Path)o;
            path.Fill = GetBrush(hex);
        }

    }
}

Finally, note that I used the hex utility in a Utils.cs class. This just makes it convenient to convert from hex colours. You can read about this utility class in my post about Converting from a Hex String to a Color object

Transforms for Graphical Shapes in C#

2009-03-19T02:35:00.000-07:00

In the previous post, we learned how to make a shape dynamically, using C#. Now we want to be able to position the shape, rotate it, or make it bigger or smaller. The way to do this is with Transforms.

I have modified the draw() method that we used in the previous post, adding three transforms to the path (shape) object: ScaleTransform, TranslateTransform and RotateTransform.


public void draw()
{
    Path path2 = new Shapes().Pie();

    TransformGroup trans = new TransformGroup();

    //scale
    ScaleTransform st = new ScaleTransform();
    st.ScaleX = 0.5;
    st.ScaleY = 0.5;
    trans.Children.Add(st);
    path2.RenderTransform = trans;

    //translate
    TranslateTransform tt = new TranslateTransform();
    tt.X = 10;
    tt.Y = 10;
    trans.Children.Add(tt);
    path2.RenderTransform = trans;

    //rotate
    RotateTransform rt = new RotateTransform();
    rt.Angle = 15;
    trans.Children.Add(rt);
    path2.RenderTransform = trans;

    graphc.Children.Add(path2);
}

ScaleTransform is used to change the size of the shape. Setting ScaleX and ScaleY to 0.5 as we have in the code snippet above, will have the effect of reducing the size of the shape by half - along both the X and Y axes.

TranslateTransform is used to move the shape around the canvas in an X or Y direction.

RotateTransform will rotate the shape in a clockwise direction, by the amount specified by the Angle property. The diagram below displays three ice-cream shapes with RotateTransforms applied to them:

Happy Designing! :)

Creating Graphical Shapes Dynamically in C#

2009-03-19T02:14:00.000-07:00

In the previous posts, we used XAML to create shapes in Silverlight. Now, let's take a look at how we can create shapes in the code-behind, using C#. The diagram shows what the end result will look like:

First, I added a draw() method to my Page.xaml.cs. The draw() method creates a Shapes object and sets up an ice-cream shaped path. The path is then added to the canvas.


public void draw()
{
    Path path1 = new Shapes().Icecream();
    graphc.Children.Add(path1);
}

Shapes.cs just contains a method that builds up a path (shape) using LineSegments and ArcSegments.


public Path IceCream()
{
    //set up the color
    Utils utils = new Utils();
    SolidColorBrush fb = new SolidColorBrush(utils.HexColor("#ff336699"));

    //set up the path & the geometry
    Path path1 = new Path();
    PathGeometry pg1 = new PathGeometry();
    PathFigure pf1 = new PathFigure();
    pf1.StartPoint = new Point(40, 40);

    //set up the segments collection
    PathSegmentCollection segments = new PathSegmentCollection();

    //arc1
    ArcSegment arc1 = new ArcSegment();
    arc1.Point = new Point(120, 40);
    arc1.Size = new Size(12, 10);
    arc1.IsLargeArc = false;
    arc1.SweepDirection = SweepDirection.Clockwise;
    segments.Add(arc1);

    //LineSegments
    LineSegment ls1 = new LineSegment();
    ls1.Point = new Point(40, 40);
    segments.Add(ls1);

    LineSegment ls2 = new LineSegment();
    ls2.Point = new Point(80, 100);
    segments.Add(ls2);

    LineSegment ls3 = new LineSegment();
    ls3.Point = new Point(121, 40);
    segments.Add(ls3);

    LineSegment ls4 = new LineSegment();
    ls4.Point = new Point(40, 40);
    segments.Add(ls4);

    //Set up the path
    pf1.Segments = segments;
    pg1.Figures.Add(pf1);
    path1.Data = pg1;
    path1.Fill = fb;
    path1.Stroke = fb;
    path1.SetValue(Canvas.TopProperty, 0.0);
    path1.SetValue(Canvas.LeftProperty, 0.0);
    path1.StrokeThickness = 0;

    return path1;
}

Firstly, I set up a SolidColorBrush, using the hex color converter from the previous post. Next, I instantiate the PathGeometry, PathFigure and PathSegmentCollection that we will be using to create our ice-cream shape.

The PathSegmentCollection segments allows us to add LineSegments and ArcSegments to it, until we are satisfied with our shape. Once we're done, we can add the PathFigure to the PathGeometry and then set the PathGeometry as the Data of the path we want to return.

We can also set values for the path that we want to return, such as Fill and Stroke. In this example, I set them to use the same colour, as well as setting the StrokeThickness to zero, so it looks like one continuous shape.

Just build the code and run it in your browser and voila! - a lovely ice-cream shape is added to your canvas :)

C# Converting from a Hex String to a Color object

2009-03-18T07:59:00.000-07:00

So far, we have been looking at Silverlight code examples in XAML. Today, I think it's time to get started with some C# code. The first thing I notice, working with shapes and colours in Silverlight, is that there is no easy way to make a Color class, using a hex String like "#336699".

In Silverlight, you have to instantiate a Color object something like:

Color c = Color.FromArgb(255, 255, 255, 255);

(Which makes a white Color object)

The first value in ARGB is Alpha, which determines the transparency of the colour. 0 is the lowest value, and indicates full transparency, while 255 indicates a fully opaque (non-transparent) Color.

I am used to working with hex Strings though, like "#ffffff", which is a white colour in HTML. There are a few folks who have posted methods for creating Color objects from hex Strings, for example:

Geekpedia
Alex Golesh

I wanted to write a simple method that I could pass a hex String to, that returns a correctly instantiated Color object, something like:

Color c = HexColor("#99ccff");


public Color HexColor(String hex)
{
 //remove the # at the front
 hex = hex.Replace("#", "");

 byte a = 255;
 byte r = 255;
 byte g = 255;
 byte b = 255;

 int start = 0;

 //handle ARGB strings (8 characters long)
 if (hex.Length == 8)
 {
     a = byte.Parse(hex.Substring(0, 2), System.Globalization.NumberStyles.HexNumber);
     start = 2;
 }

 //convert RGB characters to bytes
 r = byte.Parse(hex.Substring(start, 2), System.Globalization.NumberStyles.HexNumber);
 g = byte.Parse(hex.Substring(start+2, 2), System.Globalization.NumberStyles.HexNumber);
 b = byte.Parse(hex.Substring(start+4, 2), System.Globalization.NumberStyles.HexNumber);

 return Color.FromArgb(a, r, g, b);
}

First, we remove the preceding # character (if there is one), then declare the a, r, g and b bytes that will be used to instantiate the Color object.

Next, we have to handle the two formats the String can appear in, either 8 characters of ARGB "ffffffff", or 6 characters of RGB "ffffff". If the string we have is 8 characters long, we substring the first two characters and do the conversion to a byte value.

From here on, the two strings are substring-ed and parsed in the same manner, although of course the ARGB string will be two positions ahead of the RGB string. This difference is taken care of by the start integer.

Once all of the bytes have been parsed, we use them to instantiate and return a Color object.

Graphics 2D - Shapes

2009-03-06T05:34:00.000-08:00

Today, let's look at displaying graphics in Microsoft Silverlight.
I have created an example diagram that shows some of the commonly used shapes in Silverlight:

Diagram A is a JPEG image

(I've had a few folks visit the blog, without having Silverlight installed, so I thought I would add a screen shot of the control so they too can see some Silverlight graphics) :)

Diagram B above is a Silverlight image

If you can't see the graphics in Diagram B, please install Microsoft Silverlight by clicking on the link above.

This is the canvas I used in diagram B. Quite simple really.


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

Rectangle

The first two numbers in the Rect attribute (10,10) are the X and Y values for the top left corner of the Rectangle. The next two numbers are (60, 40) are X and Y for the bottom right corner. The RadiusX and RadiusY attributes are used to define the rounding of the corners. The higher the values, the more rounded the corners will become.


<Path Stroke="#224488" Fill="#f0f0ff" StrokeThickness="1">
    <Path.Data>
 <RectangleGeometry Rect="10,10,60,40" RadiusX="5" RadiusY="5"/>
    </Path.Data>
</Path>

Circle

The circle in the example is simply created by making the RadiusX and RadiusY attributes equal. The Center attribute defines where the Eclipse will be placed on the Canvas.


<Path Stroke="#224488" StrokeThickness="1" Fill="#f0f0ff">
    <Path.Data>
 <EllipseGeometry Center="120,30" RadiusX="20" RadiusY="20"/>
    </Path.Data>
</Path>

Ellipse


<Path Stroke="#224488" StrokeThickness="1" Fill="#f0f0ff">
    <Path.Data>
 <EllipseGeometry Center="190,30" RadiusX="20" RadiusY="12"/>
    </Path.Data>
</Path>

Triangle

The triangle in the example was created using a Path element. The LineSegments define the points that the Path must follow.


<Path Stroke="#224488" StrokeThickness="1" Fill="#f0f0ff">
    <Path.Data>
 <PathGeometry>
     <PathGeometry.Figures>
  <PathFigure StartPoint="240,40">
      <PathFigure.Segments>
   <LineSegment Point="240,40"/>
   <LineSegment Point="260,10"/>
   <LineSegment Point="280,40"/>
   <LineSegment Point="240,40"/>
      </PathFigure.Segments>
  </PathFigure>
     </PathGeometry.Figures>
 </PathGeometry>
    </Path.Data>
</Path>

Line

A Line defines a simple line between a StartPoint and an EndPoint.


<Path Stroke="#224488" >
    <Path.Data>
 <LineGeometry StartPoint="170,110" EndPoint="210,70"/>
    </Path.Data>
</Path>

PolyLine

A PolyLine defines two or more lines. The point couples are used to define the lines. First a line is drawn from 100,110 to 120,70, then a second line is drawn from 120,70 to 140,110.


<Polyline Points="100,110 120,70 140,110" Stroke="#224488" StrokeThickness="1" />

ArcSegment

ArcSegment is used to draw curved lines. Point defines the end point of the arc. IsLargeArc sets whether the arc should be more than 180 degrees. Size sets the X and Y radius of the arc.


<Path Stroke="#224488" StrokeThickness="1">
    <Path.Data>
 <PathGeometry>
     <PathFigure StartPoint="10,110">
  <ArcSegment Size="1,1" RotationAngle="0" IsLargeArc="True" SweepDirection="Clockwise" Point="70,110" />
     </PathFigure>
 </PathGeometry>
    </Path.Data>
</Path>

Elements - ListBox, ScrollViewer

2009-03-06T05:04:00.000-08:00

ListBox


<ListBox Width="100" Height="100" Background="White">
    <ListBox.Items>
 <ListBoxItem><TextBlock Text="One"/></ListBoxItem>
 <ListBoxItem><TextBlock Text="Two"/></ListBoxItem>
 <ListBoxItem><TextBlock Text="Three"/></ListBoxItem>
 <ListBoxItem><TextBlock Text="Four"/></ListBoxItem>
    </ListBox.Items>
</ListBox>

ListBox allows you to display lists of ...whatever you want. Just add extra ListBoxItems as needed.

ScrollViewer


<ScrollViewer Canvas.Left="10" Canvas.Top="10" Width="200" Height="200" HorizontalScrollBarVisibility="Auto">
<Grid Background="White" Height="250" Width="250">
    <Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/></Grid.ColumnDefinitions>
    <Grid.RowDefinitions><RowDefinition/><RowDefinition/></Grid.RowDefinitions>

    <Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Background="#ffffff">
 <TextBlock>(0,0)</TextBlock></Border>
    <Border Grid.Row="1" Grid.Column="0" Background="#C3D9FF">
 <TextBlock>(1,0)</TextBlock></Border>
    <Border Grid.Row="1" Grid.Column="1" Background="#3D81EE">
 <TextBlock>(1,1)</TextBlock></Border>
</Grid>
</ScrollViewer>

ScrollViewer allows you to add scroll bars to an element that is too large to display in your application. In the example above, the user is able to scroll around the Grid.

Elements - TextBlock, TextBox

2009-03-06T04:57:00.000-08:00

TextBlock


 <Border BorderBrush="#4488bb" BorderThickness="1" Background="#ffffff" Width="160" Height="100" Padding="3" CornerRadius="5">
            <TextBlock TextWrapping="Wrap">
                <Run FontSize="12" Text="Use"/>
                <Run FontSize="12" Foreground="#bb4400" FontStyle="Italic" Text="Run"/>
                <Run FontSize="12" Text="elements to create rich text."/>
                <LineBreak/><LineBreak/>
                <Run Foreground="#224488" FontSize="12" Text="Linebreaks are useful to control layout."/>
            </TextBlock>
 </Border>

TextBlock displays text content. You can use Run and LineBreak to format and lay out your text.

TextBox


    <StackPanel x:Name="stack" Background="White" Orientation="Vertical">
        <TextBox Height="150" Width="200" AcceptsReturn="True" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible"/>
        <TextBox Width="200" Height="30"/>
    </StackPanel>

The first TextBox above is much like the HTML textarea tag. It allows several lines of text to be entered by the user. The bottom TextBox is a single line text input area.

Elements - Border, Buttons

2009-03-06T04:32:00.000-08:00

In the previous posts, we learned how to lay out elements in Silverlight. Now let's take a look at some of the elements themselves.

Border


        <Border BorderThickness="1" Width="180" Height="80" CornerRadius="2" Padding="3" BorderBrush="#3D81EE">
            <TextBlock Text="This is some text inside the border. " TextWrapping="Wrap"/>
        </Border>

Border allows you to add elements to it, all of which (by design) have a nice border around them :)

Buttons


        <CheckBox x:Name="checkBox" IsChecked="True" Content="True/False" Width="100"/>
        <CheckBox x:Name="checkBox3" IsChecked="" IsThreeState="True" Content="Three State" Width="100"/>

        <RepeatButton Width="100" Height="30" Content="Repeat Button"/>
        <Button Width="100" Height="30" Content="Normal Button" x:Name="button" />
        <HyperlinkButton x:Name="hyperlinkButton" Width="100" Height="30" Content="Hyperlink Button" NavigateUri="http://silverlemma.blogspot.com/" TargetName="_new"/>

        <RadioButton x:Name="radio1" GroupName="radio" Content="One" Width="100"/>
        <RadioButton x:Name="radio2" GroupName="radio" Content="Two" Width="100" IsChecked="True"/>
        <RadioButton x:Name="radio3" GroupName="radio" Content="Three" Width="100"/>

Buttons allow your users to interact with your application.

Checkboxes can either be in two (Yes/No) or three states (Yes/No/Maybe).

HyperlinkButtons work pretty much like HTML links (anchor tags). When the user clicks on the link, they are taken to the specified web URL. Notice that you can specify which tab, frame or window to load the destination site into, using the TargetName attribute.

RadioButtons that share a group name will only allow one of the RadioButtons to be selected.

Layout - TabControl

2009-03-06T02:40:00.000-08:00

TabControl is a great way to present the user with a lot of information and application content, while keeping the interface neat and manageable.


       <basics:TabControl>
           <basics:TabItem Header="Text">
               <Canvas Background="#f0f0ff"><TextBlock TextWrapping="Wrap">Some Text</TextBlock></Canvas>
           </basics:TabItem>
           <basics:TabItem Header="More Text">
               <Canvas Background="#c0c0ff"><TextBlock TextWrapping="Wrap">Some More Text</TextBlock></Canvas>
           </basics:TabItem>
           <basics:TabItem Header="Calendar">
               <basics:Calendar/>
           </basics:TabItem>
       </basics:TabControl>

In the example above, there are three tabs. Two contain textblocks and the third contains a calendar control.

Layout - Grid

2009-03-06T01:50:00.000-08:00

Grids are used to layout elements in your Silverlight application, without having to specify co-ordinates for every element, in the way that Canvas does.


   <Grid x:Name="grid" Background="White">
       <Grid.ColumnDefinitions>
           <ColumnDefinition/>
           <ColumnDefinition/>
       </Grid.ColumnDefinitions>
       <Grid.RowDefinitions>
           <RowDefinition/>
           <RowDefinition/>
       </Grid.RowDefinitions>

       <Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Background="#f0f0ff">
           <TextBlock>First grid item (0,0)</TextBlock></Border>
       <Border Grid.Row="1" Grid.Column="0" Background="#4488bb">
           <TextBlock>Second grid item (1,0)</TextBlock></Border>
       <Border Grid.Row="1" Grid.Column="1" Background="#d0d0ff">
           <TextBlock>Third grid item (1,1)</TextBlock></Border>
   </Grid>

The grid in the example above defines two columns and two rows. The first grid element has a ColumnSpan of 2, so it flows across two columns. ColumnSpan works in much the same way as the colspan attribute in an HTML table data element.

GridSplitter

GridSplitter is a more flexible version of Grid, that allows users to move the splitters between grids, resizing the contained grid elements.


       <Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/></Grid.ColumnDefinitions>
       <Border Grid.Row="0" Grid.Column="0" Background="#f0f0ff">
           <TextBlock>First grid item (0,0)</TextBlock></Border>
       <Border Grid.Row="0" Grid.Column="1" Background="#4488bb">
           <TextBlock>Second grid item (1,0)</TextBlock></Border>
       <basics:GridSplitter Grid.Row="0"/>

Layout - StackPanel

2009-03-06T00:38:00.001-08:00

StackPanels are great for laying out form elements where test is displayed next to textboxes for input.


    <StackPanel x:Name="stack" Background="White" Orientation="Horizontal">
        <TextBlock Text=" Username "/>
        <TextBox Width="200" Height="20" VerticalAlignment="Top"/>
    </StackPanel>

In the example above, we have a Username label (TextBlock, really) neatly next to a TextBox that users can type into.

Layout - Canvas

2009-03-05T23:24:00.000-08:00

Silver light has several layout elements. The first is 'Canvas', which is like a blank ... canvas to draw on.

Canvas uses a co-ordinate system to define where all the elements are placed, measured from the top and left.


<Canvas x:Name="LayoutRoot" Background="#f0f0ff">
        <TextBlock Canvas.Left="10" Canvas.Top="10" FontSize="12">
            A Canvas can contain display elements such as TextBlocks.
        </TextBlock>
        <Canvas Canvas.Top="30" Canvas.Left="10" Background="#4488bb" Width="380" Height="60">
            <TextBlock Canvas.Left="10" Canvas.Top="10" TextWrapping="Wrap">
                <Run Foreground="#ffffff">This nested Canvas has its own co-ordinate system.</Run>
            </TextBlock>
        </Canvas>
</Canvas>

As you can see in the example above, it is possible to nest a canvas within a canvas. The inner canvas has its own co-ordinate system, allowing you to place elements neatly inside of it.

Getting Started

2009-03-05T22:25:00.000-08:00

What is Silverlight?

Silverlight is Microsoft's technology for delivering rich Internet application content to the web browser. Silverlight enables animations, vector graphics and video, as well as a full set of application controls, such as buttons, textboxes, listboxes and 2D elements like lines, rectangles and circles.

(See This Wiki article for more information)

The user interface is defined using XAML (said 'zammel'), which is a user interface markup language used in several .NET Framework 3.0 technologies, including Silverlight and Windows Presentation Foundation.

The Official Silverlight Home Page is an awesome source for info about Silverlight. If you are completely new to Silverlight, head over there now and click on 'Get Started'!

If you can't see the Silverlight controls, just click on the Silverlight icon to install the Silverlight plug-in for your browser. Reading the posts won't be the same without it installed :)

Welcome to my blog!

2009-03-05T10:16:00.000-08:00

I'll be writing here about my experiences as I learn to design with Silverlight. Please feel free to add any comments and post links to helpful sites that expand on the discussion here.

Let's learn Silverlight together :)