WPF Set user control dependency properties

Question

Below a piece of my user control:

<UserControl x:Class="WpfApplication1.Controls.CircularProgressBar"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Background="Transparent"
             Height="{Binding ControlHeightProperty}"
             Width="{Binding ControlWidthProperty}">

  <UserControl.Resources>
    <SolidColorBrush x:Key="progressCirclesColor" Color="#FF2E6187" />
  </UserControl.Resources>

    <Viewbox Width="{Binding ControlWidthProperty}" Height="{Binding ControlHeightProperty}" HorizontalAlignment="Center" VerticalAlignment="Center">
    <!-- other objects -->
    </Viewbox>
</UserControl>

and its code-behind with my dependency properties:

public partial class CircularProgressBar
{
    public static readonly DependencyProperty ControlHeightProperty =
        DependencyProperty.Register("ControlHeight", typeof(int), typeof(CircularProgressBar), new UIPropertyMetadata(45));

    public static readonly DependencyProperty ControlWidthProperty =
        DependencyProperty.Register("ControlWidth", typeof(int), typeof(CircularProgressBar), new UIPropertyMetadata(45));

    public int ControlHeight
    {
        get { return (int)GetValue(ControlHeightProperty); }
        set { SetValue(ControlHeightProperty, value); }
    }

    public int ControlWidth
    {
        get { return (int)GetValue(ControlWidthProperty); }
        set { SetValue(ControlWidthProperty, value); }
    }
}

Then from my wpf main window:

    <ctr:CircularProgressBar x:Name="progressBar" Grid.ZIndex="3"                             
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center"
                         ControlHeight="100"
                         ControlWidth="100"/>   

What I am trying to do is set width and height for my user control from my main window. In above example I am trying to set user control height and width to 100 through dependency properties ControlHeight and ControlWidth respectively.

If from my main windows ControlHeight and ControlWidth is not specified, I want user control height and width take as default value of 45.

But above example is not working for me. What am I doing wrong?

UPDATE WORKING : As Clemens suggested, I have changed the code into the following:

<UserControl x:Class="WpfApplication1.Controls.CircularProgressBar"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Background="Transparent">

  <UserControl.Resources>
    <SolidColorBrush x:Key="progressCirclesColor" Color="#FF2E6187" />
  </UserControl.Resources>

    <Viewbox HorizontalAlignment="Center" VerticalAlignment="Center">
    <!-- other objects -->
    </Viewbox>
</UserControl>

In code-behind dependency properties ControlHeightProperty and ControlWidthProperty are not needed.

Finally in my wpf window, setting typical height and width properties are enough:

    <ctr:CircularProgressBar x:Name="progressBar" Grid.ZIndex="3"                             
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center"
                         Height="100"
                         Width="100"/>   

Answer 1

You'll have to bind to the actual property, not its identifier field, ie ControlWidth instead of ControlWidthProperty .

Besides that, you also have to set a binding source, which in this case is the UserControl instance, referenced either by RelativeSource Self at the UserControl level, or RelativeSource AncestorType=UserControl at any level below.

<UserControl Width="{Binding ControlWidth, RelativeSource={RelativeSource Self}}" ...>

<Viewbox Width="{Binding ControlWidth,
                 RelativeSource={RelativeSource AncestorType=UserControl}}" ...>

Note however that none of these bindings really make sense. There is no point in adding a ControlWidth property when there already is a Width .

At the Viewbox it isn't necessary to bind the Width or Height because the UserControl will already resize it appropriately.

So in fact you don't need any additional property. Your UserControl's XAML should look like shown below, without explicitly setting any Width or Height.

<UserControl x:Class="WpfApplication1.Controls.CircularProgressBar"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Background="Transparent">
    <UserControl.Resources>
        <SolidColorBrush x:Key="progressCirclesColor" Color="#FF2E6187" />
    </UserControl.Resources>
    <Viewbox>
        <!-- other objects -->
    </Viewbox>
</UserControl>

When you use that control somewhere in your MainWindow, instead of setting ControlWidth and ControlHeight, just set Width and Height.