[UWP]使用Picker實現一個簡單的ColorPicker彈窗 原文:[UWP]使用Picker實現一個簡單的ColorPicker彈窗

在上一篇博文《[UWP]使用Popup構建UWP Picker》中我們簡單講述了一下使用Popup構建適用于MVVM框架下的彈窗層組件Picker的過程。但是沒有應用實例的話可能體現不出Picker相對于ContentDialog的優點在哪里，畢竟Linus大神說過：

Talk is cheap, show me the code！

我們假定要實現這樣一個顏色選擇器：當用戶需要選擇一個顏色時，應用彈出顏色選擇器，用戶選擇完成后，點擊“確定”按鈕關閉彈窗，并且向調用方代碼返回用戶選擇的顏色值。

它的調用界面是這樣的：

編寫ColorPicker彈窗的業務邏輯代碼

上篇博文里我們講到要實現Picker功能，其ViewModel必須實現IObjectPicker

IObjectPicker

public interface IObjectPicker<T> {event EventHandler<ObjectPickedEventArgs<T>> ObjectPicked;event EventHandler Canceled; }

ObjectPickerBase

public abstract class ObjectPickerBase<T> : ViewModelBase, IObjectPicker<T> {public event EventHandler<ObjectPickedEventArgs<T>> ObjectPicked;public event EventHandler Canceled;/// <summary>/// 設置選擇的對象/// </summary>/// <param name="result"></param>public void SetResult(T result){ObjectPicked?.Invoke(this, new ObjectPickedEventArgs<T>(result));}/// <summary>/// 取消Pick操作/// </summary>public void Exit(){Canceled?.Invoke(this, EventArgs.Empty);}public RelayCommand ExitCommand => new RelayCommand(Exit); }

這里我們編寫一個TestColorPickerViewModel作為ColorPicker彈窗界面的ViewModel，其代碼如下：

public class TestColorPickerViewModel: ObjectPickerBase<Color>{private Color _pickedColor;public Color PickedColor{get => _pickedColor;set => Set(ref _pickedColor, value);}public override void OnNavigatedTo(NavigationEventArgs e){if (e.Parameter is Color color){PickedColor = color;}base.OnNavigatedTo(e);}public ICommand PickColorCommand => new RelayCommand(() =>{SetResult(PickedColor);});}

其中有一個重載的方法OnNavigatedTo，這個用于接受打開彈窗時給傳遞給Picker的參數，這個屬于HHChaosToolkit類庫中MVVM導航服務的一部分功能，以后的博客我可能會拿出來單獨講一下。

我們看到，TestColorPickerViewModel的代碼邏輯非常簡單，在執行PickColorCommand后返回PickedColor作為結果。

編寫ColorPicker的UI層代碼

View層交互不多，我們新建一個Page，然后添加一個ColorPicker控件，Color屬性綁定ViewModel的PickedColor，添加一個“確定”按鈕綁定PickColorCommand，xaml.cs文件中無需添加任何代碼，xaml代碼如下：

<Pagex:Class="HHChaosToolkit.Sample.Views.TestPages.TestColorPickerPage"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:HHChaosToolkit.Sample.Views.TestPages"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"DataContext="{Binding TestColorPickerViewModel, Source={StaticResource Locator}}"Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"><Grid><Grid Background="White" BorderBrush="#d9ddea" BorderThickness="1"><Grid.RowDefinitions><RowDefinition Height="Auto" /><RowDefinition /><RowDefinition Height="Auto" /></Grid.RowDefinitions><Grid Height="40" Background="#d9ddea"><Grid.ColumnDefinitions><ColumnDefinition /><ColumnDefinition Width="auto" /></Grid.ColumnDefinitions><TextBlockMargin="15,0"VerticalAlignment="Center"FontSize="14px"Foreground="#474261"Text="ColorPicker" /><ButtonGrid.Column="1"Command="{Binding ExitCommand}"Style="{StaticResource PickerCloseButtonStyle}" /></Grid><Grid Grid.Row="1" Padding="20,10"><ColorPicker x:Name="ColorPicker" Color="{Binding PickedColor,Mode=TwoWay}"/></Grid><Grid Grid.Row="2" Padding="20"><Button HorizontalAlignment="Center" Content="確定" Command="{Binding PickColorCommand}"/></Grid></Grid></Grid> </Page>

注冊調用過程

注冊ColorPicker彈窗

我們首先要在ViewModelLocator中注冊TestColorPickerViewModel為可選取Color類型的Picker對象，代碼如下：

RegisterObjectPicker<Color, TestColorPickerViewModel, TestColorPickerPage>();

其中RegisterObjectPicker方法的源碼如下：

public void RegisterObjectPicker<T, VM, V>()where VM : ObjectPickerBase<T>{SimpleIoc.Default.Register<VM>();ObjectPickerService.Configure(typeof(T).FullName, typeof(VM).FullName, typeof(V));}

這段代碼目的是在ObjectPickerService中注冊TestColorPickerViewModel為可選取Color類型的Picker對象，這樣我們之后的調用可以直接通過ObjectPickerService來進行。

必須要說明的是ObjectPickerService可以為同一類型注冊多個Picker對象，類似于Windows系統中可安裝多個視頻播放器，調用時指定使用哪個播放器即可。

調用ColorPicker彈窗

在ObjectPickerService中注冊過后，我們即可在任意需要選取顏色的地方使用我們的ColorPicker彈窗，最簡單的調用方法時這樣的：

var pickerService = ServiceLocator.Current.GetInstance<ObjectPickerService>();var ret = await pickerService.PickSingleObjectAsync<Color>(typeof(TestColorPickerViewModel).FullName, PickedColor);if (!ret.Canceled){PickedColor = ret.Result;var toast = new Toast($"You picked a new color!({ret.Result})");toast.Show();}

當然我們也可以自定義彈出界面的位置、背景、動畫及點擊空白區域退出等選項。如果需要這樣自定義的話，我們要用到PickerOpenOption這個類，這個類用來設置Picker彈出時的自定義配置項，例如：

var pickerService = ServiceLocator.Current.GetInstance<ObjectPickerService>();var openOption = new PickerOpenOption{EnableTapBlackAreaExit = true,VerticalAlignment = VerticalAlignment.Stretch,HorizontalAlignment = HorizontalAlignment.Right,Background = new AcrylicBrush{TintOpacity = 0.1},Transitions = new TransitionCollection{new EdgeUIThemeTransition{Edge = EdgeTransitionLocation.Right}}};var ret = await pickerService.PickSingleObjectAsync<Color>(typeof(TestColorPickerViewModel).FullName, PickedColor, openOption);if (!ret.Canceled){PickedColor = ret.Result;var toast = new Toast($"You picked a new color!({ret.Result})");toast.Show();}

它的呈現效果是這樣的：

結尾

這篇博文里我給大家講解了如何使用Picker來構建一個顏色選擇器彈窗，這只是一個小例子，Picker有非常多的使用場景，例如：

• 文本輸入彈窗（注冊類型為string）；
• 普通自定義Dialog界面（統一注冊類型為bool即可）；
• 圖片編輯彈窗（注冊類型為文件或者圖片）；
• ...

最后，完整項目代碼鏈接在這里：GitHub鏈接點這里，歡迎大家使用，或者提出意見！

本篇博客到此結束！謝謝大家！

posted on 2018-11-15 08:29 NET未來之路 閱讀(...) 評論(...) 編輯 收藏

轉載于:https://www.cnblogs.com/lonelyxmas/p/9961490.html

總結

以上是生活随笔為你收集整理的[UWP]使用Picker实现一个简单的ColorPicker弹窗的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。