Download presentation
Presentation is loading. Please wait.
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
練習 請練習上一張投影片的程式碼,不用繳交
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.