最近在实现一个远程数字白板时，发现UWP平台上颜色选择不方便，因此自己动手写了一个。
效果图
实现
1 <UserControl 2 x:Class="UWPColorPickerLibrary.UWPColorPickerControl" 3 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 4 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 5 xmlns:local="using:UWPColorPickerLibrary" 6 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 7 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 8 mc:Ignorable="d" 9 d:DesignHeight="300" 10 d:DesignWidth="400"> 11 12 <Grid> 13 <Pivot Name="definedColorsPivot" > 14 15 </Pivot> 16 </Grid> 17 </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);
var r = (byte)((rgb >> 16) & 0xff);
var g = (byte)((rgb >> 8) & 0xff);
var b = (byte)((rgb >> 0) & 0xff);
var color = Color.FromArgb(0xff, r, g, b);
var rect = new Rectangle();
rect.Width = 40;
rect.Height = 40;
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
时间： 2024-10-11 16:21:03