CommunityToolkit
/
WindowsCommunityToolkit
зеркало из
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Add in ColorPickerButton again to Codebase

This commit is contained in:
michael-hawker 2020-10-27 15:38:44 -07:00
Родитель 1758a358fb
Коммит ea75c8a11f
8 изменённых файлов: 353 добавлений и 1330 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

8
Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj
Просмотреть файл

@ -510,6 +510,9 @@
<Compile Include="SamplePages\AutoFocusBehavior\AutoFocusBehaviorPage.xaml.cs">
<DependentUpon>AutoFocusBehaviorPage.xaml</DependentUpon>
</Compile>
<Compile Include="SamplePages\ColorPicker\ColorPickerButtonPage.xaml.cs">
<DependentUpon>ColorPickerButtonPage.xaml</DependentUpon>
</Compile>
<Compile Include="SamplePages\ColorPicker\ColorPickerPage.xaml.cs">
<DependentUpon>ColorPickerPage.xaml</DependentUpon>
</Compile>
@ -625,6 +628,7 @@
<Content Include="SamplePages\FocusBehavior\FocusBehaviorXaml.bind" />
<Content Include="SamplePages\AutoFocusBehavior\AutoFocusBehaviorXaml.bind" />
<Content Include="SamplePages\ColorPicker\ColorPickerXaml.bind" />
<Content Include="SamplePages\ColorPicker\ColorPickerButtonXaml.bind" />
</ItemGroup>
<ItemGroup>
<Compile Include="App.xaml.cs">
@ -998,6 +1002,10 @@
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
</Page>
<Page Include="SamplePages\ColorPicker\ColorPickerButtonPage.xaml">
<Generator>MSBuild:Compile</Generator>
<SubType>Designer</SubType>
</Page>
<Page Include="SamplePages\ColorPicker\ColorPickerPage.xaml">
<Generator>MSBuild:Compile</Generator>
<SubType>Designer</SubType>

12
Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ColorPicker/ColorPickerButtonPage.xaml
Просмотреть файл

@ -1,16 +1,14 @@
<Page x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.ColorPickerButtonPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
mc:Ignorable="d">
<Grid
Visibility="Collapsed">
<Grid Visibility="Collapsed">
<controls:ColorPickerButton />
<controls:ColorPickerButtonSlider />
<controls:ColorPickerSlider />
</Grid>
</Page>

73
Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ColorPicker/ColorPickerButtonXaml.bind
Просмотреть файл

@ -11,17 +11,14 @@
</Page.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Example 1 -->
<StackPanel Grid.Column="0"
Grid.Row="0"
<StackPanel Grid.Row="0"
Orientation="Vertical"
HorizontalAlignment="Center"
VerticalAlignment="Center"
@ -38,14 +35,18 @@
</TextBlock>
</Border>
<controls:ColorPickerButton x:Name="ColorPickerButton1"
Color="Navy"
ColorSpectrumShape="Box"
IsAlphaEnabled="False"
IsHexInputVisible="True" />
SelectedColor="Navy">
<controls:ColorPickerButton.ColorPickerStyle>
<Style TargetType="controls:ColorPicker">
<Setter Property="ColorSpectrumShape" Value="Box"/>
<Setter Property="IsAlphaEnabled" Value="False"/>
<Setter Property="IsHexInputVisible" Value="True"/>
</Style>
</controls:ColorPickerButton.ColorPickerStyle>
</controls:ColorPickerButton>
</StackPanel>
<!-- Example 2 -->
<StackPanel Grid.Column="1"
Grid.Row="0"
<StackPanel Grid.Row="1"
Orientation="Vertical"
HorizontalAlignment="Center"
VerticalAlignment="Center"
@ -62,14 +63,18 @@
</TextBlock>
</Border>
<controls:ColorPickerButton x:Name="ColorPickerButton2"
Color="Green"
ColorSpectrumShape="Box"
IsAlphaEnabled="True"
IsHexInputVisible="False" />
SelectedColor="Green">
<controls:ColorPickerButton.ColorPickerStyle>
<Style TargetType="controls:ColorPicker">
<Setter Property="ColorSpectrumShape" Value="Box"/>
<Setter Property="IsAlphaEnabled" Value="True"/>
<Setter Property="IsHexInputVisible" Value="False"/>
</Style>
</controls:ColorPickerButton.ColorPickerStyle>
</controls:ColorPickerButton>
</StackPanel>
<!-- Example 3 -->
<StackPanel Grid.Column="0"
Grid.Row="1"
<StackPanel Grid.Row="2"
Orientation="Vertical"
HorizontalAlignment="Center"
VerticalAlignment="Center"
@ -86,14 +91,18 @@
</TextBlock>
</Border>
<controls:ColorPickerButton x:Name="ColorPickerButton3"
Color="Transparent"
ColorSpectrumShape="Ring"
IsAlphaEnabled="True"
IsHexInputVisible="True" />
SelectedColor="Transparent">
<controls:ColorPickerButton.ColorPickerStyle>
<Style TargetType="controls:ColorPicker">
<Setter Property="ColorSpectrumShape" Value="Ring"/>
<Setter Property="IsAlphaEnabled" Value="True"/>
<Setter Property="IsHexInputVisible" Value="True"/>
</Style>
</controls:ColorPickerButton.ColorPickerStyle>
</controls:ColorPickerButton>
</StackPanel>
<!-- Example 4 -->
<StackPanel Grid.Column="1"
Grid.Row="1"
<StackPanel Grid.Row="3"
Orientation="Vertical"
HorizontalAlignment="Center"
VerticalAlignment="Center"
@ -111,12 +120,16 @@
</TextBlock>
</Border>
<controls:ColorPickerButton x:Name="ColorPickerButton4"
Color="Maroon"
ColorSpectrumShape="Ring"
ColorSpectrumComponents="SaturationValue"
IsAlphaEnabled="True"
IsHexInputVisible="True"
Width="200" />
SelectedColor="Maroon">
<controls:ColorPickerButton.ColorPickerStyle>
<Style TargetType="controls:ColorPicker">
<Setter Property="ColorSpectrumShape" Value="Ring"/>
<Setter Property="ColorSpectrumComponents" Value="SaturationValue"/>
<Setter Property="IsAlphaEnabled" Value="True"/>
<Setter Property="IsHexInputVisible" Value="True"/>
</Style>
</controls:ColorPickerButton.ColorPickerStyle>
</controls:ColorPickerButton>
</StackPanel>
</Grid>
</Page>

24
Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json
Просмотреть файл

@ -39,21 +39,21 @@
"Type": "ColorPickerPage",
"Subcategory": "Input",
"About": "An improved color picker control providing more options to select colors.",
"CodeUrl": "TBD",
"CodeUrl": "https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.UI.Controls/ColorPicker",
"XamlCodeFile": "ColorPickerXaml.bind",
"Icon": "/SamplePages/ColorPicker/ColorPicker.png",
"DocumentationUrl": "TBD"
"DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/controls/ColorPicker.md"
},
{
"Name": "ColorPickerButton",
"Type": "ColorPickerButtonPage",
"Subcategory": "Input",
"About": "A color picker within a flyout opened by pressing a drop down button containing the selected color.",
"CodeUrl": "https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.UI.Controls/ColorPicker",
"XamlCodeFile": "/SamplePages/ColorPicker/ColorPickerButtonXaml.bind",
"Icon": "/SamplePages/ColorPicker/ColorPicker.png",
"DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/controls/ColorPickerButton.md"
},
//{
// "Name": "ColorPickerButton",
// "Type": "ColorPickerButtonPage",
// "Subcategory": "Input",
// "About": "A color picker within a flyout opened by pressing a drop down button containing the selected color.",
// "CodeUrl": "TBD",
// "XamlCodeFile": "ColorPickerButtonXaml.bind",
// "Icon": "/SamplePages/ColorPicker/ColorPicker.png",
// "DocumentationUrl": "TBD"
//},
{
"Name": "AdaptiveGridView",
"Type": "AdaptiveGridViewPage",

3
Microsoft.Toolkit.Uwp.UI.Controls/ColorPicker/ColorPicker.xaml
Просмотреть файл

@ -45,7 +45,7 @@
<Style x:Key="InputTextBoxStyle"
TargetType="TextBox">
<Setter Property="CornerRadius" Value="0,2,2,0" />
<Setter Property="CornerRadius" Value="0,2,2,0" />
<!-- TODO: Is there a theme resource we can use for this from the system? -->
</Style>
</Grid.Resources>
@ -92,6 +92,7 @@
</ListBox>
<controls:SwitchPresenter x:Name="ContentContainer"
Grid.Row="1"
Margin="12"
Value="{Binding ElementName=ColorPanelSelector, Path=SelectedItem.Name}">
<controls:Case Value="SpectrumListBoxItem">
<Grid>

130
Microsoft.Toolkit.Uwp.UI.Controls/ColorPicker/ColorPickerButton.cs Normal file
Просмотреть файл

@ -0,0 +1,130 @@
// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
namespace Microsoft.Toolkit.Uwp.UI.Controls
{
/// <summary>
/// A <see cref="DropDownButton"/> which displays a color as its <c>Content</c> and it's <c>Flyout</c> is a <see cref="ColorPicker"/>.
/// </summary>
[TemplatePart(Name = nameof(ColorPicker), Type = typeof(ColorPicker))]
public class ColorPickerButton : DropDownButton
{
/// <summary>
/// Gets the <see cref="Controls.ColorPicker"/> instances contained by the <see cref="DropDownButton"/>.
/// </summary>
public ColorPicker ColorPicker { get; private set; }
/// <summary>
/// Gets or sets the <see cref="Style"/> for the <see cref="Controls.ColorPicker"/> control used in the button.
/// </summary>
public Style ColorPickerStyle
{
get
{
return (Style)GetValue(ColorPickerStyleProperty);
}
set
{
SetValue(ColorPickerStyleProperty, value);
}
}
/// <summary>
/// Identifies the <see cref="ColorPickerStyle"/> dependency property.
/// </summary>
public static readonly DependencyProperty ColorPickerStyleProperty = DependencyProperty.Register("ColorPickerStyle", typeof(Style), typeof(ColorPickerButton), new PropertyMetadata(default(Style)));
/// <summary>
/// Gets or sets the <see cref="Style"/> for the <see cref="FlyoutPresenter"/> used within the <see cref="Flyout"/> of the <see cref="DropDownButton"/>.
/// </summary>
public Style FlyoutPresenterStyle
{
get
{
return (Style)GetValue(FlyoutPresenterStyleProperty);
}
set
{
SetValue(FlyoutPresenterStyleProperty, value);
}
}
/// <summary>
/// Identifies the <see cref="FlyoutPresenterStyle"/> dependency property.
/// </summary>
public static readonly DependencyProperty FlyoutPresenterStyleProperty = DependencyProperty.Register("FlyoutPresenterStyle", typeof(Style), typeof(ColorPickerButton), new PropertyMetadata(default(Style)));
/// <summary>
/// Gets or sets the selected <see cref="Windows.UI.Color"/> the user has picked from the <see cref="ColorPicker"/>.
/// </summary>
public Color SelectedColor
{
get { return (Color)GetValue(SelectedColorProperty); }
set { SetValue(SelectedColorProperty, value); }
}
/// <summary>
/// Identifies the <see cref="SelectedColor"/> dependency property.
/// </summary>
public static readonly DependencyProperty SelectedColorProperty =
DependencyProperty.Register(nameof(SelectedColor), typeof(Color), typeof(ColorPickerButton), new PropertyMetadata(null));
/// <summary>
/// Initializes a new instance of the <see cref="ColorPickerButton"/> class.
/// </summary>
public ColorPickerButton()
{
this.DefaultStyleKey = typeof(ColorPickerButton);
}
/// <inheritdoc/>
protected override void OnApplyTemplate()
{
if (ColorPicker != null)
{
// TODO: Unregister
}
base.OnApplyTemplate();
if (ColorPickerStyle != null)
{
ColorPicker = new ColorPicker() { Style = ColorPickerStyle };
}
else
{
ColorPicker = new ColorPicker();
}
ColorPicker.Color = SelectedColor;
this.ColorPicker.ColorChanged += (sender, args) =>
{
SelectedColor = args.NewColor;
};
if (Flyout == null)
{
Flyout = new Flyout()
{
// TODO: Expose Placement
Placement = Windows.UI.Xaml.Controls.Primitives.FlyoutPlacementMode.BottomEdgeAlignedLeft,
FlyoutPresenterStyle = FlyoutPresenterStyle,
Content = ColorPicker
};
}
}
}
}

1431
Microsoft.Toolkit.Uwp.UI.Controls/ColorPicker/ColorPickerButton.xaml
Просмотреть файл

Разница между файлами не показана из-за своего большого размера Загрузить разницу

2
Microsoft.Toolkit.Uwp.UI.Controls/Themes/Generic.xaml
Просмотреть файл

@ -5,7 +5,7 @@
<ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls/CameraPreview/CameraPreview.xaml" />
<ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls/Carousel/Carousel.xaml" />
<ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls/ColorPicker/ColorPicker.xaml" />
<!--<ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls/ColorPickerButton/ColorPickerButton.xaml" />-->
<ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls/ColorPicker/ColorPickerButton.xaml" />
<ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls/DropShadowPanel/DropShadowPanel.xaml" />
<ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls/Expander/Expander.xaml" />
<ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls/GridSplitter/GridSplitter.xaml" />