最近在实现一个远程数字白板时,发现UWP平台上颜色选择不方便,因此自己动手写了一个。

效果图

实现

 <UserControl
     x:Class="UWPColorPickerLibrary.UWPColorPickerControl"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:local="using:UWPColorPickerLibrary"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d"
     d:DesignHeight="300"
     d:DesignWidth="400">

     <Grid>
         <Pivot Name="definedColorsPivot" >

         </Pivot>
     </Grid>
 </UserControl>

C#

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Windows.UI.Xaml.Shapes;

// The User Control item template is documented at http://go.microsoft.com/fwlink/?LinkId=234236

namespace UWPColorPickerLibrary
{
    public sealed partial class UWPColorPickerControl : UserControl
    {
        public UWPColorPickerControl()
        {
            this.InitializeComponent();
            SelectedColor = Colors.Black;
            Loaded += UWPColorPickerControl_Loaded;
        }

        public delegate void ColorSelectedHandler(object sender, Color color);
        public event ColorSelectedHandler ColorSelected = null;

        public Color SelectedColor {
            get;
            set;
        }

        private void UWPColorPickerControl_Loaded(object sender, RoutedEventArgs e)
        {
            addColorGroup("Color A", "#373C20#8DA3A2#FCFEFE#C6DBE6#A8BFCB#524644#DC3E00#A89D9F#CFCAC9#D29A8D#484745#A4A0A0#94857E#E0DBDC#BDB7BB#65524D#DE5B12#99979B#FA6B2D#C2D0DE#655939#A1A494#CBD5D6#DEEBEF#B7C1BB");
            addColorGroup("Color B", "#64604E#DC4508#75A873#CBD1E7#A9B795#404239#C74341#A792A2#EB4772#BCB9C6#453D3B#BB8977#FF6409#D4D0D3#C2B9BD#6A2E3B#E70000#8B8BA9#C0C3FC#C798C1#744437#E72A00#9A989F#FF4D0B#ACBBDA");
            addColorGroup("Color C", "#706B6B#969398#948980#EAEBF2#B4B4C4#3A3F34#A7A69F#889381#CFCFD1#C1B4A7#484D48#818D9E#5295F4#CEDEF7#ACB5C7#645B5C#A19DA5#8D8083#C6C3D1#B5AFC3#554E3D#A2A5A0#908C7F#E6E6DE#B9BEBB");
            addColorGroup("Colod D", "#5C5357#5F5CA7#9F9CAA#A89363#D3C7B9#00481B#094722#6F7766#F0F1F1#A59F98#0F0A03#973137#C96B66#FFF4F7#E096A9#292419#7A6E62#C9BDBC#F4F0EF#AA9A94#000053#3D288D#717ACD#E7EDF7#96ADED");
            addColorGroup("Color E", "#1B121E#627D89#446645#EDE4EB#8692A1#3D3441#C0C2D1#FFFBFF#E9DFF7#CFB60D#595124#D7F900#EBFF00#BFD600#9CA31D#4B2225#DE0000#CDCCD9#FBF4FF#6DD45B#490813#D50000#D00000#DFD5E2#788CB2");

            addColorGroup("Color F", "#775D16#91742D#82612E#24190F#A48B3F#4F4435#A7DF1A#FFFFFF#EADCC0#8C76A2#23231A#787572#515237#D9DEE6#AA7B77#5B5A4A#C60000#BDC4C0#CEE2FF#4D9F92#141610#74776B#D1D7CA#FFFFFF#AE996A");
            addColorGroup("Color G", "#262213#756F67#FFFFFF#C5BCB5#C13232#111210#2F312D#714A4C#FBFCFF#CA0008#342B54#CC2800#ED6F13#EEF6F6#118AB6#211508#784B34#CA4600#F2E3EC#E76A00#212014#7F7967#55513C#C9CAC9#A59C87");
            addColorGroup("Color H", "#1D181A#860000#A70000#CEB5E6#9B80AB#272621#787677#54494E#EFF1F3#95C035#5E4046#4492D7#B20000#68BAFF#4172B0#25395A#E1FFFF#F3FFFF#B3D4F2#5C80B7#DF0000#FF8400#FFFFFF#E9E0C5#646762");
            addColorGroup("Color I", "#717B78#27353A#CACCCA#F7F4F6#979785#161A24#213972#0B46AD#E7E9E9#A0B16F#777A85#3A3C48#7B82AA#A7A5DC#8691B1#777A85#3A3C48#7B82AA#A7A5DC#8691B1#615400#C63200#D8B903#FFEF8D#58AB4C");
        }

        private void addColorGroup(String groupName, String colorDefine)
        {
            var st = colorDefine.Split('#').Where(s => s!="").ToList();
            var pitem = new PivotItem();
            pitem.Header = groupName;
            var grid = new GridView();
            pitem.Content = grid;

            foreach (var s in st)
            {
                var rgb = int.Parse(s, System.Globalization.NumberStyles.HexNumber);
                ) & 0xff);
                ) & 0xff);
                ) & 0xff);
                var color = Color.FromArgb(0xff, r, g, b);
                var rect = new Rectangle();
                rect.Width = ;
                rect.Height = ;
                rect.Fill = new SolidColorBrush(color);

                grid.Items.Add(rect);

                rect.PointerPressed += delegate (object sender, PointerRoutedEventArgs e) {
                    if (ColorSelected != null)
                    {
                        SelectedColor = color;
                        ColorSelected(sender, color);
                    }
                };

            }

            definedColorsPivot.Items.Add(pitem);
        }

    }
}

使用方法

<Page
    x:Class="Demo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Demo"
    xmlns:lib="using:UWPColorPickerLibrary"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Orientation="Vertical">

        <Button Content="Select Color">
            <Button.Flyout>
                <Flyout x:Name="colorFlyout">
                    <lib:UWPColorPickerControl Width="400" Height="Auto" ColorSelected="UWPColorPickerControl_ColorSelected" Name="colorPicker"></lib:UWPColorPickerControl>
                </Flyout>
            </Button.Flyout>
        </Button>

        <Rectangle Width="100" Height="100" Fill="Black" Name="colorRect"/>

    </StackPanel>
</Page>
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using UWPColorPickerLibrary;

//“空白页”项模板在 http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409 上有介绍

namespace Demo
{
    /// <summary>
    /// 可用于自身或导航至 Frame 内部的空白页。
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void UWPColorPickerControl_ColorSelected(object sender, Windows.UI.Color color)
        {
            colorFlyout.Hide();
            colorRect.Fill = new SolidColorBrush(color);
        }

    }
}

怎么样,是不是很简单?

欢迎UWP爱好者与我交流 我的QQ 250319217

UWP 中实现一个颜色选择器 UWPColorPickerControl的更多相关文章

  1. WPF 自己做一个颜色选择器

    程序开发过程中,经常会遇到需要支持动态配置主题颜色的问题,通常,一个程序会有多种不同的颜色风格主题供选 有时候,更细致一些的地方,会需要支持自己配置颜色,这样我们就需要一个颜色选择器啦,下面是我自己开 ...

  2. Android 颜色渲染(一) 颜色选择器 ColorPickerDialog剖析

    版权声明:本文为博主原创文章,未经博主允许不得转载. Android 颜色选择器之ColorPickerDialog剖析 有这样一个需求,可以让用户自定义背景颜色,这就需要提供一个颜色选择器给用户. ...

  3. 基于vue的颜色选择器color-picker

    项目中有用到颜色选择器的童鞋们可以看过来了 关于color-picker的jquery的插件是有蛮多,不过vue组件没有吧,反正我没有找到, 虽然element-ui里面有这个,但是你愿意为了一个小功 ...

  4. 基于vue的颜色选择器vue-color-picker

    项目中有用到颜色选择器的童鞋们可以看过来了 关于color-picker的jquery的插件是有蛮多,不过vue组件没有吧,反正我没有找到, 虽然element-ui里面有这个,但是你愿意为了一个小功 ...

  5. .NET 编写一个可以异步等待循环中任何一个部分的 Awaiter

    林德熙 小伙伴希望保存一个文件,并且希望如果出错了也要不断地重试.然而我认为如果一直错误则应该对外抛出异常让调用者知道为什么会一直错误. 这似乎是一个矛盾的要求.然而最终我想到了一个办法:让重试一直进 ...

  6. UWP 颜色选择器(ColorPicker) 和 自定义的Flyout(AdvancedFlyout)

    ColorPicker 故事背景 项目里面需要一个像Winfrom里面那样的颜色选择器,如下图所示: 在网上看了一下.没有现成的东东可以拿来使用.大概查看了一下关于颜色的一些知识,想着没人种树,那就由 ...

  7. 【canvas系列】用canvas实现一个colorpicker(类似PS的颜色选择器)

    每个浏览器都有自己的特点,比如今天要做的colorpicker就是,一千个浏览器,一千个哈姆雷特,一千个colorpicker.今天canvas系列就用canvas做一个colorpicker. ** ...

  8. WPF 一个简单的颜色选择器

    原文:WPF 一个简单的颜色选择器 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/BYH371256/article/details/8340999 ...

  9. 从头学Qt Quick(3)-- 用QML写一个简单的颜色选择器

    先看一下效果图: 实现功能:点击不同的色块可以改变文字的颜色. 实现步骤: 一.创建一个默认的Qt Quick工程: 二.添加文件Cell.qml 这一步主要是为了实现一个自定义的组件,这个组件就是我 ...

随机推荐

  1. C#入门经典第八章面向对象编程-3-Windows应用程序中的OOP

    实例一:使用对象.代码如下: 首先从工具箱中拖一个按钮,并添加事件. private void button2_Click(object sender, EventArgs e) {//按钮的Butt ...

  2. php通过token验证表单重复提交

    PHP防止重复提交表单 2016-11-08 轻松学PHP 我们提交表单的时候,不能忽视的一个限制是防止用户重复提交表单,因为有可能用户连续点击了提交按钮或者是攻击者恶意提交数据,那么我们在提交数据后 ...

  3. mysql查询数据库约束

    SELECT * FROM information_schema.`TABLE_CONSTRAINTS` where TABLE_SCHEMA='mold' and TABLE_NAME='tplmi ...

  4. stdarg.h头

    stdarg.h 头文件,主要目的是让函数可以接受可变参数. va_list :用来保存宏va_arg与宏va_end所需信息. va_start :使va_list指向起始的参数 va_arg :检 ...

  5. git使用时遭遇the authenticity of host can't be established

    修改/etc/ssh/ssh_config文件的配置,以后则不会再出现此问题 最后面添加: StrictHostKeyChecking no UserKnownHostsFile /dev/null

  6. bootstrap中可用的图标集

  7. document.createElement方法的使用

    我们在使用createElemen方法t创建一个元素节点的时候,似乎在IE下面怎么写都可以,但切换到FF等其它浏览器却总是会报错. 比如我们要创建一个input元素,那么在IE下,我们可以有多种写法: ...

  8. Mybatis 示例之 Association - 偶尔记一下 - 博客频道 - CSDN.NET

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  9. UIImage创建图片的两种方式的区别

    在工作中经常会遇到添加图片,用哪种方式添加更好呢?请看详解 方法一: UIImage *image = [UIImage imageNamed:@"haha"]; 这种方法创建的图 ...

  10. Manacher 最长回文子串。

    最长回文子串就是一个字符串的一个子串,他从左往右读和从右往左读是一样的. 可以用 Manacher 算法来求,他的复杂度是 O(n) . 可以看这篇文章 http://blog.csdn.net/yw ...