[Xamarin] CollectionView Header 포함 예시

아래는 주문 이력 화면 예시로 

CollectionView 에서 Header 가 있는 경우 처리하는 방법입니다.

        <CollectionView
                x:Name="historyCollectionView"
                Margin="5"
                SelectionMode="Single"
                EmptyView="주문이력이 없습니다."
                SelectionChanged="OnCollectionViewSelectionChanged" >
            <CollectionView.Header>
                <StackLayout>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="90" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="70" />
                            <ColumnDefinition Width="70" />
                        </Grid.ColumnDefinitions>
                        <Label Grid.Column="0" Text="주문일자" TextColor="Black" FontSize="15" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                        <Label Grid.Column="1" Text="주문매장" TextColor="Black" FontSize="15" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                        <Label Grid.Column="2" Text="주문상태" TextColor="Black" FontSize="15" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                        <Label Grid.Column="3" Text="주문가격" TextColor="Black" FontSize="15" VerticalTextAlignment="Center" HorizontalTextAlignment="End"/>
                    </Grid>
                    <BoxView HeightRequest="1" HorizontalOptions="FillAndExpand" Color="Black"/>
                </StackLayout>
            </CollectionView.Header>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid Margin="0,10,0,0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="90" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="70" />
                            <ColumnDefinition Width="70" />
                        </Grid.ColumnDefinitions>
                        <Label Grid.Column="0" Text="{Binding ORDER_DATE}" TextColor="Black" FontSize="12" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                        <Label Grid.Column="1" Text="{Binding STORE_NAME}" TextColor="Black" FontSize="13" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                        <Label Grid.Column="2" Text="{Binding ORDER_STATUS}" TextColor="Black" FontSize="12" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                        <Label Grid.Column="3" Text="{Binding PRICE, StringFormat='{0:N0}'}" TextColor="#B32026" FontSize="15" VerticalTextAlignment="Center" HorizontalTextAlignment="End"/>
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

* EmptyView 는 항목이 없는 경우 중간에 Text 로 표시가 필요할 때 사용한다.

위 내용을 데이터를 체우면 아래 처럼 표시 된다.