Xamarin FAQ 2-17 : 如何客製化ListView的每筆紀錄視覺

問題

ListView 除了 TextCell / ImageCell 這兩種預設的紀錄顯示方式，若想要自行定義每筆 ListView 的紀錄所顯示的資料樣式，例如，想要加入 Switch / 按鈕到每筆紀錄上，這個時候，有甚麼解法呢?

解答

Xamarin.Forms 中的 ListView 控制項中，除了上述兩種樣式可以選擇之外，還可以使用 ViewCell 來定義每筆紀錄要顯示的資料格式；例如，在底下的範例中，我們在 ItemTemplate > DataTemplate 內，使用了 ViewCell 來定義每筆紀錄要出現的樣貌。

在這裡，我們定義了一個 Grid 版面配置，在這個裡面分別定義了三個欄位，因此，我們可以在這三個欄位中，分別指定要顯示那些資料。

        <ListView 
            ItemsSource="{Binding People}"
            >
            <ListView.ItemTemplate>
                <DataTemplate >
                    <ViewCell>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="0.4*" />
                                <ColumnDefinition Width="0.3*" />
                                <ColumnDefinition Width="0.3*" />
                            </Grid.ColumnDefinitions>
                            <Label Text="{Binding Name}" TextColor="Green" FontAttributes="Bold" />
                            <Label Grid.Column="1" Text="{Binding DateOfBirth, StringFormat='{0:d}'}" TextColor="Green" />
                            <Label Grid.Column="2" Text="{Binding Location}" TextColor="Green" HorizontalTextAlignment="End" />
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>