日期:2014-05-18  浏览次数:21082 次

<win8>(三)实例讲解win8(XAML+C#)开发--------课程表:弹出菜单ContextMenu和弹窗Flyout

 免责声明:本文章由fengyun1989创作,采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可。

  友情提示下:win8下,输入法切换是window键+空格键。

  下面我们来做的是一个弹窗来修改课程表里面的数据。那么我们用一个弹窗来实现数据的修改。那么用什么方式控制弹窗呢,用一个AppBar的按钮?我觉得还是在页面点击弹出比较好,我想用listView的某个事件来实现弹窗,但是我对win8里面的ListView的事件不太熟悉,查文档?我比较懒,懒得查文档也有两种方式,一种用智能提示,一种用属性页面的事件页。

  从智能提示看到,可以选择的事件挺多的,我就选择DoubleTap.那么在ItemDetail页面添加一个DoubleTap事件:

<ListView x:Name="ScheduleList" ItemsSource="{Binding ScheduleList}"    
                  DoubleTapped="ScheduleList_DoubleTapped_1"   
                  ItemTemplate="{StaticResource ScheduleListItemTemplate}" />

那么我们在DoubleTap事件中实现弹出菜单。这里就先给出微软官方的ContextMenu的例子:http://code.msdn.microsoft.com/windowsapps/Context-menu-sample-40840351

ContextMenu有两种,一种是普通就弹出菜单,一种是选择文本后的弹出菜单。这里就用第一种,后一种是可以在选择文本后弹出菜单显示复制,粘贴等。后一种可以在微软给出的例子的Scenario2页面看到。

修改DoubleTap事件如下:

        private async void ScheduleList_DoubleTapped_1(object sender, DoubleTappedRoutedEventArgs e)
        {
            if (ScheduleList.SelectedIndex != -1)
            {
                var menu = new PopupMenu();
                menu.Commands.Add(new UICommand("Edit", (command) =>
                {

                }));
                menu.Commands.Add(new UICommand("Delete", (command) =>
                {
                     
                }));
                await menu.ShowAsync(e.GetPosition(null));
            }
        }

注意,这里的方法要修改为异步的,async和await这两个配合,await这个关键字,在win8才有,从字面文字就知道,就是等待后面的完成。用了await方法修饰,后面跟的要是异步的方法,整个方法也要用async修饰成异步的方法。关于await,推荐看:深入探究 WinRT 和 await

现在运行,在ListView上双击,就可以看到弹窗了。

接下来,我们做一个弹窗来修改数据。那么,用什么样的形式弹窗呢,在Wp7,我们可以用Canvas自定义弹窗,也有不少的第三方插件可以做到。当然,这里我们也可由用Canvas来自定义弹窗,不过这里我不打算这么做,我打算用win8有的一个弹窗Popup来实现。那么现在新建添加一个用户控件到Pages文件夹命名为EditItemFlyout.xaml。

去除原来的Grid修改代码如下:

<Popup x:Name="EditItemPopup" IsLightDismissEnabled="True" Width="435" Height="500">
        <StackPanel Background="Black">
            <Border Background="#85c54C" BorderThickness="4">
                <Grid Margin="10">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition/>
                        <RowDefinition/>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <TextBlock Text="LessonName:" Grid.Column="0" Grid.Row="0" FontSize="24"/>
                    <TextBox x:Name="Lessonname" Width="200" Height="40"
                             Grid.Column="1" Grid.Row="0" Text="{Binding LessonName}" FontSize="24"/>
                    <TextBlock Text="ClassRoom:" Grid.Column="0" Grid.Row="1" FontSize="24"/>
                    <TextBox x:Name="Classroom" Grid.Column="1" Grid.Row="1" Width="200" Height="40"