Я пытаюсь использовать LiveCharts2 в приложении WinUI 3, но диаграмма не появляется.
Я следовал статье Установка и первая диаграмма, чтобы попытаться создать окно WinUI3, отображающее диаграммы.
Я позаботился о том, чтобы мой проект собирался без ошибок и предупреждений. Однако диаграмма не появляется при запуске приложения.
Вот моя установка:
Установленные пакеты NuGet:
ViewModel.cs (Класс содержит серию)
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;
}
}
}
Я искал и не нашел ни одного вопроса с аналогичной ситуацией.
Я пробовал использовать другие способы привязки данных, но это тоже не сработало.
В примере (и других вопросах, которые я нашел) свойство Window.DataContext используется следующим образом:
<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>
В своем проекте я этого не нашел, поэтому поместил в StackPanel.
Я новичок в LiveCharts2 и WinUI 3, буду благодарен за любые советы о том, как решить эту проблему или улучшить мою настройку!





Ответ я узнал, посмотрев их примеры:
Border, чтобы ограничить область диаграммы.Grid вместо StackPanel.Page и установите Background на Transparent.Ниже приведены коды:
<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>
Пожалуйста, добавьте контент в ответ, а не редактируйте его в вопрос.
Не следует редактировать свой вопрос, включив в него решение. Вместо этого опубликуйте это как ответ.