Laden...

UI-beschreibende Dateien in WPF zeichnen lasen

Erstellt von Fabian E. vor 12 Jahren Letzter Beitrag vor 12 Jahren 1.351 Views
F
Fabian E. Themenstarter:in
258 Beiträge seit 2008
vor 12 Jahren
UI-beschreibende Dateien in WPF zeichnen lasen

Hallo,

leider ist mir kein beserer Titel für mein Problem eingefallen...

Folgendes Szenario: Ich habe eine XML-Datei. In dieser XML-Datei wird eine UI mit einer Baumstruktur beschrieben. (Ähnlich zu XAML)

Diese XML wird eingelsen und verarbeitet (zu hierachischen Objekten).
Nun würde ich gerne diese UI Struktur auch grafisch darstellen.
Alle Elemente der UI sollen nur als Rechtecke bzw. als Images dargestellt werden.

Nun bräuchte ich irgendeine Art Control welches über ItemsSource ein HierarchicalDataTemplate mit eigener ItemsSource darstellt. Allerdings müssen eben alle Childs die selben Ursprungskoordinaten besitzen.
Ich muss quasi die Möglichkeit besitzen, alle Childs exakt übereinander zu zeichnen, falls das nötig sein sollte.

Wichtig wäre eben, dass die hierachische Struktur erhalten bleibt und ich theoretisch jedes UI Element anklicken kann (Manche wäre natürlich von anderen verdeckt)

Ich hoffe irgendjemand versteht das jetzt so, wie ich das meine...

6.911 Beiträge seit 2009
vor 12 Jahren

Hallo Fabian E.,

wenns schon ähnlich zu XAML ist, kannst du mit dem XamlReader dies einlesen und dann direkt von der WPF anzeigen lassen.

Weil es eben nicht ganz XAML ist, könntest du das XML mittels XSLT nach korrektem XAML transformieren und dann den obigen Schritt durchführen.

Mehr kann ich für die allgemein gehaltene Frage nicht antworten 😉

mfG Gü

Stellt fachliche Fragen bitte im Forum, damit von den Antworten alle profitieren. Daher beantworte ich solche Fragen nicht per PM.

"Alle sagten, das geht nicht! Dann kam einer, der wusste das nicht - und hat's gemacht!"

F
Fabian E. Themenstarter:in
258 Beiträge seit 2008
vor 12 Jahren

Also direkt als XAML geht nicht, konvertieren klingt aber interessant. Werde mich da mal etwas schlau machen.

Um das ganz etwas weniger abstract zu machen hier mal ein kleiner Ausschnitt aus dem XML:


<FxContainer Name="Screen">
      <Properties>
        <Property Name="Name">
          <String>Screen</String>
        </Property>
        <Property Name="Visible">
          <Bool>True</Bool>
        </Property>
        <Property Name="Top">
          <Float>-1</Float>
        </Property>
        <Property Name="ID">
          <Int>-1</Int>
        </Property>
        <Property Name="Position">
          <Array>
            <Float>0</Float>
            <Float>0</Float>
            <Float>0</Float>
          </Array>
        </Property>
        <Property Name="CenterScale">
          <Array>
            <Float>1</Float>
            <Float>1</Float>
            <Float>1</Float>
          </Array>
        </Property>
        <Property Name="Opacity">
          <Float>1</Float>
        </Property>
        <Property Name="Offset">
          <Array>
            <Float>0</Float>
            <Float>0</Float>
            <Float>0</Float>
          </Array>
        </Property>
        <Property Name="Scale">
          <Array>
            <Float>1</Float>
            <Float>1</Float>
            <Float>1</Float>
          </Array>
        </Property>
        <Property Name="Size">
          <Array>
            <Int>470</Int>
            <Int>800</Int>
          </Array>
        </Property>
      </Properties>
      <Scenes>
        <FxContainer Name="folder">
          <Properties>
            <Property Name="Name">
              <String>folder</String>
            </Property>
            <Property Name="Visible">
              <Bool>True</Bool>
            </Property>
            <Property Name="Top">
              <Float>0</Float>
            </Property>
            <Property Name="ID">
              <Int>0</Int>
            </Property>
            <Property Name="Position">
              <Array>
                <Float>235</Float>
                <Float>400</Float>
                <Float>0</Float>
              </Array>
            </Property>
            <Property Name="CenterScale">
              <Array>
                <Float>1</Float>
                <Float>1</Float>
                <Float>1</Float>
              </Array>
            </Property>
            <Property Name="Opacity">
              <Float>1</Float>
            </Property>
            <Property Name="Offset">
              <Array>
                <Float>-235</Float>
                <Float>-327</Float>
                <Float>0</Float>
              </Array>
            </Property>
            <Property Name="Scale">
              <Array>
                <Float>1</Float>
                <Float>1</Float>
                <Float>1</Float>
              </Array>
            </Property>
            <Property Name="Size">
              <Array>
                <Int>470</Int>
                <Int>654</Int>
              </Array>
            </Property>
          </Properties>
          <Scenes />
        </FxContainer>
        <FxContainer Name="DropArea">
          <Properties>
            <Property Name="Name">
              <String>DropArea</String>
            </Property>
            <Property Name="Visible">
              <Bool>True</Bool>
            </Property>
            <Property Name="Top">
              <Float>0</Float>
            </Property>
            <Property Name="ID">
              <Int>1</Int>
            </Property>
            <Property Name="Position">
              <Array>
                <Float>235</Float>
                <Float>400</Float>
                <Float>0</Float>
              </Array>
            </Property>
            <Property Name="CenterScale">
              <Array>
                <Float>1</Float>
                <Float>1</Float>
                <Float>1</Float>
              </Array>
            </Property>
            <Property Name="Opacity">
              <Float>1</Float>
            </Property>
            <Property Name="Offset">
              <Array>
                <Float>-265</Float>
                <Float>-374</Float>
                <Float>0</Float>
              </Array>
            </Property>
            <Property Name="Scale">
              <Array>
                <Float>1</Float>
                <Float>1</Float>
                <Float>1</Float>
              </Array>
            </Property>
            <Property Name="Size">
              <Array>
                <Int>470</Int>
                <Int>654</Int>
              </Array>
            </Property>
          </Properties>
          <Scenes />
        </FxContainer>
        <FxContainer Name="item">
          <Properties>
            <Property Name="Name">
              <String>item</String>
            </Property>
            <Property Name="Visible">
              <Bool>True</Bool>
            </Property>
            <Property Name="Top">
              <Float>0</Float>
            </Property>
            <Property Name="ID">
              <Int>2</Int>
            </Property>
            <Property Name="Position">
              <Array>
                <Float>235</Float>
                <Float>400</Float>
                <Float>0</Float>
              </Array>
            </Property>
            <Property Name="CenterScale">
              <Array>
                <Float>1</Float>
                <Float>1</Float>
                <Float>1</Float>
              </Array>
            </Property>
            <Property Name="Opacity">
              <Float>1</Float>
            </Property>
            <Property Name="Offset">
              <Array>
                <Float>-235</Float>
                <Float>-327</Float>
                <Float>0</Float>
              </Array>
            </Property>
            <Property Name="Scale">
              <Array>
                <Float>1</Float>
                <Float>1</Float>
                <Float>1</Float>
              </Array>
            </Property>
            <Property Name="Size">
              <Array>
                <Int>470</Int>
                <Int>654</Int>
              </Array>
            </Property>
          </Properties>
          <Scenes />
        </FxContainer>
        <FxContainer Name="timeline.Tip_Bubbles_Main">
          <Properties>
            <Property Name="Name">
              <String>timeline.Tip_Bubbles_Main</String>
            </Property>
            <Property Name="Visible">
              <Bool>True</Bool>
            </Property>
            <Property Name="Top">
              <Float>0</Float>
            </Property>
            <Property Name="ID">
              <Int>3</Int>
            </Property>
            <Property Name="Position">
              <Array>
                <Float>265</Float>
                <Float>480</Float>
                <Float>0</Float>
              </Array>
            </Property>
            <Property Name="CenterScale">
              <Array>
                <Float>1</Float>
                <Float>1</Float>
                <Float>1</Float>
              </Array>
            </Property>
            <Property Name="Opacity">
              <Float>1</Float>
            </Property>
            <Property Name="Offset">
              <Array>
                <Float>-265</Float>
                <Float>-480</Float>
                <Float>0</Float>
              </Array>
            </Property>
            <Property Name="Scale">
              <Array>
                <Float>1</Float>
                <Float>1</Float>
                <Float>1</Float>
              </Array>
            </Property>
            <Property Name="Size">
              <Array>
                <Int>530</Int>
                <Int>960</Int>
              </Array>
            </Property>
          </Properties>
          <Scenes>
            <FxContainer Name="hitbox.Tip_bubbles_01">
              <Properties>
                <Property Name="Name">
                  <String>hitbox.Tip_bubbles_01</String>
                </Property>
                <Property Name="Visible">
                  <Bool>True</Bool>
                </Property>
                <Property Name="Top">
                  <Float>0</Float>
                </Property>
                <Property Name="ID">
                  <Int>0</Int>
                </Property>
                <Property Name="Position">
                  <Array>
                    <Float>10</Float>
                    <Float>300</Float>
                    <Float>0</Float>
                  </Array>
                </Property>
                <Property Name="CenterScale">
                  <Array>
                    <Float>5.1</Float>
                    <Float>1.1</Float>
                    <Float>1</Float>
                  </Array>
                </Property>
                <Property Name="Opacity">
                  <Float>1</Float>
                </Property>
                <Property Name="Offset">
                  <Array>
                    <Float>0</Float>
                    <Float>-30</Float>
                    <Float>0</Float>
                  </Array>
                </Property>
                <Property Name="Scale">
                  <Array>
                    <Float>1</Float>
                    <Float>1</Float>
                    <Float>1</Float>
                  </Array>
                </Property>
              </Properties>
              <Scenes />
            </FxContainer>
            <FxContainer Name="text.label_01">
              <Properties>
                <Property Name="Name">
                  <String>text.label_01</String>
                </Property>
                <Property Name="Visible">
                  <Bool>True</Bool>
                </Property>
                <Property Name="Top">
                  <Float>0</Float>
                </Property>
                <Property Name="ID">
                  <Int>1</Int>
                </Property>
                <Property Name="Position">
                  <Array>
                    <Float>235</Float>
                    <Float>310</Float>
                    <Float>0</Float>
                  </Array>
                </Property>
                <Property Name="CenterScale">
                  <Array>
                    <Float>0.9</Float>
                    <Float>0.9</Float>
                    <Float>1</Float>
                  </Array>
                </Property>
                <Property Name="Offset">
                  <Array>
                    <Float>0</Float>
                    <Float>-10</Float>
                    <Float>0</Float>
                  </Array>
                </Property>
                <Property Name="Scale">
                  <Array>
                    <Float>1</Float>
                    <Float>1</Float>
                    <Float>1</Float>
                  </Array>
                </Property>                
              </Properties>
              <Scenes />
            </FxContainer>
            <FxContainer Name="message_no_arrow.9.png">
              <Properties>
                <Property Name="Name">
                  <String>message_no_arrow.9.png</String>
                </Property>
                <Property Name="Visible">
                  <Bool>True</Bool>
                </Property>
                <Property Name="Top">
                  <Float>0</Float>
                </Property>
                <Property Name="ID">
                  <Int>2</Int>
                </Property>
                <Property Name="Position">
                  <Array>
                    <Float>235</Float>
                    <Float>300</Float>
                    <Float>0</Float>
                  </Array>
                </Property>
                <Property Name="CenterScale">
                  <Array>
                    <Float>4.2</Float>
                    <Float>0.9649122</Float>
                    <Float>1</Float>
                  </Array>
                </Property>
                <Property Name="Offset">
                  <Array>
                    <Float>-57</Float>
                    <Float>-57</Float>
                    <Float>0</Float>
                  </Array>
                </Property>
                <Property Name="Scale">
                  <Array>
                    <Float>1</Float>
                    <Float>1</Float>
                    <Float>1</Float>
                  </Array>
                </Property>
              </Properties>
              <Scenes />
            </FxContainer>
            <FxContainer Name="hitbox.Tip_bubbles_02">
              <Properties>
                <Property Name="Name">
                  <String>hitbox.Tip_bubbles_02</String>
                </Property>
                <Property Name="Visible">
                  <Bool>True</Bool>
                </Property>
                <Property Name="Top">
                  <Float>0</Float>
                </Property>
                <Property Name="ID">
                  <Int>3</Int>
                </Property>
                <Property Name="Position">
                  <Array>
                    <Float>10</Float>
                    <Float>690</Float>
                    <Float>0</Float>
                  </Array>
                </Property>
                <Property Name="CenterScale">
                  <Array>
                    <Float>5.1</Float>
                    <Float>1.35</Float>
                    <Float>1</Float>
                  </Array>
                </Property>
                <Property Name="Opacity">
                  <Float>1</Float>
                </Property>
                <Property Name="Offset">
                  <Array>
                    <Float>0</Float>
                    <Float>-20</Float>
                    <Float>0</Float>
                  </Array>
                </Property>
                <Property Name="Scale">
                  <Array>
                    <Float>1</Float>
                    <Float>1</Float>
                    <Float>1</Float>
                  </Array>
                </Property>
              </Properties>
              <Scenes />
            </FxContainer>
            <FxContainer Name="text.label_02">
              <Properties>
                <Property Name="Name">
                  <String>text.label_02</String>
                </Property>
                <Property Name="Visible">
                  <Bool>True</Bool>
                </Property>
                <Property Name="Top">
                  <Float>0</Float>
                </Property>
                <Property Name="ID">
                  <Int>4</Int>
                </Property>
                <Property Name="Position">
                  <Array>
                    <Float>228</Float>
                    <Float>680</Float>
                    <Float>0</Float>
                  </Array>
                </Property>
                <Property Name="CenterScale">
                  <Array>
                    <Float>0.9</Float>
                    <Float>0.9</Float>
                    <Float>1</Float>
                  </Array>
                </Property>
                <Property Name="Offset">
                  <Array>
                    <Float>0</Float>
                    <Float>0</Float>
                    <Float>0</Float>
                  </Array>
                </Property>
                <Property Name="Scale">
                  <Array>
                    <Float>1</Float>
                    <Float>1</Float>
                    <Float>1</Float>
                  </Array>
                </Property>
              </Properties>
              <Scenes />
            </FxContainer>
            <FxContainer Name="message_port_bottom_cps.9.png">
              <Properties>
                <Property Name="Name">
                  <String>message_port_bottom_cps.9.png</String>
                </Property>
                <Property Name="Visible">
                  <Bool>True</Bool>
                </Property>
                <Property Name="Top">
                  <Float>0</Float>
                </Property>
                <Property Name="ID">
                  <Int>5</Int>
                </Property>
                <Property Name="Position">
                  <Array>
                    <Float>235</Float>
                    <Float>690</Float>
                    <Float>0</Float>
                  </Array>
                </Property>
                <Property Name="CenterScale">
                  <Array>
                    <Float>3.152</Float>
                    <Float>1.323529</Float>
                    <Float>1</Float>
                  </Array>
                </Property>
                <Property Name="Offset">
                  <Array>
                    <Float>-74</Float>
                    <Float>-51</Float>
                    <Float>0</Float>
                  </Array>
                </Property>
                <Property Name="Scale">
                  <Array>
                    <Float>1</Float>
                    <Float>1</Float>
                    <Float>1</Float>
                  </Array>
                </Property>
              </Properties>
              <Scenes />
            </FxContainer>
          </Scenes>
        </FxContainer>
      </Scenes>
    </FxContainer>

Damit das ganze nicht zu verwirrend wird, hier noch ein Screenshot von der Struktur (wird so in meinem Programm angezeigt)

Jedes in dem Screenshot angezeigtes Element soll nachher via einem Image gezeichnet werden. Ich benötige nur ein Control welches mir diese Struktur über DataTemplates verwandeln kann. Problem ist dabei aber eben, dass alle Images die selben Ursprungskoordinaten haben sollten.

F
Fabian E. Themenstarter:in
258 Beiträge seit 2008
vor 12 Jahren

Wäre es vielleicht möglich das gnaze über eine Listbox mit einem Canvas als ItemsPanel zu lösen? Das sollte doch dann alle Elemente genau übereinander zeichnen, oder?

Eigentlich benötige ich ein Stackpanel, das in Z-Richtung stapelt 😃

297 Beiträge seit 2008
vor 12 Jahren

Du könntest es mit einem ItemsControl und einem Canvas als ItemsPanel versuchen. Und dann für jedes Element in deinem XML ein Control-/DataTemplate erstellen.

There are 10 kind of people, those who understand binary and those who don't.

656 Beiträge seit 2008
vor 12 Jahren

Nachdem du selber schon sagst, dass es hierarchische Daten sind, könnte ein HierarchicalDataTemplate Abhilfe schaffen. Analog zum normalen DataTemplate kannst du damit das Aussehen deiner Objekte festlegen; nur dass es auch Unterelemente beinhalten kann.
In Kombination mit XML-Binding wäre das eventuell eine Möglichkeit für dich.

F
Fabian E. Themenstarter:in
258 Beiträge seit 2008
vor 12 Jahren

Also, ItemsControl + Canvas als ItemsPanel zeigt mir zumindest mal das oberste Element an.
Allerdings auch NUR das oberste Element. Alle CHilds werden trotz HierarchicalDataTemplate und gesetzter ItemsSource ignoriert. Ich denke ein normales ItemsControl kann villeicht mit einem HierarchicalDataTemplate nichts anfangen?

Alternativ könnte ich natürlich auch die Hierachie über den haufen werfen und per Hand für jedes Element im Code ein Image erstellen und hinzufügen. Super schön wäre das allerdings nicht...

Hier mein bisheriges XAML:


<ItemsControl Margin="2"
                          Width="400"
                          Height="400"
                          HorizontalAlignment="Center"
                          VerticalAlignment="Center"
                          DataContext="{Binding ElementName=dockWindow}"
                          ItemsSource="{Binding FileViewModel.Scenes}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Canvas HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <HierarchicalDataTemplate DataType="{x:Type FxViewModels:FxSceneObjectViewModel}"
                                              ItemsSource="{Binding Childs}">
                        <Rectangle Width="{Binding ID}"
                                   Height="30"
                                   Fill="AliceBlue"/>
                    </HierarchicalDataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>

Width des Rectangle ist auf ID gebunden, damit ich feststellen kann, ob mehrere Rectangles angezeigt werden.