Navigation - links Menü rechts Inhalt

Question

Ich fange gerade mit der App Enwicklung für Windows 8 an. Habe schon ein wenig mit JavaScript rumprobiert und ist auch schon einiges bei rumgekommen - trotzdem bin ich nun zu C# gewechselt (hat mehrere Gründe).

Ich habe mir dort ein "Geteilte App (XAML)" erstellt und soweit sieht auch alles sehr gut. Die Frage die ich mir nun stelle ist wie ich am besten bei dieser Ansicht zwischen 2 Seiten hin und her navigiere. Ich möchte keine Pfeile für vor und zurück benutzen. Es soll so werden wie im Einstellungsmenü von Windows 8 - links die Auswahlseite und rechts der Inhalt. Wie kann ich den rechten Inhalt ändern bzw. nur diese Teilseite laden? Meine UI-Struktur ist die wenn man ein solches Projekt neu erstellt - habe noch nichts geändert. Wenn ich das richtig verstehe ist itemDetail der Container für die Items bzw. den ganzen Inhalt der Rechten Seite. Da möchte ich nun sozusagen eine eigene Seite reinladen oder wie macht man das am besten?

Answer 1

Ich habe das mit einer Single Page APP nachgestelt, da Du mit C# und Store App startest, habe ich versucht das möglichst einfach zu gestalten.

In der Page ist eine ListBox, diese dient zur Auswahl, dann ein StackPanel, dort instanziierst Du während der Laufzeit UserControls nach und setzt das Angefragte in das StackPanel. Der komplette Code ist unten, Du musst noch 1 UserControl erstellen, in meinem Beispiel heisst dies Page1.

In der Mainpage.xaml:

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <ListBox Name="MyLinks" ItemsSource="{Binding}" SelectionChanged="MyLinks_SelectionChanged"  />
        <StackPanel Name="contentPanel" Grid.Column="1" />
        
    </Grid>

Im Code Behind:

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            MyLinks.DataContext = new ObservableCollection<string>() {"View1", "View2", "View3"};
        }

        private void MyLinks_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            var selection = MyLinks.SelectedItem.ToString();
            UIElement selectionElement = null;
            switch (selection)
            {
                case "View1":
                    selectionElement = new Page1();
                    break;
                default:
                    selectionElement = new TextBlock() {Text = "Unknown selection!"};
                    break;
            }

            contentPanel.Children.Clear();
            contentPanel.Children.Add(selectionElement);

        }

Answer 2

Super danke das klappt echt gut. Jetzt habe ich aber noch eine Frage dazu: Muss ich irgendwie auf die Größenverhältnisse im Designer achten, damit die App später auch perfekt auf allen PCs und Tablets läuft?

Answer 3

Xaml ist dafür ausgelegt, dass sich deine Pages 'selbst' ausrichten.

Z. B. in dem oberen Beispiel das Grid:

Width Auto heisst so breit wie notwendig.

Width * (default, wenn nichts dort steht), nimmt den 'Rest'

Answer 4

Hallo Cilenco,

sollte Dir die Antwort von Berndt Hambo geholfen haben, dann markiere sie bitte als Antwort.

---

Grüße,

Stefan Kleinewillinghoefer, MICROSOFT   Bitte haben Sie Verständnis dafür, dass im Rahmen dieses Forums, welches auf dem Community-Prinzip „Entwickler helfen Entwicklern“ beruht, kein technischer Support geleistet werden kann oder sonst welche garantierten Maßnahmen seitens Microsoft zugesichert werden koennen.

Answer 5

Kann ich für jedes UserControl dann auch eie eigene AppBar machen oder wie muss ich das machen dann?

Answer 6

Die AppBar definierst Du an der Page, Du kannst dort aber jederzeit 'on the fly' controls ein/ausblenden, hinzufügen, oder entfernen, je nach aktivem UserControl...