none
Design: Vertikales Menü RRS feed

  • Frage

  • Hallo,

    ich möchte wissen wie ich folgendes Design einfügen kann:

    http://www.topapps.net/wp-content/uploads/2014/02/MetroTube.jpg

    Hier im Beispiel sind oben rechts drei Blaue Striche, darunter vertikal icons angeordnet , swiped man nach rechts (kein pivotitem!) bekommt man "eine vertikale Application Bar" ; bitte um codebeispiel, oder auf weiterführende links. Wie ist die Bezeichnung für das?

    Samstag, 13. September 2014 18:58

Antworten

  • Hallo,
    IMHO gibt es da nichts vorgefertigtes. Meistens wird die normale AppBar verwendet - um eben in jeder App alles gleich zu machen und keine Konzepte von Android und Co. zu übernehmen.

    Technisch könntest du versuchen einen ScrollViewer so einzustellen, das man nur horizontal scrollen kann. Sobald nun der Benutzer scrollt (an der Seite nach links zieht) und wieder los lässt kannst du automatisch auf die besser passende Seite springen.
    Innerhalb des ScrollViewers kannst du nun ein Grid platzieren um beide Inhalte einzubauen. Jede Spalte sollte nun einen eigenen ScrollViewer für den Inhalt bekommen.

    <ScrollViewer Name="sv" ViewChanged="sv_ViewChanged"
                    HorizontalScrollMode="Enabled" VerticalScrollMode="Disabled"
                    HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" >
        <Grid Width="700">
            <!--Achtung! Breite sollte dnamisch an das Gerät angepasst werden-->
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <ScrollViewer Grid.Column="1" VerticalScrollMode="Enabled">
                <Border Height="2000" Background="DarkGreen" PointerReleased="Border_PointerReleased"/>
            </ScrollViewer>
            <ScrollViewer Grid.Column="0" VerticalScrollMode="Enabled">
                <Border Height="2000" Background="DarkBlue"/>
            </ScrollViewer>
        </Grid>
    </ScrollViewer>
    private void sv_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
    {
        if (!e.IsIntermediate)
        {
            //zu Ende gescrollt? Auf eine der beiden Seiten setzen.
            //300 = Nicht sichtbarer Bereich der anderen Seite, /2= min. Halbe Seite verschieben
            if (sv.HorizontalOffset < (300 / 2))
                sv.ChangeView(0, null, null);
            else
                sv.ChangeView(sv.ExtentWidth - ActualWidth, null, null);
        }
    }



    Tom Lambert - C# MVP
    Wozu Antworten markieren und für Beiträge abstimmen? Klicke hier.
    Nützliche Links: .NET Quellcode | C# ↔ VB.NET Konverter | Account bestätigen (Verify Your Account)
    Ich: Webseite | Code Beispiele | Facebook | Twitter | Snippets

    Samstag, 13. September 2014 23:42