Laden...

Databinding einer Liste mit Listen mit X- und Y-Koordinaten

12 Antworten
3,273 Aufrufe
Letzter Beitrag: vor 9 Jahren
Databinding einer Liste mit Listen mit X- und Y-Koordinaten

Hallo,
ich habe eine List in einer Liste und möchte diese Visualisieren. Jede Liste enthält X Y Koordinaten, die ich auf ein Control via XAML Databinding setzen möchte. Die Liste sieht also in etwas so aus List1<x,y,List2<x,y>> und das Bild zeigt, wie das Resultat aussehen sollte. Ich habe es mit ItemControls versucht, aber nicht hinbekommen, vielleicht habt ihr ein tipp für mich, oder etwas Code.
Liste 1 einthält die Vierecke und Liste2 die Kreise

THX

Wenn ich dich richtig Verstanden habe, sollte das so aussehen:

var myList = new ObservableCollection<ObservableCollection<Point>>();

Im XAML hast Du dann ein ItemsControll (oder eine der Ableitungen), in dem ItemTemplate ein weiteres ItemsControl und darin dann das ItemTemplate für den einzelnen Punkt.
Das "äußerste" ItemsControl bindet an die List<List<Point>> und das "innere" ItemsControl bindet an den DataContext (einfach keinen Pfad angeben).

<ItemsControl ItemsSource="{Binding MyList}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <ItemsControl ItemsSource="{Binding}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <MyControl X="{Binding X}" Y="{Binding Y}" />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

NuGet Packages im Code auslesen
lock Alternative für async/await

Beim CleanCode zählen nicht die Regeln, sondern dass wir uns mit diesen Regeln befassen, selbst wenn wir sie nicht befolgen - hoffentlich nach reiflichen Überlegungen.

ja, aber was ist das

<MyControl X="{Binding X}" Y="{Binding Y}" />  

?

Der frühe Apfel fängt den Wurm.

Danke für die Info!

Die Idee war etwas anders.


class Viereck
{
     int X;
     int Y;
     ObservableCollection<Kreise> listKreis
}

class Kreise
{
     int X;
     int Y;
}

var listViereck = new ObservableCollection<Viereck>();


Der XAML müste dann irgendwie so aussehen:

<ItemsControl ItemsSource="{Binding listViereck}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <ItemsControl ItemsSource="{Binding}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>

                        //???????
                        <Viereck X="{Binding X}" Y="{Binding Y}">
                              <ItemsControl ItemsSource="{Binding listKreis}">
                                 <ItemsControl.ItemTemplate>
                                      <DataTemplate>
                                           <ItemsControl ItemsSource="{Binding}">
                                               <ItemsControl.ItemTemplate>
                                                   <DataTemplate>
                                                         <Kreis X="{Binding X}" Y="{Binding Y}" />
                                                   </DataTemplate>
                                             </ItemsControl.ItemTemplate>
                                        </ItemsControl>
                                   </DataTemplate>
                             </ItemsControl.ItemTemplate>
                           </ItemsControl>
                        </Viereck>

                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Dieder Code funktioniert aber nicht, hat einer ne Idee???

ins innere DataTemplate kannst du natürlich kein Viereck reinmachen - Viereck ist ja kein UIElement!
in ein DataTemplate muss ein Control hinein.
Das Control kannste dann evtl. ans Viereck binden.

Als Control nimm doch erstmal ein StackPanel mit 2 Textblöcken drauf, und die Textblöcke bindeste an Viereck.X, Viereck.Y - dann sieht man evtl. schoma was.

Der frühe Apfel fängt den Wurm.

Hallo ogre,

zum Zeichnen schau dir mal die Shapes an (am besten auf einem Canvas): Übersicht über Formen und die grundlegenden Funktionen zum Zeichnen in WPF (für dich also Rectangle und Ellipse)

Am besten du machst ersteinmal ein Testprojekt damit, bevor du dann dein DataTemplate einsetzt.

@ErfinderDesRades:

Das sollte nur repräsentativ für die Kreise in dem Beispiel stehen bzw. eben das Control was an den Punkten dargestellt werden soll.

NuGet Packages im Code auslesen
lock Alternative für async/await

Beim CleanCode zählen nicht die Regeln, sondern dass wir uns mit diesen Regeln befassen, selbst wenn wir sie nicht befolgen - hoffentlich nach reiflichen Überlegungen.

Hallo,

ich habe mir das Canvas und Rectangle Zeug angesehen, ich kann auch Ellipsen auf Rectangle zeichnen, aber ich habe keine Ahnung, wie ich die aus eine Liste binden kann, also in Datatemplates.

Kann mit da einen auf die Sprünge helfen?

Ich habe mir das beispiel angesehen, ich bekomme es aber nicht hin das canvas zu binden
(Siehe Pfeil im code)

  <ItemsControl ItemsSource="{Binding Lines}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>

            ---->  <Canvas Left={Binding PosX} Top={Binding PosY} />

            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Line X1="{Binding From.X}" Y1="{Binding From.Y}"
                      X2="{Binding To.X}" Y2="{Binding To.Y}"
                      Stroke="DarkGray" StrokeThickness="3"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

Es wird zwar gebunden, aber nur einmal. Wenn ich also eine Liste von 10 Canvases habe, wird nur das erste Element gebunden. Kann man das Überhaupt so machen?

Das sollte nur repräsentativ für die Kreise in dem Beispiel stehen bzw. eben das Control was an den Punkten dargestellt werden soll.){gray} ist mir schon klar.
Ich bin nur dafür, schrittweise vorzugehen.
Also erstmal überhaupt die 2-dimensionale Datenstruktur erfolgreich in entsprechend geschachtelten Listboxen anzuzeigen.

Erst wenn das funktioniert es weiter umbauen, dass das auch mit Itemspanel und Canvas etc klappt.

Der frühe Apfel fängt den Wurm.

<ItemsControl ItemsSource="{Binding listViereck}">  
    <ItemsControl.ItemTemplate>  
        <DataTemplate>  
            <ItemsControl ItemsSource="{Binding}">  
                <ItemsControl.ItemTemplate>  
                    <DataTemplate>  
  
                        //???????  
                        <Viereck X="{Binding X}" Y="{Binding Y}">  
                              <ItemsControl ItemsSource="{Binding listKreis}">  
                                 <ItemsControl.ItemTemplate>  
                                      <DataTemplate>  
                                           <ItemsControl ItemsSource="{Binding}">  
                                               <ItemsControl.ItemTemplate>  
                                                   <DataTemplate>  
                                                         <Kreis X="{Binding X}" Y="{Binding Y}" />  
                                                   </DataTemplate>  
                                             </ItemsControl.ItemTemplate>  
                                        </ItemsControl>  
                                   </DataTemplate>  
                             </ItemsControl.ItemTemplate>  
                           </ItemsControl>  
                        </Viereck>  
  
                    </DataTemplate>  
                </ItemsControl.ItemTemplate>  
            </ItemsControl>  
        </DataTemplate>  
    </ItemsControl.ItemTemplate>  
</ItemsControl>  

Dieder Code funktioniert aber nicht, hat einer ne Idee???

Ja, habe ich (allerdings ohne den Code zu testen):

Du hast ja 2 Listen - nutzt hier aber 4 ItemsControls. Das ist natürlich viel zu viel.

<ItemsControl ItemsSource="{Binding listViereck}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
			<Viereck X="{Binding X}" Y="{Binding Y}">
				<ItemsControl ItemsSource="{Binding listKreis}">
					<ItemsControl.ItemTemplate>
						<DataTemplate>
							<Kreis X="{Binding X}" Y="{Binding Y}" />
						</DataTemplate>
					</ItemsControl.ItemTemplate>
				</ItemsControl>
			</Viereck>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

EDIT: Du müsstest bei deiner Variante auch eine Menge Bindingfehler im Output haben.

EDIT2: Ich bin da allerdings auch bei ErfinderDesRades, dass man sich an solche Probleme erstmal rantasten sollte. Dabei versteht man die Problematik idR besser und lernt oft sehr viel. =)