Windows App 控件解析【不定期更新】

一、muxcontrols:MenuBar下拉菜单栏

Page头引用：

xmlns:muxcontrols="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

菜单项设计：

<muxcontrols:MenuBar Grid.Row="1" Padding="10">
    <muxcontrols:MenuBarItem Title="文件">
    </muxcontrols:MenuBarItem>
    <muxcontrols:MenuBarItem Title="编辑">
<MenuFlyoutItem x:Name="DeleteFlyoutItem"/>    /*删除弹出项*/
    </muxcontrols:MenuBarItem>
    <muxcontrols:MenuBarItem Title="Help">
    </muxcontrols:MenuBarItem>
</muxcontrols:MenuBar>

​<ListView x:Name="ListViewRight" Grid.Row="2"     
                  Loaded="ListView_Loaded"    /*ListView 控件加载事件*/
                  IsItemClickEnabled="True" 
                  SelectionMode="Single" 
                  SelectionChanged="ListView_SelectionChanged"     /*ListView 选择更改事件*/
                  ItemContainerStyle="{StaticResource HorizontalSwipe}">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="local:ListItemData">
                    <UserControl PointerEntered="ListViewSwipeContainer_PointerEntered"   /*指针输入事件的处理程序。显示删除项目“悬停”按钮。*/
                                 PointerExited="ListViewSwipeContainer_PointerExited">  /*指针退出事件的处理程序。隐藏删除项目“悬停”按钮。*/
                        <UserControl.ContextFlyout>
                            <MenuFlyout>
                                <MenuFlyoutItem 
                                    Command="{x:Bind Command}" 
                                    CommandParameter="{x:Bind Text}" />
                            </MenuFlyout>
                        </UserControl.ContextFlyout>
                        <Grid AutomationProperties.Name="{x:Bind Text}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="HoveringStates">
                                    <VisualState x:Name="HoverButtonsHidden" />
                                    <VisualState x:Name="HoverButtonsShown">
                                        <VisualState.Setters>
                                            <Setter Target="HoverButton.Visibility" 
                                                    Value="Visible" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <SwipeControl x:Name="ListViewSwipeContainer" >
                                <SwipeControl.RightItems>
                                    <SwipeItems Mode="Execute">
                                        <SwipeItem x:Name="DeleteSwipeItem" 
                                                   Background="Red" 
                                                   Command="{x:Bind Command}" 
                                                   CommandParameter="{x:Bind Text}"/>
                                    </SwipeItems>
                                </SwipeControl.RightItems>
                                <Grid VerticalAlignment="Center">
                                    <TextBlock Text="{x:Bind Text}" 
                                               Margin="10" 
                                               FontSize="18" 
                                               HorizontalAlignment="Left" 
                                               VerticalAlignment="Center"/>
                                    <AppBarButton x:Name="HoverButton" 
                                                  IsTabStop="False" 
                                                  HorizontalAlignment="Right" 
                                                  Visibility="Collapsed" 
                                                  Command="{x:Bind Command}" 
                                                  CommandParameter="{x:Bind Text}"/>
                                </Grid>
                            </SwipeControl>
                        </Grid>
                    </UserControl>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

功能性逻辑实现：

		/// <summary>
    /// 可用于自身或导航至 Frame 内部的空白页。
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            InitializeComponent();
        }

        /// <summary>
        /// ListView 项目集合。
        /// </summary>
        ObservableCollection<ListItemData> collection = new ObservableCollection<ListItemData>();

        /// <summary>
        /// 布局网格控件加载事件的处理程序。
        /// </summary>
        /// <param name="sender">控件加载事件的来源</param>
        /// <param name="e">已加载事件的事件参数</param>
        private void ControlExample_Loaded(object sender, RoutedEventArgs e)
        {
            // 创建标准删除命令。
            StandardUICommand deleteCommand = new StandardUICommand(StandardUICommandKind.Delete);
            deleteCommand.ExecuteRequested += DeleteCommand_ExecuteRequested;

            DeleteFlyoutItem.Command = deleteCommand;

            for (int i = 0; i < 5; i++)
            {
                collection.Add(
                    new ListItemData
                    {
                        Text = "List item " + i.ToString(),
                        Command = deleteCommand
                    });
            }
        }

        /// <summary>
        /// ListView 控件加载事件的处理程序。
        /// </summary>
        /// <param name="sender">控件加载事件的来源</param>
        /// <param name="e">已加载事件的事件参数</param>
        private void ListView_Loaded(object sender, RoutedEventArgs e)
        {
            ListView listView = (ListView)sender;
            // 使用项目集合填充 ListView。
            listView.ItemsSource = collection;
        }

        /// <summary>
        /// 删除命令的处理程序。
        /// </summary>
        /// <param name="sender">控件加载事件的来源</param>
        /// <param name="e">已加载事件的事件参数</param>
        private void DeleteCommand_ExecuteRequested(
            XamlUICommand sender, ExecuteRequestedEventArgs args)
        {
            // 如果可能从集合中删除特定项目。
            if (args.Parameter != null)
            {
                foreach (var i in collection)
                {
                    if (i.Text == (args.Parameter as string))
                    {
                        collection.Remove(i);
                        return;
                    }
                }
            }
            if (ListViewRight.SelectedIndex != -1)
            {
                collection.RemoveAt(ListViewRight.SelectedIndex);
            }
        }

    }

呈现效果：

 微软官方提醒：

MenuBar 需要 Windows 10 版本 1809（SDK 17763）或更高版本，或 Windows UI 库。