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 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 2

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

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

Answer 3

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);
         }
     }

}