ich befinde mich noch auf den ersten Schritten zur Erlernung von c# und WPF, wo mir sicherlich noch einige Grundlagen fehlen. Dennoch habe ich bereits ein konkretes Problem, an dem ich bereits seit Tagen hadere.
Ich möchte in einer UI meine ObservableCollection "ObservableAxis" mit verschiedenen Canvases darstellen. Da die Werte der Bestandteile und UI mal dynamisch sein sollen, verwende ich die ObservableCollection.
Grundlage ist die o.g. ObservableAxis, die sich wie folgt aufbaut:
public partial class MainWindow : Window
{
public static ObservableCollection<Axis> ObservableAxis = new ObservableCollection<Axis>();
public MainWindow()
{
InitializeComponent();
Axis Axis0 = new Axis(0);
Axis0.MySegments.Add(new Segment(0, 10, 100, Axis0.Axis_Number));
Axis0.MySegments.Add(new Segment(1, 20, 200, Axis0.Axis_Number));
Axis Axis1 = new Axis(1);
Axis1.MySegments.Add(new Segment(0, 50, 500, Axis1.Axis_Number));
Axis1.MySegments.Add(new Segment(1, 60, 600, Axis1.Axis_Number));
ObservableAxis.Add(Axis0);
ObservableAxis.Add(Axis1);
ItemsControl_Axis.ItemsSource = ObservableAxis;
}
}
Jede Axis besteht widerum aus mehreren Segmenten, mit verschiedenen Eigenschaften
public class Axis
{
public ObservableCollection<Segment> MySegments;
public int Axis_Number { get; set; }
public Axis(int axis_number)
{
Axis_Number = axis_number;
MySegments = new ObservableCollection<Segment>();
}
}
public class Segment
{
public int Counter_Seg { get; set; }
public double Start { get; set; }
public double Duration { get; set; }
public int Axis_Counter { get; set; }
public string ID { get; set; }
public Segment(int counter_seg, double start, double duration, int axis_counter)
{
Counter_Seg = counter_seg;
Start = start;
Duration = duration;
Axis_Counter = axis_counter;
}
}
Jede Axis soll durch einen grünen Canvas über die gesamte Breite dargestellt werden (StackPanel vertical) und innerhalb einer jeden Axis sollen die zugeordneten Segmente als gelbe Canvases horizontal erfolgen.
Bisher habe ich folgendes Bild erreicht --> siehe Bild im Anhang oben
Im unteren Teil des Bildes ist das Ziel angedeutet, welches ich verfolge.
Im XAML habe ich bereits folgendes umgesetzt:
<Window x:Class="WpfApp2.MainWindow"
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:local="clr-namespace:WpfApp2"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<HierarchicalDataTemplate x:Key="myLevel1Template" DataType="{x:Type local:Axis}" ItemsSource="{Binding Path=MySegments}">
<Border BorderBrush="Black" BorderThickness="1">
<Canvas Width="750" Height="50" Background="DarkSeaGreen"/>
</Border>
</HierarchicalDataTemplate>
<Style x:Key="Canvas" TargetType="Canvas">
<Setter Property="Canvas.Left" Value="{Binding Start}"/>
<Setter Property="Canvas.Top" Value="5"/>
<Setter Property="Background" Value="Yellow"/>
<Setter Property="Height" Value="40"/>
<Setter Property="Width" Value="{Binding Duration}"/>
</Style>
</Window.Resources>
<Grid>
<Canvas Background="NavajoWhite">
<ItemsControl x:Name="ItemsControl_Axis"
ItemTemplate="{StaticResource myLevel1Template}">
<ItemsControl.Resources>
<DataTemplate DataType="{x:Type local:Segment}">
<Canvas Style="{StaticResource Canvas}">
<Label Content="{Binding Path=Axis_Counter}" Canvas.Left="10" Canvas.Top="10"/>
</Canvas>
</DataTemplate>
</ItemsControl.Resources>
</ItemsControl>
</Canvas>
</Grid>
</Window>
Schon mal Danke für eure Hilfe und Gruß
Phil