#

UWP: MenuFlyout als Kontextmenüs mit Icons

 Date 13.04.2016 Views 5.895

UWP: Kontextmenü MenuFlyout mit Icons

 

Man kann in Windows Apps über das MenuFlyout Element passende Kontextmenüs zu Controls erstellen, welche sogar ein übliches Icon als Image aufweisen.

Um das Icon mit anzuzeigen, muss man aber über einen Trick den Eintrag Tag in ein Style übertragen.

 

UWP, Universal Windows Platform App

 

 

Mit dem Verweis auf Style in einer StaticResource wird zur Laufzeit der Tag in ein

Über den eindeutigen Eintag Tag=“Sonderzeichen-Code“ wird das angezeigte Icon festgelegt.

Der Eintag Tag wird anschliessend über ein Style Element in ein FontIcon übertragen.

<ListBox Grid.Row="1"  x:Name="ctlFolders" Height="{Binding ElementName=stack_Folders_Select, Path=ActualHeight }"

       Background="#eeeeee"  HorizontalAlignment="Stretch"

       ScrollViewer.VerticalScrollBarVisibility="Visible"

       ScrollViewer.VerticalScrollMode="Enabled"  

       SelectionMode="Extended" 

       KeyUp="ctlFolders_Folders_KeyUp"

       SelectionChanged="ctlFolders_Folders_SelectionChanged"

       >

    <ListBox.ItemContainerStyle >

<Style TargetType="ListBoxItem">

    <Setter Property="Padding" Value="0"/>

    <Setter Property="Margin" Value="0"/>

    <Setter Property="HorizontalAlignment"  Value="Stretch" />

    <Setter Property="HorizontalContentAlignment"   Value="Stretch" />

    <Setter Property="FontSize"  Value="33"/>

</Style>

    </ListBox.ItemContainerStyle>

 

    <!--==< Menu FolderItems >==-->

    <FlyoutBase.AttachedFlyout >

<MenuFlyout  x:Name="menuFolderTitle" Placement="Right"  >

    <!--< Menu FolderItems >-->

    <MenuFlyoutItem  Tag="&#xE2F6;" Text="Open Explorer"  Tapped="menuFolderItem_Open_Explorer" Style="{StaticResource menuFolderItem }" />

    <MenuFlyoutItem  Tag="&#xE10A;" Text="Delete"   Style="{StaticResource menuFolderItem }" />

    <!--</ Menu FolderItems >-->      

</MenuFlyout>

    </FlyoutBase.AttachedFlyout>

    <!--==</ Menue FolderItems >==-->

</ListBox>

 

 

Die Style Resourcen muss man in Page.Resources verlagern, damit auf diese als staticResource verwiesen werden kann

 

 

Damit das Hervorheben des MenuItems funktioniert, während die Maus sich über die Zeile bewegt,

muss man einfach den Style Block komplett kopiern und in das eigenen Projekt einfügen.

 

Dadurch wird der Tag-Wert im echten FlyoutItem ersetzt durch ein FontIcon und der Text wird in einen Textblock übertragen.

<StackPanel Orientation="Horizontal">

  <FontIcon  Margin="0,0,12,0" x:Name="TextBlock" Glyph="{TemplateBinding Tag}"   Height="16" Width="16" FontSize="16" />

  <TextBlock  Text="{TemplateBinding Text}" TextTrimming="CharacterEllipsis"  />

</StackPanel>

 

Über die VisualState Einträge wird gesteuert, dass sich beim Überfahren einer Menüzeile die Zeile grau färbt.

 

Hier der komplette Page.Resources Block.

<Page.Resources>

<!--< Menu FolderItem Style >-->

<Style x:Key="menuFolderItem"  TargetType="MenuFlyoutItem">

    <Setter Property="Template">

<Setter.Value>

    <ControlTemplate TargetType="MenuFlyoutItem">

<Grid x:Name="LayoutRoot" Padding="0" >

    <VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

    <VisualState x:Name="Normal" />

    <VisualState x:Name="PointerOver">

<Storyboard>

    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Background">

<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}" />

    </ObjectAnimationUsingKeyFrames>

    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextBlock" Storyboard.TargetProperty="Foreground">

<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />

    </ObjectAnimationUsingKeyFrames>

</Storyboard>

    </VisualState>

    <VisualState x:Name="Pressed">

<Storyboard>

    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Background">

<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}" />

    </ObjectAnimationUsingKeyFrames>

    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextBlock" Storyboard.TargetProperty="Foreground">

<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />

    </ObjectAnimationUsingKeyFrames>

    <PointerDownThemeAnimation Storyboard.TargetName="TextBlock" />

</Storyboard>

    </VisualState>

    <VisualState x:Name="Disabled">

<Storyboard>

    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextBlock" Storyboard.TargetProperty="Foreground">

<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />

    </ObjectAnimationUsingKeyFrames>

</Storyboard>

    </VisualState>

    <VisualStateGroup.Transitions>

<VisualTransition From="Pressed" To="Normal">

    <Storyboard>

<PointerUpThemeAnimation Storyboard.TargetName="TextBlock" />

    </Storyboard>

</VisualTransition>

<VisualTransition From="Pressed" To="PointerOver">

    <Storyboard>

<PointerUpThemeAnimation Storyboard.TargetName="TextBlock" />

    </Storyboard>

</VisualTransition>

    </VisualStateGroup.Transitions>

</VisualStateGroup>

<VisualStateGroup x:Name="CheckPlaceholderStates">

    <VisualState x:Name="NoPlaceholder" />

    <VisualState x:Name="CheckPlaceholder">

<Storyboard>

    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextBlock" Storyboard.TargetProperty="Margin">

<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource MenuFlyoutItemPlaceholderThemeThickness}" />

    </ObjectAnimationUsingKeyFrames>

</Storyboard>

    </VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="PaddingSizeStates">

    <VisualState x:Name="DefaultPadding" />

    <VisualState x:Name="NarrowPadding">

<Storyboard>

    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Padding">

<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource MenuFlyoutItemThemePaddingNarrow}" />

    </ObjectAnimationUsingKeyFrames>

</Storyboard>

    </VisualState>

</VisualStateGroup>

    </VisualStateManager.VisualStateGroups>

 

<StackPanel Orientation="Horizontal">

<FontIcon  Margin="0,0,12,0" x:Name="TextBlock" Glyph="{TemplateBinding Tag}" Height="16" Width="16" FontSize="16" />

<TextBlock  Text="{TemplateBinding Text}" TextTrimming="CharacterEllipsis"  />

</StackPanel>

 

</Grid>

    </ControlTemplate>

</Setter.Value>

    </Setter>

</Style>

<!--</ Menu FolderItem Style >-->

    </Page.Resources>

 

 

 

Ereignisse, Reaktionen:

Die einzelnen Menüzeilen reagieren auf den Click-Event

 

In XAML in der Zeile MenuFlyoutItem  wird der Click Event auf den Handler im Background zugewiesen

<!--==< Menu FolderItems >==-->

<FlyoutBase.AttachedFlyout >

    <MenuFlyout  x:Name="menuFolderTitle" Placement="Right"  >

<!--< Menu FolderItems >-->

<MenuFlyoutItem  Tag="&#xE2F6;" Text="Open Explorer"  Click="menuFolderItem_Open_Explorer" Style="{StaticResource menuFolderItem }" />

<MenuFlyoutItem  Tag="&#xE10A;" Text="Delete"  Click="menuFolderItem_Delete" Style="{StaticResource menuFolderItem }" />

<!--</ Menu FolderItems >-->  

    </MenuFlyout>

</FlyoutBase.AttachedFlyout>

<!--==</ Menue FolderItems >==-->

 

Im C# Code muss das passende Event auf den Click mit RoutedEventArgs vorhanden sein.

private async void menuFolderItem_Open_Explorer(object sender, RoutedEventArgs e)

{

    //--------------< menuItem_Open_Explorer() >--------------

    //< get Folder >

    StorageFolder folder = await StorageFolder.GetFolderFromPathAsync(sFolders_highLighted_Path);

    //</ get Folder >

 

    //< open File-Explorer >

    await Launcher.LaunchFolderAsync(folder);

    //</ open File-Explorer >

    //--------------</ menuItem_Open_Explorer() >--------------

}

 

private void menuFolderItem_Delete(object sender, RoutedEventArgs e)

{

    clsSys.show_Message("MenuItem 2 Clicked()..");

}

 

Mobile

.
123movies