mirror of
https://github.com/Artemis-RGB/Artemis
synced 2025-12-13 05:48:35 +00:00
ColorPicker WIP
This commit is contained in:
SpoinkyNL
parent
c99e549101
commit
515348241a
@ -171,8 +171,8 @@
|
||||
<SubType>Designer</SubType>
|
||||
</ApplicationDefinition>
|
||||
<Compile Include="Bootstrapper.cs" />
|
||||
<Compile Include="Controls\ColorPicker\ColorPickerView.xaml.cs">
|
||||
<DependentUpon>ColorPickerView.xaml</DependentUpon>
|
||||
<Compile Include="Controls\ColorPicker.xaml.cs">
|
||||
<DependentUpon>ColorPicker.xaml</DependentUpon>
|
||||
</Compile>
|
||||
<Compile Include="Converters\ColorToDrawingColorConverter.cs" />
|
||||
<Compile Include="Converters\ColorToSolidColorBrushConverter.cs" />
|
||||
@ -250,7 +250,7 @@
|
||||
<SubType>Code</SubType>
|
||||
</Compile>
|
||||
<Compile Include="Screens\Settings\SettingsViewModel.cs" />
|
||||
<Page Include="Controls\ColorPicker\ColorPickerView.xaml">
|
||||
<Page Include="Controls\ColorPicker.xaml">
|
||||
<SubType>Designer</SubType>
|
||||
<Generator>MSBuild:Compile</Generator>
|
||||
</Page>
|
||||
|
||||
134
src/Artemis.UI/Controls/ColorPicker.xaml
Normal file
134
src/Artemis.UI/Controls/ColorPicker.xaml
Normal file
@ -0,0 +1,134 @@
|
||||
<UserControl x:Class="Artemis.UI.Controls.ColorPicker"
|
||||
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||||
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
||||
xmlns:wpf="http://materialdesigninxaml.net/winfx/xaml/themes"
|
||||
mc:Ignorable="d"
|
||||
d:DesignHeight="450" d:DesignWidth="800">
|
||||
<UserControl.Resources>
|
||||
<ResourceDictionary>
|
||||
<ResourceDictionary.MergedDictionaries>
|
||||
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ColorPicker.xaml" />
|
||||
</ResourceDictionary.MergedDictionaries>
|
||||
<VisualBrush x:Key="Checkerboard" TileMode="Tile" Stretch="Uniform" ViewportUnits="Absolute">
|
||||
<VisualBrush.Visual>
|
||||
<Grid Width="25" Height="25">
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition />
|
||||
<RowDefinition />
|
||||
</Grid.RowDefinitions>
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition />
|
||||
<ColumnDefinition />
|
||||
</Grid.ColumnDefinitions>
|
||||
<Rectangle Grid.Row="0" Grid.Column="0" Fill="White" />
|
||||
<Rectangle Grid.Row="0" Grid.Column="1" />
|
||||
<Rectangle Grid.Row="1" Grid.Column="0" />
|
||||
<Rectangle Grid.Row="1" Grid.Column="1" Fill="White" />
|
||||
</Grid>
|
||||
</VisualBrush.Visual>
|
||||
</VisualBrush>
|
||||
<ControlTemplate x:Key="MaterialDesignOpacitySlider" TargetType="{x:Type Slider}">
|
||||
<Border
|
||||
x:Name="border"
|
||||
Background="{TemplateBinding Background}"
|
||||
BorderBrush="{TemplateBinding BorderBrush}"
|
||||
BorderThickness="{TemplateBinding BorderThickness}"
|
||||
SnapsToDevicePixels="True">
|
||||
<Grid>
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
|
||||
<RowDefinition Height="Auto" />
|
||||
</Grid.RowDefinitions>
|
||||
<Border
|
||||
Grid.Row="1"
|
||||
Height="8"
|
||||
CornerRadius="4"
|
||||
Background="{StaticResource Checkerboard}">
|
||||
<Border
|
||||
Height="8"
|
||||
CornerRadius="4">
|
||||
<Border.Background>
|
||||
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
|
||||
<GradientStop Offset="0" Color="Transparent" />
|
||||
<GradientStop Offset="1.0" Color="{Binding SolidColor}" />
|
||||
</LinearGradientBrush>
|
||||
</Border.Background>
|
||||
</Border>
|
||||
</Border>
|
||||
<Track
|
||||
x:Name="PART_Track"
|
||||
Grid.Row="1"
|
||||
OpacityMask="{x:Null}">
|
||||
<Track.DecreaseRepeatButton>
|
||||
<RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource MaterialDesignHorizontalColorSliderTrackRepeatButton}" />
|
||||
</Track.DecreaseRepeatButton>
|
||||
<Track.IncreaseRepeatButton>
|
||||
<RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource MaterialDesignHorizontalColorSliderTrackRepeatButton}" />
|
||||
</Track.IncreaseRepeatButton>
|
||||
<Track.Thumb>
|
||||
<Thumb
|
||||
x:Name="Thumb"
|
||||
Width="20"
|
||||
Height="20"
|
||||
VerticalAlignment="Center"
|
||||
Focusable="False"
|
||||
OverridesDefaultStyle="True"
|
||||
Template="{StaticResource MaterialDesignColorSliderThumb}">
|
||||
<Thumb.Foreground>
|
||||
<SolidColorBrush Color="{Binding SolidColor}" />
|
||||
</Thumb.Foreground>
|
||||
</Thumb>
|
||||
</Track.Thumb>
|
||||
</Track>
|
||||
</Grid>
|
||||
</Border>
|
||||
</ControlTemplate>
|
||||
</ResourceDictionary>
|
||||
</UserControl.Resources>
|
||||
<StackPanel Orientation="Horizontal">
|
||||
<TextBox x:Name="ColorCodeTextBox"
|
||||
wpf:HintAssist.Hint="Noise color"
|
||||
wpf:TextFieldAssist.TextBoxViewMargin="1 0 1 0"
|
||||
Style="{StaticResource MaterialDesignFloatingHintTextBox}"
|
||||
Text="{Binding ColorCode}"
|
||||
Margin="0,0,-15,0"
|
||||
Padding="0 0 18 0"
|
||||
MinWidth="95" />
|
||||
|
||||
<Border Width="15" Height="15" CornerRadius="15" Margin="0,0,0,5" VerticalAlignment="Bottom" HorizontalAlignment="Right" Background="{StaticResource Checkerboard}">
|
||||
<Ellipse Stroke="{StaticResource NormalBorderBrush}" Cursor="Hand" MouseUp="UIElement_OnMouseUp">
|
||||
<Ellipse.Fill>
|
||||
<SolidColorBrush Color="{Binding Color, Mode=OneWay}" />
|
||||
</Ellipse.Fill>
|
||||
</Ellipse>
|
||||
</Border>
|
||||
|
||||
<Popup x:Name="ColorCodePopup"
|
||||
AllowsTransparency="True"
|
||||
Placement="Bottom"
|
||||
CustomPopupPlacementCallback="{x:Static wpf:CustomPopupPlacementCallbackHelper.LargePopupCallback}"
|
||||
PlacementTarget="{Binding ElementName=PART_TextBox}"
|
||||
StaysOpen="False"
|
||||
PopupAnimation="Fade"
|
||||
IsOpen="{Binding PopupOpen}">
|
||||
<wpf:Card Width="200" Height="200" Margin="0 5 0 0">
|
||||
<Grid>
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="160" />
|
||||
<RowDefinition />
|
||||
</Grid.RowDefinitions>
|
||||
<wpf:ColorPicker Grid.Row="0" Color="{Binding Color, RelativeSource={RelativeSource AncestorType=UserControl}}" />
|
||||
<Slider Grid.Row="1" Margin="8"
|
||||
IsMoveToPointEnabled="True"
|
||||
Orientation="Horizontal"
|
||||
Style="{StaticResource MaterialDesignColorSlider}"
|
||||
Template="{StaticResource MaterialDesignOpacitySlider}"
|
||||
Value="{Binding ColorOpacity}" Maximum="255" />
|
||||
</Grid>
|
||||
</wpf:Card>
|
||||
</Popup>
|
||||
</StackPanel>
|
||||
</UserControl>
|
||||
117
src/Artemis.UI/Controls/ColorPicker.xaml.cs
Normal file
117
src/Artemis.UI/Controls/ColorPicker.xaml.cs
Normal file
@ -0,0 +1,117 @@
|
||||
using System;
|
||||
using System.ComponentModel;
|
||||
using System.Runtime.CompilerServices;
|
||||
using System.Windows;
|
||||
using System.Windows.Controls;
|
||||
using System.Windows.Input;
|
||||
using System.Windows.Media;
|
||||
|
||||
namespace Artemis.UI.Controls
|
||||
{
|
||||
/// <summary>
|
||||
/// Interaction logic for ColorPicker.xaml
|
||||
/// </summary>
|
||||
public partial class ColorPicker : UserControl, INotifyPropertyChanged
|
||||
{
|
||||
public static readonly DependencyProperty ColorProperty = DependencyProperty.Register(
|
||||
"Color",
|
||||
typeof(Color),
|
||||
typeof(ColorPicker),
|
||||
new FrameworkPropertyMetadata(default(Color), OnColorPropertyChanged)
|
||||
);
|
||||
|
||||
private byte _colorOpacity;
|
||||
|
||||
private static void OnColorPropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
|
||||
{
|
||||
if (sender is ColorPicker colorPicker)
|
||||
{
|
||||
colorPicker.OnPropertyChanged(nameof(Color));
|
||||
colorPicker.OnPropertyChanged(nameof(ColorCode));
|
||||
colorPicker.OnPropertyChanged(nameof(SolidColor));
|
||||
colorPicker.OnPropertyChanged(nameof(ColorOpacity));
|
||||
}
|
||||
}
|
||||
|
||||
public ColorPicker()
|
||||
{
|
||||
InitializeComponent();
|
||||
PropertyChanged += OnPropertyChanged;
|
||||
}
|
||||
|
||||
private void OnPropertyChanged(object sender, PropertyChangedEventArgs e)
|
||||
{
|
||||
if (e.PropertyName == nameof(Color))
|
||||
{
|
||||
if (Color.A != _colorOpacity)
|
||||
Color = Color.FromArgb(_colorOpacity, Color.R, Color.G, Color.B);
|
||||
}
|
||||
}
|
||||
|
||||
public Color Color
|
||||
{
|
||||
get => (Color) GetValue(ColorProperty);
|
||||
set => SetValue(ColorProperty, value);
|
||||
}
|
||||
|
||||
public string ColorCode
|
||||
{
|
||||
get => Color.ToString();
|
||||
set
|
||||
{
|
||||
try
|
||||
{
|
||||
if (string.IsNullOrWhiteSpace(value))
|
||||
Color = new Color();
|
||||
else
|
||||
{
|
||||
var color = ColorConverter.ConvertFromString(value);
|
||||
if (color is Color c)
|
||||
{
|
||||
_colorOpacity = c.A;
|
||||
Color = c;
|
||||
}
|
||||
}
|
||||
}
|
||||
catch (FormatException)
|
||||
{
|
||||
// ignored
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public Color? SolidColor => Color.FromRgb(Color.R, Color.G, Color.B);
|
||||
|
||||
public byte ColorOpacity
|
||||
{
|
||||
get => _colorOpacity;
|
||||
set
|
||||
{
|
||||
_colorOpacity = value;
|
||||
if (Color.A != _colorOpacity)
|
||||
{
|
||||
Color = Color.FromArgb(_colorOpacity, Color.R, Color.G, Color.B);
|
||||
OnPropertyChanged(nameof(Color));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public bool PopupOpen { get; set; }
|
||||
|
||||
private void UIElement_OnMouseUp(object sender, MouseButtonEventArgs e)
|
||||
{
|
||||
PopupOpen = !PopupOpen;
|
||||
}
|
||||
|
||||
#region Events
|
||||
|
||||
public event PropertyChangedEventHandler PropertyChanged;
|
||||
|
||||
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
|
||||
{
|
||||
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
|
||||
}
|
||||
|
||||
#endregion
|
||||
}
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
<UserControl x:Class="Artemis.UI.Controls.ColorPicker.ColorPickerView"
|
||||
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||||
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
||||
xmlns:local="clr-namespace:Artemis.UI.Controls.ColorPicker"
|
||||
xmlns:wpf="http://materialdesigninxaml.net/winfx/xaml/themes"
|
||||
mc:Ignorable="d"
|
||||
d:DesignHeight="450" d:DesignWidth="800">
|
||||
<Grid>
|
||||
|
||||
</Grid>
|
||||
</UserControl>
|
||||
@ -1,28 +0,0 @@
|
||||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Linq;
|
||||
using System.Text;
|
||||
using System.Threading.Tasks;
|
||||
using System.Windows;
|
||||
using System.Windows.Controls;
|
||||
using System.Windows.Data;
|
||||
using System.Windows.Documents;
|
||||
using System.Windows.Input;
|
||||
using System.Windows.Media;
|
||||
using System.Windows.Media.Imaging;
|
||||
using System.Windows.Navigation;
|
||||
using System.Windows.Shapes;
|
||||
|
||||
namespace Artemis.UI.Controls.ColorPicker
|
||||
{
|
||||
/// <summary>
|
||||
/// Interaction logic for ColorPickerView.xaml
|
||||
/// </summary>
|
||||
public partial class ColorPickerView : UserControl
|
||||
{
|
||||
public ColorPickerView()
|
||||
{
|
||||
InitializeComponent();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -4,10 +4,12 @@
|
||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||||
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
||||
xmlns:local="clr-namespace:Artemis.UI.Screens.Workshop"
|
||||
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
|
||||
xmlns:s="https://github.com/canton7/Stylet"
|
||||
xmlns:controls="clr-namespace:Artemis.UI.Controls"
|
||||
mc:Ignorable="d"
|
||||
d:DesignHeight="450" d:DesignWidth="800">
|
||||
<Grid>
|
||||
<TextBlock Style="{DynamicResource MaterialDesignBody1TextBlock}">Work work!</TextBlock>
|
||||
<TextBlock Text="{Binding TestColor}"></TextBlock>
|
||||
<controls:ColorPicker Color="{Binding TestColor}" VerticalAlignment="Center" HorizontalAlignment="Center"></controls:ColorPicker>
|
||||
</Grid>
|
||||
</UserControl>
|
||||
@ -1,9 +1,38 @@
|
||||
using Stylet;
|
||||
using System;
|
||||
using System.ComponentModel;
|
||||
using System.Windows.Media;
|
||||
using Stylet;
|
||||
|
||||
namespace Artemis.UI.Screens.Workshop
|
||||
{
|
||||
public class WorkshopViewModel : Screen, IScreenViewModel
|
||||
{
|
||||
public string Title => "Workshop";
|
||||
|
||||
public WorkshopViewModel()
|
||||
{
|
||||
PropertyChanged += OnPropertyChanged;
|
||||
}
|
||||
|
||||
private void OnPropertyChanged(object sender, PropertyChangedEventArgs e)
|
||||
{
|
||||
Console.WriteLine("Property changed:" + e.PropertyName);
|
||||
Console.WriteLine(TestColor);
|
||||
}
|
||||
|
||||
public Color TestColor { get; set; }
|
||||
|
||||
|
||||
protected override void OnActivate()
|
||||
{
|
||||
TestColor = Color.FromRgb(255, 0, 0);
|
||||
base.OnActivate();
|
||||
}
|
||||
|
||||
protected override void OnDeactivate()
|
||||
{
|
||||
Console.WriteLine(TestColor);
|
||||
base.OnDeactivate();
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user