[UWP]新控件ColorPicker

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

原文地址:https://www.cnblogs.com/dino623/p/ColorPicker.html

时间: 2024-09-30 11:52:30

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

UWP开发随笔——UWP新控件!AutoSuggestBox!

摘要 要开发一款优秀的application,控件肯定是必不可少的,uwp就为开发者提供了各种各样的系统控件,AutoSuggestBox就是uwp极具特色的控件之一,也是相对于之前win8.1的uap较新的控件,今天我们就来谈谈AutoSuggestBox的基本用法及其自定义UI方法. A Simplest Sample 话不多说,先来个小Demo. <!-- MainPage.xaml --> <Page x:Class="AutoSuggestBoxSample.Main

Windows 8.1 新控件和功能:

将 XAML 树呈现为位图: 适用于 Windows 8.1 的 Windows 运行时为 Windows.UI.Xaml.Media.Imaging 命名空间添加了一种新类型:RenderTargetBitmap. 此类型提供了两个关键方法: RenderTargetBitmap.RenderAsync,用于提取 XAML 可视化树 并为其创建位图表示. 注意  此操作采用异步方式,将给定的 XAML 元素树呈现为位图. 此方法与屏幕刷新不同步,不能保证精确的帧计时,因此该位图可能在假定捕获时

Android M新控件之AppBarLayout,NavigationView,CoordinatorLayout,CollapsingToolbarLayout的使用

[转载请注明出处:http://blog.csdn.net/feiduclear_up/article/details/46514791 CSDN 废墟的树] 上一篇博客我们学习了Android Design Support Library库中的 是个简单的组件,不了解的童鞋可以参考之前的博客 Android M新控件之FloatingActionButton,TextInputLayout,Snackbar,TabLayout的使用. 这篇博客我们继续学习Design库中的其他四个组件,分别是

一个Activity掌握Android5.0新控件 (转)

原文地址:http://blog.csdn.net/lavor_zl/article/details/51279386 谷歌在推出Android5.0的同时推出了一些新控件,Android5.0中最常用的新控件有下面5种. 1. CardView(卡片视图) CardView顾名思义是卡片视图,它继承FrameLayout.它是一个带圆角的背景和阴影FrameLayout.CardView被包装为一种布局,并且经常在ListView和RecyclerView的Item布局中,作为容器使用. Ca

Android其它新控件 (转)

原文出处:http://blog.csdn.net/lavor_zl/article/details/51312715 Android其它新控件是指非Android大版本更新时提出的新控件,也非谷歌IO大会提出的新控件,而是谷歌发现市场上某种功能的控件被大量使用,而不定期推出实现该功能的官方控件.Android其它新控件常用的有下面两种. 1. Drawerlayout(抽屉布局) 抽屉布局的使用比较简单,一般在DrawerLayout下面定义两个视图,第一个视图作为主界面,第二个视图作为抽屉,

Android5.0新控件CardView的介绍和使用

   CardView也是5.0的新控件,这控件其实就是一个卡片啦,当然我们自己也完全可以定义这样一个卡片,从现在的微博等社App中可以看到各式各样的自定义卡片,所以这个控件意义不是很大.比较是support中的view所以使用在布局里面的时候一下子看不到效果的,比较不好.CardView继承的是FrameLayout,所以摆放内部控件的时候需要注意一下啦. 建议:个人不是很建议用这个控件,因为我们完全可以自定义这样一个控件,这样既能在布局时直接看到效果又比较方便,关键问题是CardView中的

一个Activity掌握Android4.0新控件 (转)

原文地址:http://blog.csdn.net/lavor_zl/article/details/51261380 谷歌在推出Android4.0的同时推出了一些新控件,Android4.0中最常用的新控件有下面5种. 1. Switch的使用 Switch顾名思义,就是开关的意思,有开和关两种状态. 当Switch处于关闭状态时: 当Switch处于打开状态时: 怎么在定义xml中定义Switch <Switch android:id="@+id/_switch" andr

Android Design新控件之TextInputLayout(文本输入布局)

谷歌在推出Android5.0的同时推出了全新的设计Material Design,谷歌为了给我们提供更加规范的MD设计风格的控件,在2015年IO大会上推出了Design支持包,Design常用的新控件包括: TextInputLayout(文本输入布局) TabLaout(选项卡布局) Snackbar FloatingActionButton(浮动按钮) NavigationView(导航视图) AppBarLayout(程序栏布局) CoordinatorLayout(协作布局) Col

一个Activity掌握Design新控件

一个Activity掌握Design新控件 欢迎转载,转载请注明原文地址:http://blog.csdn.net/lavor_zl/article/details/51295364谢谢. 谷歌在推出Android5.0的同时推出了全新的设计Material Design,谷歌为了给我们提供更加规范的MD设计风格的控件,在2015年IO大会上推出了Design支持包,Design常用的新控件有下面8种. 1. TextInputLayout(文本输入布局) TextInputLayout的作用是