WPF UserControl Properties

Question

In the code below, I have a UserControl that contains an ellipse and a textblock. I'd like to create a reusable control that I can bind to that allows me to set the text based on a string, and changes the fill color between Red/Green based on a boolean.

I can do this now by digging deep into the markup and using some complex binding, but I want to reuse this control in a list and it seemed easier to create a control for the purpose. However, I am not sure where to go next and if I should be creating dependency-properties that tie to the values for Fill and Text, or what.

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    x:Class="Herp.Derp.View.DeliveryStatusIndicator"
    x:Name="UserControl"
    d:DesignWidth="91" d:DesignHeight="35">

    <Grid x:Name="LayoutRoot">
        <StackPanel  Orientation="Horizontal">
            <Ellipse Width="35" Height="35" Fill="Green">
                <Ellipse.OpacityMask>
                    <VisualBrush Stretch="Fill" Visual="{StaticResource appbar_location_circle}"/>
                </Ellipse.OpacityMask>
            </Ellipse>
            <TextBlock Style="{StaticResource Heading2}" 
                       VerticalAlignment="Center" Margin="3,0,0,0">
                 <Run Text="FRONT"/>
            </TextBlock>
        </StackPanel>
    </Grid>
</UserControl>

Answer 1

Here's what I got for a working solution:

public partial class DeliveryStatusIndicator : UserControl
{
    public DeliveryStatusIndicator()
    {
            InitializeComponent();          
    }

    public static readonly DependencyProperty DeliveryDescriptionProperty = DependencyProperty.Register("DeliveryDescription", typeof(string), typeof(DeliveryStatusIndicator), new FrameworkPropertyMetadata("Default", DescriptionChangedEventHandler));

     private static void DescriptionChangedEventHandler(DependencyObject d, DependencyPropertyChangedEventArgs e)
     {
         ((DeliveryStatusIndicator)d).Desc.Text = (string)e.NewValue;
     }

     public string DeliveryDescription
     {
         get { return (string)GetValue(DeliveryDescriptionProperty); }
         set
         {
             SetValue(DeliveryDescriptionProperty, value);
         }

     }

     public static readonly DependencyProperty DeliveryStatusProperty = DependencyProperty.Register("DeliveryStatus", typeof(bool), typeof(DeliveryStatusIndicator), new FrameworkPropertyMetadata(false, StatusChangedEventHandler));

     private static void StatusChangedEventHandler(DependencyObject d, DependencyPropertyChangedEventArgs e)
     {
         ((DeliveryStatusIndicator)d).Indicator.Fill = (bool)e.NewValue ? new SolidColorBrush(Colors.Green) : new SolidColorBrush(Colors.Red);
     }

     public bool DeliveryStatus
     {
         get { return (bool)GetValue(DeliveryStatusProperty); }
         set
         {
             SetValue(DeliveryStatusProperty, value);
         }
     }

}

Answer 2

here how you can achieve this

UserControl

/// <summary>
/// Interaction logic for UserControl1.xaml
/// </summary>
public partial class UserControl1 : UserControl
{
    public UserControl1()
    {
        InitializeComponent();
    }
       public static readonly DependencyProperty FrontTextProperty = DependencyProperty.Register( "FrontText", typeof(string),typeof(UserControl1), new FrameworkPropertyMetadata(string.Empty));
    public string FrontText
    {
        get { return (string)GetValue(FrontTextProperty); }
        set {
            SetValue(FrontTextProperty, value);
            frontBlock.Text = value;  
        }

    }
    public static readonly DependencyProperty EllipseStateProperty = DependencyProperty.Register("EllipseState", typeof(bool), typeof(UserControl1), new FrameworkPropertyMetadata(false));
    public bool EllipseState
    {
        get { return (bool)GetValue(EllipseStateProperty); }
        set
        {
            SetValue(EllipseStateProperty, value);
            if (value)
            {
                ellipse.Fill  = new SolidColorBrush( Colors.Green);  
            }
            else
            {
                ellipse.Fill = new SolidColorBrush(Colors.Red);
            }

        }

    }


}

MainWindow

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication1" x:Class="WpfApplication1.MainWindow"
        Title="MainWindow" Height="350" Width="525">
    <Grid>

        <local:UserControl1 EllipseState="{Binding yourProperty }"/>
        <CheckBox Content="CheckBox" HorizontalAlignment="Left" Margin="207,94,0,0" VerticalAlignment="Top"/>

    </Grid>
</Window>

Answer 3

Yes, to create properties that "parent" XAML can assign bindings to, you need to create aDependencyProperty for each field that you want to bind to.

You would then bind your user control xaml to the backing property for the DP.