备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

[UWP]实现Picker控件

2018-11-06 830
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文:[UWP]实现Picker控件1. 前言 在WPF中，很多打开下拉框（Popup或Flyout）选择一个结果值的控件，除了ComboBox等少数例外，这种控件都以-Picker做名称后缀。因为要打开关闭下拉框和计算下拉框的弹出位置， 这类控件实现起来还挺麻烦的。
原文: [UWP]实现Picker控件

1. 前言

在WPF中，很多打开下拉框（Popup或Flyout）选择一个结果值的控件，除了ComboBox等少数例外，这种控件都以-Picker做名称后缀。因为要打开关闭下拉框和计算下拉框的弹出位置， 这类控件实现起来还挺麻烦的。Silverlight Toolkit中贴心地提供了一个Picker控件，可以作为这类控件的基类，省略了大量代码。

2. 现在的问题

由于UWP中有Flyout，-Picker控件的实现其实算是相当轻松的。如ColorPicker的官方文档就介绍了使用Flyout承载ColorPicker的实现代码。但是做起来还是有一些问题：

  1. 在有“确定/取消”按钮的Flyout中，即使选择了值，如果没有点击“确定”按钮也不更新结果值。
  2. 在Flyout打开的状态，还是希望它所属的按钮有某种已被按下的状态显示，典型的如ComboBox、Extended WPF Toolkit的ColorPicker、WinForm的DateTimePicker，或其它大部分Windows的控件那样：

img_25ff7812dadb7f8014aacf4f6ea83daa.png

img_bc893a4d36d02a68f5843e6ecd0db571.png

上面第一点是硬性要求，所有-Picker类控件都会实现这点（偶尔也见到没做好的）。第二点就比较麻烦了，UWP几乎完全没有理会这点。其实WPF/Silverlight时代即已经开始忽略这点UI需求了，但我还是希望可以注意这些UI的细节，毕竟UWP就经常被诟病UI细节缺失。

3. 我的解决方案

于是我决定实现一个UWP的Picker类。

3.1 定义外观

SilverlightToolkit的Picker相当复杂，UI有三个VisualStateGroup，两个TemplatPart：

[TemplateVisualState(GroupName = "PopupStates", Name = "PopupClosed")]
[TemplatePart(Name = "DropDownToggle", Type = typeof (ToggleButton))]
[TemplateVisualState(GroupName = "PopupStates", Name = "PopupOpened")]
[TemplateVisualState(GroupName = "CommonStates", Name = "Normal")]
[TemplateVisualState(GroupName = "CommonStates", Name = "MouseOver")]
[TemplateVisualState(GroupName = "CommonStates", Name = "Pressed")]
[TemplateVisualState(GroupName = "CommonStates", Name = "Disabled")]
[TemplateVisualState(GroupName = "FocusStates", Name = "Focused")]
[TemplateVisualState(GroupName = "FocusStates", Name = "Unfocused")]
[TemplatePart(Name = "Popup", Type = typeof (Popup))]
public abstract class Picker : Control, IUpdateVisualState

我不想做到这么复杂，只有一个名为PopupStatesName的VisualStateGroup（沿用Silverlight Toolkit的命名），一个Flyout，一组“确定/取消”按钮就够了。

[TemplateVisualState(Name = PopupClosedName, GroupName = PopupStatesName)]
[TemplateVisualState(Name = PopupOpenedName, GroupName = PopupStatesName)]
[TemplatePart(Name = AcceptButtonName, Type = typeof(Button))]
[TemplatePart(Name = DismissButtonName, Type = typeof(Button))]
[TemplatePart(Name = FlyoutName, Type = typeof(FlyoutBase))]
public abstract class Picker : HeaderedContentControl
{
    private const string PopupClosedName = "PopupClosed";
    private const string PopupOpenedName = "PopupOpened";
    private const string PopupStatesName = "PopupStates";


    private const string FlyoutName = "Flyout";
    private const string AcceptButtonName = "AcceptButton";
    private const string DismissButtonName = "DismissButton";

img_650110f49ab170a2c32bc036432aa978.png

此为下文中MyDatePicker的运行效果。

3.2 IsOpen属性

Picker中提供一个bool IsDropDownOpen属性，用于控制下拉框是否打开。无论是AcceptButton或DismissButton的点击事件，或者Flyout的Closed事件都会调用这个属性。

protected virtual void OnIsDropDownOpenChanged(bool oldValue, bool newValue)
{
    if (_flyout == null)
        return;

    if (newValue)
        _flyout.ShowAt(this);
    else
        _flyout.Hide();
}

protected virtual void OnFlyoutClosed(object e)
{
    IsDropDownOpen = false;
}

protected virtual void OnAccept(RoutedEventArgs e)
{
    IsDropDownOpen = false;
}

protected virtual void OnDismiss(RoutedEventArgs e)
{
    IsDropDownOpen = false;
}

protected override void UpdateVisualState(bool useTransitions)
{
    base.UpdateVisualState(useTransitions);
    VisualStateManager.GoToState(this, IsDropDownOpen ? PopupOpenedName : PopupClosedName, useTransitions);
}

3.3 实际应用：实现一个MyDatePicker

需要实现一个MyDatePicker，可以继承Picker，Default Style如下，不少内容都是参考DatePicker：

<Style TargetType="local:MyDatePicker">
    <Setter Property="IsTabStop"
            Value="False" />
    <Setter Property="FontFamily"
            Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontSize"
            Value="{ThemeResource ControlContentThemeFontSize}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:MyDatePicker">
                <StackPanel x:Name="LayoutRoot"
                            Margin="{TemplateBinding Padding}">
                    <local:HeaderedContentControl Header="{TemplateBinding Header}"
                                                  HeaderTemplate="{TemplateBinding HeaderTemplate}">
                        <ToggleButton x:Name="DateButton"
                                      Content="{TemplateBinding DateTime}"
                                      IsEnabled="{TemplateBinding IsEnabled}"
                                      IsChecked="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=IsDropDownOpen,Mode=TwoWay}"
                                      HorizontalAlignment="Stretch"
                                      HorizontalContentAlignment="Stretch">
                            <FlyoutBase.AttachedFlyout>
                                <Flyout Placement="Bottom"
                                        x:Name="Flyout">
                                    <Flyout.FlyoutPresenterStyle>
                                        <Style TargetType="FlyoutPresenter">
                                            <Setter Property="Padding"
                                                    Value="0" />
                                            <Setter Property="BorderThickness"
                                                    Value="0" />
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate TargetType="FlyoutPresenter">
                                                        <ContentPresenter Background="{TemplateBinding Background}"
                                                                          BorderBrush="{TemplateBinding BorderBrush}"
                                                                          BorderThickness="{TemplateBinding BorderThickness}"
                                                                          Content="{TemplateBinding Content}"
                                                                          ContentTemplate="{TemplateBinding ContentTemplate}"
                                                                          ContentTransitions="{TemplateBinding ContentTransitions}"
                                                                          Margin="{TemplateBinding Padding}"
                                                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>
                                    </Flyout.FlyoutPresenterStyle>
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition />
                                            <RowDefinition Height="Auto" />
                                        </Grid.RowDefinitions>
                                        <CalendarView x:Name="Calendar"
                                                      Style="{TemplateBinding CalendarViewStyle}" />
                                        <Grid Grid.Row="1"
                                              Height="45"
                                              x:Name="AcceptDismissHostGrid">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="*" />
                                                <ColumnDefinition Width="*" />
                                            </Grid.ColumnDefinitions>
                                            <Button x:Name="AcceptButton"
                                                    Grid.Column="0"
                                                    Content="&#xE8FB;"
                                                    FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                                    FontSize="16"
                                                    HorizontalAlignment="Stretch"
                                                    VerticalAlignment="Stretch"
                                                    Style="{StaticResource DateTimePickerFlyoutButtonStyle}"
                                                    Margin="0,2,0,0" />
                                            <Button x:Name="DismissButton"
                                                    Grid.Column="1"
                                                    Content="&#xE711;"
                                                    FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                                    FontSize="16"
                                                    HorizontalAlignment="Stretch"
                                                    VerticalAlignment="Stretch"
                                                    Style="{StaticResource DateTimePickerFlyoutButtonStyle}"
                                                    Margin="0,2,0,0" />
                                        </Grid>
                                    </Grid>
                                </Flyout>
                            </FlyoutBase.AttachedFlyout>
                        </ToggleButton>
                    </local:HeaderedContentControl>
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

注意这里的ToggleButton使用TwoWay Binding将IsChecked绑定到Picker的IsDropDownOpen属性，通过IsChecked属性与Flyout的Show/Hide关联起来。

另外，Flyout里放了一个CalendarView，用于选择日期。

在MyDatePicker.cs里除了属性，主要的内容是这段代码：

protected override void OnAccept(RoutedEventArgs e)
{
    base.OnAccept(e);
    if (_calendar != null && _calendar.SelectedDates.Any())
        DateTime = _calendar.SelectedDates.First().DateTime;
}

重写OnAccept（即点击AcceptButton触发的事件）并为DateTime选择值。

3.4 实际应用：实现一个MyTimePicker

使用TemplatePart的一个重要原则是：即使ControlTemplate中缺少声明的TemplatePart，模板化控件也不会报错，只会缺少部分功能。

根据这个原则实现的MyTimePicker就缺少了AcceptButton和DismissButton，因为使用了TimePickerFlyout，这个控件本身就有AcceptButton和DismissButton按钮。

<Style TargetType="local:MyTimePicker">
    <Setter Property="IsTabStop"
            Value="False" />
    <Setter Property="FontFamily"
            Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontSize"
            Value="{ThemeResource ControlContentThemeFontSize}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:MyTimePicker">
                <StackPanel x:Name="LayoutRoot"
                            Margin="{TemplateBinding Padding}">
                    <local:HeaderedContentControl Header="{TemplateBinding Header}"
                                                  HeaderTemplate="{TemplateBinding HeaderTemplate}">
                        <ToggleButton x:Name="DateButton"
                                      Content="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},Path=Time,Converter={StaticResource TimeSpanToStringConverter}}"
                                      IsEnabled="{TemplateBinding IsEnabled}"
                                      IsChecked="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=IsDropDownOpen,Mode=TwoWay}"
                                      HorizontalAlignment="Stretch"
                                      HorizontalContentAlignment="Stretch">
                            <FlyoutBase.AttachedFlyout>
                                <TimePickerFlyout x:Name="Flyout"  Placement="Bottom"/>
                            </FlyoutBase.AttachedFlyout>
                        </ToggleButton>
                    </local:HeaderedContentControl>
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

protected override void OnApplyTemplate()
{
    base.OnApplyTemplate();
    _timePickerFlyout = GetTemplateChild(FlyoutName) as TimePickerFlyout;
    if (_timePickerFlyout != null)
        _timePickerFlyout.TimePicked += OnTimePicked;

    UpdateTimePicerFlyoutPickedTime();
    UpdateVisualState(false);
}


protected virtual void OnTimeChanged(TimeSpan oldValue, TimeSpan newValue)
{
    UpdateTimePicerFlyoutPickedTime();
}

protected override void OnIsDropDownOpenChanged(bool oldValue, bool newValue
{
    base.OnIsDropDownOpenChanged(oldValue, newValue);
    if (newValue)
        UpdateTimePicerFlyoutPickedTime();
}

private void UpdateTimePicerFlyoutPickedTime()
{
    if (_timePickerFlyout != null)
        _timePickerFlyout.Time = Time;
}

private void OnTimePicked(TimePickerFlyout sender, TimePickedEventArgs args)
{
    Time = args.NewTime;
}

img_a0ec0e2745a95c7a9978eb2c531b5106.png

4. 结语

细心的话会发现Picker虽然定义了PopupStates这个VisualStateGroup，但从来没用到。其实这是为了将来可能会用到这个这组状态而预留的。值得一提的是Picker不止可以针对弹出Flyout的控件，将ToggleButton和它的Flyout换成Expander也一样适用。

有了Picker类后确实方便了很多。其实Silverlight虽然死了，但开源的Silverlight Toolkit中有不少内容都可用作参考。本来还想给出Silverlight Toolkit中Picker的源码地址作为参考，但最近CodePlex关闭服务了。有兴趣的人仍可直接下载Silverlight Toolkit的源码，毕竟还是挺有趣的。
Silverlight Toolkit - CodePlex Archive

5. 参考

Guidelines for date and time controls

6. 源码

PickerTest

文章标签：
C#
Windows
杰克.陈
目录
相关文章
珲yy少
|
iOS开发
iOS开发UI之日期控件的使用（UIDatePicker）
iOS开发UI之日期控件的使用（UIDatePicker）
珲yy少
369 0
老码识途
|
2月前
|
前端开发 C#
浅谈WPF之Popup弹出层
在日常开发中，当点击某控件时，经常看到一些弹出框，停靠在某些页面元素的附近，但这些又不是真正的窗口，而是页面的一部分，那这种功能是如何实现的呢？今天就以一个简单的小例子，简述如何在WPF开发中，通过Popup实现鼠标点击弹出浮动停靠窗口，仅供学习分享使用，如有不足之处，还请指正。
老码识途
53 0
Rick_1/2
|
8月前
|
C#
WPF技术之DatePicker控件
WPF DatePicker控件用于选择日期。它提供了一个用户友好的界面，使用户能够轻松地从日历中选择日期。
Rick_1/2
475 0
Rick_1/2
|
8月前
|
C# 容器
WPF技术之StatusBar控件
WPF StatusBar控件用于在应用程序底部显示状态信息。它提供了一个容器，用于展示与应用程序相关的各种状态信息。
Rick_1/2
446 0
Rick_1/2
|
8月前
|
C# Windows
WPF技术之ToolBar控件
WPF ToolBar控件是Windows Presentation Foundation（WPF）中的一个常用工具栏控件，它可以用于在应用程序中显示一组工具按钮或命令按钮。ToolBar可以被嵌套在其他控件内部，例如窗口或面板，并支持自定义布局。
Rick_1/2
271 0
Rick_1/2
|
8月前
|
C#
WPF技术之Slider控件
Slider控件是WPF中常用的用于选择范围值的控件之一。它可以通过拖动滑块来选择一个在指定范围内的数值。
Rick_1/2
212 0
WPF技术之Slider控件
Rick_1/2
|
8月前
|
C# Windows
WPF技术之Button控件
WPF（Windows Presentation Foundation）是用于创建 Windows 客户端应用程序的一种技术。在 WPF 中，按钮是常用的控件之一，用于触发某种行为或操作。
Rick_1/2
201 0
WPF技术之Button控件
杰克.陈
|
前端开发 Windows 数据可视化
[UWP]使用Popup构建UWP Picker
原文:[UWP]使用Popup构建UWP Picker 在上一篇博文《[UWP]不那么好用的ContentDialog》中我们讲到了ContentDialog在复杂场景下使用的几个令人头疼的弊端。那么，就让我们在这篇博文里开始愉快的造轮子之旅吧！ 首先要向大家说明：这篇博文主要还是写的构建Picker时的思考过程，如果不感兴趣的，可以直接略过这篇，阅读下一篇《[UWP]如何使用Picker实现一个简单的ColorPicker弹窗》。
杰克.陈
986 0
杰克.陈
|
前端开发 Windows
[UWP]使用Picker实现一个简单的ColorPicker弹窗
原文:[UWP]使用Picker实现一个简单的ColorPicker弹窗 在上一篇博文《[UWP]使用Popup构建UWP Picker》中我们简单讲述了一下使用Popup构建适用于MVVM框架下的弹窗层组件Picker的过程。
杰克.陈
1107 0
杰克.陈
|
C# 开发者
[UWP]新控件ColorPicker
原文:[UWP]新控件ColorPicker 1. 前言 Fall Creators Update中提供了一个新得ColorPicker控件，解决了以前选择颜色只能用Combo Box的窘境。 2. 一个简单的例子 如上所示，ColorPiker可以通过在光谱或色轮上拖动滑块，或者在RGB/HSV及十六进制的TextBox中直接输入颜色的数值改变Color属性。
杰克.陈
1018 0

热门文章

最新文章

  • 1
    Mac安装并使用telnet命令操作
  • 2
    OSS回源的几种方式和应用场景
  • 3
    [剑指offer] 孩子们的游戏(圆圈中最后剩下的数)
  • 4
    网络安全系列之二十二 Windows用户账号加固
  • 5
    我理解的一个程序员如何学习前端开发
  • 6
    《社交网站界面设计（原书第2版）》——1.9　为设备之间的空间进行设计
  • 7
    《Microduino实战》——1.2　为什么要开源
  • 8
    .Net函数Math.Round你会用吗？
  • 9
    麻省理工大学新发明：暗黑WiFi透视技术
  • 10
    2014秋C++第19周 补充代码 哈希法的存储与查找
  • 1
    R语言关联规则模型(Apriori算法)挖掘杂货店的交易数据与交互可视化
    25
  • 2
    R语言近似贝叶斯计算MCMC（ABC-MCMC）轨迹图和边缘图可视化
    21
  • 3
    r语言中对LASSO回归，Ridge岭回归和弹性网络Elastic Net模型实现-4
    29
  • 4
    Sentieon | 每周文献-Multi-omics-第四十一期
    25
  • 5
    数据分享|R语言广义线性模型GLM：线性最小二乘、对数变换、泊松、二项式逻辑回归分析冰淇淋销售时间序列数据和模拟-2
    15
  • 6
    数据分享|R语言广义线性模型GLM：线性最小二乘、对数变换、泊松、二项式逻辑回归分析冰淇淋销售时间序列数据和模拟-1
    22
  • 7
    基于RT-Thread摄像头车牌图像采集系统
    22
  • 8
    R语言极值理论：希尔HILL统计量尾部指数参数估计可视化
    16
  • 9
    【视频】R语言中的分布滞后非线性模型（DLNM）与发病率，死亡率和空气污染示例
    18
  • 10
    sql语句创建数据库
    18

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）