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