C#•7mo ago

[AVALONIA] Polylines not displaying on Canvas

I have been having this issue for a while. My Polylines which I have generated are not being displayed in the Canvas. I am using MVVM so I have created all the Models, ensured they are correctly populating, checked that they are inside the canvas using the F12 debugging tool but they just are not visible. Help? Canvas Model

c#
using Avalonia.Controls.Shapes;
using Avalonia.Media;
using System.Collections.Generic;
using System.Text;
using System.Xml.Linq;

namespace BirdsEye.Models.Panel
{
    public class CanvasSegment
    {
        public string ID { get; set; } // IDENTIFICATION OF THE CANVAS SEGMENT
        public string Name { get; set; } // NAME OF THE CANVAS SEGMENT
        public List<Polyline> Polylines { get; set; } // LIST OF CANVAS RAILS WITHIN THE CANVAS SEGMENT
        public LiveDisplay Display { get; set; } // DATA CONTROLLING THE LIVE DISPLAY OF THE CANVAS SEGMENT

    }
}

c#
using Avalonia.Controls.Shapes;
using Avalonia.Media;
using System.Collections.Generic;
using System.Text;
using System.Xml.Linq;

namespace BirdsEye.Models.Panel
{
    public class CanvasSegment
    {
        public string ID { get; set; } // IDENTIFICATION OF THE CANVAS SEGMENT
        public string Name { get; set; } // NAME OF THE CANVAS SEGMENT
        public List<Polyline> Polylines { get; set; } // LIST OF CANVAS RAILS WITHIN THE CANVAS SEGMENT
        public LiveDisplay Display { get; set; } // DATA CONTROLLING THE LIVE DISPLAY OF THE CANVAS SEGMENT

    }
}

Panel View Model

c#
using BirdsEye.Models.Panel;
using BirdsEye.Resources.Functions.Data;

namespace BirdsEye.ViewModels
{
    public class PanelViewModel
    {
        public PanelSegment PanelSegment { get; set; }
        public CanvasSegment CanvasSegment { get; set; }
        public PanelViewModel()
        {
            PanelBuilder buildPanel = new PanelBuilder();
            PanelSegment = buildPanel.PanelSegment;
            CanvasSegment = buildPanel.CanvasSegment;
        }
    }
}

c#
using BirdsEye.Models.Panel;
using BirdsEye.Resources.Functions.Data;

namespace BirdsEye.ViewModels
{
    public class PanelViewModel
    {
        public PanelSegment PanelSegment { get; set; }
        public CanvasSegment CanvasSegment { get; set; }
        public PanelViewModel()
        {
            PanelBuilder buildPanel = new PanelBuilder();
            PanelSegment = buildPanel.PanelSegment;
            CanvasSegment = buildPanel.CanvasSegment;
        }
    }
}

45 Replies

YouWouldnt•7mo ago

XAML View

<UserControl xmlns="https://github.com/avaloniaui"
             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"
             mc:Ignorable="d" d:DesignWidth="1201" d:DesignHeight="601"
             xmlns:viewModels="clr-namespace:BirdsEye.ViewModels"
             x:Class="BirdsEye.Views.Panels.Newmarket"
             x:DataType="viewModels:PanelViewModel">

  <Canvas x:Name="PanelCanvas" Width="1201" Height="601">
    <ItemsControl ItemsSource="{Binding CanvasSegment.Polylines}">
      <ItemsControl.ItemTemplate>
        <DataTemplate>
          <!-- Create a Polyline element for each item in Polylines -->
          <Polyline Points="{Binding Points}" Stroke="{Binding Stroke}" StrokeThickness="{Binding StrokeThickness}"/>
        </DataTemplate>
      </ItemsControl.ItemTemplate>
    </ItemsControl>
  </Canvas>
</UserControl>

<UserControl xmlns="https://github.com/avaloniaui"
             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"
             mc:Ignorable="d" d:DesignWidth="1201" d:DesignHeight="601"
             xmlns:viewModels="clr-namespace:BirdsEye.ViewModels"
             x:Class="BirdsEye.Views.Panels.Newmarket"
             x:DataType="viewModels:PanelViewModel">

  <Canvas x:Name="PanelCanvas" Width="1201" Height="601">
    <ItemsControl ItemsSource="{Binding CanvasSegment.Polylines}">
      <ItemsControl.ItemTemplate>
        <DataTemplate>
          <!-- Create a Polyline element for each item in Polylines -->
          <Polyline Points="{Binding Points}" Stroke="{Binding Stroke}" StrokeThickness="{Binding StrokeThickness}"/>
        </DataTemplate>
      </ItemsControl.ItemTemplate>
    </ItemsControl>
  </Canvas>
</UserControl>

Main Window View

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:BirdsEye.ViewModels"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:BirdsEye.Views.MainWindow"
        xmlns:panels="clr-namespace:BirdsEye.Views.Panels"

        x:Class="BirdsEye.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel"
        Icon="/Assets/avalonia-logo.ico"
        Title="BirdsEye">
    <Design.DataContext>
        <!-- This only sets the DataContext for the previewer in an IDE,
             to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
        <vm:MainWindowViewModel/>
    </Design.DataContext>
  <panels:Newmarket/>
</Window>

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:BirdsEye.ViewModels"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:BirdsEye.Views.MainWindow"
        xmlns:panels="clr-namespace:BirdsEye.Views.Panels"

        x:Class="BirdsEye.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel"
        Icon="/Assets/avalonia-logo.ico"
        Title="BirdsEye">
    <Design.DataContext>
        <!-- This only sets the DataContext for the previewer in an IDE,
             to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
        <vm:MainWindowViewModel/>
    </Design.DataContext>
  <panels:Newmarket/>
</Window>

YouWouldnt•7mo ago

Results

Klarth•7mo ago

Wrong XAML layout. Your ItemsControl should be top and use an ItemsPanel for the Canvas. Check https://docs.avaloniaui.net/docs/concepts/custom-itemspanel for specifics

Custom ItemsPanel | Avalonia Docs

CONCEPTS

Klarth•7mo ago

Attached properties like Canvas.Left only get inspected when they're a direct child of the Canvas control.

YouWouldnt•7mo ago

Appreciate that. I’ll give it a try

YouWouldnt•7mo ago

No change 😦 XAML Code

<UserControl xmlns="https://github.com/avaloniaui"
             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"
             mc:Ignorable="d" d:DesignWidth="1201" d:DesignHeight="601"
             xmlns:viewModels="clr-namespace:BirdsEye.ViewModels"
             x:Class="BirdsEye.Views.Panels.Newmarket"
             x:DataType="viewModels:PanelViewModel">

    <ItemsControl ItemsSource="{Binding CanvasSegment.Polylines}">
        <ItemsControl.ItemsPanel>
          <ItemsPanelTemplate>
          <Canvas Width="1201" Height="601"/>
          </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
      <ItemsControl.ItemTemplate>
        <DataTemplate>
          <!-- Create a Polyline element for each item in Polylines -->
          <Polyline Points="{Binding Points}" Stroke="{Binding Stroke}" StrokeThickness="{Binding StrokeThickness}"/>
        </DataTemplate>
       </ItemsControl.ItemTemplate>
    </ItemsControl>
</UserControl>

<UserControl xmlns="https://github.com/avaloniaui"
             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"
             mc:Ignorable="d" d:DesignWidth="1201" d:DesignHeight="601"
             xmlns:viewModels="clr-namespace:BirdsEye.ViewModels"
             x:Class="BirdsEye.Views.Panels.Newmarket"
             x:DataType="viewModels:PanelViewModel">

    <ItemsControl ItemsSource="{Binding CanvasSegment.Polylines}">
        <ItemsControl.ItemsPanel>
          <ItemsPanelTemplate>
          <Canvas Width="1201" Height="601"/>
          </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
      <ItemsControl.ItemTemplate>
        <DataTemplate>
          <!-- Create a Polyline element for each item in Polylines -->
          <Polyline Points="{Binding Points}" Stroke="{Binding Stroke}" StrokeThickness="{Binding StrokeThickness}"/>
        </DataTemplate>
       </ItemsControl.ItemTemplate>
    </ItemsControl>
</UserControl>

Klarth•7mo ago

Are you using compiled bindings?

YouWouldnt•7mo ago

can you elaborate a bit? im just grabbing the value of a list variable of polylines in c#

c#
using Avalonia.Controls.Shapes;
using System.Collections.Generic;

namespace BirdsEye.Models.Panel
{
    public class CanvasSegment
    {
        public string ID { get; set; } // IDENTIFICATION OF THE CANVAS SEGMENT
        public string Name { get; set; } // NAME OF THE CANVAS SEGMENT
        public List<Polyline> Polylines { get; set; } // LIST OF CANVAS RAILS WITHIN THE CANVAS SEGMENT
        public LiveDisplay Display { get; set; } // DATA CONTROLLING THE LIVE DISPLAY OF THE CANVAS SEGMENT

    }
}

c#
using Avalonia.Controls.Shapes;
using System.Collections.Generic;

namespace BirdsEye.Models.Panel
{
    public class CanvasSegment
    {
        public string ID { get; set; } // IDENTIFICATION OF THE CANVAS SEGMENT
        public string Name { get; set; } // NAME OF THE CANVAS SEGMENT
        public List<Polyline> Polylines { get; set; } // LIST OF CANVAS RAILS WITHIN THE CANVAS SEGMENT
        public LiveDisplay Display { get; set; } // DATA CONTROLLING THE LIVE DISPLAY OF THE CANVAS SEGMENT

    }
}

looking at the docs i dont believe i am, wouldnt have a clue how to use them

<UserControl xmlns="https://github.com/avaloniaui"
             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"
             mc:Ignorable="d" d:DesignWidth="1201" d:DesignHeight="601"
             xmlns:viewModels="clr-namespace:BirdsEye.ViewModels"
             x:Class="BirdsEye.Views.Panels.Newmarket"
             x:DataType="viewModels:PanelViewModel"
             x:CompileBindings="True">

  <ItemsControl ItemsSource="{CompiledBinding CanvasSegment.Polylines}">
    <ItemsControl.ItemsPanel>
      <ItemsPanelTemplate>
        <Canvas Width="1201" Height="601"/>
      </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
      <DataTemplate>
        <Polyline Points="{CompiledBinding Points}" Stroke="{CompiledBinding Stroke}" StrokeThickness="{CompiledBinding StrokeThickness}"/>
      </DataTemplate>
    </ItemsControl.ItemTemplate>
  </ItemsControl>
</UserControl>

<UserControl xmlns="https://github.com/avaloniaui"
             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"
             mc:Ignorable="d" d:DesignWidth="1201" d:DesignHeight="601"
             xmlns:viewModels="clr-namespace:BirdsEye.ViewModels"
             x:Class="BirdsEye.Views.Panels.Newmarket"
             x:DataType="viewModels:PanelViewModel"
             x:CompileBindings="True">

  <ItemsControl ItemsSource="{CompiledBinding CanvasSegment.Polylines}">
    <ItemsControl.ItemsPanel>
      <ItemsPanelTemplate>
        <Canvas Width="1201" Height="601"/>
      </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
      <DataTemplate>
        <Polyline Points="{CompiledBinding Points}" Stroke="{CompiledBinding Stroke}" StrokeThickness="{CompiledBinding StrokeThickness}"/>
      </DataTemplate>
    </ItemsControl.ItemTemplate>
  </ItemsControl>
</UserControl>

like this?

Klarth•7mo ago

That's one way. You should typically enable them project wide in csproj and use {ReflectionBinding} if you're limited in some scenario. I need to leave for awhile though.

YouWouldnt•7mo ago

your allgood. still didnt work but thanks for your help this far 🙂

Klarth•7mo ago

This is weird because you're storing Polyline controls. You're also storing them in properties that don't raise INPC and in a collection that doesn't raise INotifyCollectionChanged. So you need to be very careful about initialization order and when the binding happens. You can try a ContentControl instead, but I'm not entirely sure what happens when you try to wrap a control in it.

      <DataTemplate>
        <ContentControl Content="{Binding}" />
      </DataTemplate>

      <DataTemplate>
        <ContentControl Content="{Binding}" />
      </DataTemplate>

YouWouldnt•7mo ago

All I want to do is get a bunch of Polylines and smash them onto a canvas how would you implement INotifyCollectionChanged to this?

Klarth•7mo ago

What Mvvm framework are you using?

YouWouldnt•7mo ago

Avalonia. Also is this an issue?

Klarth•7mo ago

Avalonia is a GUI framework, not an MVVM framework.

Gaming

Programming

[AVALONIA] Polylines not displaying on Canvas