[UWP]新控制項ColorPicker_ZenDei技術網路在線

[UWP]新控制項ColorPicker

-Advertisement-

1. 前言 Fall Creators Update中提供了一個新得ColorPicker控制項，解決了以前選擇顏色只能用Combo Box的窘境。 2. 一個簡單的例子如上所示，ColorPiker可以通過在光譜或色輪上拖動滑塊，或者在RGB/HSV及十六進位的TextBox中直接輸入顏色的數值改 ...

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="&#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>

（也許是Flyout沒有添加陰影或邊框的原因，看起來醜醜的。）

5. 結語

Winform中有ColorDialog：

WPF有Extended WPF Toolkit 中的ColorPicker：

而UWP拖到現在才終於肯提供一個ColorPicker。每次更新技術都扔掉一些常用控制項，導致開發者只能選擇第三方控制項或自己實現，連TreeView都是拖了幾年才搞出來。這難道是微軟對我們的考驗嗎？

5. 參考

Color Picker
ColorPicker Class

6. 源碼

Fluent Design System Sample
XamlUIBasics

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

反射(一)

一、Class類的使用 1.Java的反射機制是在編譯並不確定是哪個類被載入了，而是在程式運行的時候才載入、探知、自審。使用在編譯期並不知道的類。這樣的特點就是反射。 2.面向對象的世界里，萬物皆對象(除靜態的成員，普通數據類型不是對象)，類是對象類,是java.lang.Class的實例對象3.怎 ...
Python使用@property裝飾類方法

Python版本：3.5.2 假如我們有一個Student類，併在其中定義了一個score屬性，但是score屬性會被顯露出去，沒辦法檢查參數，導致成績可以隨意更改： ~~~~ stu = Student() stu.score = 9999 ~~~~ 這顯然是不合邏輯的，為了限制score的範圍， ...
Python 之面向對象（一）

一、dir內置函數二、類 1、定義類名大駝峰命名法 2、創建 3、self參數（哪一個對象調用方法，self就是哪一個對象的引用類似於this） (1)、增加屬性 (2)、調用屬性 self.訪問對象的屬性 self.調用其他的對象方法（PS 這種在外部賦值屬性的方法不建議使用哦）（ ...
Servlet案例5：用戶登錄失敗信息回顯

登錄失敗信息回顯不會的新的一個頁面，而是顯示在登錄頁面一種方法是：登錄頁面表單中每個欄位後添加<span>標簽寫入失敗信息，利用ajax技術通過改變<span>標簽的display:none屬性添加失敗信息這裡用的類似的方法：資料庫準備略，註意寫好對應的user類供BeanHandler ...
黑馬基礎階段測試題：通過字元輸入流讀取info.txt中的所有內容，每次讀取一行，將每一行的第一個文字截取出來並列印在控制臺上。

package com.swift; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.FileInputStream; import java.io.FileOutputStream; impo... ...
Python中的lambda淺談

lambda x: x * x，實際上就是 def f(x): retrun x * x 關鍵字lambda表示匿名函數，冒號前的x表示函數參數。匿名函數只能有一個表達式，不用寫return，返回值就是該表達式的結果。用匿名函數有個好處，因為函數沒有名字，不必擔心函數名衝突。此外，匿名函數也是一 ...
Ocelot 集成Butterfly 實現分散式跟蹤

微服務，通常都是用複雜的、大規模分散式集群來實現的。微服務構建在不同的軟體模塊上，這些軟體模塊，有可能是由不同的團隊開發、可能使用不同的編程語言來實現、有可能布在了幾千台伺服器，橫跨多個不同的數據中心。因此，就需要一些可以幫助理解系統行為、用於分析性能問題的工具。 API網關Ocelot 作為微服務 ...
重寫 class 的 ToString() 來簡化獲取 enum 的 DescriptionAttribute 值

重寫 class 的 ToString() 來簡化獲取 enum 的 DescriptionAttribute 值目錄一、常見的 enum 類型版本二、演變：class 版本的 enum 類型三、演進：class 和 enum 兩者共存的版本一、常見的 enum 類型版本新建一個 Alg ...