Maui 教學 – 以下就來介紹:
- CarouselView
- CollectionView
- ListView
- TableView.
Let’s Code!
| CarouselView |
| 優點: 當有多幅圖時, 只需一塊GUI區域, 減少空間. 而ANIMATION的效果令人感到動態. |
| Code |
| <StackLayout Orientation=”Vertical” HorizontalOptions=”CenterAndExpand” VerticalOptions=”CenterAndExpand”> <CarouselView x:Name=”collectionView” WidthRequest=”600″ ItemsSource=”{Binding}” IndicatorView=”indicatorView” HorizontalScrollBarVisibility=”Always”> <CarouselView.ItemsLayout> <LinearItemsLayout Orientation=”Horizontal” ItemSpacing=”0″ SnapPointsType=”None” /> </CarouselView.ItemsLayout> <CarouselView.ItemTemplate> <DataTemplate> <Frame></Frame> </DataTemplate> </CarouselView.ItemTemplate> </CarouselView> <IndicatorView x:Name=”indicatorView” IndicatorColor=”LightGray” SelectedIndicatorColor=”DarkGray” HorizontalOptions=”Center” /> </StackLayout> |
| CollectionView |
| 優點: ColletionView不像TableView 一樣, 只有列和行的VALUE. 它是一個GUI塊, 一塊可分兩三層Control, 而且只要空間足夠可以在最左邊再加上一塊, 兩塊等. 當空間滿了, 就會把Control Wrap, 分至下一行, 減少了程式員在排位上的麻煩. |
| Code |
| <CollectionView.ItemsLayout> <GridItemsLayout Orientation=”Vertical” Span=”4″ /> </CollectionView.ItemsLayout> <CollectionView.ItemTemplate> <DataTemplate> <Frame> </Frame> </DataTemplate> </CollectionView.ItemTemplate> </CollectionView> |
| ListView |
| 優點: Mobile的Width比較窄, 如果在Column太多, 要用TABLEVIEW等未必適合, 反而用ListView的區塊, 在區塊用兩三行把資料編排起來會比較容易看. |
| Code |
| <ListView x:Name=”collectionView” ItemsSource=”{Binding}”> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <Frame> </Frame> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> |
| TableView |
| 優點: 對一些資料只需看其簡短的Value便可明白其內容及作出工作判斷的時候, 一行看完, 視線由左至右看會比較方便. |
| Code |
| <TableView x:Name=”collectionView” Intent=”Menu”> <TableRoot> <TableSection TextColor=”Black”> <ImageCell ImageSource=”http://www.samplewebsite.com/sample.png” /> <EntryCell Label=”Login” LabelColor=”Black” Placeholder=”username” /> <EntryCell Label=”Password” LabelColor=”Black” Placeholder=”password” /> <SwitchCell Text=”Remember me” On=”False” /> <ViewCell> <Button TextColor=”Black” Text=”Login” Clicked=”Button_Clicked”> </Button> </ViewCell> </TableSection> <TableSection TextColor=”Black” Title=”Things should be concerned.”> <TextCell TextColor=”Black” DetailColor=”Black” Text=”1. Don’t share your password.” Detail=”Don’t share your password width others.” /> <TextCell TextColor=”Black” DetailColor=”Black” Text=”2. The login person should be yourself.” Detail=”Otherwise, we will not response any demage for you because of the security problem.” /> </TableSection> </TableRoot> </TableView> |