Commencer avec le contrôle du grid de la grille .net Maui

Le contrôle .net Maui GridPlitter permet aux utilisateurs de redistribuer l’espace entre les lignes et les colonnes d’une grille pour améliorer l’expérience utilisateur et la personnalisation. Apprenez à implémenter le GridPlitter de Telerik UI pour .net Maui.

Dans cet article, nous analyserons le nouveau .Net Maui GridPlitter Controlqui fait partie de la progression de l’interface utilisateur .Net Maui Controls Suite. Commençons!

Qu’est-ce que le contrôle du Grid Plitter?

Le contrôle GridsPlitter permet à vos utilisateurs de redistribuer l’espace entre les lignes et les colonnes d’une grille. Ceci est utile lorsque vous souhaitez offrir la possibilité d’ajuster la disposition de vos pages, d’améliorer l’expérience utilisateur et la personnalisation.

Le contrôle des attestations de grille est composée d’un Gripper indicateur et un Séparateur de grillecomme indiqué ci-dessous:

Explorons certains cas d’utilisation pour le contrôle du GRIDSPLITTER ci-dessous.

Quels sont les cas d’utilisation pour un contrôle de la grille?

L’utilisation du contrôle de la grille peut être très bénéfique dans les interfaces où vos utilisateurs peuvent vouloir optimiser l’espace de certaines sections de votre application en les redimensionnant. Un cas d’utilisation pourrait être dans une application avec un menu de barre latérale que vous souhaitez rendre résidante, plus petite ou plus grande.

Un autre cas d’utilisation pourrait être une application qui affiche des informations de maîtrise, permettant l’affichage des informations d’un produit d’un côté et ses détails d’un autre. Vous pouvez également utiliser un GRIDSPLitter dans des applications graphiques, comme une application de dessin avec une section contenant la toile pour les croquis et une autre section avec des outils de dessin ou des propriétés pour les éléments sur la toile.

Dans cet article, nous vous guiderons à travers la façon dont vous pouvez implémenter un GRIDSPLITTER dans une application de l’éditeur de texte Markdown, où une section vous permet d’écrire du code Markdown, et l’autre fournit un aperçu du contenu rendu.

Création d’une application de l’éditeur de texte Markdown

Créons une application Markdown Text Editor avec un aperçu en temps réel. Cela sera facilement réalisé grâce au .Net Maui Richtexteditor Contrôlequi prend en charge le rendu du contenu HTML nativement. Maintenant, vous vous demandez peut-être pourquoi nous rendrons HTML alors que ce que nous voulons réellement prévisualiser est Markdown. La réponse est que nous convertirons le code de marquage en HTML, ce qui simplifie la tâche.

Pour créer cette application, suivez ces étapes:

1. Créer un projet en utilisant le Application .net Maui modèle et laissez le Inclure un échantillon de contenu Option non contrôlée.
2. Suivre guide d’installation Pour configurer Telerik UI Controls dans votre projet .net Maui.
3. Installer le Markdig Package NuGet, qui permet la conversion du code Markdown en HTML.
4. Installez également le CommunityToolkit.Mvvm Emballage pour construire rapidement des modèles de vue.
5. Remplacer le contenu de Mainpage.xaml avec ce qui suit:

    <Grid RowDefinitions="*,*">
        <Grid Margin="10" RowDefinitions=".1*,.9*">
            <Label Text="Live Preview:" VerticalOptions="Center" />
            <Border Grid.Row="1" StrokeThickness="2">
                <telerik:RadRichTextEditor x:Name="richTextEditor" Source="{Binding HtmlContent}" />
            </Border>
        </Grid>

        <Grid
            Grid.Row="1"
            Margin="10"
            RowDefinitions=".1*,.9*">
            <Label Text="Markdown Editor:" VerticalOptions="Center" />
            <Border Grid.Row="1" Margin="0,10,0,10">
                <Editor Text="{Binding MarkdownText}" AutoSize="Disabled" HeightRequest="300"/>
            </Border>
        </Grid>
    </Grid>

6. Créer un fichier appelé MainViewModel.cs et remplacer son contenu par le code suivant:

public partial class MainViewModel : ObservableObject
{
    [ObservableProperty]
    string markdownText;
    [ObservableProperty]
    string htmlContent;

    partial void OnMarkdownTextChanged(string value)
    {
        var result = Markdown.ToHtml(value);
        HtmlContent = result;
        Console.WriteLine(result);
    }
}

7. Dans MainPage.xaml.csremplacez le contenu par ce qui suit:

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        BindingContext = new MainViewModel();
    }
}

Avec ces modifications appliquées, vous aurez une application entièrement fonctionnelle qui permet un aperçu du code de démarque en temps réel, comme indiqué ci-dessous:

L’application est entièrement fonctionnelle, mais elle aiderait grandement les utilisateurs à redimensionner la section Editor Markdown ainsi que la section Aperçu de contenu, faisant de ce scénario un excellent candidat pour ajouter un GRIDSPLITT.

Ajout d’un gridpitter au projet

Pour ajouter un contrôle de la grille, nous devons envisager d’ajouter une ligne ou une colonne supplémentaire à la grille qui le contient pendant la conception. Par exemple, notre application a actuellement deux lignes dans la grille principale. Il serait idéal de créer une ligne supplémentaire entre les deux sections pour accueillir le Grid Plitter, qui peut ensuite être traîné pour redimensionner une section ou l’autre. Sachant cela, nous pouvons modifier le MainPage.xaml Fichier comme suit:

<ContentPage
    ...
    xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui">

    <Grid RowDefinitions="*,Auto,*">
        <Grid...>
            ...
        </Grid>
        <telerik:RadGridSplitter
            Grid.Row="1"
            HorizontalOptions="Fill"
            VerticalOptions="Start" />
        <Grid...>
            ...
        </Grid>
    </Grid>

</ContentPage>

Une fois cela fait, nous verrons que le GridSplitter Le contrôle a été ajouté et nous pouvons l’utiliser pour modifier les tailles de ligne dans l’application:

Bien que le contrôle soit apparu dans l’interface utilisateur, le comportement n’est pas comme prévu. Pour résoudre ce problème, regardons les propriétés qui nous permettent de configurer le GridSplitter.

Configuration du contrôle de la grille via Residiseidirerection

Il y a deux propriétés qui nous permettent de modifier le GridSplitter comportement. D’abord, ResizeDirection est utilisé pour indiquer si nous voulons que l’utilisateur puisse redimensionner des lignes ou des colonnes. Les valeurs possibles que nous pouvons attribuer comprennent Auto (défaut), Columns et Rows.

Par exemple, supposons que vous ayez l’interface utilisateur suivante:

<Grid ColumnDefinitions="*,Auto,*" RowDefinitions="*,Auto,*">
    
    <telerik:RadGridSplitter
        x:Name="splitter"
        Grid.Row="1"
        Grid.Column="1" />

    <Grid BackgroundColor="DarkRed" />
    <Grid Grid.Column="2" BackgroundColor="DarkBlue" />
    <Grid Grid.Row="2" BackgroundColor="DarkGreen" />
    <Grid
        Grid.Row="2"
        Grid.Column="2"
        BackgroundColor="DarkMagenta" />
</Grid>

Si vous attribuez la valeur Columns à ResizeDirectionnous pouvons voir que les colonnes de la grille contenant peuvent être redimensionnées, mais pas les lignes:

D’un autre côté, si nous attribuons une valeur de Rows à ResizeDirectionnous pouvons redimensionner les lignes, mais pas les colonnes:

La valeur par défaut pour ResizeDirection est Autoqui détermine automatiquement s’il faut permettre le redimensionnement des lignes ou des colonnes en fonction de la HorizontalOptions et VerticalOptions propriétés, ainsi que le width par rapport au height.

Configuration du contrôle de la grille via ResizeBehavior

La deuxième propriété que nous pouvons configurer pour le GridSplitter en termes de comportement est ResizeBehavior. Cette propriété est utilisée pour contrôler comment les lignes et les colonnes se comportent lorsque le redimensionnement se produit. Cette propriété accepte les valeurs du GridResizeBehavior Énumération, avec les valeurs possibles suivantes:

• CurrentAndNext: Redimensionne la ligne actuelle et la colonne suivante, c’est-à-dire la ligne ou la colonne où le GridSplitter est situé et la ligne ou la colonne suivante.
• PreviousAndCurrent: Redimensionne la ligne ou la colonne précédente et actuelle, c’est-à-dire la ligne ou la colonne où le GridSplitter est situé et la ligne ou la colonne précédente.
• PreviousAndNext: Redimensionne la ligne ou la colonne précédente et suivante, c’est-à-dire la ligne ou la colonne avant le GridSplitter Emplacement et la ligne ou la colonne suivante.
• BasedOnAlignment: Il s’agit de la valeur par défaut, qui détermine automatiquement quelles lignes ou colonnes sont redimensionnées en fonction de leur alignement, en utilisant les valeurs de HorizontalAlignment et VerticalAlignment.

Dans notre exemple d’application, comme nous voulons à la fois la zone de l’éditeur de code Markdown et l’aperçu est résidante, nous appliquerons la valeur PreviousAndNext comme suit:

<telerik:RadGridSplitter
    Grid.Row="1"
    HorizontalOptions="Fill"
    ResizeBehavior="PreviousAndNext"
    VerticalOptions="Start" />

Cela produira le comportement suivant:

Styling the .net Maui Gridplitter

Le GridSplitter Le contrôle offre plusieurs propriétés qui vous permettent de la personnaliser pour correspondre à la marque de votre application. Les propriétés qui peuvent aider à cela BackgroundColor, Background, BorderColor, BorderBrush, BorderThickness, CornerRadius et ContentPadding. De plus, vous pouvez modifier la couleur de la pince à l’aide du GripperColor propriété.

Vous pouvez également utiliser les propriétés ci-dessus en conjonction avec les états visuels Normal, MouseOver et Disabled Pour améliorer davantage l’expérience utilisateur, comme indiqué dans l’exemple suivant:

<Grid RowDefinitions="*,Auto,*">
    <Grid.Resources>
        <Style TargetType="telerik:RadGridSplitter">
            <Setter Property="BackgroundColor" Value="#2196F3" />
            <Setter Property="Background" Value="#2196F3" />
            <Setter Property="BorderColor" Value="#1976D2" />
            <Setter Property="BorderBrush" Value="#1976D2" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="CornerRadius" Value="0" />
            <Setter Property="ContentPadding" Value="2" />
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="#2196F3" />
                                <Setter Property="Background" Value="#2196F3" />
                                <Setter Property="BorderColor" Value="#1976D2" />
                                <Setter Property="BorderBrush" Value="#1976D2" />
                                <Setter Property="BorderThickness" Value="1" />
                                <Setter Property="CornerRadius" Value="0" />
                                <Setter Property="ContentPadding" Value="2" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="MouseOver">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="#9C27B0" />
                                <Setter Property="Background" Value="#AB47BC" />
                                <Setter Property="BorderColor" Value="#7B1FA2" />
                                <Setter Property="BorderBrush" Value="#7B1FA2" />
                                <Setter Property="BorderThickness" Value="3" />
                                <Setter Property="CornerRadius" Value="8" />
                                <Setter Property="ContentPadding" Value="10" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Disabled">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="#424242" />
                                <Setter Property="Background" Value="#616161" />
                                <Setter Property="BorderColor" Value="#757575" />
                                <Setter Property="BorderBrush" Value="#757575" />
                                <Setter Property="BorderThickness" Value="2" />
                                <Setter Property="CornerRadius" Value="4" />
                                <Setter Property="ContentPadding" Value="5" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
    </Grid.Resources>
    
    <Grid Margin="10" RowDefinitions=".1*,.9*">
        <Label
            FontAttributes="Bold"
            Text="Live Preview:"
            TextColor="White"
            VerticalOptions="Center" />
        <Border
            Grid.Row="1"
            Stroke="#1976D2"
            StrokeThickness="2">
            <telerik:RadRichTextEditor x:Name="richTextEditor" Source="{Binding HtmlContent}" />
        </Border>
    </Grid>
    
    <telerik:RadGridSplitter
        Grid.Row="1"
        HorizontalOptions="Fill"
        IsEnabled="False"
        ResizeBehavior="PreviousAndNext"
        VerticalOptions="Start" />
    
    <Grid
        Grid.Row="2"
        Margin="10"
        RowDefinitions=".1*,.9*">
        <Label
            FontAttributes="Bold"
            Text="Markdown Editor:"
            TextColor="White"
            VerticalOptions="Center" />
        <Border
            Grid.Row="1"
            Margin="0,10,0,10"
            Stroke="#1976D2">
            <Editor
                AutoSize="Disabled"
                BackgroundColor="#2C2C2C"
                HeightRequest="300"
                Text="{Binding MarkdownText}"
                TextColor="White" />
        </Border>
    </Grid>
</Grid>

Dans le code précédent, j’ai intentionnellement attribué des valeurs complètement différentes à chaque état visuel afin que vous puissiez les voir plus facilement lors de l’exécution de l’application:

Vous pouvez voir que les couleurs bleuâtre représentent un Normal État, les couleurs violettes indiquent un MouseOver état et, enfin, les couleurs grisâtres représentent un Disabled État.

Conclusion

Tout au long de cet article, vous avez appris ce qu’est le contrôle du grille de Telerik, certains de ses cas d’utilisation et, surtout, comment l’implémenter dans vos propres applications pour permettre aux utilisateurs de redimensionner facilement des sections au sein de votre application. Il est maintenant temps pour vous d’explorer les cas d’utilisation dans vos propres applications pour son utilisation.

Essayez Telerik UI pour .net Maui