Merhabalar,

.NET 6 RC2 ve Visual Studio preview 5 ile beraber .NET MAUI Preview 9 duyuruldu. Bu güncelleme sonlara doğru geldiğimizi gösteriyor gibi 🙂 50’den fazla kontrol ve layout tarafında güncelleme oldu. Microsoft.Maui.Graphics altında native UI API’ları kullanarak borders, corner rendering ve shadow ekleyebiliyoruz. Teker teker incelemeye başlayalım.

Updated Controls

BoxView , IndicatorView, ImageButton ,WebView ve Label tarafındaki güncellemelerle başlayalım.

BoxView üzerinde corner radius gibi özelliklerini kullanarak ihtiyacınız olan yerlerde kullanabilirsiniz.

       <BoxView Color="Gray"
                         CornerRadius="10"
                         WidthRequest="160"
                         HeightRequest="160"
                         VerticalOptions="Center"
                         HorizontalOptions="Center" />

IndicatorView genelde CarouselView ile kullandığımız yardımcı bir kontrol diyebiliriz. Liste içerisindeki itemların sayısını ve indexini belirtir.

       <StackLayout Margin="10">
                <CarouselView ItemsSource="{Binding .}"
                                          IndicatorView="indicatorView">
                        <CarouselView.ItemTemplate>
                                <DataTemplate>
                                        <StackLayout>
                                                <Label Text="{Binding Name}"
                                                           FontAttributes="Bold"
                                                           FontSize="Large"
                                                           HorizontalOptions="Center"
                                                           VerticalOptions="Center" />
                                        </StackLayout>
                                </DataTemplate>
                        </CarouselView.ItemTemplate>
                </CarouselView>
                <IndicatorView x:Name="indicatorView"
                       IndicatorColor="LightGray"
                       SelectedIndicatorColor="DarkGray"
                       HorizontalOptions="Center" />
        </StackLayout>

Varsayılan olarak yukarıdaki gibi bir görsel elde edeceksiniz fakat bu görseli dilediğimiz gibi değiştirebiliriz.

               <IndicatorView x:Name="indicatorView"
                       IndicatorColor="Red"
                                           IndicatorsShape="Square"
                                           HideSingle="True"
                                           IndicatorSize="20"
                                           MaximumVisible="10"
                       SelectedIndicatorColor="Green"
                       HorizontalOptions="Center" />

Yukarıdaki gibi bir görsele kavuşmak sadece 1-2 özellik eklemek/değiştirmek kadar kolay 🙂

Label tarafında HTML support geldi ve WebView için de platform native özellikler geldi. Özellikle WebView için gerçekten gerekliydi diyebiliriz.

Borders, Corners, Shadows

<StackLayout>
                <Image  Source="dotnet_bot.png"
                                SemanticProperties.Description="Cute dot net bot waving hi to you!"
                                WidthRequest="250"
                                HeightRequest="310"
                                HorizontalOptions="Center">
                        <Image.Shadow>
                                <Shadow Brush="#000000"
                                                Offset="20,20"
                                                Radius="40"
                                                Opacity="0.8"/>
                        </Image.Shadow>
                </Image>
        </StackLayout>

       <StackLayout Margin="25">
        <Border Padding="16,8"
                        Stroke="Red"
                        Background="White"
                        StrokeThickness="4"
                        HorizontalOptions="Center">
                                <Border.StrokeShape>
                                        <RoundRectangle CornerRadius="40,0,0,40"/>
                                </Border.StrokeShape>
                                        <Label
                                                Text=".NET MAUI"
                                                FontSize="18"
                                                FontAttributes="Bold"
                                                TextColor="Black" />
        </Border>
        </StackLayout>

DevExpress, Syncfusion, ve Telerik tarafında da .NET MAUI destekli kontrollere göz atmak isteyebilirsiniz. Xamarin.Forms ile uygulama geliştirirken de bu firmaların ürünlerinden bahsetmiştik ve örneklendirmiştik.

Kaynak : https://devblogs.microsoft.com/dotnet/announcing-net-maui-preview-9/