XAML'den C#'a · FmgLib.MauiMarkup

FmgLib.MauiMarkup, XAML'de atayabildiğiniz her özellik için bir fluent genişletme metodu sağlar. Bir avuç eşleme kuralını içselleştirdikten sonra herhangi bir XAML parçasını mekanik olarak çevirebilirsiniz.

Eşleme Kuralları#

XAML kavramı	FmgLib.MauiMarkup karşılığı
`<Label ... />` öğesi	`new Label()`
Öznitelik `Text="Hi"`	`.Text("Hi")`
Attached property `Grid.Row="1"`	`.Row(1)` (bkz. Attached Property'ler)
Property element `<Label.Content>…`	Nesneyi alan aynı fluent metot: `.Content(new … )`
Çocuk koleksiyonu (örtük içerik)	Konteynere göre `.Children(...)`, `.Items(...)`, `.Content(...)`
`{Binding Path=Name}`	`.Text(e => e.Path("Name"))` (bkz. Özellik Bağlama)
`{StaticResource key}`	Doğrudan C# nesnesini/sabitini kullanın
`{DynamicResource key}`	`.BackgroundColor(e => e.DynamicResource("key"))`
`{OnPlatform ...}`	`.FontSize(e => e.OnAndroid(20).OniOS(24).Default(22))`
`{OnIdiom ...}`	`.FontSize(e => e.OnPhone(20).OnDesktop(40).Default(30))`
`{AppThemeBinding Light=…, Dark=…}`	`.TextColor(e => e.OnLight(Colors.Black).OnDark(Colors.White))`
`x:Name="myLabel"`	`.Assign(out var myLabel)`
Olay özniteliği `Clicked="OnClicked"`	`.OnClicked(OnClicked)`
`<Style TargetType="Button">`	`new Style<Button>(e => e …)` (bkz. Stiller)
`<DataTemplate>`	`.ItemTemplate(() => new …)` — görünümü üreten bir lambda

Yan Yana Örnekler#

Basit kontrol#

XAML

XML

<Image
    Source="dotnet_bot.png"
    HeightRequest="100"
    WidthRequest="150"
    Grid.Row="0"
    Grid.Column="1"
    Grid.RowSpan="2"
    Opacity=".8" />

new Image()
.Source("dotnet_bot.png")
.Row(0)
.Column(1)
.RowSpan(2)
.SizeRequest(150, 100)   // kolaylık: WidthRequest + HeightRequest'i tek seferde ayarlar
.Opacity(.8)

SizeRequest(width, height), kütüphanenin 1:1 özellik eşlemesinin ötesinde eklediği kolaylık kısayollarından biridir. Elbette .WidthRequest(150).HeightRequest(100) da yazabilirsiniz.

Metin biçimlendirme#

XAML

XML

<Label Text="fmglib.mauimarkup"
       FontSize="12"
       Grid.Row="1"
       TextColor="Green"
       FontAttributes="Bold"
       Margin="5,3,0,5" />

new Label()
.Text("fmglib.mauimarkup")
.FontSize(12)
.Row(1)
.TextColor(Colors.Green)
.FontAttributes(FontAttributes.Bold)
.Margin(new Thickness(5, 3, 0, 5))

Margin ve Padding daha pratik overload'lara da sahiptir:

.Margin(10)                    // tüm kenarlar
.Margin(10, 5)                 // yatay, dikey
.Margin(5, 3, 0, 5)            // sol, üst, sağ, alt
.Margin(left: 5, bottom: 5)    // isimli — belirtilmeyen kenarlar 0 olur

İç içe içerikli bir sayfa#

XAML

XML

<ContentPage BackgroundImageSource="background.jpg">
    <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
        <ActivityIndicator IsRunning="True"
                           HeightRequest="70"
                           WidthRequest="70" />
    </StackLayout>
</ContentPage>

C# (sayfa sınıfının içinde)

this
.BackgroundImageSource("background.jpg")
.Content(
    new StackLayout()
    .Center()
    .Children(
        new ActivityIndicator()
        .IsRunning(true)
        .HeightRequest(70)
        .WidthRequest(70)
        .Center()
    )
);

Binding'ler#

XAML

XML

<Label Text="{Binding Value, Source={x:Reference slider}, StringFormat='Slider: {0}'}" />

new Slider().Assign(out var slider).Minimum(1).Maximum(20),

new Label()
.Text(e => e.Path("Value").Source(slider).StringFormat("Slider: {0}"))

DataTemplate'ler#

XAML

XML

<CollectionView ItemsSource="{Binding Products}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Label Text="{Binding Name}" FontSize="20" />
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

new CollectionView()
.ItemsSource(e => e.Path("Products"))
.ItemTemplate(() =>
    new Label()
    .Text(e => e.Path("Name"))
    .FontSize(20)
)

ItemTemplate'e verilen lambda <DataTemplate> öğesinin rolünü üstlenir: gerçekleşen her öğe için bir kez çağrılır ve içindeki binding'ler öğenin BindingContext'ine göre çözülür.

Kaynaklar ve stiller#

XAML

XML

<ContentPage.Resources>
    <Style TargetType="Entry">
        <Setter Property="TextColor" Value="White" />
    </Style>
</ContentPage.Resources>

this.Resources(
    new ResourceDictionary
    {
        new Style<Entry>(e => e.TextColor(Colors.White))
    }
)

XAML'e Göre Kazanımlar#

Tek dil — mantık ve UI bir arada; code-behind/x:Name tesisatı yok.
Derleme zamanı güvenliği — özellik adındaki yazım hatası çalışma zamanı çökmesi değil, derleme hatasıdır.
Tam IntelliSense ve refactoring — view model özelliğini yeniden adlandırın, derlenmiş binding'lerle yazılmış tüm "binding"ler otomatik takip eder.

Gerçek kontrol akışı — UI kurarken if, döngü, LINQ, local function ve yardımcı metotlar kullanın:

new VerticalStackLayout()
.Children(
    menuItems.Select(item =>
        (IView)new Button().Text(item.Title).OnClicked(_ => Navigate(item))
    ).ToArray()
)

Kompozisyon — herhangi bir alt ağacı sıradan bir metoda çıkarın:

static Border Card(string title, View content) =>
    new Border()
    .StrokeShape(new RoundRectangle().CornerRadius(12))
    .Padding(16)
    .Content(
        new VerticalStackLayout().Spacing(8).Children(
            new Label().Text(title).FontAttributes(FontAttributes.Bold),
            content
        )
    );

İlgili Konular#

Fluent Özellikler — özellik metotlarının kabul ettiği her şey (değerler, binding'ler, platform builder'ları…)
Attached Property'ler — tam XAML attached property → metot tablosu
Olay İşleyiciler — On<Event> metot kalıpları