Bind user control value and add padding

Question

I have two questions.

1: I have the second rectangle's size bound the first rectangle. How can I add additional padding to the size of the rectangle? For example

Width="{Binding Path=Height + 5,...

That would apply to both the width and height properties. So the rectangle borders the previous one.

2: Expose the color property 'green' so i can change the color each instance i create of this user control.

<UserControl x:Class="WpfApplication1.VNode"
             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:WpfApplication1"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Canvas VerticalAlignment="Center" HorizontalAlignment="Center">
        <Rectangle Name="Base" Fill="Green" Width="50" Height="50"/>
        <Rectangle Name="Highlight"  
                   Height="{Binding Path=Width, ElementName=Base, UpdateSourceTrigger=PropertyChanged}"
                   Width="{Binding Path=Height, ElementName=Base, UpdateSourceTrigger=PropertyChanged}" 
                   Fill="Transparent"
                   Stroke="White"
                   StrokeThickness="2">
        </Rectangle>
    </Canvas>
</UserControl>

Sean Beanland · Accepted Answer · 2015-12-15T15:21:37.630

You can add a converter to the Highlight rectangle's Height and Width bindings:

public class AddHeightConverter : System.Windows.Data.IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (double)value + 5.0;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return System.Windows.Data.Binding.DoNothing;
    }
}

You reference in XAML like so (assuming you've declared a namespace called local):

<UserControl.Resources>
    <local:AddHeightConverter x:Key="AddHeightConverter" />
</UserControl.Resources>

Add it to your bindings like so:

<Canvas VerticalAlignment="Center" HorizontalAlignment="Center">
    <Rectangle Name="Base" Fill="Green" Width="50" Height="50"/>
    <Rectangle Name="Highlight"  
               Height="{Binding Path=Width, Converter={StaticResource AddHeightConverter}, ElementName=Base, UpdateSourceTrigger=PropertyChanged}"
               Width="{Binding Path=Height, Converter={StaticResource AddHeightConverter}, ElementName=Base, UpdateSourceTrigger=PropertyChanged}" 
               Fill="Transparent"
               Stroke="White"
               StrokeThickness="2">
    </Rectangle>
</Canvas>

You can bind the first rectangle's Fill to a property. If you want consumers of your UserControl to be able to bind to the color, add it as a `DependencyProperty' to the UserControl:

public static readonly DependencyProperty FillProperty = DependencyProperty.Register("Fill",    typeof(Brush), typeof(VNode), new PropertyMetadata(Brushes.Green));    

public Brush Fill
{
    get { return (Brush)GetValue(FillProperty); }
    set { SetValue(FillProperty, value); }
}

Then bind the Rectangle's Fill property to this DependencyProperty

This is what I'd recommend too, however I took it one step further one day and created a [MathConverter](https://rachel53461.wordpress.com/tag/math-converter/) that can be reused for any kind of binding like this. For example, `Height={Binding ElementName=Base, Path=Height, Converter={StaticResource MathConverter}, ConverterParameter=@VALUE+5}` — Rachel, Dec 15 '15 at 15:17
@Rachel the info you provided is a great idea and ill be sure to look into that. Thank you — JokerMartini, Dec 15 '15 at 15:25
@JokerMartini, check out this answer http://stackoverflow.com/questions/1093429/add-a-user-control-to-a-wpf-window — Sean Beanland, Dec 15 '15 at 15:32
How can i make the Green fill color available for me to change through code, 'VNode color:red' — JokerMartini, Dec 15 '15 at 15:46
@JokerMartini from your MainWindow, you can reference the `DependencyProperty` (Fill, not FillProperty, going off my example above) just like any other property. — Sean Beanland, Dec 15 '15 at 15:52

Bind user control value and add padding

1 Answers1