MAUI Preview4
2021年5月25日, 微軟發布了最新的MAUI Preview4, 在每個預覽版當中, 微軟都引入了更多的控制和功能。
下面將介紹目前的MAUI示例及預覽版功能。
MAUI 官方示例
為了展示這個版本的一些最新進展, 巨硬迅速設計了一個簡單而帥氣的天氣應用程序, 如下所示:
文章介紹:https://devblogs.microsoft.com/dotnet/announcing-net-maui-preview-4/
我們如果想要深入的看下, Preview4 的一些功能, 我們可以下載該項目的源代碼進行調試。
調試方法: 請按照上一篇文章當中介紹的如何安裝.NET 6 SDK. 以及VisualStudio 2019 Preview 等。
下載本地后的調試測試效果如下所示:
-
Win UI
-
Android
-
IOS
暫無樣機
狀態一覽
下面將介紹在下個月的Preview 5即將發布的功能, 以及現階段控件的完成狀態。
MAUI 6月份Preview 5版本計划
- Alerts
- Animation
- AppThemeBinding (Dark Mode)
- Brushes
- CarouselView
- CollectionView
- ContentView
- Device
- DualScreen
- FlyoutPage
- Frame
- Gestures
- MessagingCenter
- Native Embedding
- Shell
- Triggers
現階段 Preview 4 更新狀態說明
| 圖標 | 說明 |
|---|---|
| ⚠️ | 待定 |
| ⏳ | 進行中 |
| ✅ | 完成 |
| 💔 | 從未在 Xamarin 中實現過 |
Pages
| Control | Android | iOS / Mac Catalyst | Windows |
|---|---|---|---|
| ContentPage | ⏳ | ⏳ | ⏳ |
| FlyoutPage | ⚠️ | ⚠️ | ⚠️ |
| NavigationPage | ⏳ | ⏳ | ⏳ |
| TabbedPage | ⚠️ | ⚠️ | ⚠️ |
Views
⚠️ ActivityIndicator
| API | Android | iOS / Mac Catalyst | Windows |
|---|---|---|---|
| Color | ✅ | ✅ | ✅ |
| IsRunning | ✅ | ✅ | ✅ |
⚠️ Button
| API | Android | iOS / Mac Catalyst | Windows |
|---|---|---|---|
| BackgroundColor | ✅ | ✅ | ✅ |
| BorderColor | ⚠️ | ⚠️ | ⚠️ |
| BorderWidth | ⚠️ | ⚠️ | ⚠️ |
| CharacterSpacing | ✅ | ✅ | ✅ |
| Clicked | ✅ | ✅ | ✅ |
| Command | ✅ | ✅ | ✅ |
| CommandParameter | ✅ | ✅ | ✅ |
| ContentLayout | ⚠️ | ⚠️ | ⚠️ |
| CornerRadius | ⚠️ | ⚠️ | ⚠️ |
| FontAttributes | ✅ | ✅ | ✅ |
| FontFamily | ✅ | ✅ | ✅ |
| FontSize | ✅ | ✅ | ✅ |
| ImageSource | ⚠️ | ⚠️ | ⚠️ |
| Padding | ✅ | ✅ | ✅ |
| Pressed | ✅ | ✅ | ✅ |
| Released | ✅ | ✅ | ✅ |
| Text | ✅ | ✅ | ✅ |
| TextColor | ✅ | ✅ | ✅ |
⚠️ CarouselView
| API | Android | iOS / Mac Catalyst | Windows |
|---|---|---|---|
| CurrentItem | ⚠️ | ⚠️ | ⚠️ |
| CurrentItemChangedCommand | ⚠️ | ⚠️ | ⚠️ |
| CurrentItemChangedCommandParameter | ⚠️ | ⚠️ | ⚠️ |
| IndicatorView | ⚠️ | ⚠️ | ⚠️ |
| IsBounceEnabled | ⚠️ | ⚠️ | ⚠️ |
| IsDragging | ⚠️ | ⚠️ | ⚠️ |
| IsScrollAnimated | ⚠️ | ⚠️ | ⚠️ |
| IsSwipeEnabled | ⚠️ | ⚠️ | ⚠️ |
| ItemsLayout | ⚠️ | ⚠️ | ⚠️ |
| Loop | ⚠️ | ⚠️ | ⚠️ |
| PeekAreaInsets | ⚠️ | ⚠️ | ⚠️ |
| Position | ⚠️ | ⚠️ | ⚠️ |
| PositionChangedCommand | ⚠️ | ⚠️ | ⚠️ |
| PositionChangedCommandParameter | ⚠️ | ⚠️ | ⚠️ |
| VisibleViews | ⚠️ | ⚠️ | ⚠️ |
⚠️ CheckBox
| API | Android | iOS / Mac Catalyst | Windows |
|---|---|---|---|
| Color | ⚠️ | ⚠️ | ⚠️ |
| CheckedChanged | ✅ | ✅ | ✅ |
| IsChecked | ✅ | ✅ | ✅ |
⚠️ CollectionView
| API | Android | iOS / Mac Catalyst | Windows |
|---|---|---|---|
| ItemsSource | ⚠️ | ⚠️ | ⚠️ |
| ItemTemplate | ⚠️ | ⚠️ | ⚠️ |
| ItemsPanel | ⚠️ | ⚠️ | ⚠️ |
| ItemSizingStrategy | ⚠️ | ⚠️ | ⚠️ |
| SelectionMode | ⚠️ | ⚠️ | ⚠️ |
| SelectedItem | ⚠️ | ⚠️ | ⚠️ |
| SelectedItems | ⚠️ | ⚠️ | ⚠️ |
| SelectionChangedCommand | ⚠️ | ⚠️ | ⚠️ |
| SelectionChangedCommandParameter | ⚠️ | ⚠️ | ⚠️ |
| EmptyView | ⚠️ | ⚠️ | ⚠️ |
| Scrolled | ⚠️ | ⚠️ | ⚠️ |
| ScrollTo | ⚠️ | ⚠️ | ⚠️ |
| Header | ⚠️ | ⚠️ | ⚠️ |
| HeaderTemplate | ⚠️ | ⚠️ | ⚠️ |
| Footer | ⚠️ | ⚠️ | ⚠️ |
| FooterTemplate | ⚠️ | ⚠️ | ⚠️ |
| IsGrouped | ⚠️ | ⚠️ | ⚠️ |
| GroupHeaderTemplate | ⚠️ | ⚠️ | ⚠️ |
| GroupFooterTemplate | ⚠️ | ⚠️ | ⚠️ |
⚠️ DatePicker
| API | Android | iOS / Mac Catalyst | Windows |
|---|---|---|---|
| BackgroundColor | ✅ | ✅ | ⚠️ |
| CharacterSpacing | ✅ | ✅ | ✅ |
| Date | ✅ | ✅ | ✅ |
| DateSelected | ✅ | ✅ | ✅ |
| FontAttributes | ✅ | ✅ | ✅ |
| FontFamily | ✅ | ✅ | ✅ |
| FontSize | ✅ | ✅ | ✅ |
| Format | ✅ | ✅ | ✅ |
| MaximumDate | ✅ | ✅ | ✅ |
| MinimumDate | ✅ | ✅ | ✅ |
| TextColor | ✅ | ✅ | ⚠️ |
⚠️ Editor
| API | Android | iOS / Mac Catalyst | Windows |
|---|---|---|---|
| AutoSize | ⚠️ | ⚠️ | ⚠️ |
| Completed | ✅ | ✅ | ✅ |
| CharacterSpacing | ✅ | ✅ | ⚠️ |
| FontAttributes | ✅ | ✅ | ✅ |
| FontFamily | ✅ | ✅ | ✅ |
| FontSize | ✅ | ✅ | ✅ |
| IsReadOnly | ✅ | ✅ | ⏳ |
| IsTextPredictionEnabled | ✅ | ✅ | ⚠️ |
| PlaceHolder | ✅ | ✅ | ⚠️ |
| PlaceHolderColor | ✅ | ✅ | ⚠️ |
| Text | ✅ | ✅ | ⏳ |
| TextColor | ✅ | ✅ | ⚠️ |
| MaxLength | ✅ | ✅ | ✅ |
⚠️ Entry
| API | Android | iOS / Mac Catalyst | Windows |
|---|---|---|---|
| ClearButtonVisibility | ✅ | ✅ | ⚠️ |
| CharacterSpacing | ✅ | ✅ | ⚠️ |
| Completed | ⏳ | ⏳ | ⏳ |
| CursorPosition | ⚠️ | ⚠️ | ⚠️ |
| FontAttributes | ✅ | ✅ | ⚠️ |
| FontFamily | ✅ | ✅ | ⚠️ |
| FontSize | ✅ | ✅ | ⚠️ |
| HorizontalTextAlignment | ✅ | ✅ | ⚠️ |
| IsTextPredictionEnabled | ✅ | ✅ | ⚠️ |
| IsPassword | ✅ | ✅ | ⏳ |
| PlaceHolder | ✅ | ✅ | ✅ |
| PlaceHolderColor | ⚠️ | ⚠️ | ⚠️ |
| VerticalTextAlignment | ⏳ | ⏳ | ⚠️ |
| ReturnCommand | ⚠️ | ⚠️ | ⚠️ |
| ReturnCommandParameter | ⚠️ | ⚠️ | ⚠️ |
| ReturnType | ✅ | ✅ | ⏳ |
| SelectionLength | ⚠️ | ⚠️ | ⚠️ |
| Text | ✅ | ✅ | ✅ |
| TextColor | ✅ | ✅ | ⚠️ |
⚠️ Frame
| API | Android | iOS / Mac Catalyst | Windows |
|---|---|---|---|
| BorderColor | ⏳ | ⏳ | ⚠️ |
| CornerRadius | ⏳ | ⏳ | ⚠️ |
| HasShadow | ⏳ | ⏳ | ⚠️ |
⚠️ IndicatorView
| API | Android | iOS / Mac Catalyst | Windows |
|---|---|---|---|
| IndicatorColor | ⚠️ | ⚠️ | ⚠️ |
| IndicatorLayout | ⚠️ | ⚠️ | ⚠️ |
| IndicatorSize | ⚠️ | ⚠️ | ⚠️ |
| IndicatorShape | ⚠️ | ⚠️ | ⚠️ |
| IndicatorTemplate | ⚠️ | ⚠️ | ⚠️ |
| ItemsSource | ⚠️ | ⚠️ | ⚠️ |
| MinimumVisible | ⚠️ | ⚠️ | ⚠️ |
| Position | ⚠️ | ⚠️ | ⚠️ |
| SelectedIndicatorColor | ⚠️ | ⚠️ | ⚠️ |
⚠️ Image
| API | Android | iOS / Mac Catalyst | Windows |
|---|---|---|---|
| Aspect | ✅ | ✅ | ✅ |
| IsLoading | ✅ | ✅ | ✅ |
| Source | ✅ | ✅ | ✅ |
⚠️ ImageButton
| API | Android | iOS / Mac Catalyst | Windows |
|---|---|---|---|
| BorderColor | ⚠️ | ⚠️ | ⚠️ |
| BorderWidth | ⚠️ | ⚠️ | ⚠️ |
| Command | ⚠️ | ⚠️ | ⚠️ |
| CommandParameter | ⚠️ | ⚠️ | ⚠️ |
| CornerRadius | ⚠️ | ⚠️ | ⚠️ |
| IsLoading | ⚠️ | ⚠️ | ⚠️ |
| IsOpaque | ⚠️ | ⚠️ | ⚠️ |
| IsPressed | ⚠️ | ⚠️ | ⚠️ |
| Padding | ⚠️ | ⚠️ | ⚠️ |
| Source | ⚠️ | ⚠️ | ⚠️ |
| Clicked | ⚠️ | ⚠️ | ⚠️ |
| Pressed | ⚠️ | ⚠️ | ⚠️ |
| Released | ⚠️ | ⚠️ | ⚠️ |
⚠️ Label
| API | Android | iOS / Mac Catalyst | Windows |
|---|---|---|---|
| CharacterSpacing | ✅ | ✅ | ✅ |
| Font | ✅ | ✅ | ✅ |
| FontAttributes | ✅ | ✅ | ✅ |
| FontFamily | ✅ | ✅ | ✅ |
| FontSize | ✅ | ✅ | ✅ |
| FormattedText | ✅ | ✅ | ⚠️ |
| HorizontalTextAlignment | ✅ | ✅ | ✅ |
| LineBreakMode | ✅ | ✅ | ✅ |
| LineHeight | ✅ | ✅ | ✅ |
| MaxLines | ✅ | ✅ | ✅ |
| Padding | ✅ | ✅ | ✅ |
| Text | ✅ | ✅ | ✅ |
| TextColor | ✅ | ✅ | ✅ |
| TextDecorations | ✅ | ✅ | ⏳ |
| TextType | ⏳ | ⏳ | ⏳ |
| VerticalTextAlignment | ⚠️ | ⚠️ | ⚠️ |
⚠️ Map
| API | Android | iOS / Mac Catalyst | Windows |
|---|---|---|---|
| HasScrollEnabled | ⚠️ | ⚠️ | ⚠️ |
| HasZoomEnabled | ⚠️ | ⚠️ | ⚠️ |
| IsShowingUser | ⚠️ | ⚠️ | ⚠️ |
| ItemsSource | ⚠️ | ⚠️ | ⚠️ |
| ItemTemplate | ⚠️ | ⚠️ | ⚠️ |
| ItemTemplateSelector | ⚠️ | ⚠️ | ⚠️ |
| LastMoveToRegion | ⚠️ | ⚠️ | ⚠️ |
| MapType | ⚠️ | ⚠️ | ⚠️ |
| Pins | ⚠️ | ⚠️ | ⚠️ |
| TrafficEnabled | ⚠️ | ⚠️ | ⚠️ |
| VisibleRegion | ⚠️ | ⚠️ | ⚠️ |
| MoveToRegion | ⚠️ | ⚠️ | ⚠️ |
| MapClicked | ⚠️ | ⚠️ | ⚠️ |
⚠️ Picker
| API | Android | iOS / Mac Catalyst | Windows |
|---|---|---|---|
| CharacterSpacing | ✅ | ✅ | ✅ |
| FontAttributes | ✅ | ✅ | ✅ |
| FontFamily | ✅ | ✅ | ✅ |
| FontSize | ✅ | ✅ | ✅ |
| HorizontalTextAlignment | ⚠️ | ⚠️ | ⚠️ |
| ItemDisplayBinding | ✅ | ✅ | ⚠️ |
| Items | ✅ | ✅ | ✅ |
| ItemsSource | ✅ | ✅ | ✅ |
| SelectedIndex | ✅ | ✅ | ✅ |
| SelectedIndexChanged | ⚠️ | ⚠️ | ⚠️ |
| SelectedItem | ✅ | ✅ | ⚠️ |
| TextColor | ✅ | ✅ | ⏳ |
| Title | ✅ | ✅ | ✅ |
| TitleColor | ⏳ | ⏳ | ⚠️ |
| VerticalTextAlignment | ⚠️ | ⚠️ | ⚠️ |
⚠️ ProgressBar
| API | Android | iOS / Mac Catalyst | Windows |
|---|---|---|---|
| Progress | ✅ | ✅ | ⏳ |
| ProgressColor | ⏳ | ⏳ | ⚠️ |
| ProgressTo | ⚠️ | ⚠️ | ⚠️ |
⚠️ RadioButton
| API | Android | iOS / Mac Catalyst | Windows |
|---|---|---|---|
| CheckedChanged | ⚠️ | ⚠️ | ⚠️ |
| GroupName | ⚠️ | ⚠️ | ⚠️ |
| IsChecked | ⏳ | ⏳ | ⚠️ |
⚠️ RefreshView
| API | Android | iOS / Mac Catalyst | Windows |
|---|---|---|---|
| Command | ⚠️ | ⚠️ | ⚠️ |
| CommandParameter | ⚠️ | ⚠️ | ⚠️ |
| IsRefreshing | ⚠️ | ⚠️ | ⚠️ |
| RefreshColor | ⚠️ | ⚠️ | ⚠️ |
| Refreshing | ⚠️ | ⚠️ | ⚠️ |
⚠️ SearchBar
| API | Android | iOS / Mac Catalyst | Windows |
|---|---|---|---|
| BackgroundColor | ✅ | ✅ | ⚠️ |
| CharacterSpacing | ✅ | ✅ | ⏳ |
| CancelButtonColor | ⚠️ | ⚠️ | ⚠️ |
| FontAttributes | ✅ | ✅ | ⚠️ |
| FontSize | ✅ | ✅ | ⚠️ |
| HorizontalTextAlignment | ✅ | ✅ | ⚠️ |
| MaxLength | ✅ | ✅ | ⏳ |
| SearchCommand | ⚠️ | ⚠️ | ⚠️ |
| SearchCommandParameter | ⚠️ | ⚠️ | ⚠️ |
| Text | ✅ | ✅ | ⏳ |
| TextColor | ✅ | ✅ | ⚠️ |
| VerticalTextAlignment | ⚠️ | ⚠️ | ⚠️ |
⚠️ Shapes
| API | Android | iOS / Mac Catalyst | Windows |
|---|---|---|---|
| Fill | ⏳ | ⏳ | ⚠️ |
| Stroke | ⏳ | ⏳ | ⚠️ |
| StrokeDashArray | ⏳ | ⏳ | ⚠️ |
| StrokeDashOffset | ⏳ | ⏳ | ⚠️ |
| StrokeLineCap | ⏳ | ⏳ | ⚠️ |
| StrokeLineJoin | ⏳ | ⏳ | ⚠️ |
| StrokeMiterLimit | ⏳ | ⏳ | ⚠️ |
| StrokeThickness | ⏳ | ⏳ | ⚠️ |
⚠️ Slider
| API | Android | iOS / Mac Catalyst | Windows |
|---|---|---|---|
| DragCompleted | ✅ | ✅ | ✅ |
| DragCompletedCommand | ✅ | ⚠️ | ✅ |
| DragStarted | ✅ | ✅ | ✅ |
| DragStartedCommand | ✅ | ✅ | ✅ |
| Maximum | ✅ | ✅ | ✅ |
| MaximumTrackColor | ✅ | ✅ | ✅ |
| Minimum | ✅ | ✅ | ✅ |
| MinimumTrackColor | ✅ | ✅ | ✅ |
| ThumbColor | ✅ | ✅ | ⚠️ |
| Value | ✅ | ✅ | ✅ |
| ValueChanged | ✅ | ✅ | ✅ |
⚠️ Stepper
| API | Android | iOS / Mac Catalyst | Windows |
|---|---|---|---|
| Increment | ✅ | ✅ | ✅ |
| Maximum | ✅ | ✅ | ✅ |
| Minimum | ✅ | ✅ | ✅ |
| Value | ✅ | ✅ | ✅ |
| ValueChanged | ✅ | ✅ | ✅ |
⚠️ SwipeView
| API | Android | iOS / Mac Catalyst | Windows |
|---|---|---|---|
| BottomItems | ⚠️ | ⚠️ | ⚠️ |
| LeftItems | ⚠️ | ⚠️ | ⚠️ |
| RightItems | ⚠️ | ⚠️ | ⚠️ |
| TopItems | ⚠️ | ⚠️ | ⚠️ |
⚠️ Switch
| API | Android | iOS / Mac Catalyst | Windows |
|---|---|---|---|
| IsToggled | ✅ | ✅ | ✅ |
| OnColor | ✅ | ✅ | ⏳ |
| ThumbColor | ✅ | ✅ | ⏳ |
⚠️ TimePicker
| API | Android | iOS / Mac Catalyst | Windows |
|---|---|---|---|
| BackgroundColor | ✅ | ✅ | ⚠️ |
| CharacterSpacing | ✅ | ✅ | ⏳ |
| FontAttributes | ✅ | ✅ | ⏳ |
| FontFamily | ✅ | ✅ | ⏳ |
| FontSize | ✅ | ✅ | ⏳ |
| Format | ✅ | ✅ | ⏳ |
| Time | ✅ | ✅ | ✅ |
| TextColor | ✅ | ✅ | ⚠️ |
⚠️ WebView
| API | Android | iOS / Mac Catalyst | Windows |
|---|---|---|---|
| CanGoBack | ⚠️ | ⚠️ | ⚠️ |
| CanGoForward | ⚠️ | ⚠️ | ⚠️ |
| Cookies | ⚠️ | ⚠️ | ⚠️ |
| Source | ⏳ | ⏳ | ⚠️ |
| Eval | ⚠️ | ⚠️ | ⚠️ |
| EvaluateJavaScriptAsync | ⚠️ | ⚠️ | ⚠️ |
| GoBack | ⚠️ | ⚠️ | ⚠️ |
| GoForward | ⚠️ | ⚠️ | ⚠️ |
| Reload | ⚠️ | ⚠️ | ⚠️ |
Layouts
| Layout | Android | iOS / Mac Catalyst | Windows |
|---|---|---|---|
| AbsoluteLayout | ⚠️ | ⚠️ | ⚠️ |
| ContentPresenter | ⚠️ | ⚠️ | ⚠️ |
| ContentView | ⚠️ | ⚠️ | ⚠️ |
| FlexLayout | ⚠️ | ⚠️ | ⚠️ |
| Grid | ⏳ | ⏳ | ⏳ |
| RelativeLayout | ⚠️ | ⚠️ | ⚠️ |
| ScrollView | ⚠️ | ⚠️ | ⚠️ |
| StackLayout | ⏳ | ⏳ | ⏳ |
| TemplatedView | ⚠️ | ⚠️ | ⚠️ |
Features
| Feature | Android | iOS / Mac Catalyst | Windows |
|---|---|---|---|
| Accessibility | ⏳ | ⏳ | ⏳ |
| Animation | ⏳ | ⏳ | ⏳ |
| Border Everywhere | ⏳ | ⏳ | ⏳ |
| Brushes Everywhere | ⏳ | ⏳ | ⏳ |
| CornerRadius Everywhere | ⏳ | ⏳ | ⏳ |
| Device | ⚠️ | ⚠️ | ⚠️ |
| Gestures | ⏳ | ⏳ | ⏳ |
| ImageHandlers | ✅ | ✅ | ✅ |
| Interactivity (Behaviors, Triggers, Visual State Manager) | ⚠️ | ⚠️ | ⚠️ |
| FlowDirection (RTL) | ⏳ | ⏳ | ⏳ |
| Fonts | ✅ | ✅ | ✅ |
| Lifecycle Events | ⏳ | ⏳ | ⏳ |
| Themes | ⚠️ | ⚠️ | ⚠️ |
| Shell | ⏳ | ⏳ | ⏳ |
| Styles | ✅ | ✅ | ✅ |
| View Transforms | ⏳ | ⏳ | ⏳ |