Ich  deklariere dazu eine statische Klasse namens Collections, in der eine oder mehrere Aufzählungen implementiert werden. In meinem Beispiel verwende ich die die Aufzählung GetAnreden

Diese Methode ist statisch und  hat ein Dictionary als Rückgabewert.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/// <summary>
/// Stellt für den ObjectProvider im XAML die ComboBoxItems zur Verfuegung
/// </summary>
public static class Collections
{
    public static Dictionary<Anrede, string> GetAnreden()
    {
        Dictionary<Anrede, string> choices = new Dictionary<Anrede, string>();
        choices.Add(Anrede.OhneAnrede, "Ohne Anrede");
        choices.Add(Anrede.Herr, "Herr");
        choices.Add(Anrede.Frau, "Frau");
        choices.Add(Anrede.Fraeulein, "Fräulein");
        choices.Add(Anrede.HerrUndFrau, "Eheleute");
        choices.Add(Anrede.Firma, "Firma");
        return choices;
    }
}

Im XAML definiere ich als Resource den ObjectDataProvider.

1
2
3

<UserControl.Resources>
    <ObjectDataProvider x:Key="GetAnreden" ObjectType="{x:Type local:Collections}" MethodName="GetAnreden"/>
</UserControl.Resources>

Und verwenden kann man den ObjectDataProvider zum Beispiel in einer ComboBox. Hier binde ich die ItemSource an den o.g. Provider. Mit DisplayMemberPath und SelectedValuePath lege ich den Key und den Value fest.

1
2
3
4

<ComboBox SelectedValue="{Binding Anrede}"
    ItemsSource="{Binding Source={StaticResource GetAnreden}}"
    DisplayMemberPath="Value"
    SelectedValuePath="Key"/>

Über den DataContext muss nun noch das ViewModelProperty gebunden werden, welche den Wert speichern soll, in diesen Beispiel mache ich das im darüber liegenden StackPanel.

1
2
3
4
5
6

<StackPanel DataContext="{Binding Person}" >
    <ComboBox SelectedValue="{Binding Anrede}"
    ItemsSource="{Binding Source={StaticResource GetAnreden}}"
    DisplayMemberPath="Value"
    SelectedValuePath="Key"/>
</StackPanel>

Das wars auch schon,

Viel Spass beim entwickeln : )

Dieser Beitrag stammt von Mario Priebe.

Ähnliche Beiträge

• 22. Juli 2009 -- CAL Anwendung in 3 Minuten
• 16. Juli 2009 -- MenuItems aus XML auslesen und binden – WPF / MVVM
• 25. März 2010 -- TabControl-Höhe 100%
• 5. März 2010 -- Navigation / Paging in WPF
• 16. Dezember 2009 -- TextBox und PasswordBox mit gemeinsamen Style

Die Position kann relativ zum Element oder zur Applikation geöffnet werden. Das Popup verhält sich auch wie ein eigenständiges Fenster, das heisst wird die Mainapplikation verschoben, bleibt das Popup an der letzten Position stehen.

Ein Popup wird nicht wie ein Tooltip automatisch geöffnet, sondern muss explizit durch dessen Eigenschaft IsOpen geöffnet und geschlossen werden.

Die Anzeigeposition wird durch die Placement-Eigenschaften festgelegt. Zu welchem Element sich die Placements beziehen, legt man an der Property PlacementTarget fest. Die X und die Y Koordinate HorizontalOffset und VertracalOffset setzt man bei einem gewählten “Absolute” oder “Relative” Placement aus der Enumeration PlacementMode.

Weitere Eigenschaften an dem Control sind PopupAnimation und AllowsTransparency. Will man ein Popup animieren (Fade, None, Scroll, Slide) muss AllowsTransparency auf true gesetzt werden.

Das folgende Beispiel soll das gesagte etwas verdeutlichen. Hier beziehe ich mein Placement relativ zur Applikation(window), den Bezug stellt man über ElementName her.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<Window x:Class="PopupHowTo.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300" Name="myWindow">
<StackPanel HorizontalAlignment="Left">
 
<TextBox Width="100" Name="txtBox" MouseEnter="txtBox_MouseEnter" MouseLeave="txtBox_MouseLeave" />
 
<Popup Name="popUp" PlacementTarget="{Binding ElementName=myWindow}" Placement="Relative" VerticalOffset="30" HorizontalOffset="100"
   PopupAnimation="Slide" AllowsTransparency="True">
</Popup>
 
</StackPanel>
</Window>

CodeBehind

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

public partial class Window1 : Window
{
MyUserControl uc;
public Window1()
{
    InitializeComponent();
    Loaded += new RoutedEventHandler(Window1_Loaded);
}
 
void Window1_Loaded(object sender, RoutedEventArgs e)
{
    uc = new MyUserControl();
    popUp.Child = uc;
}
 
private void txtBox_MouseEnter(object sender, MouseEventArgs e)
{
    uc.HelpText = "Ich bin ein Hilfetext für eine TextBox";
    popUp.IsOpen = true;
}
 
private void txtBox_MouseLeave(object sender, MouseEventArgs e)
{
    popUp.IsOpen = false;
}
}

HelpText ist ein ViewModelProperty in MyUserControl.

Viel Spass beim entwickeln : )

Dieser Beitrag stammt von Mario Priebe.

Ähnliche Beiträge

• 7. April 2010 -- WCFService testen
• 27. November 2009 -- Aufzählungen speichern – C# Quicky
• 18. November 2009 -- PHP Entwicklungsumgebung unter Windows

Um das Problem zu beheben muss man das StackPanel dazu bewegen sich in Höhe anzupassen, ein einfaches Height auf ein StackPanel bringt leider nichts. Man muss das innere Element, also das TabControl dazu bewegen das StackPanel zu vergrössern. Also muss man am TabControl die Höhe setzen. Soweit klar. Ich kann hier einen festen Wert definieren. Nun aber möchte ich das Ganze ja auch skalierbar umsetzen.

Dazu kann ich mir das darüberliegende Element holen, welches eine Höhe definiert. In meinem Beispiel ist das, das Window. Ich binde also die Höhe meines TabControls mit FindAncestor an die Höhe des Window:

1
2
3
4
5
6
7
8
9
10
11
12

<Window x:Class="FindAncestor.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
 
	<StackPanel>
		<TabControl Background="AliceBlue" Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=ActualHeight}">
			<TabItem Header="Test" Background="AliceBlue" />
		</TabControl>
	</StackPanel>
 
</Window>

Voila und der gewünschte Effekt wird erreicht.

Dieser Beitrag stammt von Mario Priebe.

Ähnliche Beiträge

• 5. Mai 2010 -- ComboBox an ObjectDataProvider binden
• 5. März 2010 -- Navigation / Paging in WPF
• 16. Dezember 2009 -- TextBox und PasswordBox mit gemeinsamen Style
• 25. November 2009 -- Multiline TextBox – XAML Quicky
• 20. Oktober 2009 -- Note: Multiple Styles in WPF

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 : )

Dieser Beitrag stammt von Mario Priebe.

Ähnliche Beiträge

• 5. Mai 2010 -- ComboBox an ObjectDataProvider binden
• 25. März 2010 -- TabControl-Höhe 100%
• 16. Dezember 2009 -- TextBox und PasswordBox mit gemeinsamen Style
• 25. November 2009 -- Multiline TextBox – XAML Quicky
• 20. Oktober 2009 -- Note: Multiple Styles in WPF

Man geht hier wie folgt vor:

Ein Image hinzufügen über Rechtsklick, Hinzufügen, Vorhandenes Element in den jeweiligen Projektordner.

In den Eigenschaften des Bildes (F4) den “Buildvorgang” auf “Resource” setzen und bei “In Ausgabeverzeichnis kopieren” auf  “Immer kopieren” setzen.

Im jeweiligen Style die ImageSource definieren, hierbei den relativen Pfad von der Style.xaml zum Bild beachten:

<ImageSource x:Key="ApplicationIcon">images/logo.png</ImageSource>

Und in der Windows.xaml (unter CAL in der Shell.xaml) das Icon festlegen:

Icon="{DynamicResource ApplicationIcon}"

Hier darauf achten, DynamicResource anstelle von StaticResource, da es sonst während der Laufzeit nicht möglich ist, diese Resource zu wechseln.

Viel Spass beim entwickeln : )

Dieser Beitrag stammt von Mario Priebe.

Ähnliche Beiträge

• 25. November 2009 -- Multiline TextBox – XAML Quicky
• 25. Juli 2009 -- TextBox mit Schatten – XAML Quicky
• 18. Juni 2009 -- EMailValidationConverter – WPF Quicky
• 18. Juni 2009 -- BirthdayConverter – WPF Quicky
• 26. Februar 2009 -- contextmenu – WPF / XAML Quicky