Axis Pagination

This sample uses C# 13 preview features such as partial properties, it also uses features from the CommunityToolkit.Mvvm package, you can learn more about it here.

sample image

View model

using System;
using System.Collections.Generic;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

namespace ViewModelsSamples.Axes.Paging;

public partial class ViewModel : ObservableObject
{
    public int[] Values { get; set; } = Fetch();

    [ObservableProperty]
    public partial double MinLimit { get; set; } = double.NaN;

    [ObservableProperty]
    public partial double MaxLimit { get; set; } = double.NaN;

    [RelayCommand]
    public void GoToPage1()
    {
        MinLimit = -0.5;
        MaxLimit = 10.5;
    }

    [RelayCommand]
    public void GoToPage2()
    {
        MinLimit = 9.5;
        MaxLimit = 20.5;
    }

    [RelayCommand]
    public void GoToPage3()
    {
        MinLimit = 19.5;
        MaxLimit = 30.5;
    }

    [RelayCommand]
    public void SeeAll()
    {
        MinLimit = double.NaN;
        MaxLimit = double.NaN;
    }

    private static int[] Fetch()
    {
        var random = new Random();

        var trend = 100;
        var values = new List<int>();
        for (var i = 0; i < 100; i++)
        {
            trend += random.Next(-30, 50);
            values.Add(trend);
        }

        return [.. values];
    }
}

XAML

<UserControl
    x:Class="WinUISample.Axes.Paging.View"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:lvc="using:LiveChartsCore.SkiaSharpView.WinUI"
    xmlns:vms="using:ViewModelsSamples.Axes.Paging"
    mc:Ignorable="d">

    <UserControl.DataContext>
        <vms:ViewModel/>
    </UserControl.DataContext>

    <Grid RowDefinitions="50, *">
        <StackPanel Orientation="Horizontal">
            <Button Command="{Binding GoToPage1Command}">Page 1</Button>
            <Button Command="{Binding GoToPage2Command}">Page 2</Button>
            <Button Command="{Binding GoToPage3Command}">Page 3</Button>
            <Button Command="{Binding SeeAllCommand}">Clear</Button>
        </StackPanel>
        <lvc:CartesianChart
            Grid.Row="1"
            ZoomMode="X">

            <lvc:CartesianChart.Series>
                <lvc:SeriesCollection>
                    <lvc:XamlColumnSeries Values="{Binding Values}"/>
                </lvc:SeriesCollection>
            </lvc:CartesianChart.Series>

            <lvc:CartesianChart.XAxes>
                <lvc:AxesCollection>
                    <lvc:XamlAxis
                        MinLimit="{Binding MinLimit}"
                        MaxLimit="{Binding MaxLimit}"/>
                </lvc:AxesCollection>
            </lvc:CartesianChart.XAxes>

        </lvc:CartesianChart>
    </Grid>
</UserControl>

Articles you might also find useful: