1. ListView and GridView (2)

2. 選擇多個項目刪除

3. 選擇多個項目刪除(1) None Single (預設值) Multiple Extended ListView中的項目不可選
與single相同，但若能使用shift鍵，可多選連續的items
<Page
x:Class="MVVM.UserListView"
xmlns="
xmlns:x="
xmlns:local="using:MVVM"
xmlns:d="
xmlns:mc="
mc:Ignorable="d"
DataContext="{Binding userService, RelativeSource={RelativeSource Self}}"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.BottomAppBar>
<CommandBar>
<AppBarButton x:Name="cbtnAddUser" Icon="Add" Label="新增" Click="cbtnAddUser_Click" IsHoldingEnabled="False"/>
<AppBarButton x:Name="cbtnMultiSelection" Icon="List" Label="選取" Click="cbtnMultiSelection_Click" FontFamily="Global User Interface"/>
<AppBarButton x:Name="cbtnDelete" Icon="Delete" Label="刪除" Click="cbtnDelete_Click" Visibility="Collapsed"/>
</CommandBar>
</Page.BottomAppBar>
<Grid>
<ListView
x:Name="userListView"
Margin="19,0,0,0"
ItemsSource="{Binding users}" SelectionMode="None" IsItemClickEnabled="True" ItemClick="userListView_ItemClick">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="14.5,0,0,0" Holding="StackPanel_Holding">
<FlyoutBase.AttachedFlyout>
<MenuFlyout>
<MenuFlyoutItem x:Name="mfiUpdate" Text="修改" FontFamily="Global User Interface" Click="mfiUpdate_Click"/>
<MenuFlyoutItem x:Name="mfiDelete" Text="刪除" Click="mfiDelete_Click"/>
</MenuFlyout>
</FlyoutBase.AttachedFlyout>
<Image Source="{Binding pictureUrl}" Width="50" UseLayoutRounding="False" Height="50" Margin="0,0,15,0" />
<StackPanel VerticalAlignment="Top">
<TextBlock Text="{Binding realName}" Style="{ThemeResource ListViewItemTextBlockStyle}" TextWrapping="Wrap"/>
<TextBlock Text="{Binding }" Style="{ThemeResource ListViewItemSubheaderTextBlockStyle}" TextWrapping="Wrap"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Page>

4. 選擇多個項目刪除(2) using System; using System.Collections.Generic;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
// 空白頁項目範本已記錄在
namespace MVVM {
/// <summary>
/// 可以在本身使用或巡覽至框架內的空白頁面。
/// </summary>
public sealed partial class UserListView : Page
private UserService _userService = App.userService;
public UserService userService
get { return this._userService; } }
public UserListView()
this.InitializeComponent();
this.NavigationCacheMode = NavigationCacheMode.Required;
/// 在此頁面即將顯示在框架中時叫用。
/// <param name="e">描述如何到達此頁面的事件資料。
/// 這個參數通常用來設定頁面。</param>
protected override void OnNavigatedTo(NavigationEventArgs e)
private void cbtnAddUser_Click(object sender, RoutedEventArgs e)
Frame.Navigate(typeof(MainPage));
private void StackPanel_Holding(object sender, HoldingRoutedEventArgs e)
FrameworkElement senderElement = sender as FrameworkElement;
FlyoutBase flyoutBase = FlyoutBase.GetAttachedFlyout(senderElement);
flyoutBase.ShowAt(senderElement);
private void mfiUpdate_Click(object sender, RoutedEventArgs e)
FrameworkElement element = (FrameworkElement)e.OriginalSource;
if (element.DataContext != null && element.DataContext is User)
User user = (User)element.DataContext;
Frame.Navigate(typeof(MainPage),user.userId);
private void mfiDelete_Click(object sender, RoutedEventArgs e)
userService.deleteUserByUserId(user.userId);
private async void userListView_ItemClick(object sender, ItemClickEventArgs e)
User user = (User)e.ClickedItem;
var dialog = new MessageDialog(user.realName + ":" + user. );
await dialog.ShowAsync();
private void cbtnMultiSelection_Click(object sender, RoutedEventArgs e)
this.userListView.IsItemClickEnabled = false;
this.userListView.SelectionMode = ListViewSelectionMode.Multiple;
this.cbtnAddUser.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
this.cbtnMultiSelection.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
this.cbtnDelete.Visibility = Windows.UI.Xaml.Visibility.Visible;
private void cbtnDelete_Click(object sender, RoutedEventArgs e)
for (int i = this.userListView.SelectedItems.Count - 1; i >= 0; i--)
this.userService.deleteUserByUserId(((User)this.userListView.SelectedItems[i]).userId);
this.userListView.IsItemClickEnabled = true;
this.userListView.SelectionMode = ListViewSelectionMode.Single;
this.cbtnAddUser.Visibility = Windows.UI.Xaml.Visibility.Visible;
this.cbtnMultiSelection.Visibility = Windows.UI.Xaml.Visibility.Visible;
this.cbtnDelete.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

5. 練習CH09-08
請完成上一張投影片的程式碼

6. 將ListView中的item分類

7. 將ListView中的item分類(1) 在class UserService增加一個property name
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace MVVM {
public class UserService
ObservableCollection<User> _users = new ObservableCollection<User>();
private string _name = String.Empty;
public string name { get; set; }
public ObservableCollection<User> users
get
return this._users; }
public UserService()
initUserList();
public UserService(string mName)
this.name = mName;
private void initUserList(){
_users.Add(new User("0001", "0001", "宥翔", "Assets/01.png"));
_users.Add(new User("0002", "0002", "語彤", "Assets/02.png"));
_users.Add(new User("0003", "0003", "宥廷", "Assets/03.png"));
_users.Add(new User("0004", "0004", "品妍", "Assets/04.png"));
_users.Add(new User("0005", "0005", "宇恩", "Assets/05.png"));
_users.Add(new User("0008", "0008", "詠晴", "Assets/06.png"));
_users.Add(new User("0007", "0007", "承恩", "Assets/07.png"));
_users.Add(new User("0008", "0008", "羽彤", "Assets/08.png"));
_users.Add(new User("0009", "0009", "宇翔", "Assets/09.png"));
_users.Add(new User("0010", "0010", "子晴", "Assets/10.png"));
public User findUserByUserId(string userId){
foreach (User user in users){
if(user.userId == userId){
return user;
return null;
public bool createUser(User entity)
this.users.Add(entity);
return true;
public bool updateUser(User entity){
User user = findUserByUserId(entity.userId);
if (user == null)
return false;
user.realName = entity.realName;
user. = entity. ;
user.password = entity.password;
public void deleteUserByUserId(string userId)
this.users.Remove(this.findUserByUserId(userId));

8. 將ListView中的item分類(2) 在UserListView.xaml中增加一個CollectionViewSource的資源
在UserListView.xaml.cs中建立CollectionViewSource的來源
<Page
x:Class="MVVM.UserListView"
xmlns="
xmlns:x="
xmlns:local="using:MVVM"
xmlns:d="
xmlns:mc="
mc:Ignorable="d"
DataContext="{Binding userService, RelativeSource={RelativeSource Self}}"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.Resources>
<CollectionViewSource x:Name="groupedUsers" IsSourceGrouped="True" ItemsPath="users"/>
</Page.Resources>
<Page.BottomAppBar>
<CommandBar>
<AppBarButton x:Name="cbtnAddUser" Icon="Add" Label="新增" Click="cbtnAddUser_Click" IsHoldingEnabled="False"/>
<AppBarButton x:Name="cbtnMultiSelection" Icon="List" Label="選取" Click="cbtnMultiSelection_Click" FontFamily="Global User Interface"/>
<AppBarButton x:Name="cbtnDelete" Icon="Delete" Label="刪除" Click="cbtnDelete_Click" Visibility="Collapsed"/>
</CommandBar>
</Page.BottomAppBar>
<Grid>
<ListView
x:Name="userListView"
Margin="19,0,0,0"
ItemsSource="{Binding Source={StaticResource groupedUsers}}"
SelectionMode="None"
IsItemClickEnabled="True"
ItemClick="userListView_ItemClick">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="14.5,0,0,0" Holding="StackPanel_Holding">
<FlyoutBase.AttachedFlyout>
<MenuFlyout>
<MenuFlyoutItem x:Name="mfiUpdate" Text="修改" FontFamily="Global User Interface" Click="mfiUpdate_Click"/>
<MenuFlyoutItem x:Name="mfiDelete" Text="刪除" Click="mfiDelete_Click"/>
</MenuFlyout>
</FlyoutBase.AttachedFlyout>
<Image Source="{Binding pictureUrl}" Width="50" UseLayoutRounding="False" Height="50" Margin="0,0,15,0" />
<StackPanel VerticalAlignment="Top">
<TextBlock Text="{Binding realName}" Style="{ThemeResource ListViewItemTextBlockStyle}" TextWrapping="Wrap"/>
<TextBlock Text="{Binding }" Style="{ThemeResource ListViewItemSubheaderTextBlockStyle}" TextWrapping="Wrap"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.GroupStyle>
<GroupStyle HidesIfEmpty="True">
<GroupStyle.HeaderTemplate>
<StackPanel Background="LightGray" Margin="0">
<TextBlock Text='{Binding name}'
Foreground="Black" Margin="30" FontFamily="Global User Interface" FontSize="30"/>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
</Grid>
</Page>
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
// 空白頁項目範本已記錄在
namespace MVVM {
/// <summary>
/// 可以在本身使用或巡覽至框架內的空白頁面。
/// </summary>
public sealed partial class UserListView : Page
private UserService _userService = App.userService;
public UserService userService
get { return this._userService; } }
public UserListView()
this.InitializeComponent();
this.NavigationCacheMode = NavigationCacheMode.Required;
/// 在此頁面即將顯示在框架中時叫用。
/// <param name="e">描述如何到達此頁面的事件資料。
/// 這個參數通常用來設定頁面。</param>
protected override void OnNavigatedTo(NavigationEventArgs e)
List<UserService> listUserServices = new List<UserService>();
listUserServices.Add(new UserService("aaaa"));
listUserServices.Add(new UserService("bbbb"));
listUserServices.Add(new UserService("cccc"));
groupedUsers.Source = listUserServices;
private void cbtnAddUser_Click(object sender, RoutedEventArgs e)
Frame.Navigate(typeof(MainPage));
private void StackPanel_Holding(object sender, HoldingRoutedEventArgs e)
FrameworkElement senderElement = sender as FrameworkElement;
FlyoutBase flyoutBase = FlyoutBase.GetAttachedFlyout(senderElement);
flyoutBase.ShowAt(senderElement);
private void mfiUpdate_Click(object sender, RoutedEventArgs e)
FrameworkElement element = (FrameworkElement)e.OriginalSource;
if (element.DataContext != null && element.DataContext is User)
User user = (User)element.DataContext;
Frame.Navigate(typeof(MainPage),user.userId);
private void mfiDelete_Click(object sender, RoutedEventArgs e)
userService.deleteUserByUserId(user.userId);
private async void userListView_ItemClick(object sender, ItemClickEventArgs e)
User user = (User)e.ClickedItem;
var dialog = new MessageDialog(user.realName + ":" + user. );
await dialog.ShowAsync();
private void cbtnMultiSelection_Click(object sender, RoutedEventArgs e)
this.userListView.IsItemClickEnabled = false;
this.userListView.SelectionMode = ListViewSelectionMode.Multiple;
this.cbtnAddUser.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
this.cbtnMultiSelection.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
this.cbtnDelete.Visibility = Windows.UI.Xaml.Visibility.Visible;
private void cbtnDelete_Click(object sender, RoutedEventArgs e)
for (int i = this.userListView.SelectedItems.Count - 1; i >= 0; i--)
this.userService.deleteUserByUserId(((User)this.userListView.SelectedItems[i]).userId);
this.userListView.IsItemClickEnabled = true;
this.userListView.SelectionMode = ListViewSelectionMode.Single;
this.cbtnAddUser.Visibility = Windows.UI.Xaml.Visibility.Visible;
this.cbtnMultiSelection.Visibility = Windows.UI.Xaml.Visibility.Visible;
this.cbtnDelete.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

9. 將ListView中的item分類(3)
Binding ListView的ItemsSource到此CollectionViewSource
設定分類標題顯示的格式

10. 練習CH09-09
請完成上一張投影片的程式碼

11. GridView

12. GridView 由CH09-07：在ListView點擊後顯示使用者資料，使用 selectionChange修改 <Page
x:Class="MVVM.UserListView"
xmlns="
xmlns:x="
xmlns:local="using:MVVM"
xmlns:d="
xmlns:mc="
mc:Ignorable="d"
DataContext="{Binding userService, RelativeSource={RelativeSource Self}}"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.BottomAppBar>
<CommandBar>
<AppBarButton x:Name="cbtnAddUser" Icon="Add" Label="新增" Click="cbtnAddUser_Click" IsHoldingEnabled="False"/>
</CommandBar>
</Page.BottomAppBar>
<Grid>
<GridView
x:Name="userListView"
Margin="19,0,0,0"
ItemsSource="{Binding users}" SelectionChanged="userListView_SelectionChanged">
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel Margin="20" Holding="StackPanel_Holding">
<FlyoutBase.AttachedFlyout>
<MenuFlyout>
<MenuFlyoutItem x:Name="mfiUpdate" Text="修改" FontFamily="Global User Interface" Click="mfiUpdate_Click"/>
<MenuFlyoutItem x:Name="mfiDelete" Text="刪除" Click="mfiDelete_Click"/>
</MenuFlyout>
</FlyoutBase.AttachedFlyout>
<Image Source="{Binding pictureUrl}" Width="50" UseLayoutRounding="False" Height="50" Margin="0,0,15,0" />
<StackPanel VerticalAlignment="Top">
<TextBlock Text="{Binding realName}" Style="{ThemeResource ListViewItemTextBlockStyle}" TextWrapping="Wrap"/>
<TextBlock Text="{Binding }" Style="{ThemeResource ListViewItemSubheaderTextBlockStyle}" TextWrapping="Wrap"/>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Grid>
</Page>

13. 練習
請練習上一張投影片的程式碼，不用繳交