C# Markup

Articolo
11/11/2023

Panoramica

Il markup C# è un set di metodi e classi helper fluent progettati per semplificare il processo di compilazione di interfacce utente dell'app multipiattaforma .NET dichiarative (.NET MAUI) nel codice. L'API Fluent fornita dal markup C# è disponibile nello spazio dei CommunityToolkit.Maui.Markup nomi .

Analogamente a XAML, il markup C# consente una separazione pulita tra l'interfaccia utente (visualizzazione) e la logica di business (modello di visualizzazione).

Il markup C# è disponibile in tutte le piattaforme supportate da .NET MAUI e supporta .NET Ricaricamento rapido.

Pacchetto NuGet

Il pacchetto di markup C# può essere incluso nei progetti, come descritto nella Guida introduttiva .

Esempi

Di seguito sono riportati alcuni brevi esempi che illustrano come è possibile ottenere attività comuni tramite l'uso del pacchetto di markup.

Bindings

Il markup C# consente di definire l'associazione in modo fluente e quindi concatenare più metodi per ridurre il livello di dettaglio del codice:

new Entry().Bind(Entry.TextProperty, static (ViewModel vm) => vm.RegistrationCode, static (ViewModel vm, string text) => vm.RegistrationCode = text)

Per altre informazioni sulle opzioni possibili per il Bind metodo, vedere la BindableObject documentazione delle estensioni.

Dimensionamento

Il markup C# consente di definire il ridimensionamento in modo fluente e quindi concatenare più metodi per ridurre il livello di dettaglio del codice:

new Entry().Size(200, 40);

Per altre informazioni sulle opzioni possibili per il Size metodo, vedere la VisualElement documentazione delle estensioni.

Esempio approfondito

In questo esempio viene creato un Grid oggetto con oggetti figlio Label e Entry . Visualizza Label il testo e i Entry dati vengono associati alla RegistrationCode proprietà del modello di visualizzazione. Ogni vista figlio è impostata per essere visualizzata in una riga specifica di Gride Entry estende tutte le colonne nell'oggetto Grid. Inoltre, l'altezza di Entry è impostata, insieme alla tastiera, ai colori, alle dimensioni del carattere del testo e al relativo Marginoggetto .

Le estensioni di markup C# consentono inoltre agli sviluppatori di definire nomi per colonne e righe (ad esempio Column.Input) usando un oggetto enum.

Il markup C# consente di definirlo usando l'API Fluent:

using static CommunityToolkit.Maui.Markup.GridRowsColumns;

class SampleContentPage : ContentPage
{
    public SampleContentPage()
    {
        Content = new Grid
        {
            RowDefinitions = Rows.Define(
                (Row.TextEntry, 36)),

            ColumnDefinitions = Columns.Define(
                (Column.Description, Star),
                (Column.Input, Stars(2))),

            Children =
            {
                new Label()
                    .Text("Code:")
                    .Row(Row.TextEntry).Column(Column.Description),

                new Entry
                {
                    Keyboard = Keyboard.Numeric,
                }.Row(Row.TextEntry).Column(Column.Input)
                 .BackgroundColor(Colors.AliceBlue)
                 .FontSize(15)
                 .Placeholder("Enter number")
                 .TextColor(Colors.Black)
                 .Height(44)
                 .Margin(5, 5)
                 .Bind(Entry.TextProperty, static (ViewModel vm) => vm.RegistrationCode, static (ViewModel vm, string text) => vm.RegistrationCode = text)
            }
        };
    }

    enum Row { TextEntry }
    enum Column { Description, Input }
}

Convertitori

Il pacchetto di markup C# consente di definire IValueConverter e IMultiValueConverter implementare inline durante la compilazione dell'interfaccia utente delle applicazioni.

Convertitore	Descrizione
`FuncConverter`	`FuncConverter` offre la possibilità di definire un'implementazione `IValueConverter` inline durante la compilazione dell'interfaccia utente.
`FuncMultiConverter`	`FuncMultiConverter` offre la possibilità di definire un'implementazione `IMultiValueConverter` inline durante la compilazione dell'interfaccia utente.

Estensioni

Nota

Il markup C# include metodi di estensione che impostano proprietà di visualizzazione specifiche. Sono progettati per migliorare la leggibilità del codice e possono essere usati in combinazione con i setter di proprietà. È consigliabile usare sempre un metodo di estensione quando ne esiste uno per una proprietà, ma è possibile scegliere il saldo preferito.

Estensione	Descrizione
`AbsoluteLayout`	Le estensioni AbsoluteLayout forniscono una serie di metodi di estensione che supportano il posizionamento `View`di s in `AbsoluteLayout`s.
`AutomationProperties`	Le `AutomationProperties` estensioni forniscono una serie di metodi di estensione che supportano la configurazione delle impostazioni correlate all'accessibilità.
`BindableLayout`	Le `BindableLayout` estensioni forniscono una serie di metodi di estensione che supportano la `ItemSourceEmptyView`configurazione di e `ItemTemplate`.
`BindableObject`	Le `BindableObject` estensioni forniscono una serie di metodi di estensione che supportano la `Binding`configurazione di in un oggetto `BindableObject`.
`DynamicResourceHandler`	Le `DynamicResourceHandler` estensioni forniscono una serie di metodi di estensione che supportano la `IDynamicResourceHandler` configurazione che può essere usata per temiare un'app.
`Element`	Le `Element` estensioni forniscono una serie di metodi di estensione che supportano la configurazione della spaziatura interna, degli effetti, degli attributi del carattere, delle risorse dinamiche, del testo e del colore del testo di un oggetto `Element`.
`FlexLayout`	Le estensioni FlexLayout forniscono una serie di metodi di estensione che supportano il posizionamento di un `View` oggetto in un oggetto `FlexLayout`.
`Grid`	Le estensioni griglia forniscono una serie di metodi di estensione che supportano la configurazione di una griglia.
`Image`	Le `Image` estensioni forniscono una serie di metodi di estensione che supportano la configurazione dei `IImage` controlli.
`ItemsView`	Le `ItemsView` estensioni forniscono una serie di metodi di estensione che supportano la configurazione `ItemsView` di controlli come `CarouselView` e `CollectionView`.
`Label`	Le `Label` estensioni forniscono una serie di metodi di estensione che supportano la configurazione dei `Label` controlli.
`Placeholder`	Le `Placeholder` estensioni forniscono una serie di metodi di estensione che supportano la configurazione dei `IPlaceholder` controlli.
`SemanticProperties`	Le `SemanticProperties` estensioni forniscono una serie di metodi di estensione che supportano la configurazione delle impostazioni correlate all'accessibilità.
`Style`	`Style<T>` fornisce una serie di metodi di estensione Fluent che supportano la configurazione di `Microsoft.Maui.Controls.Style`.
`TextAlignment`	Le `TextAlignment` estensioni forniscono una serie di metodi di estensione che supportano la configurazione delle `HorizontalTextAlignment` proprietà e `VeticalTextAlignment` nei controlli che implementano `ITextAlignment`.
`View`	Le `View` estensioni forniscono una serie di metodi di estensione che supportano la configurazione dell'allineamento dei controlli che ereditano da `View`.
`VisualElement`	Le `VisualElement` estensioni forniscono una serie di metodi di estensione che supportano la configurazione del ridimensionamento, dello stile e dei comportamenti di un oggetto `VisualElement`.

Share via