none
RelativePanel - 2 Rectangles sollen eine "Zeile" füllen, Breite jewils 50% RRS feed

  • Frage

  • Hallo zusammen,

    Ich habe eine Frage bezüglich des in den Windows 10 Store Apps verfügbaren RelativePanels. Ich habe auf einer Page ein RelativePanel angelegt. Nun möchte ich in diesem RelativePanel 2 Rechtecke haben, die nebeneinander liegen. Soweit kein Problem:

    <RelativePanel Margin="10">
        <Rectangle Name="R1" Fill="Yellow" Height="200" Width="500"></Rectangle>
        <Rectangle Fill="Red" Height="200" Width="500" RelativePanel.RightOf="R1"></Rectangle>
    </RelativePanel>

    Nun möchte ich aber nur ungern eine fixe Breite für die Rechtecke haben. Die beiden Rechtecke sollen das Appfenster in der Weite voll füllen; jedes von ihnen soll 50% der AppBreite einnehmen und sich dynamisch an das Ändern der Fenstergröße anpassen.

    Lässt sich sowas mittels RelativePanel realisieren? Ich habe sonst dafür früher immer ein Grid in WPF Anwendungen benutzt. Diesmal würde ich aber gern ein RelativePanel verwenden, um z.B. das 2. Rechteck unter das Erste zu klappen, wenn das Appfenster zu klein wird.

    Hat jemand eine Idee?

    Dienstag, 22. September 2015 11:05

Antworten

Alle Antworten

  • Hi User95,

    für den Fall ist das RelativePanel nicht geeignet. Nutze stattdessen wie auch in der WPF ein Grid. Darin erstellst Du dann neben zwei Columns auch zwei Rows. Wenn die Bildschirmgrösse unter eine bestimmte Breite fällt, platzierst Du einfach das zweite Rectangle in der zweiten Row und setzt auf beiden Rectangles Grid.ColumnSpan auf 2. Diese Aktionen kannst Du mit einem Adaptive Trigger machen. Hier ist ein Beispiel für einen solchen Adaptive Trigger am Ende:

    https://msdn.microsoft.com/de-DE/office/office365/windows.ui.xaml.adaptivetrigger.aspx


    Thomas Claudius Huber

    "If you can't make your app run faster, make it at least look & feel extremly fast"

    My latest Pluralsight-courses:
    XAML Layout in Depth
    Windows Store Apps - Data Binding in Depth

    twitter: @thomasclaudiush
    homepage: www.thomasclaudiushuber.com

    • Als Antwort markiert User95 Dienstag, 22. September 2015 16:42
    Dienstag, 22. September 2015 12:03
  • Danke für die Einschätzung! Momentan habe ich da aber noch Probleme mit der Umsetzung mittels VisualStates. Wie kann ich die Zeile des Rechtecks triggern? Ich habe bereits folgendes probiert:

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="700" />
                </VisualState.StateTriggers>
    
                <VisualState.Setters>
                    <Setter Target="R2.Grid.Row" Value="1" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    Das 2.Rechteck habe ich mittels Name Attribut mit "R2" benannt. Der Code erzeugt bei mir zwar keinen Fehler, funktioniert aber auch nicht.

    Dienstag, 22. September 2015 13:41
  • Hi User95,

    versuch's mal so im Setter:

    <Setter Target="R2.(Grid.Row)" Value="1" />



    Thomas Claudius Huber

    "If you can't make your app run faster, make it at least look & feel extremly fast"

    My latest Pluralsight-courses:
    XAML Layout in Depth
    Windows Store Apps - Data Binding in Depth

    twitter: @thomasclaudiush
    homepage: www.thomasclaudiushuber.com

    • Als Antwort markiert User95 Dienstag, 22. September 2015 16:41
    Dienstag, 22. September 2015 14:03