1. 前言

Fall Creators Update中提供了一个新得ColorPicker控件，解决了以前选择颜色只能用Combo Box的窘境。

2. 一个简单的例子

<ColorPicker x:Name="ColorPicker"

             Margin="5" />

<Grid Margin="5">

    <Grid.Background>

        <SolidColorBrush Color="{x:Bind ColorPicker.Color, Mode=OneWay}" />

    </Grid.Background>

    <TextBlock Text="{x:Bind ColorPicker.Color}" />

</Grid>

如上所示，ColorPiker可以通过在光谱或色轮上拖动滑块，或者在RGB/HSV及十六进制的TextBox中直接输入颜色的数值改变Color属性。

3. 定制ColorPicker

ColorPicker提供了很多属性以设置它的外观，下面介绍一些常用的属性。

3.1 ColorSpectrumShape

ColorSpectrumShape是定义ColorPicker外观的主要属性。当设置为ColorSpectrumShape.Box时显示正方形的光谱，设置为ColorSpectrumShape.Ring时显示为圆型的HSV色轮。

3.2 最简化显示

完整的ColorPicker实在太占空间，而且整个控件左边高右边低，很不平衡。使用以下设置可以隐藏ColorPreview及其它Text Box以最简化ColorPicker的显示，使它勉强正常一点。

<ColorPicker x:Name="ColorPicker"

             ColorSpectrumShape="Ring"

             IsColorPreviewVisible="False"

             IsColorChannelTextInputVisible="False"

             IsHexInputVisible="False" />

3.3 其它属性

使用如下XAML基本可以将所有元素显示出来：

<ColorPicker x:Name="ColorPicker"

         IsColorPreviewVisible="True"

         IsAlphaEnabled="True"

         IsMoreButtonVisible="True"/>

下面列表列出了各元素对应的属性。

4. 封装ColorPicker

ColorPicker难用的地方在于它是个大块头，而且没有Header，摆在表单里面格格不入。官方文档里面还介绍了怎么把ColorPicker放在Button的Flyout里使用，都做到这样了还不如直接提供这个弹出控件。

为了使它更好用我把它简单地封装到一个弹出控件中。由于Picker控件通常都是指点击按钮弹出一个Popup或Flyout通过鼠标点击选择值的控件，例如DatePicker、TimePicker或者Extended WPF Toolkit 中的ColorPicker，UWP中的ColorPicker这个名称让我很为难，只好把自己封装的控件命名为ColorSelector。详细代码请见文章最后给出的Fluent Design System Sample源码。

<Style TargetType="local:ColorSelector">

    <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:ColorSelector">

                <StackPanel x:Name="LayoutRoot"

                            Margin="{TemplateBinding Padding}">

                    <VisualStateManager.VisualStateGroups>

                        <VisualStateGroup x:Name="CommonStates">

                            <VisualState x:Name="Normal" />

                            <VisualState x:Name="Disabled">

                                <Storyboard>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter"

                                                                   Storyboard.TargetProperty="Foreground">

                                        <DiscreteObjectKeyFrame KeyTime="0"

                                                                Value="{ThemeResource DatePickerHeaderForegroundDisabled}" />

                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualState>

                        </VisualStateGroup>

                        <VisualStateGroup x:Name="PopupStates">

                            <VisualState x:Name="PopupOpened" />

                            <VisualState x:Name="PopupClosed" />

                        </VisualStateGroup>

                    </VisualStateManager.VisualStateGroups>

                    <local:HeaderedContentControl Header="{TemplateBinding Header}"

                                                  HeaderTemplate="{TemplateBinding HeaderTemplate}">

                        <ToggleButton x:Name="DateButton"

                                      DataContext="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},Path=Color}"

                                      IsEnabled="{TemplateBinding IsEnabled}"

                                      IsChecked="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=IsDropDownOpen,Mode=TwoWay}"

                                      HorizontalAlignment="Stretch"

                                      HorizontalContentAlignment="Stretch">

                            <ToggleButton.Content>

                                    <Grid>

                                        <Grid.ColumnDefinitions>

                                            <ColumnDefinition Width="Auto" />

                                            <ColumnDefinition />

                                        </Grid.ColumnDefinitions>

                                        <TextBlock Text="Select A Color:" />

                                        <Rectangle Grid.Column="1"

                                                   Margin="5,0,0,0">

                                            <Rectangle.Fill>

                                                <SolidColorBrush Color="{Binding}" />

                                            </Rectangle.Fill>

                                        </Rectangle>

                                    </Grid>

                                </ToggleButton.Content>

                            <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>

                                        <ColorPicker x:Name="ColorPicker"

                                                     Style="{TemplateBinding ColorPickerStyle}"

                                                     IsColorPreviewVisible="False"

                                                     IsColorChannelTextInputVisible="False"

                                                     IsHexInputVisible="False" />

                                        <Grid Grid.Row="1"

                                              Height="45"

                                              x:Name="AcceptDismissHostGrid">

                                            <Grid.ColumnDefinitions>

                                                <ColumnDefinition Width="*" />

                                                <ColumnDefinition Width="*" />

                                            </Grid.ColumnDefinitions>

                                            <Rectangle Height="2"

                                                       VerticalAlignment="Top"

                                                       Fill="{ThemeResource DatePickerFlyoutPresenterSpacerFill}"

                                                       Grid.ColumnSpan="2" />

                                            <Button x:Name="AcceptButton"

                                                    Grid.Column="0"

                                                    Content=""

                                                    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=""

                                                    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>

（也许是Flyout没有添加阴影或边框的原因，看起来丑丑的。）

5. 结语

Winform中有ColorDialog：

WPF有Extended WPF Toolkit 中的ColorPicker：

而UWP拖到现在才终于肯提供一个ColorPicker。每次更新技术都扔掉一些常用控件，导致开发者只能选择第三方控件或自己实现，连TreeView都是拖了几年才搞出来。这难道是微软对我们的考验吗？

5. 参考

Color Picker

ColorPicker Class

6. 源码

Fluent Design System Sample

XamlUIBasics

[UWP]新控件ColorPicker的更多相关文章

  1. UWP开发随笔——UWP新控件！AutoSuggestBox！

    摘要 要开发一款优秀的application,控件肯定是必不可少的,uwp就为开发者提供了各种各样的系统控件,AutoSuggestBox就是uwp极具特色的控件之一,也是相对于之前win8.1的ua ...

  2. WindowsXamlHost：在 WPF 中使用 UWP 的控件（Windows Community Toolkit）

    Windows Community Toolkit 再次更新到 5.0.以前可以在 WPF 中使用有限的 UWP 控件,而现在有了 WindowsXamlHost,则可以使用更多 UWP 原生控件了. ...

  3. 【Android】Anroid5.0+新控件---酷炫标题栏的简单学习

    Android5.0+推出的新控件感觉特别酷,最近想模仿大神做个看图App出来,所以先把这些新控件用熟悉了. 新控件的介绍.使用等等网上相应的文章已经特别多了,题主也没那能力去写篇详解出来,本篇随笔记 ...

  4. Android其它新控件 （转）

    原文出处:http://blog.csdn.net/lavor_zl/article/details/51312715 Android其它新控件是指非Android大版本更新时提出的新控件,也非谷歌I ...

  5. 一个Activity掌握Design新控件 （转）

    原文地址:http://blog.csdn.net/lavor_zl/article/details/51295364 谷歌在推出Android5.0的同时推出了全新的设计Material Desig ...

  6. 一个Activity掌握Android5.0新控件 （转）

    原文地址:http://blog.csdn.net/lavor_zl/article/details/51279386 谷歌在推出Android5.0的同时推出了一些新控件,Android5.0中最常 ...

  7. 一个Activity掌握Android4.0新控件 （转）

    原文地址:http://blog.csdn.net/lavor_zl/article/details/51261380 谷歌在推出Android4.0的同时推出了一些新控件,Android4.0中最常 ...

  8. 【转】Android M新控件之AppBarLayout，NavigationView，CoordinatorLayout，CollapsingToolbarLayout的使用

    Android M新控件之AppBarLayout,NavigationView,CoordinatorLayout,CollapsingToolbarLayout的使用 分类: Android UI ...

  9. 【转】Android M新控件之FloatingActionButton，TextInputLayout，Snackbar，TabLayout的使用

    Android M新控件之FloatingActionButton,TextInputLayout,Snackbar,TabLayout的使用 分类: Android UI2015-06-15 16: ...

随机推荐

  1. 如何实现VM框架中的数据绑定

    作者:佳杰 本文原创,转载请注明作者及出处 如何实现VM框架中的数据绑定 一:数据绑定概述 视图(view)和数据(model)之间的绑定 二:数据绑定目的 不用手动调用方法渲染视图,提高开发效率:统 ...

  2. 菜鸟VUER学习记——零0章、打开新的大门

    是什么 基于MVVM模型,核心库只关注视图层,通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件的js框架.根据项目的复杂度和需求,渐进的加入插件以达到恰到好处的程度. 解决问题 UI组件化 ...

  3. 常用原生JS函数和语法集合

    luoyishan-2017-10-08 1. 输出语句:document.write(""); 2. JS中的注释为// 3. 传统的HTML文档顺序是:document-> ...

  4. Yii2.0源码阅读-视图(View)渲染过程

    之前的文章我们根据源码的分析,弄清了Yii如何处理一次请求,以及根据解析的路由如何调用控制器中的action,那接下来好奇的可能就是,我在控制器action中执行了return $this->r ...

  5. 一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](三)

    前言 上一篇<一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](二)>我们通过如下操作: 创建实体及工具类 创建Re ...

  6. springboot项目启动时提示Address already in use: bind

    PS:web项目在启动的时候,一般会报Address already in use: bind,常规的处理思路为:删除任务管理器中的javaw.exe进程即可:当删除仍然解决不了时,一般处理思路如下, ...

  7. python递归查找文件目录

    # -*- coding:utf-8 -*- import os allfile = []def get_all_file(path): allfilelist = os.listdir(path) ...

  8. Redux 介绍

    本文主要是对 Redux 官方文档 的梳理以及自身对 Redux 的理解. 单页面应用的痛点 对于复杂的单页面应用,状态(state)管理非常重要.state 可能包括:服务端的响应数据.本地对响应数 ...

  9. vijos 1110小胖邮递员；bzoj 1210: [HNOI2004]邮递员

    Description Smith在P市的邮政局工作,他每天的工作是从邮局出发,到自己所管辖的所有邮筒取信件,然后带回邮局.他所管辖的邮筒非常巧地排成了一个m*n的点阵(点阵中的间距都是相等的).左上 ...

  10. Spark环境搭建（上）——基础环境搭建

    Spark摘说 Spark的环境搭建涉及三个部分,一是linux系统基础环境搭建,二是Hadoop集群安装,三是Spark集群安装.在这里,主要介绍Spark在Centos系统上的准备工作--linu ...