[WPF] LED Light UI 코드

[ColorLightControl.cs]

using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace Hico.Desktop.CustomControl
{
	public class ColorLightControl : Control
	{
		public ColorLightControl()
		{
			SizeChanged += ColorLightControl_SizeChanged;
		}

		private void ColorLightControl_SizeChanged(object sender, SizeChangedEventArgs e)
		{
			LightRadius = ActualWidth < ActualHeight ? ActualWidth : ActualHeight;
		}

		public double CircularThickness
		{
			get { return (double)GetValue(CircularThicknessProperty); }
			set { SetValue(CircularThicknessProperty, value); }
		}

		// Using a DependencyProperty as the backing store for CircularThickness.  This enables animation, styling, binding, etc...
		public static readonly DependencyProperty CircularThicknessProperty =
			DependencyProperty.Register("CircularThickness", typeof(double), typeof(ColorLightControl), new PropertyMetadata(0.0));

		public double LightRadius
		{
			get => (double)GetValue(LightRadiusProperty);
			set => SetValue(LightRadiusProperty, value);
		}

		public static readonly DependencyProperty LightRadiusProperty =
			DependencyProperty.Register("LightRadius", typeof(double), typeof(ColorLightControl), new PropertyMetadata(1.0));

		public int State
		{
			get => (int)GetValue(StateProperty);
			set => SetValue(StateProperty, value);
		}

		public static readonly DependencyProperty StateProperty =
			DependencyProperty.Register("State", typeof(int), typeof(ColorLightControl), new PropertyMetadata(0, OnStateChanged));

		private static void OnStateChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
		{
			if (d is ColorLightControl light)
			{
				if (e.NewValue is int index)
				{
					if (light.ColorList.Count > index)
					{
						light.CurrentLight = light.ColorList.ElementAt(index);
						return;
					}
				}

				light.CurrentLight = Brushes.LightGray;
			}
		}

		public IList<Brush> ColorList
		{
			get => (IList<Brush>)GetValue(ColorListProperty);
			set => SetValue(ColorListProperty, value);
		}

		public static readonly DependencyProperty ColorListProperty =
			DependencyProperty.Register("ColorList", typeof(IList<Brush>), typeof(ColorLightControl), new PropertyMetadata(new List<Brush>() { Brushes.LightGray, Brushes.Lime }, OnColorListChanged));

		private static void OnColorListChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
		{
			if (d is ColorLightControl light)
			{
				if (e.NewValue is IList<Brush> colorList && colorList != null)
				{
					if (colorList.Count > light.State)
					{
						light.CurrentLight = colorList.ElementAt(light.State);
						return;
					}
				}
				light.CurrentLight = Brushes.LightGray;
			}
		}

		public Brush CurrentLight
		{
			get => (Brush)GetValue(CurrentLightProperty);
			set => SetValue(CurrentLightProperty, value);
		}

		public static readonly DependencyProperty CurrentLightProperty =
			DependencyProperty.Register("CurrentLight", typeof(Brush), typeof(ColorLightControl), new PropertyMetadata(Brushes.LightGray));
	}
}

[Style.xaml]

<Style x:Key="CircularLight" TargetType="local:ColorLightControl">
	<Setter Property="Template">
		<Setter.Value>
			<ControlTemplate TargetType="local:ColorLightControl">
				<Grid Background="Transparent" Name="grd"
					  Width="{TemplateBinding Width}"
					  Height="{TemplateBinding Height}"
					  >
					<Grid.Resources>
						<Style TargetType="{x:Type Ellipse}">
							<Setter Property="Stretch" Value="Uniform"/>
							<Setter Property="HorizontalAlignment" Value="{Binding RelativeSource={RelativeSource AncestorType=Control}, Path=HorizontalContentAlignment}"/>
							<Setter Property="VerticalAlignment"  Value="{Binding RelativeSource={RelativeSource AncestorType=Control}, Path=VerticalContentAlignment}"/>
						</Style>
					</Grid.Resources>
					<Ellipse x:Name="LedBorder"
							 Fill="{TemplateBinding CurrentLight}"
							 Width="{TemplateBinding LightRadius}"
							 Height="{TemplateBinding LightRadius}"
							 Stroke="{Binding RelativeSource={RelativeSource AncestorType=Control}, Path=BorderBrush}"
							 StrokeThickness="{TemplateBinding CircularThickness}"
							 />
					<Ellipse Width="{TemplateBinding LightRadius}"
							 Height="{TemplateBinding LightRadius}"
							 >
						<Ellipse.Fill>
							<RadialGradientBrush Center="0 0" RadiusX="1.2" RadiusY="1.2">
								<GradientStop Color="Transparent" Offset="0"/>
								<GradientStop Color="#AA000000" Offset="1.2"/>
							</RadialGradientBrush>
						</Ellipse.Fill>
					</Ellipse>
					<Ellipse x:Name="CenterGlow" Stretch="Uniform"
							 Width="{TemplateBinding LightRadius}"
							 Height="{TemplateBinding LightRadius}"
							 >
						<Ellipse.Fill>
							<RadialGradientBrush RadiusX="0.4" RadiusY="0.4">
								<GradientStop Color="White" Offset="0"/>
								<GradientStop Color="Transparent" Offset="1"/>
							</RadialGradientBrush>
						</Ellipse.Fill>
					</Ellipse>
					<Ellipse x:Name="CornerLight"
							 Width="{TemplateBinding LightRadius}"
							 Height="{TemplateBinding LightRadius}"
							 >
						<Ellipse.Fill>
							<RadialGradientBrush Center="0.3 0.3" RadiusX="0.3" RadiusY="0.3">
								<GradientStop Color="White" Offset="0"/>
								<GradientStop Color="Transparent" Offset="1"/>
							</RadialGradientBrush>
						</Ellipse.Fill>
					</Ellipse>
				</Grid>
			</ControlTemplate>
		</Setter.Value>
	</Setter>
</Style>

 

[MainWindow.xaml]

<Window x:Class="ExeHico.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:cus="clr-namespace:Hico.Desktop.CustomControl;assembly=Hico.Desktop"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800"
		DataContext="{StaticResource MainVM}"
		>
    <Grid>
		<Grid.Resources>
			<Style TargetType="{x:Type Button}">
				<Setter Property="Width" Value="100"/>
				<Setter Property="Height" Value="60"/>
			</Style>
			<x:Array x:Key="TEST" Type="{x:Type SolidColorBrush}">
				<SolidColorBrush Color="LightGray"/>
				<SolidColorBrush Color="Lime"/>
				<SolidColorBrush Color="Green"/>
				<SolidColorBrush Color="Blue"/>
				<SolidColorBrush Color="Red"/>
			</x:Array>
		</Grid.Resources>
		<cus:ColorLightControl DockPanel.Dock="Top" State="0"
							   Style="{StaticResource CircularLight}"
							   ColorList="{StaticResource TEST}"
							   Margin="30"
							   />
	</Grid>
</Window>

[결과]