[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 로 표시가 필요할 때 사용한다.
위 내용을 데이터를 체우면 아래 처럼 표시 된다.