Explorando o controle de datapager .Net Maui

Explore o Controle do Datapager .Net Maui, que permite adicionar a paginação aos controles do tipo coleta, como uma Coleção de View ou um Telerik Datagrid.

Neste artigo, exploraremos o .Net Maui DataPager Control, que permite adicionar a paginação aos controles do tipo de coleção, como uma Coleção de Coleção ou um Telerik Datagrid. Vamos começar!

A interface do interface do Progress Telerik para .NET MAUI DataPager Control foi projetado para permitir a paginação em qualquer coleta de dados. É especialmente útil quando você precisa dividir uma longa lista de itens em páginas automaticamente, pois fornece uma propriedade chamada PagedSourceque podemos vincular a um controle para alcançar a paginação automática.

Vamos começar criando um pequeno aplicativo sem usar a paginação. Você provavelmente tem um projeto semelhante entre os que você criou. Siga estas etapas:

1. Crie um projeto usando o modelo de aplicativo .NET Maui sem incluir o conteúdo de exemplo.
2. Instale a interface do usuário do Telerik para .Net Maui Controles Seguindo o Guia de instalação.
3. Instale o CommunityToolkit.mvvm Pacote Nuget.
4. Navegar para MainPage.xamlonde você deve substituir o conteúdo do ContentPage com o seguinte:

<ContentPage...>

<ContentPage.Resources>
    <ResourceDictionary>
        <Style x:Key="HeaderLabelStyle" TargetType="Label">
            "FontSize" Value="24" />
            "FontAttributes" Value="Bold" />
            "TextColor" Value="White" />
            "HorizontalOptions" Value="Center" />
            "VerticalOptions" Value="Center" />
        Style>
        <Style x:Key="CardStyle" TargetType="Frame">
            "CornerRadius" Value="15" />
            "Padding" Value="15" />
            "Margin" Value="10" />
            "BackgroundColor" Value="White" />
            "HasShadow" Value="True" />
        Style>
        <Style x:Key="TitleLabelStyle" TargetType="Label">
            "FontSize" Value="18" />
            "FontAttributes" Value="Bold" />
            "TextColor" Value="#333" />
        Style>
        <Style x:Key="DetailLabelStyle" TargetType="Label">
            "FontSize" Value="14" />
            "TextColor" Value="#666" />
        Style>
    ResourceDictionary>
ContentPage.Resources>

<Grid RowDefinitions="Auto,*">
    <Grid Grid.Row="0" HeightRequest="80">
        <Grid.Background>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                <GradientStop Offset="0.0" Color="#4A90E2" />
                <GradientStop Offset="1.0" Color="#007AFF" />
            LinearGradientBrush>
        Grid.Background>
        <Label Style="{StaticResource HeaderLabelStyle}" Text="Amiibos" />
    Grid>
    <telerik:RadDataGrid
        x:Name="dataGrid"
        Grid.Row="1"
        AutoGenerateColumns="False"
        GridLinesVisibility="None"
        ItemsSource="{Binding Amiibos}"
        RowHeight="90"
        SelectionMode="Single">
        <telerik:RadDataGrid.AlternateRowBackgroundStyle>
            <Style TargetType="telerik:DataGridAlternateRowBackgroundAppearance">
                "BackgroundColor" Value="#F2FAF9" />
            Style>
        telerik:RadDataGrid.AlternateRowBackgroundStyle>
        <telerik:RadDataGrid.Columns>
            <telerik:DataGridTemplateColumn Width="100" HeaderText="Image">
                <telerik:DataGridTemplateColumn.CellContentTemplate>
                    <DataTemplate>
                        <Border
                            Padding="0"
                            BackgroundColor="Transparent"
                            HeightRequest="80"
                            HorizontalOptions="Center"
                            StrokeShape="RoundRectangle 40"
                            VerticalOptions="Center"
                            WidthRequest="80">
                            <Image Aspect="AspectFill" Source="{Binding image}" />
                        Border>
                    DataTemplate>
                telerik:DataGridTemplateColumn.CellContentTemplate>
            telerik:DataGridTemplateColumn>
            <telerik:DataGridTextColumn
                HeaderText="Name"
                PropertyName="name"
                SizeMode="Fixed" />
            <telerik:DataGridTextColumn
                HeaderText="Character"
                PropertyName="character"
                SizeMode="Fixed" />
            <telerik:DataGridTextColumn
                HeaderText="Game Series"
                PropertyName="gameSeries"
                SizeMode="Fixed" />
        telerik:RadDataGrid.Columns>
    telerik:RadDataGrid>
Grid>

ContentPage>

No código anterior, estou usando um Raddatagrid para demonstrar a paginação, como o .Net Maui Datagrid é um controle versátil que permite exibir colunas com ações associadas, como executar filtros de pesquisa e classificação. Você pode ver que o ItemsSource A propriedade do Raddatagrid está vinculada a uma propriedade chamada Amiibosque é a fonte de dados da lista.

5. Crie uma nova classe chamada AmiiboViewModel.cs Com o seguinte conteúdo:

public partial class AmiiboViewModel : ObservableObject
{        
    (ObservableProperty)
    private ObservableCollection<Amiibo> amiibos = new ObservableCollection<Amiibo>();
            
    public async Task LoadDataAsync()
    {
        try
        {
            using HttpClient client = new HttpClient();
            
            string url = "https://www.amiiboapi.com/api/amiibo/";
            var response = await client.GetStringAsync(url);
            
            var amiiboResponse = JsonSerializer.Deserialize<AmiiboResponse>(response);

            if (amiiboResponse != null && amiiboResponse.amiibo != null)
            {
                Amiibos.Clear();
                Amiibos = new ObservableCollection<Amiibo>(amiiboResponse.amiibo);
            }
        }
        catch (Exception ex)
        {
            System.Diagnostics.Debug.WriteLine($"Error loading data: {ex.Message}");
        }
    }
}    
public class AmiiboResponse
{
    public List<Amiibo> amiibo { get; set; }
}    
public class Amiibo
{
    public string amiiboSeries { get; set; }
    public string character { get; set; }
    public string gameSeries { get; set; }
    public string head { get; set; }
    public string image { get; set; }
    public string name { get; set; }
    public Release release { get; set; }
    public string tail { get; set; }
    public string type { get; set; }
}

public class Release
{
    public string au { get; set; }
    public string eu { get; set; }
    public string jp { get; set; }
    public string na { get; set; }
}

No código anterior, estamos usando uma API chamada Amiiboapium serviço gratuito para fins educacionais para realizar testes e experimentos.

6. Finalmente, substitua MainPage.xaml.cs Com o seguinte conteúdo:

public partial class MainPage : ContentPage
{        

    public MainPage()
    {
        InitializeComponent();
        BindingContext = new AmiiboViewModel();            
    }

    protected override async void OnAppearing()
    {
        var vm = BindingContext as AmiiboViewModel;
        await vm.LoadDataAsync();
    }
}

Ao lançar o aplicativo, teremos um belo aplicativo que exibe uma tabela com informações sobre vários personagens de videogame:

O aplicativo parece fantástico. No entanto, ele tem a questão de carregar muita informação no controle da lista, tornando -o um caso de uso perfeito para implementar o controle do DataPager.

Primeiro, você deve saber que, quando quiser usar o controle RaddataPager, precisa reatribuir a fonte de dados para o Source propriedade do Raddatapager.

Internamente, o controle encapsula a lista armazenada em Source Dentro de uma coleção personalizada, expondo os dados paginados através de uma propriedade chamada PagedSource. Em seguida, você pode rebide seu controle do tipo de coleção para o PagedSource Propriedade, que exibirá automaticamente os itens paginados no controle do tipo de coleção. Você pode ver um diagrama de como ele funciona na imagem a seguir, retirada da documentação Telerik:

É importante destacar que você pode adicionar facilmente a paginação aos controles do tipo listagem, como o Raddatagrid ou um de Telerik ou um .NET MAUI CollectionView. Em nosso exemplo, adicionaremos um novo RowDefinition à grade principal e adicione o controle de datapager da seguinte forma:

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

    <Grid RowDefinitions="Auto,*,Auto">
        <Grid...>
            ...
        Grid>
        <telerik:RadDataGrid>
            ...
        telerik:RadDataGrid>
        <telerik:RadDataPager
            x:Name="dataPager"
            Grid.Row="2"
            PageSize="5"
            Source="{Binding Amiibos}" />
        telerik:RadDataGrid>
    Grid>

ContentPage>    

No código acima, você pode ver que adicionamos um RadDataPageronde o PageSize A propriedade nos permite definir o número de itens por página enquanto vincula a lista de amiibos a Source.

O próximo passo é rebindar o ItemSource propriedade do controle do tipo de coleção, em nosso caso o RadDataGridpara que sua fonte de dados seja o PagedSource propriedade do controle referenciado nomeado dataPagercomo mostrado no exemplo a seguir:

<telerik:RadDataGrid
    x:Name="dataGrid"
    Grid.Row="1"
    AutoGenerateColumns="False"
    GridLinesVisibility="None"
    ItemsSource="{Binding PagedSource, Source={Reference dataPager}}"
    RowHeight="90"
    SelectionMode="Single">

Com esta modificação, você poderá ver o novo controle de datapager em seu aplicativo, permitindo que você navegue pelos itens em um formato paginado intuitivo:

O Controle do DataPager possui muitas propriedades que nos permitem personalizá -lo ao nosso gosto, por exemplo, alterando quais tipos de controles de navegação aparecerão no DataPager. Se você deseja apenas mostrar certos controles no datapager para o usuário, você pode usar o DisplayMode propriedade atribuindo um dos valores possíveis: NoneAssim, FirstPageButtonAssim, PrevPageButtonAssim, NumericButtonsAssim, NavigationComboBoxAssim, NextPageButtonAssim, LastPageButtonAssim, PageSizesView ou NavigationViewcomo no exemplo seguinte:

<telerik:RadDataPager
    x:Name="dataPager"
    Grid.Row="2"
    PageSize="5"
    DisplayMode="NavigationComboBox"
    Source="{Binding Amiibos}" />

Isso exibirá apenas o controle com a lista de páginas disponíveis:

Se você deseja usar mais de um valor, por exemplo, para exibir apenas os botões para navegar para frente e para trás, você pode fazê -lo separando os valores com vírgulas no DisplayMode propriedade:

<telerik:RadDataPager
    x:Name="dataPager"
    Grid.Row="2"
    PageSize="5"
    DisplayMode="PrevPageButton,NextPageButton"
    Source="{Binding Amiibos}" />

O resultado da mudança acima é a seguinte:

Outra propriedade que podemos modificar é o EllipsisMode Propriedade, que permite adicionar elipses quando há páginas não exibidas enquanto visualiza botões numéricos. A seguir, é apresentado um exemplo de seu uso:

<telerik:RadDataPager
    x:Name="dataPager"
    Grid.Row="2"
    PageSize="5"
    DisplayMode="NumericButtons"
    EllipsisMode="Both"
    Source="{Binding Amiibos}" />

As modificações anteriores do DisplayMode e EllipsisMode As propriedades resultam na seguinte imagem:

Podemos modificar a aparência visual de várias seções do DataPager. Por exemplo, se você deseja personalizar os botões de navegação, pode fazê -lo através das propriedades NavigateToFirstPageButtonStyle (Estilo), NavigateToPreviousPageButtonStyle (Estilo), NavigateToNextPageButtonStyle (Estilo), NavigateToLastPageButtonStyle (Estilo), NumericButtonStyle (Estilo) e NumericButtonsViewStyle (Estilo).

Aqui está um exemplo com propriedades modificadas:

<ContentPage...>
    <ContentPage.Resources>
        <ResourceDictionary>
            ...
            <Color x:Key="DataPagerButtonAccentColor">#9C27B0Color>
            <Color x:Key="DataPagerButtonNonAccentColor">#7B1FA2Color>
            <telerik:ColorFilter
                x:Key="DataPagerButtonAccentColorAlpha16"
                Alpha="0.16"
                Color="{StaticResource DataPagerButtonAccentColor}" />
            <telerik:ColorFilter
                x:Key="DataPagerButtonAccentColorAlpha28"
                Alpha="0.28"
                Color="{StaticResource DataPagerButtonAccentColor}" />
            <telerik:ColorFilter
                x:Key="DataPagerButtonNonAccentColorAlpha16"
                Alpha="0.16"
                Color="{StaticResource DataPagerButtonNonAccentColor}" />
            <telerik:ColorFilter
                x:Key="DataPagerButtonNonAccentColorAlpha28"
                Alpha="0.28"
                Color="{StaticResource DataPagerButtonNonAccentColor}" />
            <Style x:Key="DataPagerButtonStyle" TargetType="telerik:DataPagerButton">
                
                
                
                {StaticResource DataPagerButtonNonAccentColor}" />
                
                
                
                
                    
                        :RadEffectsView
                            x:Name="PART_EffectsView"
                            Padding="{TemplateBinding Padding}"
                            Background="{TemplateBinding Background}"
                            BackgroundColor="{TemplateBinding BackgroundColor}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderColor="{TemplateBinding BorderColor}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="{TemplateBinding CornerRadius,
                                                           Converter={x:Static telerik:CornerRadiusToThicknessConverter.Instance}}">
                            :ContentPresenterUtils.Content="{TemplateBinding ActualContent}" />
                        :RadEffectsView>
                    
                
                .VisualStateGroups">
                    .Value>
                        
                            
                                
                                
                                    .Setters>
                                        :DataPagerButton.Background" Value="{StaticResource DataPagerButtonNonAccentColorAlpha16}" />
                                    .Setters>
                                
                                
                                    .Setters>
                                        :DataPagerButton.Background" Value="{StaticResource DataPagerButtonNonAccentColorAlpha28}" />
                                    .Setters>
                                
                                "Disabled">
                                    .Setters>
                                        "Opacity" Value="0.6" />
                                    .Setters>
                                
                            
                        
                    .Value>
                
            Style>
            <Style
                x:Key="DataPagerNumericButtonStyle"
                BasedOn="{StaticResource DataPagerButtonStyle}"
                TargetType="telerik:DataPagerButton">
                {StaticResource DataPagerButtonAccentColor}" />
                .VisualStateGroups">
                    
                        
                            
                            
                                .Setters>
                                    :DataPagerButton.Background" Value="{StaticResource DataPagerButtonAccentColorAlpha16}" />
                                .Setters>
                            
                            
                                .Setters>
                                    :DataPagerButton.Background" Value="{StaticResource DataPagerButtonAccentColorAlpha28}" />
                                .Setters>
                            
                            
                                .Setters>
                                    :DataPagerButton.Background" Value="{StaticResource DataPagerButtonAccentColorAlpha28}" />
                                .Setters>
                            
                            
                                .Setters>
                                    :DataPagerButton.Background" Value="{StaticResource DataPagerButtonAccentColorAlpha28}" />
                                .Setters>
                            
                            "Disabled">
                                .Setters>
                                    "Opacity" Value="0.6" />
                                .Setters>
                            
                        
                    
                
            Style>
        ResourceDictionary>
    ContentPage.Resources>

    <Grid>
        ...
        <telerik:RadDataPager
            x:Name="dataPager"
            Grid.Row="2"
            DisplayMode="NumericButtons"
            EllipsisMode="Both"
            NavigateToFirstPageButtonStyle="{StaticResource DataPagerButtonStyle}"
            NavigateToLastPageButtonStyle="{StaticResource DataPagerButtonStyle}"
            NavigateToNextPageButtonStyle="{StaticResource DataPagerButtonStyle}"
            NavigateToPreviousPageButtonStyle="{StaticResource DataPagerButtonStyle}"
            NumericButtonStyle="{StaticResource DataPagerNumericButtonStyle}"
            PageSize="5"
            Source="{Binding Amiibos}" />
    Grid>
ContentPage>    

O código anterior resultaria na seguinte alteração na interface do usuário:

O controle de dataspager expõe várias propriedades que você pode alterar para personalizar o controle conforme desejar, e você pode encontrá -los todos no Documentação oficial do DataPager.

Reagindo aos eventos de navegação por comandos

O controle de dataspager expõe o NavigateToFirstPageCommandAssim, NavigateToPreviousPageCommandAssim, NavigateToPageCommandAssim, NavigateToNextPageCommand e NavigateToLastPageCommand Comandos, que podem ajudá -lo a executar ações quando um botão no datapager é pressionado.

Por exemplo, se tivéssemos o DataPager configurado para mostrar o botão para ir para a primeira e última página, como no exemplo a seguir:

<telerik:RadDataPager
    x:Name="dataPager"
    ...
    NavigateToFirstPageCommand="{Binding NavigateToFirstPageCommand}"
    NavigateToLastPageCommand="{Binding NavigateToLastPageCommand}"/>

Poderíamos adicionar os comandos no ViewModel para responder quando esses botões forem pressionados:

public partial class AmiiboViewModel : ObservableObject
{        
    ...

    (RelayCommand)
    public async Task NavigateToFirstPage()
    {
        Debug.WriteLine("NavigateToFirstPage");
    }
    (RelayCommand)
    public async Task NavigateToLastPage()
    {
        Debug.WriteLine("NavigateToLastPage");
    }
}

Com o código acima, uma mensagem indicando que a ação executada seria impressa na janela de saída.

Conclusão

Ao longo deste artigo, exploramos o controle do TERIK .NET MAUI DataPager, um controle altamente versátil que adiciona facilmente a paginação aos controles do tipo listagem. Vimos como adicionar paginação a um aplicativo .NET Maui através do uso de um datapager, bem como sua configuração e estilo.

Agora é a sua vez de simplificar a navegação em seus aplicativos .NET MAUI usando o controle DataPager.

Comece