Introdução ao controle .Net Maui Gridsplitter

O controle do .NET Maui GridSplitter permite que os usuários redistribuam o espaço entre as linhas e as colunas de uma grade para aprimorar a experiência e a personalização do usuário. Aprenda a implementar o GridSplitter da UI Telerik para .Net Maui.

Neste artigo, analisaremos o novo .Net Maui Gridsplitter Controlque faz parte da interface do projeto do Progress Telerik para .Net Maui Controla Suite. Vamos começar!

Qual é o controle do GridSplitter?

O controle GridSplitter permite que seus usuários redistribuam o espaço entre as linhas e as colunas de uma grade. Isso é útil quando você deseja fornecer a capacidade de ajustar o layout de suas páginas, aprimorando a experiência e a personalização do usuário.

O controle de gridsplitter é composto de um Gripper indicador e a Gridsplittercomo mostrado abaixo:

Vamos explorar alguns casos de uso para o controle GridSplitter abaixo.

Quais são alguns casos de uso para um controle de gridsplitter?

O uso do controle GridSplitter pode ser altamente benéfico em interfaces, onde seus usuários podem otimizar o espaço de determinadas seções em seu aplicativo, redimensionando -as. Um caso de uso pode estar em um aplicativo com um menu da barra lateral que você gostaria de tornar redimensível, menor ou maior.

Outro caso de uso pode ser um aplicativo que exibe informações de detalhes mestre, permitindo a exibição das informações de um produto de um lado e seus detalhes de outro. Você também pode usar um GridSplitter em aplicativos gráficos, como um aplicativo de desenho com uma seção que contém a tela para esboços e outra seção com ferramentas de desenho ou propriedades para elementos na tela.

Neste artigo, direcionaremos você como você pode implementar um GridSplitter em um aplicativo de editor de texto de marcação, onde uma seção permite escrever o código de marcação e o outro fornece uma visualização do conteúdo renderizado.

Criando um aplicativo de editor de texto de marcação

Vamos criar um aplicativo de editor de texto de marcação com visualização em tempo real. Isso será alcançado facilmente graças ao .Net Maui Richtexteditor Controleque suporta renderizar o conteúdo HTML nativamente. Agora, você pode se perguntar por que renderizaríamos HTML quando o que realmente queremos visualizar é o Markdown. A resposta é que converteremos o código de marcação em HTML, que simplifica a tarefa.

Para criar este aplicativo, siga estas etapas:

1. Criar um projeto usando o .NET MAUI APP modelo e deixe o Inclua conteúdo de amostra opção desmarcada.
2. Siga o Guia de instalação Para configurar os controles da interface do Telerik no seu projeto .NET Maui.
3. Instale o Markdig Pacote NUGET, que permite a conversão do código de marcação em HTML.
4. Instale também o CommunityToolkit.Mvvm Pacote para construir modelos de vista limpa rapidamente.
5. Substitua o conteúdo de MainPage.xaml com o seguinte:

    <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. Crie um arquivo chamado MainViewModel.cs e substitua seu conteúdo pelo seguinte código:

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. Em MainPage.xaml.cssubstitua o conteúdo pelo seguinte:

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

Com essas alterações aplicadas, você terá um aplicativo totalmente funcional que permite a visualização do código de marcação em tempo real, como visto abaixo:

O aplicativo é totalmente funcional, mas ajudaria muito os usuários a redimensionar a seção do editor de marcação, bem como a seção de visualizador de conteúdo, tornando esse cenário um excelente candidato para adicionar um GridSplitter.

Adicionando um GridSplitter ao projeto

Para adicionar um controle de gradesplitter, precisamos considerar adicionar uma linha ou coluna extra à grade que a contém durante o design. Por exemplo, nosso aplicativo atualmente possui duas linhas na grade principal. Seria ideal criar uma linha adicional entre as duas seções para acomodar o GridSplitter, que pode ser arrastado para redimensionar uma seção ou outra. Sabendo disso, podemos modificar o MainPage.xaml Arquivo o seguinte:

<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>

Uma vez feito isso, veremos que o GridSplitter O controle foi adicionado e podemos usá -lo para alterar os tamanhos da linha no aplicativo:

Embora o controle tenha aparecido na interface do usuário, o comportamento não é o esperado. Para resolver isso, vejamos as propriedades que nos permitem configurar o GridSplitter.

Configurando o controle GridSplitter via Redirection

Existem duas propriedades que nos permitem modificar o GridSplitter comportamento. Primeiro, ResizeDirection é usado para indicar se queremos que o usuário possa redimensionar linhas ou colunas. Os valores possíveis que podemos atribuir incluem Auto (padrão), Columns e Rows.

Por exemplo, suponha que você tenha a seguinte interface do usuário:

<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>

Se você atribuir o valor Columns para ResizeDirectionpodemos ver que as colunas da grade que contêm podem ser redimensionadas, mas não as linhas:

Por outro lado, se atribuirmos um valor de Rows para ResizeDirectionpodemos redimensionar as linhas, mas não as colunas:

O valor padrão para ResizeDirection é Autoque determina automaticamente se deve permitir o redimensionamento de linha ou coluna com base no HorizontalOptions e VerticalOptions propriedades, bem como as width comparado ao height.

Configurando o controle GridSplitter via redimensionamento

A segunda propriedade que podemos configurar para o GridSplitter em termos de comportamento é ResizeBehavior. Esta propriedade é usada para controlar como linhas e colunas se comportam quando ocorre o redimensionamento. Esta propriedade aceita valores do GridResizeBehavior Enumeração, com os seguintes valores possíveis:

• CurrentAndNext: Redimensione a atual e a próxima linha ou coluna, ou seja, a linha ou coluna onde o GridSplitter está localizado e a próxima linha ou coluna.
• PreviousAndCurrent: Redimensione a linha ou coluna anterior e atual, ou seja, a linha ou coluna onde o GridSplitter está localizado e a linha ou coluna anterior.
• PreviousAndNext: Redimensione a linha ou coluna anterior e a próxima linha, ou seja, a linha ou coluna antes do GridSplitter Localização e a próxima linha ou coluna.
• BasedOnAlignment: Este é o valor padrão, que determina automaticamente quais linhas ou colunas são redimensionadas com base em seu alinhamento, usando os valores de HorizontalAlignment e VerticalAlignment.

Em nosso exemplo de aplicativo, como queremos que a área do editor de código de marcação e o visualizador sejam redimensionáveis, aplicaremos o valor PreviousAndNext do seguinte modo:

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

Isso produzirá o seguinte comportamento:

Estilizando o .Net Maui Gridsplitter

O GridSplitter O Control oferece várias propriedades que permitem personalizá -lo para corresponder à marca do seu aplicativo. As propriedades que podem ajudar com isso incluem BackgroundColorAssim, BackgroundAssim, BorderColorAssim, BorderBrushAssim, BorderThicknessAssim, CornerRadius e ContentPadding. Além disso, você pode alterar a cor da pinça usando o GripperColor propriedade.

Você também pode usar as propriedades acima em conjunto com os estados visuais NormalAssim, MouseOver e Disabled Para aprimorar ainda mais a experiência do usuário, conforme mostrado no exemplo a seguir:

<Grid RowDefinitions="*,Auto,*">
    <Grid.Resources>
        <Style TargetType="telerik:RadGridSplitter">
            "BackgroundColor" Value="#2196F3" />
            "Background" Value="#2196F3" />
            "BorderColor" Value="#1976D2" />
            "BorderBrush" Value="#1976D2" />
            "BorderThickness" Value="1" />
            "CornerRadius" Value="0" />
            "ContentPadding" Value="2" />
            "VisualStateManager.VisualStateGroups">
                
                    x:Name="CommonStates">
                        x:Name="Normal">
                            .Setters>
                                "BackgroundColor" Value="#2196F3" />
                                "Background" Value="#2196F3" />
                                "BorderColor" Value="#1976D2" />
                                "BorderBrush" Value="#1976D2" />
                                "BorderThickness" Value="1" />
                                "CornerRadius" Value="0" />
                                "ContentPadding" Value="2" />
                            .Setters>
                        
                        x:Name="MouseOver">
                            .Setters>
                                "BackgroundColor" Value="#9C27B0" />
                                "Background" Value="#AB47BC" />
                                "BorderColor" Value="#7B1FA2" />
                                "BorderBrush" Value="#7B1FA2" />
                                "BorderThickness" Value="3" />
                                "CornerRadius" Value="8" />
                                "ContentPadding" Value="10" />
                            .Setters>
                        
                        x:Name="Disabled">
                            .Setters>
                                "BackgroundColor" Value="#424242" />
                                "Background" Value="#616161" />
                                "BorderColor" Value="#757575" />
                                "BorderBrush" Value="#757575" />
                                "BorderThickness" Value="2" />
                                "CornerRadius" Value="4" />
                                "ContentPadding" Value="5" />
                            .Setters>
                        
                    
                
            
        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>

No código anterior, atribuí intencionalmente valores completamente diferentes a cada estado visual, para que você possa vê -los com mais facilidade ao executar o aplicativo:

Você pode ver que as cores azuladas representam um Normal Estado, cores roxas indicam um MouseOver estado e, finalmente, cores acinzentadas representam um Disabled estado.

Conclusão

Ao longo deste artigo, você aprendeu o que é o controle do Telerik GridSplitter, alguns de seus casos de uso e, o mais importante, como implementá -lo em seus próprios aplicativos para permitir que os usuários redimensionem facilmente seções dentro do seu aplicativo. Agora é hora de você explorar casos de uso em seus próprios aplicativos para o uso.

Experimente a interface do usuário do Telerik para .Net Maui