12 Oct 2010

XPF Control Tour: ItemsControl

Updated 2010-10-20: Altered BindingFactory.CreateOneWay<SolidColorBrush> to CreateOneWay<Brush> - co/contravariance isn’t supported on WP7. ItemTemplate now passes DataContext as an argument of the Func (Build 37+).

As XPF matures the number of controls available increases, but it’s largely down to the early adopter to seek them out and figure out how to use them. Our thinking here is that most developers will have had some WPF/Silverlight experience so the usage pattern will be easy to work out. That may have been a little presumptuous on our part, so in a series of short and sharp posts we’ll take a tour through some of the less obvious controls.

First up the ItemsControl, one of my favourites. In XPF if you want to repeat a block of UI for n number of items, you invariably want an ItemsControl. Think ListBox, ComboBox or maybe items in a menu.

Let’s look at a complete example and it’s output:

public class MyComponent : DrawableGameComponent
{
    private RootElement rootElement;

    public MyComponent(Game game)
        : base(game)
    {
    }

    public override void Draw(GameTime gameTime)
    {
        this.rootElement.Draw();
        base.Draw(gameTime);
    }

    public override void Update(GameTime gameTime)
    {
        this.rootElement.Update();
        base.Update(gameTime);
    }

    protected override void LoadContent()
    {
        var spriteBatchAdapter = new SpriteBatchAdapter(new SpriteBatch(this.GraphicsDevice));
        var primitivesService = new PrimitivesService(this.GraphicsDevice);
        var renderer = new Renderer(spriteBatchAdapter, primitivesService);

        this.rootElement = new RootElement(this.GraphicsDevice.Viewport.ToRect(), renderer);

        var colors = new List<SolidColorBrush>
            {
                new SolidColorBrush(Colors.Red), 
                new SolidColorBrush(Colors.Blue), 
                new SolidColorBrush(Colors.Yellow)
            };

        var itemsControl = new ItemsControl
            {
                ItemsSource = colors, 
                ItemTemplate = dataContext =>
                    new Border
                        {
                            Width = 50, 
                            Height = 50, 
                            Margin = new Thickness(10), 
                            Background = new SolidColorBrush(Colors.Gray)
                        }
            };

        this.rootElement.Content = itemsControl;
    }
}

That’s all standard XPF scaffolding code right up until we define a list of colors and define an ItemsControl. Things to note: ItemsSource is set to the list of colors (you can use anything that implements IEnumerable). The ItemTemplate property is a Func<IElement> (all controls in XPF implement IElement) and is executed for each item specified in ItemsSource, hence we defined 3 colors in our list and we got 3 borders rendered.

The DataContext & Data Binding

At the moment each Border background is gray. How do we get it to use the colors in our list? Each item that the ItemsControl generates will have it’s DataContext property set to it’s associated item in the ItemsSource. Using XFP’s data binding, we can bind to that DataContext property in our ItemTemplate and dynamically assign the background color of each Border:

var itemsControl = new ItemsControl
{
    ItemsSource = colors,
    ItemTemplate = dataContext =>
    {
        var border = new Border
        {
            Width = 50,
            Height = 50,
            Margin = new Thickness(10)
        };

        border.Bind(
            Border.BackgroundProperty,
            BindingFactory.CreateOneWay<Brush>());

        return border;
    }
};

Whilst the data context of each item is automatically set by XPF to support various binding scenarios, you’ll also note that the data context is passed as an argument of the ItemTemplate function. This facilitates run-time decisions about the template that should be returned.

If you’re interested in all the Data Binding options, be sure to check out our Inside XPF: Data Binding post.

ItemsPanel

The way in which the ItemsControl lays out it’s children can be configured via it’s ItemsPanel property. By default the ItemsControl will use a StackPanel (which itself defaults to an orientation of vertical). But you can change the ItemsControl to use anything that inherits from Panel, meaning you can apply your own layout logic. Custom panels is a subject in-upon itself which we’ll cover in a future post, but the process is almost identical to creating a custom panel in WPF/Silverlight, so generally speaking any WPF/Silverlight panel implementation you can find, will work in XPF.

For now, let’s change our ItemsPanel to a horizontal StackPanel:

var itemsControl = new ItemsControl
{
    ItemsPanel = new StackPanel { Orientation = Orientation.Horizontal },
    ItemsSource = colors,
    ItemTemplate = dataContext =>
    {
        var border = new Border
        {
            Width = 50,
            Height = 50,
            Margin = new Thickness(10)
        };

        border.Bind(
            Border.BackgroundProperty,
            BindingFactory.CreateOneWay<Brush>());

        return border;
    }
};

Observable Collections

In our example so far we’ve been binding our ItemsSource to a List<T> which means after creation our ItemsControl is pretty much not going to change. If however you set the ItemsSource to a collection that implements INotifyCollectionChanged (such as the commonly used ObservableCollection<T>) the ItemsControl will automatically hook onto CollectionChanged event and dynamically, update it’s children. All actions are supported meaning you can add, remove, replace or move items in the bound collection and the ItemsControl will automatically update it’s layout to reflect the changes.

Using the ItemsControl with an observable collection and data binding is another great example of XPF helping you separate your presentation and implementation concerns.

xpf, control tour, xna, wp7

Comments

10/12/2010 2:43:46 PM #

Pingback from topsy.com

Twitter Trackbacks for

        Red Badger | XPF Control Tour: ItemsControl
        [red-badger.com]
        on Topsy.com

topsy.com |

4/22/2011 7:59:56 PM #

Great post, I'm looking forward to more post in the control tour series!

Stijn Verhaegen |

4/23/2011 10:16:15 AM #

Great sources for fashion news and fashion articles. They have offered many details about the relevant information. I like this post greatly and i am gonna recommend it to my girlfriends. Brief and practical methods within the post saving time and inside searching process. It's this kind of awesome source or technique i can't wait to test it. The post is completely incredible. Thank you for all you could posted and whatever you tell us!
<a href="http://www.pandora-uksale.com/">pandora sale</a>

<a href="http://www.linkslondonsaleuk.com/">links of london bracelets</a>

<a href="http://www.thomassabosaleshop.com/">Thomas Sabo Jewellery</a>

<a href="http://www.beatsbydreon.com/">dr dre headphones</a>

<a href="www.hichristianlouboutins.com/.../a>

pandora |

7/13/2011 2:21:30 AM #

Regarding my own, personal portion I might right become descended coming from in which daring tiny monkey, which braved his / her dreadful foe to conserve living regarding his / her keeper; or perhaps coming from in which outdated baboon, which, descending from your hills, overly enthusiastic inside success his / her younger comrade from your masses regarding surprised puppies -- since from your savage which delights to be able to pain his / her foes, presents upwards soft forfeit, procedures infanticide with out sorrow, snacks his / her spouse just like slaves, is aware simply no decency, which is haunted from the grossest superstitions.

Nike Air Force Ones Shoes |

7/18/2011 8:31:08 AM #

Last week,I buy a <a href="http://www.replicadesignersunglasses.net" title="cheap sunglasses">cheap sunglasses</a> in the <a href="http://www.replicadesignersunglasses.net" title="replica designer sunglasses">replica designer sunglasses</a> store,it's very good! Today I will buy another <a href="http://www.replicadesignersunglasses.net" title="designer sunglasses">designer sunglasses</a> in the shop.

replica designer sunglasses |

7/19/2011 3:57:24 AM #

leather-based within bottom http://www.replicamalloline.com replica handbags set up away only by metal zippers and complementing turnlock closures. They have been practical http://www.replicamalloline.com/blog replica bags oh-so-stylish once they achieved the particular soft, used search. and also this bag http://www.replicamalloline.com www.replicamalloline.com those people genuine coach designs, but using a www.replicamalloline.com/burberry-handbags-146-rc burberry replica bags determine new decidedly present distortThe gentle mauve is www.replicamalloline.com/burberry-top-handles-88-rc burberry top handles a extremely modest color; it is a newborn lilac switched grown-up using a tiny only a little grey. on the www.replicamalloline.com/burberry-sling-bags-82-rc burberry sling bags very least which is our hold on how which www.replicamalloline.com/burberry-shoulder-bags-83-rc burberry shoulder bags shade ended up getting achieved. The pc hardware and turnlock closure experienced been also treated to www.replicamalloline.com/burberry-tote-bags-84-rc burberry tote bags in a location to makeovers, as they are any www.replicamalloline.com/burberry-clutch-bags-90-rc burberry clutch bags gold as opposed in the direction of the brassy coloring favoured within distant past. So when much as I will www.replicamalloline.com/burberry-clutch-bags-90-rc burberry clutch bags notice, the turnlock does not severely

burberry clutch bags |

7/22/2011 4:59:38 AM #

How to maximize your <a href="www.laptopsbatterysupplier.com">laptop battery</a>?Well,do as follows.Condition the <a href="www.laptopsbatterysupplier.com/dell-laptop-battery-inspiron-1520-c-3_1060.html">dell inspiron 1520 battery</a> when u purchase it.Charge the <a href="www.laptopsbatterysupplier.com/dell-laptop-battery-inspiron-1525-c-3_1022.html">dell inspiron 1525 battery</a> to 100 percent,discharge the <a href="www.laptopsbatterysupplier.com/dell-laptop-battery-c-3.html">dell battery</a> completely,and then fully charge <a href="www.laptopsbatterysupplier.com/dell-laptop-battery-gg386-c-3_805.html">dell gg386 battery</a> to 100 percent again to help the dell laptop remember exactly how much electrical it can hold.From then on,you’ll never need to completely discharge the <a href="www.laptopsbatterysupplier.com/dell-laptop-battery-inspiron-6400-c-3_1044.html">dell inspiron 6400 battery</a> again,but always make sure when charging the <a href="www.laptopsbatterysupplier.com/dell-laptop-battery-inspiron-9400-c-3_1027.html">dell inspiron 9400 battery</a> that u let it reach 100 percent.Salinas had tip for your <a href="www.laptopsbatterysupplier.com/dell-laptop-battery-studio-1535-c-3_2055.html">dell studio 1535 battery</a>:keep them cool,don’t exposure the <a href="www.laptopsbatterysupplier.com/dell-laptop-battery-latitude-d600-c-3_1078.html">dell latitude d600 battery</a> to the high temperatures. Pull up overload programs. Run only the programs u are using,the other programs in the background will drain your <a href="www.laptopsbatterysupplier.com/dell-laptop-battery-latitude-d800-c-3_994.html">dell latitude d800 battery</a> life. Don’t use any external devices. USB and PC-Cards use your <a href="www.laptopsbatterysupplier.com/dell-laptop-battery-latitude-d620-c-3_1053.html">dell latitude d620 battery</a> to function, even when you aren’t using them! Power down the display “You can often yield up to ten minutes of <a href="www.laptopsbatterysupplier.com/hp-compaq-laptop-battery-pavilion-dv4-c-7_915.html">hp dv4 battery</a> life per level of brightness lowered,” said Salinas.The more you are doing at the same time with your PC, the more memory and CPU usage increases. Both of which directly use up <a href="www.laptopsbatterysupplier.com/hp-compaq-laptop-battery-pavilion-dv2000-series-c-7_952.html">hp pavilion dv2000 battery</a>. Keep your <a href="www.laptopsbatterysupplier.com/...eries-p-177.html tx1000 battery</a> cool. You can take a page out of the extreme gamer’s handbooks, and have your system perform more optimally by keeping <a href="www.laptopsbatterysupplier.com/hp-compaq-laptop-battery-hstnndb72-c-7_1870.html">HP HSTNN-DB72 battery</a> cool. Short discharges and recharges do not fully synchronize the <a href="www.laptopsbatterysupplier.com/ibm-laptop-battery-thinkpad-x60-series-c-28_1311.html">IBM thinkpad x60 battery</a>'s fuel gauge with the battery's state-of-charge. This can result in the amount of power available in one cycle being less than expected or the <a href="www.laptopsbatterysupplier.com/...32a8-p-1407.html A32-A8 battery</a> meter being inaccurate. 1. Turn off Wi-Fi and BlueTooth - Most <a href="www.laptopsbatterysupplier.com/acer-laptop-battery-aspire-5520-series-c-8_1155.html">acer aspire 5520 series battery</a> have shortcut keys to instantly disable wireless networking. 2. Don't play computer games, music or DVD movies - Multimedia activities drain acer aspire one battery. 3. Adjust your screen brightness - Dimming your display saves <a href="www.laptopsbatterysupplier.com/...eries-p-688.html aspire 5100 battery</a> power. 4 If you do not use your laptop for extended periods of time (a week or more), remove the <a href="www.laptopsbatterysupplier.com/...ttery-p-799.html BATBL50L6 battery</a> pack from the laptop. 5. Do not expose the <a href="www.laptopsbatterysupplier.com/...1280-p-2055.html A1280 battery</a> to high heat or freezing temperatures. Do not leave your <a href="www.laptopsbatterysupplier.com/...1281-p-2061.html A1281 battery</a>in your car in the summer. Hot <a href=" www.laptopsbatterysupplier.com/sony-laptop-battery-vgpbps8-c-32_2062.html">Sony BPS8 battery</a> discharge very quickly, and cold ones can't create as much power. 6. Fully charge new <a href=" www.laptopsbatterysupplier.com/sony-laptop-battery-vgpbps9-c-32_2063.html">Sony BPS9 battery</a> packs before use. New pack needs to be fully charged and discharged (cycled) a few times before it can condition to full capacity. 7. For laptops that work as Desktop Replacement, the <a href="www.laptopsbatterysupplier.com/toshiba-laptop-battery-pa3534u1bas-c-447_1843.html">Toshiba PA3534U-1BAS battery</a> should be re -installed every 3-4 weeks and allowed to fully discharge. 8. Leaving the <a href=" www.laptopsbatterysupplier.com/...nv52-p-1904.html Nv52 battery</a> in a laptop while using an electrical outlet for long periods of time will keep the battery in a constant state of charging up and that will reduce the life cycle of the battery.

laptops batteries |

7/23/2011 8:36:03 AM #

Cheap Beats By Dre |

Comments are closed

XPF Control Tour: ItemsControl

The DataContext & Data Binding

ItemsPanel

Observable Collections

Tag cloud

connect with us