How to display LiveCharts2 Chart in Blank App, Packed with WAP (WinUI 3 In Desktop) template?

I'm trying to use LiveCharts2 in a WinUI 3 application, but the chart does not appear.

I followed the Installation and first chart Article to try building a WinUI3 window that shows the charts.

I've ensured that my project builds without errors or warnings. However, the chart does not appear when I run the application.

---

Here is my setup:

Installed NuGet packages:

• LiveChartsCore.SkiaSharpView.WinUI(2.0.0-rc2.1)
• Microsoft.Windows.SDK.BuildTools(10.0.22621.756)
• Microsoft.WindowsAppSDK(1.5.240428000)

ViewModel.cs (The class contains the Series)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using LiveChartsCore;
using LiveChartsCore.SkiaSharpView;

namespace WinUI3_Chart_240604_WAP
{
    public class ViewModel
    {
        public ISeries[] Series { get; set; } = new ISeries[]
        {
            new LineSeries<double>
            {
                Values = new double[] { 2, 1, 3, 5, 3, 4, 6},
                Fill = null,
            }
        };
    }
}

MainWindow.xaml

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="WinUI3_Chart_240604_WAP.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUI3_Chart_240604_WAP" 
    xmlns:lvc="using:LiveChartsCore.SkiaSharpView.WinUI"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <!-- xmlns:local="using:App3" didn't work -->
    
    <StackPanel x:Name="stackPanel" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Width="500" Height="500">
        <StackPanel.DataContext>
            <local:ViewModel/>
        </StackPanel.DataContext>

        <lvc:CartesianChart x:Name="Chart" Series="{Binding Series}"></lvc:CartesianChart>
    </StackPanel>
</Window>

MainWindow.xaml.cs

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Controls.Primitives;
using Microsoft.UI.Xaml.Data;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Xaml.Media;
using Microsoft.UI.Xaml.Navigation;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using LiveChartsCore;
using LiveChartsCore.SkiaSharpView;

namespace WinUI3_Chart_240604_WAP
{
    /// <summary>
    /// An empty window that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
            //stackPanel.DataContext = new ViewModel();
            //Chart.Series = new ViewModel().Series;
        }

    }
}

I searched and I didn't find any question that has analogous situation.

I tried using other ways to bind the data, but it didn't work, neither.

The example (and other questions I found) use Window.DataContext property like this:

<Window x:Class="WinUISample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:App3"
    xmlns:lvc="using:LiveChartsCore.SkiaSharpView.WinUI">

    <Window.DataContext>
        <local:ViewModel />
    </Window.DataContext>

    <lvc:CartesianChart
        Series="{Binding Series}">
    </lvc:CartesianChart>

</Window>

I didn't find that in my project, so I put it into StackPanel.

---

I am new to LiveCharts2 and WinUI 3, any advice on how to resolve this issue or improve my setup would be appreciated!

I found out the answer by looking in their examples:

• Need to use Border to limit the area of the chart.
• Use Grid instead of StackPanel.
• Put the chart in the Page and set the Background to Transparent.

Below are the codes:

<Page
    x:Class="WinUI3_Chart_240604_WAP.HomePage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUI3_Chart_240604_WAP"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:lvc="using:LiveChartsCore.SkiaSharpView.WinUI"
    Background="Transparent">
    <Page.DataContext>
        <local:ViewModel/>
    </Page.DataContext>

    <Grid Width="500" Height="500">
        <Border>
            <lvc:CartesianChart x:Name="Chart" Series="{Binding Series}"></lvc:CartesianChart>
        </Border>
    </Grid>
</Page>