---
# System prepended metadata

title: ListView examples
tags: [Device Programming]

---

# ListView examples

## ListView ItemTemplates

### Display TEXT (TextCell)
```cs=
<!-- DISPLAY TEXT -->
<ListView x:Name="lvwProductions" ItemSelected="lvwProductions_ItemSelected">
  <ListView.ItemTemplate>
    <DataTemplate>
      <!-- TextCell: display text and detail underneath each other + choose the color of both-->
      <TextCell Text="{Binding Name}" TextColor="Black"
          Detail="{Binding Type}" DetailColor="Silver"/>
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>
```

### Display IMAGE + TEXT (ImageCell)
```cs=
<!-- DISPLAY IMAGE + TEXT -->
<ListView x:Name="lvwProductions" ItemSelected="lvwProductions_ItemSelected">
  <ListView.ItemTemplate>
    <DataTemplate>
      <!-- ImageCell: display an image on the left, and text and detail on the right-->
      <ImageCell ImageSource="{Binding TypeImage}" Text="{Binding Name}"
          TextColor="Black" Detail="{Binding Type}" />
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>
```

### Display TEXT + BOOLEAN (SwitchCell)

```cs=
<!-- DISPLAY TEXT & BOOLEAN -->
<ListView x:Name="lvwProductions" ItemSelected="lvwProductions_ItemSelected">
  <ListView.ItemTemplate>
    <DataTemplate>
      <!-- SwitchCell: display text and a switch binded to a boolean property of the object -->
      <SwitchCell Text="{Binding Name}" On="{Binding RegistrationsOpen}" />-->
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>
```

### Display CUSTOM (ViewCell)


```cs=
<!-- CUSTOM DISPLAY (note the setting for RowHeight) -->
<ListView RowHeight="150" x:Name="lvwProductions" ItemSelected="lvwProductions_ItemSelected">
  <ListView.ItemTemplate>
    <DataTemplate>
      <!-- ViewCell: a complete custom look for each listviewitem -->
      <ViewCell>
        <Grid>
          <Frame Margin="20" Padding="0">
            <Grid RowSpacing="0">
              <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
              </Grid.RowDefinitions>
              <Image Aspect="AspectFill" Grid.Row="0" Grid.RowSpan="3"  Source="{Binding TypeImage}" />
              <Label HorizontalTextAlignment="Center" BackgroundColor="#dd000000" TextColor="White"
                 Text="{Binding Name}" Grid.Row="1" />
              <Label HorizontalTextAlignment="Center" BackgroundColor="#dd000000" TextColor="White"
                 Text="{Binding DateAndTime}" Grid.Row="2" />
            </Grid>
          </Frame>
          <Frame VerticalOptions="Start" HorizontalOptions="End"
                 Margin="30,65" Padding="0"
                 BackgroundColor="DarkRed">
            <Label TextColor="White" Text="{Binding Type}" />
          </Frame>
        </Grid>
      </ViewCell>
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>
```