Posted by: Zeeshan Amjad | October 30, 2012

ListView comparision in WPF and WinRT


If we are using C# and XAML to develop WPF and WinRT application, then at first attempt both looks very similar. But they are quite different, let’s take a look at the example of ListView. ListView control in WPF and WinRT are quite different. Let’s first explore the class hierarchy of both controls. Here is a class hierarchy of WinRT ListView control.

WinRTListView_Class_Hierarchy

And here is class hierarchy of ListView control in WPF.

WPFListView_Class_Hierarchy

We can immediately noticed few differences just by looking at both hierarchies. The first difference is DispatcherObject and Visual class missing from WinRT. The other important difference is in WPF ListView is inherited by ListBox class, however in WinRT it is inherited by ListViewBase class. Both class hierarchies implement different interfaces.

Now let’s take a look at class diagram of both classes. Here is a class diagram of WinRT ListView.

WinRTListView

And here is a class diagram of WPF ListView.

WPFListView

From the class diagram it is very clear that in WinRT ListView is just a child class of ListViewBase without adding any functionality. It is because ListViewBase class implement the ISemanticZoomInformation interface.

In WPF we can use the GridView to display multiple columns in ListView, but in WinRT there is no View property in ListView. Therefore we have to define the item template and define layout there. Here is a XAML code to do this in WinRT.

Code Snippet
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <ListView ItemsSource="{Binding}" HorizontalContentAlignment="Stretch">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    
                    <TextBlock Grid.Column="0" Margin="2" Text="{Binding Name}"/>
                    <TextBlock Grid.Column="1" Margin="2" Text="{Binding Abbrivation}"/>
                    <TextBlock Grid.Column="2" Margin="2" Text="{Binding Capital}"/>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

 

Here is its output of this program.

WinRTListViewOutput

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: