Inhalt einer Liste grafisch Visualisieren mit Canvas und ItemControl?

Hallo,

ich habe eine Liste von Informationen und ich möchte diese grafische darstellen. Jeder String in der Liste wird zu einem Block. Die Blöcke sollen mit Pfeilen verbunden werden. Bei gewissen Begriffen, sollen verzweigungen entstehen. Z.B. Jump To 6 und irgendwo steht JumpingPoint 6, dann soll das eine Verzweigung sein.

Ich möchte das mit dem MVVM Design Pattern lösen. Ich wollte ein Canvas in Verbindung mit einem Itemcontrol verwenden. Ich habe 2 Punkte an denen ich hänge.

1. Ich kann schonmal eine Reihe an rechtecken mit dem gewünschten Content erstellen, aber die Blöcke gehen einfach über den Bildschirmrand hinaus ohne, dass eine Scrollbar entsteht.
2. Kann ich ItemControls in Itemcontrols erstellen, wie for schleifen in for schleifen?

Code:
              <Grid>
                   <ItemsControl ItemsSource="{Binding RectangleItems}" Margin="20" Height="400">
                   
                           <ItemsControl.ItemTemplate>
                               <DataTemplate>
                                   <Grid>
                                       <Rectangle Width="{Binding Width}" Height="{Binding Height}" Fill="White" Stroke="#1cad8e" StrokeThickness="1" />
                                       <TextBlock Style="{StaticResource detailedDecsriptionDisplayTextBlocks}" Text="{Binding Content}" Margin="5"/>
                                   </Grid>
                               </DataTemplate>
                           </ItemsControl.ItemTemplate>
                           
                           <ItemsControl.ItemsPanel>
                               <ItemsPanelTemplate>
                               <Grid>
                                   <Canvas> 
                                   </Canvas>
                               </Grid>
                               </ItemsPanelTemplate>
                           </ItemsControl.ItemsPanel>
                           
                           <ItemsControl.Template>
                               <ControlTemplate>
                                   <ItemsPresenter />
                               </ControlTemplate>
                           </ItemsControl.Template>
                           
                           <ItemsControl.ItemContainerStyle>
                               <Style TargetType="ContentPresenter">
                                   <Setter Property="Canvas.Left" Value="{Binding X}"/>
                                   <Setter Property="Canvas.Top" Value="{Binding Y}"/>
                               </Style>
                           </ItemsControl.ItemContainerStyle>
                           
                   </ItemsControl>
               </Grid>

Zur Information:

Zitat von CSharpNewbie2022

ich habe eine Liste von Informationen und ich möchte diese grafische darstellen. [...] Ich möchte das mit dem MVVM Design Pattern lösen.

Du benötigst ein Control, was dir eine Liste mit Strings so wie vorgegeben darstellt. Der von dir erwähnte MVVM Teil beschränkt sich dabei darauf, dass du im ViewModel solch eine Liste mit Strings zur Verfügung stellst und diese dann an das Control bindest. Fertig.

Du kannst also das MVVM Gedöns erst einmal vernachlässigen und dich auf das Design des Controls stürzen.

Aber das habe ich doch? Ich baue mit einem itemcontrol ein canvas so aus, dass wichtige infos wie die Koordinaten etc . Aus einer Liste stammen.

Mein Problem hierbei ist, wenn ich das Canvas mit Referenzen bearbeite also ohne itemcontrol, dann kriege ich bei einem 300 x 300 canvas eine scrollbar sobald elemente ausserhalb fieses fensters sind.

Mit der Itemcontrol variante nicht und da frage ich mich, was ich dagegen machen kann 🤔

Ich musste lediglich sowohl dem Canvas als auch dem Scrollviewer feste bzw. relative Längen zuweisen, dann klappt das Danke

Ich hab doch noch ein Problem, vllt kennt das ja einer...

ich wollte für jedes Element in der observable Collection eine Ellipse erstellen und diese verbinden. Allerdings sobald ich das Path Element hinzufügen, passiert komisches Zeug. Es liegt irgendwie damit zusammen, dass ich

                           <ItemsControl.ItemContainerStyle>
                               <Style TargetType="ContentPresenter">
                                   <Setter Property="Canvas.Left" Value="{Binding StartCornerEllipse.X}"/>
                                   <Setter Property="Canvas.Top" Value="{Binding StartCornerEllipse.Y}"/>
                               </Style>
                           </ItemsControl.ItemContainerStyle>

auf alle Elemente anwende, aber das möchte ich nicht, sondern nur auf die Ellipse und die Textbox. Geht das?

Restlicher XAML Code:

<ItemsControl ItemsSource="{Binding GraphicalObjects}">
                           <ItemsControl.ItemTemplate>
                               <DataTemplate>
                                   <Grid>
                                       <Ellipse Width="{Binding SizeEllipse.X}" Height="{Binding SizeEllipse.Y}" Fill="White" Stroke="#1cad8e" StrokeThickness="1"/>
                                       <TextBox Style="{StaticResource detailedDecsriptionDisplayTextBoxes2}" Width="{Binding SizeEllipse.X}" Height="{Binding SizeEllipse.Y}" Text="{Binding Content}" />
                                       <!-- Path Element -->
                                       <Path Stroke="Black">
                                           <Path.Data>
                                               <PathGeometry>
                                                   <PathFigure StartPoint="{Binding StartPointArrow, Converter={StaticResource Point2DToXAMLConverter}}">
                                                       <BezierSegment 
                                   Point1="{Binding IntermediatePoint1Arrow, Converter={StaticResource Point2DToXAMLConverter}}" 
                                   Point2="{Binding IntermediatePoint2Arrow, Converter={StaticResource Point2DToXAMLConverter}}" 
                                   Point3="{Binding EndPointArrow, Converter={StaticResource Point2DToXAMLConverter}}"/>
                                                   </PathFigure>
                                               </PathGeometry>
                                           </Path.Data>
                                       </Path>
                                   </Grid>
                               </DataTemplate>
                           </ItemsControl.ItemTemplate>
                           <ItemsControl.ItemsPanel>
                               <ItemsPanelTemplate>
                                   <Canvas Height="{Binding CanvasSizeY}" Width="{Binding CanvasSizeX}" HorizontalAlignment="Left"/>
                               </ItemsPanelTemplate>
                           </ItemsControl.ItemsPanel>
                           <ItemsControl.ItemContainerStyle>
                               <Style TargetType="ContentPresenter">
                                   <Setter Property="Canvas.Left" Value="{Binding StartCornerEllipse.X}"/>
                                   <Setter Property="Canvas.Top" Value="{Binding StartCornerEllipse.Y}"/>
                               </Style>
                           </ItemsControl.ItemContainerStyle>
                           <ItemsControl.Template>
                               <ControlTemplate>
                                   <ItemsPresenter />
                               </ControlTemplate>
                           </ItemsControl.Template>
                       </ItemsControl>