Explorer le contrôle de chargeur de données .net Maui

Explorez le contrôle de Datapager .net Maui, qui vous permet d’ajouter une pagination aux contrôles de type collection, tels qu’une collectionView ou un Telerik DataGrid.

Dans cet article, nous explorerons le Pari de données .net Maui Contrôle, qui vous permet d’ajouter une pagination aux contrôles de type collection, tels qu’une collection View ou un Telerik DataGrid. Commençons!

Le progrès de la télérik pour l’interface utilisateur pour Contrôle de réseau de données .net Maui. est conçu pour permettre la pagination dans toute collecte de données. Il est particulièrement utile lorsque vous devez diviser automatiquement une longue liste d’éléments en pages, car il fournit une propriété appelée PagedSourceque nous pouvons lier à un contrôle pour obtenir une pagination automatique.

Commençons par créer une petite application sans utiliser de pagination. Vous avez probablement un projet similaire parmi ceux que vous avez créés. Suivez ces étapes:

1. Créez un projet à l’aide du modèle d’application .net Maui sans inclure l’exemple de contenu.
2. Installez l’interface utilisateur de Telerik pour .Net Maui Contrôles en suivant le guide d’installation.
3. Installer le CommunityToolkit.mvvm Package NuGet.
4. Se diriger vers MainPage.xamloù vous devez remplacer le contenu du ContentPage avec ce qui suit:

<ContentPage...>

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

Dans le code précédent, j’utilise un Raddatagride pour démontrer une pagination, comme le .Net Maui DataGrid est un contrôle polyvalent qui permet d’afficher des colonnes avec des actions associées, telles que la réalisation de filtres de recherche et le tri. Vous pouvez voir que le ItemsSource la propriété du raddatagrid est liée à une propriété appelée Amiibosqui est la source de données de la liste.

5. Créer une nouvelle classe nommée AmiiboViewModel.cs avec le contenu suivant:

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

Dans le code précédent, nous utilisons une API appelée Amiiiiboapiun service gratuit à des fins éducatives pour effectuer des tests et des expériences.

6. Enfin, remplacer MainPage.xaml.cs avec le contenu suivant:

public partial class MainPage : ContentPage
{        

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

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

Lors du lancement de l’application, nous aurons une belle application qui affiche une table avec des informations sur divers personnages de jeux vidéo:

L’application a l’air fantastique. Cependant, il a le problème de charger trop d’informations dans le contrôle de la liste, ce qui en fait un cas d’utilisation parfait pour implémenter le contrôle de chargeur de données.

Tout d’abord, vous devez savoir que, lorsque vous souhaitez utiliser le contrôle RadDatapager, vous devez réaffecter la source de données à la Source propriété du raddatapager.

En interne, le contrôle résume la liste stockée dans Source Au sein d’une collection personnalisée, exposant les données paginées via une propriété appelée PagedSource. Ensuite, vous pouvez relire votre contrôle de type collection au PagedSource propriété, qui affichera automatiquement les éléments paginés dans le contrôle de type collection. Vous pouvez voir un diagramme de la façon dont il fonctionne dans l’image suivante, tirée de la documentation Telerik:

Il est important de souligner que vous pouvez facilement ajouter une pagination aux contrôles de type liste, tels que le raddatagrid de Telerik ou un .NET MAUI CollectionView. Dans notre exemple, nous ajouterons un nouveau RowDefinition à la grille principale, puis ajoutez le contrôle de chargeur de données comme suit:

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

Dans le code ci-dessus, vous pouvez voir que nous avons ajouté un RadDataPageroù le PageSize la propriété nous permet de définir le nombre d’éléments par page tout en liant la liste des amiibos à Source.

L’étape suivante consiste à relire le ItemSource propriété du contrôle de type collection, dans notre cas le RadDataGridde sorte que sa source de données est le PagedSource propriété du contrôle référencé nommé dataPagercomme indiqué dans l’exemple suivant:

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

Avec cette modification, vous pourrez voir le nouveau contrôle de chargeur de données dans votre application, vous permettant de naviguer dans les éléments dans un format paginé intuitif:

Le contrôle de réseau de données possède de nombreuses propriétés qui nous permettent de le personnaliser à notre goût, par exemple, en modifiant les types de contrôles de navigation apparaître dans le réseau de données. Si vous souhaitez seulement afficher certains contrôles dans le réseau de données à l’utilisateur, vous pouvez utiliser le DisplayMode propriété en attribuant l’une des valeurs possibles: None, FirstPageButton, PrevPageButton, NumericButtons, NavigationComboBox, NextPageButton, LastPageButton, PageSizesView ou NavigationViewcomme dans l’exemple suivant:

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

Cela n’affichera le contrôle qu’avec la liste des pages disponibles:

Si vous souhaitez utiliser plus d’une valeur, par exemple, pour afficher uniquement les boutons pour naviguer vers l’avant et vers l’arrière, vous pouvez le faire en séparant les valeurs avec des virgules dans le DisplayMode propriété:

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

Le résultat du changement ci-dessus est le suivant:

Une autre propriété que nous pouvons modifier est le EllipsisMode Propriété, qui permet d’ajouter des ellipses lorsqu’il existe des pages non jouées lors de la visualisation des boutons numériques. Ce qui suit est un exemple de son utilisation:

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

Les modifications précédentes du DisplayMode et EllipsisMode Les propriétés entraînent l’image suivante:

Nous pouvons modifier l’apparence visuelle de diverses sections du réseau de données. Par exemple, si vous souhaitez personnaliser les boutons de navigation, vous pouvez le faire via les propriétés NavigateToFirstPageButtonStyle (Style), NavigateToPreviousPageButtonStyle (Style), NavigateToNextPageButtonStyle (Style), NavigateToLastPageButtonStyle (Style), NumericButtonStyle (Style) et NumericButtonsViewStyle (Style).

Voici un exemple avec des propriétés modifiées:

<ContentPage...>
    <ContentPage.Resources>
        <ResourceDictionary>
            ...
            <Color x:Key="DataPagerButtonAccentColor">#9C27B0</Color>
            <Color x:Key="DataPagerButtonNonAccentColor">#7B1FA2</Color>
            <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">
                <Setter Property="MinimumWidthRequest" Value="36" />
                <Setter Property="MinimumHeightRequest" Value="36" />
                <Setter Property="CornerRadius" Value="18" />
                <Setter Property="TextColor" Value="{StaticResource DataPagerButtonNonAccentColor}" />
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="BorderThickness" Value="0" />
                <Setter Property="VerticalOptions" Value="Center" />
                <Setter Property="ControlTemplate">
                    <ControlTemplate>
                        <telerik: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}}">
                            <ContentPresenter telerik:ContentPresenterUtils.Content="{TemplateBinding ActualContent}" />
                        </telerik:RadEffectsView>
                    </ControlTemplate>
                </Setter>
                <Setter Property="VisualStateManager.VisualStateGroups">
                    <Setter.Value>
                        <VisualStateGroupList>
                            <VisualStateGroup Name="CommonStates">
                                <VisualState Name="Normal" />
                                <VisualState Name="PointerOver">
                                    <VisualState.Setters>
                                        <Setter Property="telerik:DataPagerButton.Background" Value="{StaticResource DataPagerButtonNonAccentColorAlpha16}" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState Name="Pressed">
                                    <VisualState.Setters>
                                        <Setter Property="telerik:DataPagerButton.Background" Value="{StaticResource DataPagerButtonNonAccentColorAlpha28}" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState Name="Disabled">
                                    <VisualState.Setters>
                                        <Setter Property="Opacity" Value="0.6" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateGroupList>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style
                x:Key="DataPagerNumericButtonStyle"
                BasedOn="{StaticResource DataPagerButtonStyle}"
                TargetType="telerik:DataPagerButton">
                <Setter Property="TextColor" Value="{StaticResource DataPagerButtonAccentColor}" />
                <Setter Property="VisualStateManager.VisualStateGroups">
                    <VisualStateGroupList>
                        <VisualStateGroup Name="CommonStates">
                            <VisualState Name="Normal" />
                            <VisualState Name="PointerOver">
                                <VisualState.Setters>
                                    <Setter Property="telerik:DataPagerButton.Background" Value="{StaticResource DataPagerButtonAccentColorAlpha16}" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState Name="Pressed">
                                <VisualState.Setters>
                                    <Setter Property="telerik:DataPagerButton.Background" Value="{StaticResource DataPagerButtonAccentColorAlpha28}" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState Name="Selected">
                                <VisualState.Setters>
                                    <Setter Property="telerik:DataPagerButton.Background" Value="{StaticResource DataPagerButtonAccentColorAlpha28}" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState Name="SelectedDisabled">
                                <VisualState.Setters>
                                    <Setter Property="telerik:DataPagerButton.Background" Value="{StaticResource DataPagerButtonAccentColorAlpha28}" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState Name="Disabled">
                                <VisualState.Setters>
                                    <Setter Property="Opacity" Value="0.6" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </Setter>
            </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>    

Le code précédent entraînerait la modification suivante de l’interface utilisateur:

Le contrôle de chargeur de données expose plusieurs propriétés que vous pouvez modifier pour personnaliser le contrôle comme vous le souhaitez, et vous pouvez les trouver tous dans le Documentation officielle de réseau de données.

Réagir aux événements de navigation via les commandes

Le contrôle du réseau de données expose le NavigateToFirstPageCommand, NavigateToPreviousPageCommand, NavigateToPageCommand, NavigateToNextPageCommand et NavigateToLastPageCommand Commandes, qui peuvent vous aider à effectuer des actions lorsqu’un bouton du réseau de données est enfoncé.

Par exemple, si nous avions configuré le réseau de données pour afficher le bouton pour passer à la première et dernière page comme dans l’exemple suivant:

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

Nous pourrions ajouter les commandes dans ViewModel pour répondre lorsque ces boutons sont enfoncés:

public partial class AmiiboViewModel : ObservableObject
{        
    ...

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

Avec le code ci-dessus, un message indiquant l’action effectuée serait imprimée dans la fenêtre de sortie.

Conclusion

Tout au long de cet article, nous avons exploré le contrôle de la télérik .net Maui Datapager Control, un contrôle très polyvalent qui ajoute facilement la pagination aux contrôles de type liste. Nous avons vu comment ajouter une pagination à une application Maui .NET via l’utilisation d’un réseau de données, ainsi que sa configuration et son style.

Maintenant, c’est à votre tour de simplifier la navigation dans vos applications .net Maui à l’aide du contrôle de chargeur de données.

Commencer