0

I am writing a user control that simulates an LED. The LED currently just has two states, but the goal is to have four (on, off, disconnected from signal, disabled). I want to be able to set the control property State to match the possible states as follows.

<local:LEDControl State="ON" HorizontalAlignment="Left" Height="100" Margin="374,131,0,0" VerticalAlignment="Top" Width="100"/>

Setting this property should set the color of the LED too some predefined colors:

 public partial class LEDControl : UserControl
    {
        private (string ON, string OFF) state_colors = ("#5DC211", "#FF0808");
        private string _state; 

        public string State
        {
            get
            {
                return _state; 
            }
            set
            {
                if (value == "ON")
                {
                    _state = state_colors.ON;
                } 
                else //should check for valid input
                {
                    _state = state_colors.OFF; 
                }
            }
        }
        public LEDControl()
        {
            InitializeComponent();
            this.DataContext = this;
            State = "OFF";
        }

    }

And here is the xaml:

<UserControl x:Class="SV3eStatusWindow.LEDControl"
             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:SV3eStatusWindow"
             mc:Ignorable="d" 
             d:DesignHeight="45" Width="44.628"
             >
    <Grid x:Name ="LayoutRoot" >
        <Ellipse Fill="{Binding State}" HorizontalAlignment="Center" Height="35" Stroke="Black" VerticalAlignment="Center" Width="35"/>
    </Grid>
</UserControl>

I get an error saying I can only bind to a dependency property. But I am confused about how to write a dependency property to have the get and set functionality I have above.

I would like to know how to do what I am trying to do above for educational purposes. However, I acknowledge that this might not be the best design because I am new to WPF and I am open to suggestion.

Ashton Iyzik Carter
  • 1
  • 1
  • https://learn.microsoft.com/en-us/dotnet/desktop/wpf/properties/custom-dependency-properties?view=netdesktop-6.0 – Clemens May 10 '22 at 12:47
  • Assigning `_state = state_colors.ON` and `OFF` makes no sense, even for a regular CLR property. The backing field of a property should store the assigned `value`. If you need some kind of value conversion for a UI element, use data binding with a Binding Converter, liḱe `Fill="{Binding State, Converter={StaticResource StateToBrushConverter}}"`, where StateToBrushConverter is a reference to a class in the Resources of the view that implements IValueConverter and converts from string to System.Windows.Media.Brush. – Clemens May 10 '22 at 12:50
  • See https://learn.microsoft.com/en-us/dotnet/desktop/wpf/data/?view=netdesktop-6.0 – Clemens May 10 '22 at 12:53
  • You may also consider using an `enum` type for the State property. And as an alternative to a Binding Converter, you could also use DataTriggers in a Style for the Ellipse. – Clemens May 10 '22 at 13:06

0 Answers0