Geeks With Blogs

News
Joe Mayo Devices and Things

One of the new data controls in Windows 8 Metro is the ListView. The ListView does the same thing as the ListBox, plus more.  In this post, I’ll build on the TwitterClient, from my previous post: Windows 8 Composition and Content. and show how to refactor the ListBox to a ListView. I’ll also mention a few of the differences between the two controls.

Refactor ListBox to ListView

To save you a little time, I’ll show you the XAML for the ListBox, from my previous post. Then I’ll follow up with changes for making that work as a ListView. Here’s the code for the ListBox:

        <ListBox Height="465" HorizontalAlignment="Left" Margin="5,144,0,0" 
                 Name="PublicTweetListBox" VerticalAlignment="Top" Width="1355"
                 ItemsSource="{Binding Tweets}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Height="132">
                        <Button>
                            <Image Source="{Binding ImageUrl}" 
                                   Height="73" Width="73" 
                                   VerticalAlignment="Top" Margin="0,10,8,0"/>
                        </Button>
                        <StackPanel Width="370">
                            <TextBlock Text="{Binding Name}" 
                                       Foreground="#FFC8AB14" FontSize="28" />
                            <TextBlock Text="{Binding Text}" 
                                       TextWrapping="Wrap" FontSize="24" />
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

If you’ve seen the previous post, the code above isn’t anything different – it’s a ListBox with a DataTemplate and bindings to a ViewModel. Here’s how to change the code to switch this to a ListView:

        <ListView Height="465" HorizontalAlignment="Left" Margin="5,144,0,0" 
                 Name="PublicTweetListView" VerticalAlignment="Top" Width="1355"
                 ItemsSource="{Binding Tweets}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Height="132">
                        <Button>
                            <Image Source="{Binding ImageUrl}" 
                                   Height="73" Width="73" 
                                   VerticalAlignment="Top" Margin="0,10,8,0"/>
                        </Button>
                        <StackPanel Width="370">
                            <TextBlock Text="{Binding Name}" 
                                       Foreground="#FFC8AB14" FontSize="28" />
                            <TextBlock Text="{Binding Text}" 
                                       TextWrapping="Wrap" FontSize="24" />
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

No need to rub your eyes, all that’s required to change from a ListBox to a ListView is to change all the tag names that say ListBox to ListView.  Besides a name, there’s more that changes, which I’ll discuss next.

Advantages of ListView over ListBox

The biggest advantage of leaving ListBox in Metro is for backwards compatibility with existing XAML app platforms.  However, moving to the new Windows 8 data controls like ListView, GridView, etc. give you some advantages.  Windows 8 data controls have inherent support for the type of visual feedback associated with touch apps. For example, a feature called snap grid causes the list to reposition a list item into view if you stopped panning when that list item is not fully in view.  Another feature is inertia, where the grid keeps scrolling based on the speed of the pan.

Note: The new data/list controls have built-in behaviors, such as snap grid and inertia that are based on animations.

In addition to the visual feedback provided by the new Windows 8 controls, you also have more functionality exposed through the control’s APIs.  The ListView control derives from a new class, ListViewBase, and both ListViewBase and ListBox derive from Selector:

Selector

    ListBox

    ListViewBase

        GridView

        ListView

Through ListViewBase, ListView gets new events, methods, and properties that help it provide the built-in support for Metro look and feel.

By moving from ListBox to ListView, you essentially get all this new functionality for free.  On top of that, you have API support to customize that behavior as you need.

Summary

You saw how easy it is to convert from ListBox to ListView. I followed up with a few comments about the benefits of ListView over ListBox, explaining how ListView gives you all the new Metro look and feel behaviors for free.

@JoeMayo

Posted on Monday, February 13, 2012 8:19 AM LINQ to Twitter , Windows 8 | Back to top


Comments on this post: Windows 8 ListBox 2 ListView

# re: Windows 8 ListBox 2 ListView
Requesting Gravatar...
Hi,
How can I binding the SelectionChanged event in Mvvm?
Left by Chaner on Mar 21, 2012 1:34 AM

Your comment:
 (will show your gravatar)


Copyright © Joe Mayo | Powered by: GeeksWithBlogs.net | Join free