OpenLightGroup Blog

rss

Blogs from OpenLightGroup.net


Crossing Silverlight Objects

image

Live Example: http://www.adefwebserver.com/silverlight/SilverlightOrb/SilverlightOrbv1/

This is actually a failed experiment. The theory was that XAMl contains all the visual elements you need to “cross” two Silverlight objects to create child objects that resemble the parents.

I am sure this is possible, but after some hours into the project, I realized that it would require a lot more work than I was prepared to give to it. One of the challenges I ran into was is crossing complex objects made up of multiple Panels. This required traversing the XAML element tree (this is easy enough) and crossing objects in their relative places in the tree (this is HARD when the two objects do not match up exactly in their composition).

However, a failed experiment is no reason to let code go to waste!

Along the way I learned some things:

  • How to display XAML elements in a drop down
  • How to zoom in on elements using a Viewbox and a ScrollViewer

Display Silverlight Objects in a drop down

image

Displaying text in a drop down is simple, but with Silverlight you can put any object into a drop down, so cool!

image

I structured my project to create the Orbs in the Population.cs class, format them in the PopulationView.cs class, and display them in the dropdown in the MainPage.xaml page.

The MODEL: The Population.cs class:

public List GetPopulation()
{
    List colPopulation = 
        new List();
 
    colPopulation.Add(new agOrbOne());
    colPopulation.Add(new agOrbTwo());
    colPopulation.Add(new agOrbThree());
 
    return colPopulation;
} 

The VIEW MODEL: the PopulationView.cs class:

// This View is consumed by the UI
public class PopulationView
{
private List _ParentOneDropDown;
private List _ParentTwoDropDown;
 
#region ParentOneDropDown
public List ParentOneDropDown
{
    get
    {
        if (_ParentOneDropDown == null)
        {
            // Load the Parent objects into the View
            Population objPopulation = new Population();
            _ParentOneDropDown = objPopulation.GetPopulation();
        }
 
        return _ParentOneDropDown;
    }
} 
#endregion

The VIEW: the MainPage.xaml page:

<Canvas.DataContext>
    <local:PopulationView />
Canvas.DataContext>
<ComboBox x:Name="ParentOneComboBox" Height="26"
SelectionChanged="ParentOneComboBox_SelectionChanged" 
Loaded="ParentOneComboBox_Loaded" 
ItemsSource="{Binding ParentOneDropDown, Mode=OneWay}"
Margin="0,27,0,0" VerticalAlignment="Top" />

 

image

The thing that I find so cool about using binding rather than filling the drop down programmatically, is that in Microsoft Expression Blend, you can right-click on the drop down and select Expand ComboBox and it will display the elements right in the designer.

Zooming in on Silverlight Elements

image

I wanted to allow the user to zoom in on the objects. This is easy enough using the ViewBox control that is contained in the Silverlight Controls Toolkit (for Silverlight 3.0 and below. it is contained in the core for Silverlight4)

To use the ViewBox, you put an element in the ViewBox and set the Width and Height properties on the ViewBox. The element inside the ViewBox will zoom in and out. I added a slider and bound the Width and Height to the slider. I placed the whole thing in a ScrollViewer so that scroll bars will appear when zoomed in.

Here is the XAML (note the Orb is placed in the ViewBox programmatically so it is not in the XAML. Hmm I now realize that I should have used binding instead):

<ScrollViewer x:Name="ParentOneScrollViewer" 
HorizontalScrollBarVisibility="Visible" 
Margin="0,56,1,24">
 
    <StackPanel x:Name="ParentOneStackPanel" Orientation="Vertical">    
        <controlsToolkit:Viewbox 
        x:Name="ParentOneViewbox" 
        Stretch="Fill" 
        Width="{Binding Value, ElementName=ParentOneHorizontalSlider, Mode=OneWay}"
        Height="{Binding Value, ElementName=ParentOneHorizontalSlider, Mode=OneWay}"
        />        
    StackPanel>
ScrollViewer>
 
<Slider 
x:Name="ParentOneHorizontalSlider" 
Height="18" Maximum="500" Value="170" 
Margin="3,0,4,0" 
VerticalAlignment="Bottom"
/>

image

Silverlight Genetics?

So yeah, if you look at the actual cross you will scratch your head and think, huh, what was he thinking? I actually have other versions of this code that actually calculate a cross of objects of any type not just an Orb composed of three elements. However, when I started to match up elements composed of multiple Panels I simply ran out of time for the project and made a “simple cross” for this code example.

Get Microsoft Silverlight

Download the code here:

http://www.adefwebserver.com/silverlight/SilverlightOrb/SilverlightOrbv1.zip





Comments are closed.