UWP: Drowdown
Menü MenuFlyout
Ich möchte in meiner UWP Universal Windows Platform
Anwendung (Photo Explorer, Win10 Photo Gallery)
eine Liste als DropDown Liste einbauen, die verschiedene
Elemente einer Auswahl anzeigt, wenn man auf das Dropdown Element klickt.
#: Dropdown, Kombinations Control
Ein Dropdown Menü wird in UWP mit dem MenuFlyout erstellt.
Das Flyout kann innerhalb eines
Buttons als Button.Flyout
Subdefinition eingebaut werden.
|
<Button >
<Button.Flyout >
<MenuFlyout x:Name="menuFolders" >
<MenuFlyoutItem Text="Folder1" />
</MenuFlyout >
</Button.Flyout >
</Button >
|
Dadurch wird es direkt mit dem
Click-event des Buttons verbunden und er Button öffnet automatisch das
Dropdown-Menü unterhalb des Buttons.
In XAML:
Der Definition muss man darauf achten, dass man ein
MenuFlyout nur einbauen kann innerhalb von <UIElement.Flyout>..</UIElement.Flyout> oder im Page.Resources bereich
Hier das XAML Code Beispiel welches ein Menu unterhalb des
Buttons mit 3 Menüpunkten einbaut.
Der erste Menüpunkt reagiert hierbei mit dem Click-Event Click="menuFolderItem_Click"
|
<Button Grid.Row="0" Grid.Column="2" x:Name="btnSelect_Album" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="1,0,0,0" FontFamily="Segoe UI Symbol" FontSize="26" >
<SymbolIcon Symbol="ShowBcc" />
<Button.Flyout >
<MenuFlyout x:Name="menuFolders" >
<MenuFlyoutItem Text="Folder1" Click="menuFolderItem_Click" />
<MenuFlyoutItem Text="Folder2" />
<MenuFlyoutItem Text="Folder long-Text
C:\_Daten\Desktop\UWP\_vorlagen\Windows-universal-samples-master\Samples\XamlContextMenu\cs" ToolTipService.ToolTip="C:\_Daten\Desktop\UWP\_vorlagen\Windows-universal-samples-master\Samples\XamlContextMenu\cs"
/>
</MenuFlyout>
</Button.Flyout>
|
Zu beachten ist auch, dass überlange Texte abgeschnitten
werden.
Deshalb kann man ein ToolTipService.ToolTip einbauen,
wodurch das komplette Text-Info Element als ToolTip Fly-over angezeigt wird.
Während der Definition in XAML wird in der Xaml
Entwurfsansicht das MenuFlyout auch
schon angezeigt
C# Code
Das einzelne Menü-Element kann mit einem Click-Event
reagieren
|
<MenuFlyoutItem Text="Folder1" Click="menuFolderItem_Click" />
|
Im folgenden Event wird dann aus dem Sender das
MenuFlyoutItem ausgewertet und hieraus der Text oder sonstige Informationen
entnommen.
|
private void menuFolderItem_Click(object sender, RoutedEventArgs e)
{
MenuFlyoutItem item = sender as MenuFlyoutItem;
clsSys.show_Message("flyout " + item.Text);
}
|
Dynamisches Laden
von einzelnen Menüpunkten zur Laufzeit:
Einzelne Menü-Punkte, Listenpunkte kann man mit
Items.add(MenuFlyoutItem) zur Laufzeit erweitern
Hier ein Code-Beispiel
|
//----< Zeige EntryPoint >----
string sPath = Convert.ToString(varEntryPoint.Value);
MenuFlyoutItem item = new MenuFlyoutItem();
item.Text = sPath;
menuFolders.Items.Add(item);
//----</ Zeige
EntryPoint 1 >----
|
als Video Tutorial