當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

[UWP]使用Picker实现一个简单的ColorPicker弹窗

發(fā)布時(shí)間：2025/3/15 编程问答 15 豆豆

生活随笔收集整理的這篇文章主要介紹了 [UWP]使用Picker实现一个简单的ColorPicker弹窗小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

[UWP]使用Picker實(shí)現(xiàn)一個(gè)簡(jiǎn)單的ColorPicker彈窗原文:[UWP]使用Picker實(shí)現(xiàn)一個(gè)簡(jiǎn)單的ColorPicker彈窗

在上一篇博文《[UWP]使用Popup構(gòu)建UWP Picker》中我們簡(jiǎn)單講述了一下使用Popup構(gòu)建適用于MVVM框架下的彈窗層組件Picker的過(guò)程。但是沒(méi)有應(yīng)用實(shí)例的話可能體現(xiàn)不出Picker相對(duì)于ContentDialog的優(yōu)點(diǎn)在哪里，畢竟Linus大神說(shuō)過(guò)：

Talk is cheap, show me the code！

我們假定要實(shí)現(xiàn)這樣一個(gè)顏色選擇器：當(dāng)用戶需要選擇一個(gè)顏色時(shí)，應(yīng)用彈出顏色選擇器，用戶選擇完成后，點(diǎn)擊“確定”按鈕關(guān)閉彈窗，并且向調(diào)用方代碼返回用戶選擇的顏色值。

它的調(diào)用界面是這樣的：

編寫ColorPicker彈窗的業(yè)務(wù)邏輯代碼

上篇博文里我們講到要實(shí)現(xiàn)Picker功能，其ViewModel必須實(shí)現(xiàn)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>/// 設(shè)置選擇的對(duì)象/// </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); }

這里我們編寫一個(gè)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);});}

其中有一個(gè)重載的方法OnNavigatedTo，這個(gè)用于接受打開彈窗時(shí)給傳遞給Picker的參數(shù)，這個(gè)屬于HHChaosToolkit類庫(kù)中MVVM導(dǎo)航服務(wù)的一部分功能，以后的博客我可能會(huì)拿出來(lái)單獨(dú)講一下。

我們看到，TestColorPickerViewModel的代碼邏輯非常簡(jiǎn)單，在執(zhí)行PickColorCommand后返回PickedColor作為結(jié)果。

編寫ColorPicker的UI層代碼

View層交互不多，我們新建一個(gè)Page，然后添加一個(gè)ColorPicker控件，Color屬性綁定ViewModel的PickedColor，添加一個(gè)“確定”按鈕綁定PickColorCommand，xaml.cs文件中無(wú)需添加任何代碼，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>

注冊(cè)調(diào)用過(guò)程

注冊(cè)ColorPicker彈窗

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

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中注冊(cè)TestColorPickerViewModel為可選取Color類型的Picker對(duì)象，這樣我們之后的調(diào)用可以直接通過(guò)ObjectPickerService來(lái)進(jìn)行。

必須要說(shuō)明的是ObjectPickerService可以為同一類型注冊(cè)多個(gè)Picker對(duì)象，類似于Windows系統(tǒng)中可安裝多個(gè)視頻播放器，調(diào)用時(shí)指定使用哪個(gè)播放器即可。

調(diào)用ColorPicker彈窗

在ObjectPickerService中注冊(cè)過(guò)后，我們即可在任意需要選取顏色的地方使用我們的ColorPicker彈窗，最簡(jiǎn)單的調(diào)用方法時(shí)這樣的：

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();}

當(dāng)然我們也可以自定義彈出界面的位置、背景、動(dòng)畫及點(diǎn)擊空白區(qū)域退出等選項(xiàng)。如果需要這樣自定義的話，我們要用到PickerOpenOption這個(gè)類，這個(gè)類用來(lái)設(shè)置Picker彈出時(shí)的自定義配置項(xiàng)，例如：

它的呈現(xiàn)效果是這樣的：

結(jié)尾

這篇博文里我給大家講解了如何使用Picker來(lái)構(gòu)建一個(gè)顏色選擇器彈窗，這只是一個(gè)小例子，Picker有非常多的使用場(chǎng)景，例如：

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

最后，完整項(xiàng)目代碼鏈接在這里：GitHub鏈接點(diǎn)這里，歡迎大家使用，或者提出意見！

本篇博客到此結(jié)束！謝謝大家！

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

轉(zhuǎn)載于:https://www.cnblogs.com/lonelyxmas/p/9961490.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： KVM使用
下一篇：使用kubeadm安装kubernete