Как отобразить диаграмму LiveCharts2 в пустом приложении, упакованном с шаблоном WAP (WinUI 3 на рабочем столе)?

Я пытаюсь использовать LiveCharts2 в приложении WinUI 3, но диаграмма не появляется.

Я следовал статье Установка и первая диаграмма, чтобы попытаться создать окно WinUI3, отображающее диаграммы.

Я позаботился о том, чтобы мой проект собирался без ошибок и предупреждений. Однако диаграмма не появляется при запуске приложения.


Вот моя установка:

Установленные пакеты NuGet:

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

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, буду благодарен за любые советы о том, как решить эту проблему или улучшить мою настройку!

Не следует редактировать свой вопрос, включив в него решение. Вместо этого опубликуйте это как ответ.

wohlstad 07.06.2024 12:31
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
1
61
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ответ я узнал, посмотрев их примеры:

  • Необходимо использовать 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>

Пожалуйста, добавьте контент в ответ, а не редактируйте его в вопрос.

BDL 07.06.2024 13:22

Другие вопросы по теме