Using UWP to design your Forms app - Part 2 - ListViews

One of the most common forms of UI element used within Forms is the ListView. In this blog, we'll be using the UWP XAML designer to create a forms ListView. I'm not going to deal with the data binding of the list as there are plenty of code examples of that.

The main differences

The biggest difference between the Forms XAML and UWP XAML for ListView is the DataTemplate. UWP has a ListViewItem which encapsulates all of the objects required for the list view. In Forms, we need to define both the ListView.ItemSource, DataTemplate and then the ViewCell itself. Once that's done though, porting between the two versions of XAML is pretty straight forward.

The UWP Code

The UWP code we will be using looks like this

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock HorizontalAlignment="Center" Grid.Row="0" Text="A most excellent listview" TextWrapping="Wrap" VerticalAlignment="Center"/>
        <ListView HorizontalAlignment="Stretch" Grid.Row="1" Grid.RowSpan="2" VerticalAlignment="Stretch" Background="Aquamarine">
            <ListViewItem Margin="4">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="60"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Image Grid.Column="0" Source="Assets/contact.png" Width="48" Height="48" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.RowSpan="2"/>
                    <TextBlock Grid.Column="1" Grid.Row="0" Text="Line 1" Foreground="Violet"/>
                    <TextBlock Grid.Column="1" Grid.Row="1" Text="Line 2" Foreground="Blue"/>
                </Grid>
            </ListViewItem>
        </ListView>
    </Grid> 

This will give a ListView which looks like this



As we saw from the last instalment, this won't work directly on Forms.

To get it to work, copy the Grid (and contents) to the Forms ContentPage and place in-between the ContentPage.Content tags.

Using copy and paste, replace

From	To
TextBlock	Label
HorizontalAlignment	HorizontalOptions
VerticalAlignment	VerticalAlignment
Width	WidthRequest (*)
Height	HeightRequest (*)
Foreground	TextColor
Background	BackgroundColor
TextAlignment	LineBreakMode

(*) except within the Row or ColumnDefinitions

Next remove Assets/ from the Image source property

Dealing with the data template

As has previously been said, the ListViewItem does not exist directly within Forms. Forms requires the ItemTemplate, DataTemplate and the ViewCell. To do that, remove the ListViewCell line and replace with

<ListView.ItemTemplate>
     <DataTemplate>
          <ViewCell>  

(Remember, you will need close these after the content of the ViewCell has been completed)

The construct looks like this

<ListView.ItemTemplate>
     <DataTemplate>
          <ViewCell>
               <Grid>
                    <Grid.RowDefinitions>
                         <RowDefinition Height="*"/>
                         <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                         <ColumnDefinition Width="60"/>
                         <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Image Grid.Column="0" Source="contact.png" WidthRequest="48" HeightRequest="48" HorizontalOptions="Center" VerticalOptions="Center" Grid.RowSpan="2"/>
                    <Label Grid.Column="1" Grid.Row="0" Text="Line 1" TextColor="Violet"/>
                    <Label Grid.Column="1" Grid.Row="1" Text="Line 2" TextColor="Blue"/>
               </Grid>
           </ViewCell>
     </DataTemplate>
</ListView.ItemTemplate>  

A bit more work, but at the same time, we know that the template will be correct as we've already defined it and been able to see the result.

Conclusion

It's not difficult to move a ListView between UWP and forms. Once we have done the search and replaces to change UWP property names to Forms property names, most of the rest falls into place.