World War I Windows 10 (36) and World War I 36

World War I Windows 10 (36) and World War I 36

[Download source code]

Backwater world war I Windows 10 (36)-Controls (pop-up class): ToolTip, Popup, PopupMenu

Author: webabcd


Introduction
Controls for Windows 10 (pop-up class)

• ToolTip
• Popup
• PopupMenu

Example
1. ToolTip example
Controls/FlyoutControl/ToolTipDemo. xaml

<Page x: Class = "Windows10.Controls. FlyoutControl. ToolTipDemo" xmlns =" http://schemas.microsoft.com/winfx/2006/xaml /Presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "Xmlns: local =" using: Windows10.Controls. FlyoutControl "xmlns: d =" http://schemas.microsoft.com/expression/blend/2008 "Xmlns: mc =" http://schemas.openxmlformats.org/markup-compatibility/2006 "Mc: Ignorable =" d "> <Grid Background =" Transparent "> <StackPanel Margin =" 10 0 10 10 "> <! -- ToolTip-Content-Placement-position of the prompt box (Bottom, Right, Mouse, Left, Top) horizontalOffset-horizontal offset VerticalOffset-vertical offset IsOpen-whether the prompt box shows the status (if you want to set this attribute, you need to wait until the host is loaded before setting it) events triggered after the Closed-Prompt box is Closed Opened-events triggered after the prompt box is Opened --> <TextBlock Name = "textBlock1" Text = "TextBlock" Margin = "5" ToolTipService. toolTip = "ToolTip content" ToolTipService. placement = "Right"/> <TextBlock Name = "textBlock2" Text = "TextBlock" Margin = "5"> <ToolTipService. toolTip> <ToolTip Content = "ToolTip Content" Placement = "Mouse" HorizontalOffset = "120" VerticalOffset = "0" Opened = "toolTip_Opened" Closed = "toolTip_Closed"/> </ toolTipService. toolTip> </TextBlock> <TextBlock Name = "lblMsg" Margin = "5"/> </StackPanel> </Grid> </Page>

Controls/FlyoutControl/ToolTipDemo. xaml. cs

/** ToolTip-Prompt box control (inherited from ContentControl, see/Controls/BaseControl/ContentControlDemo/) */using Windows. UI. xaml; using Windows. UI. xaml. controls; namespace Windows10.Controls. flyoutControl {public sealed partial class ToolTipDemo: Page {public ToolTipDemo () {this. initializeComponent ();} private void toolTip_Opened (object sender, RoutedEventArgs e) {lblMsg. text = "textBlock2 toolTip_Opened";} private void toolTip_Closed (object sender, RoutedEventArgs e) {lblMsg. text = "textBlock2 toolTip_Closed ";}}}

2. Popup example
Controls/FlyoutControl/PopupDemo. xaml

<Page x: Class = "Windows10.Controls. FlyoutControl. PopupDemo" xmlns =" http://schemas.microsoft.com/winfx/2006/xaml /Presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "Xmlns: local =" using: Windows10.Controls. FlyoutControl "xmlns: d =" http://schemas.microsoft.com/expression/blend/2008 "Xmlns: mc =" http://schemas.openxmlformats.org/markup-compatibility/2006 "Mc: Ignorable =" d "> <Grid Background =" Transparent "> <StackPanel Margin =" 10 0 10 10 "> <! -- Popup-control Child in the pop-up box ([ContentProperty (Name = "Child")]), a UIElement-type object ChildTransitions-when the pop-up box is displayed, transition effect of the content IsLightDismissEnabled-Disable Popup HorizontalOffset when you click a non-Popup area-offset in the horizontal direction VerticalOffset-offset in the vertical direction --> <Popup Name = "popup" Margin = "5" HorizontalOffset = "200" VerticalOffset = "10" IsLightDismissEnabled = "{Binding IsChecked, elementName = chkIsLightDismissEnabled} "> <Border BorderBr Ush = "Red" BorderThickness = "1" Background = "Orange" Width = "200" Height = "200"> <StackPanel HorizontalAlignment = "Center" verticalignment = "Center"> <textBlock Text = "My Name is Popup" HorizontalAlignment = "Center"/> <Button Name = "btnClosePopup" Content = "close" HorizontalAlignment = "Center" Click = "align"/> </StackPanel> </Border> <! -- Add the PopupThemeTransition effect to the pop-up box --> <Popup. childTransitions> <TransitionCollection> <PopupThemeTransition/> </TransitionCollection> </Popup. childTransitions> </Popup> <TextBlock Name = "lblMsg" Margin = "5"/> <! -- Display popup defined in xaml mode --> <StackPanel Orientation = "Horizontal" Margin = "5"> <Button Name = "btnOpenPopup" Content = "Popup" Click = "btnOpenPopup_Click" /> <CheckBox Name = "chkIsLightDismissEnabled" IsChecked = "False" Content = "IsLightDismissEnabled" Margin = "10 0 0 0"/> </StackPanel> <! -- Display popup defined by code-behind --> <Button Name = "btnOpenPopupToast" Content = "pop up a Popup like toast" Click = "btnOpenPopupToast_Click" Margin = "5"/> </StackPanel> </Grid> </Page>

Controls/FlyoutControl/PopupDemo. xaml. cs

/** Popup-pop-up control (inherited from FrameworkElement, see/Controls/BaseControl/FrameworkElementDemo. xaml) * Whether the IsOpen-pop-up box is open (if you want to set this attribute, You need to load the control) * Opened-events triggered after the pop-up box is Opened * Closed-events triggered after the pop-up box is Closed */using Windows. UI; using Windows. UI. xaml; using Windows. UI. xaml. controls; using Windows. UI. xaml. controls. primitives; using Windows. UI. xaml. media; using Windows. UI. xaml. media. animation; namespace Windows10.Controls. flyoutCon Trol {public sealed partial class PopupDemo: Page {// The Popup private Popup _ popupToast = new Popup (); public PopupDemo () {this. initializeComponent (); popup. opened + = delegate {lblMsg. text = "popup. opened ";}; popup. closed + = delegate {lblMsg. text = "popup. closed ";};} private void btnOpenPopup_Click (object sender, RoutedEventArgs e) {if (! Popup. isOpen) popup. isOpen = true;} private void btnClosePopup_Click (object sender, RoutedEventArgs e) {if (popup. isOpen) popup. isOpen = false;} private void btnOpenPopupToast_Click (object sender, RoutedEventArgs e) {if (! _ PopupToast. isOpen) {// set the content Border border = new Border (); border. borderBrush = new SolidColorBrush (Colors. red); border. borderThickness = new Thickness (1); border. background = new SolidColorBrush (Colors. blue); border. width = 600; border. height = 100; border. child = new TextBlock () {Text = "I am Popup", HorizontalAlignment = HorizontalAlignment. center, verticalignment = verticalignment. center}; // set the Popup attribute _ popupToast. isLightDismissEnabled = true; _ popupToast. child = border; _ popupToast. verticalOffset = 100d; // set the position of Popup (the default position of Popup is in the window) _ popupToast. childTransitions = new TransitionCollection () {new PaneThemeTransition () {Edge = EdgeTransitionLocation. left }}; _ popupToast. isOpen = true ;}}}}

3. Example of PopupMenu
Controls/FlyoutControl/PopupMenuDemo. xaml

<Page x: Class = "Windows10.Controls. flyoutControl. popupMenuDemo "xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "xmlns: local =" using: Windows10.Controls. flyoutControl "xmlns: d =" http://schemas.microsoft.com/expression/blend/2008 "xmlns: mc =" http://schemas.openxmlformats.org/markup-compatibility/2006 "mc: ignorable = "d"> <Grid Background = "Transparent"> <StackPanel Margin = "10 0 10"> <TextBlock Name = "lblMsg" Margin = "5"/> <textBlock Name = "lblDemo" Margin = "5"> right-click me or click press-and-hold me, popupMenu </TextBlock> </StackPanel> </Grid> </Page>

Controls/FlyoutControl/PopupMenuDemo. xaml. cs

/** PopupMenu-context menu (without inheriting any classes) * Commands-command set in context menu, return IList <IUICommand> type data * IAsyncOperation <IUICommand> ShowAsync (Point invocationPoint) -The context menu is displayed at the specified position (the default position of PopupMenu is in the window), and the user-triggered command * IAsyncOperation <IUICommand> ShowForSelectionAsync (Rect selection, Placement preferredPlacement) is returned) -display the context menu in the specified orientation of the specified rectangle area, return the user-triggered command ** IUICommand-command * Label-displayed text * Id-parameter ** UICommandSeparator-separator */using System; using Windows. UI. popups; using Windows. UI. xaml; using Windows. UI. xaml. controls; using Windows. UI. xaml. input; using Windows10.Common; namespace Windows10.Controls. flyoutControl {public sealed partial class PopupMenuDemo: Page {public PopupMenuDemo () {this. initializeComponent (); lblDemo. rightTapped + = lblDemo_RightTapped;} private async void lblDemo_RightTapped (object sender, Volume e) {PopupMenu menu = new PopupMenu (); menu. commands. add (new UICommand ("item1", (command) => {lblMsg. text = string. format ("command label: {0}, id: {1}", command. label, command. id) ;}, "param1"); menu. commands. add (new UICommand ("item2", (command) => {lblMsg. text = string. format ("command label: {0}, id: {1}", command. label, command. id) ;}, "param2"); // delimiter menu. commands. add (new UICommandSeparator (); menu. commands. add (new UICommand ("item3", (command) => {lblMsg. text = string. format ("command label: {0}, id: {1}", command. label, command. id) ;}, "param3"); // display the context menu at the specified position and return the user-triggered command (an exception occurs sometimes during the test, I don't know why, so try to use MenuFlyout.) IUICommand chosenCommand = await menu. showForSelectionAsync (Helper. getElementRect (FrameworkElement) sender), Placement. below); if (chosenCommand = null) // The user has not fired any command in the context menu {lblMsg. text = "no command selected by the user";} else {lblMsg. text + = Environment. newLine; lblMsg. text + = string. format ("result label: {0}, id: {1}", chosenCommand. label, chosenCommand. id );}}}}

OK
[Download source code]