Es gibt so einige Ansätze wie man in einer WPF Applikation navigieren kann. Im kommenden Beispiel zeige ich eine Möglichkeit wie man recht einfach neue Seiten im Menue hinzufügen und darstellen kann.

Ziel ist es, im MainWindow (Shell) ein Menue hinzuzufügen und die entsprechenden Pages unterhalb dieses anzuzeigen.

Ich verwende in diesem HowTo ein TabControl, ein StackPanel ein Menu und MenuItems.

Umsetzung:

Zuvor definiere ich einen Style in der Shell (Windows.xaml), welcher das Element vom Typ TabControl überschreibt:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<Window.Resources>
	<Style TargetType="TabControl" x:Key="pagingStyle">
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type TabControl}">
					<Grid>
						<Border Background="Transparent">
							<ContentPresenter x:Name="PART_SelectedContentHost" Margin="{TemplateBinding Padding}"
                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                              ContentSource="SelectedContent" />
						</Border>
						<TabPanel IsItemsHost="True" Visibility="Hidden" />
					</Grid>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>
</Window.Resources>

Weiter lege ich in der Shell (Windows.xaml) ein CommandBinding fest:

1
2
3
<Window.CommandBindings>
	<CommandBinding Command="GoToPage" Executed="OnGoToPage" />
</Window.CommandBindings>

Und dargestellt wird das Ganze dann in einem StackPanel (Orientation Horizontal), welches ein Menue und ein TabControl enthält. Im TabControl zeigen wir später dann die Pages an.

1
2
3
4
5
6
7
8
<StackPanel>
	<Menu>
		<MenuItem Header="Pages">
 
		</MenuItem>
	</Menu>
	<TabControl Style="{StaticResource pagingStyle}" SelectedIndex="0"  x:Name="Pages" />
</StackPanel>

Wechseln wir nun zum Code-Behind der Windows.xaml (Shell) und schreiben die Methode OnGoToPage(), welche in den CommandBindings definiert wurde:

1
2
3
4
5
public void OnGoToPage(object sender, ExecutedRoutedEventArgs e)
{
    if (e.Parameter != null)
        Pages.SelectedIndex = Pages.SelectedIndex < Pages.Items.Count ? int.Parse(e.Parameter.ToString()) - 1 : 0;
}

Weiter abonnieren wir das LoadedEvent im Konstruktor um hier später die entsprechenden Pages in der TabControl-Collection hinzuzufügen.

1
2
3
4
5
public Window1()
{
    InitializeComponent();
    Loaded += Window1_Loaded;
}

Nun lege ich eine neue Klasse namens BasePage an. In dieser Klasse definieren wir das „Masterlayout“ der Pages. Man kann das zwar auch in einem Style definieren, jedoch in diesem Beispiel mache ich das direkt  in der Klasse. dazu schreib ich in den Konstruktor:

1
2
3
4
5
public BasePage()
{
    this.Height = 250;
    this.Background = Brushes.AliceBlue;
}

Die Basis ist damit vorerst fertig – „vorerst“ deshalb, weil hier später grundlegende Einstellungen vorgenommen werden können, aber für dieses Beispiel erstmal nicht relevant. Nun muss man nur noch die einzelnen Pages erstellen und der MenuCollection (Shell) die Pages hinzufügen.

Die UserControls die wir nun anlegen, erben von unserer Basisklasse BasePage. Dazu im XAML des jeweiligen UserControls das UserControl gegen Pages:BasePage und im Code-behind das UserControl gegen BasePage austauschen.

1
2
3
4
5
6
7
8
<Pages:BasePage x:Class="NavigateWpfApplication.Pages.Page1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Pages="clr-namespace:NavigateWpfApplication.Pages">
	<Grid>
		<TextBlock Text="Hello from Page 1" />
	</Grid>
</Pages:BasePage>
1
2
3
4
5
6
7
public partial class Page1 : BasePage
{
    public Page1()
    {
        InitializeComponent();
    }
}

Zum Schluss nun die MenuItems in der Shell hinzufügen:

1
2
3
4
5
<MenuItem Header="Pages">
	<MenuItem Header="Page1" Command="GoToPage" CommandParameter="1" />
	<MenuItem Header="Page2" Command="GoToPage" CommandParameter="2" />
	<MenuItem Header="Page3" Command="GoToPage" CommandParameter="3" />
</MenuItem>

und im LoadedEvent der Shell die Pages:

1
2
3
4
5
6
void Window1_Loaded(object sender, RoutedEventArgs e)
{
    this.Pages.Items.Add(new Page1());
    this.Pages.Items.Add(new Page2());
    this.Pages.Items.Add(new Page3());
}

Et Voila, das wars auch schon,

Viel Spaß beim entwickeln : )

Navigation / Paging in WPF
Markiert in: