How do I change the width of a UserControl that is added to a canvas in C# using code-behind?

Question

Using Visual Studion 2015, C# Metro Style application Working only in Code Behind.

Problem: I have added a userControl to a canvas. I want to change width of the control.

The canvas provides two functions to move the UserControls: Canvas.SetLeft, Canvas.SetTop

These two functions work correctly, so I know its possible to access the controls properties. I am trying to access the width property for my UserControl (StickyNote) to size the control on the Canvas. StickyNote is set to 200x200 size by default, when it is added to the canvas.

Control_ManipulationDelta is called when I move the mouse cursor over the UserControl on the canvas. This code is in my Main.xaml page.

private void Control_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    // StickyNote is my custom class that is added to the canvas
    StickyNote myControl2 = (StickyNote)sender;

    // Calculating the new location of the mouse
    xPoint = xPoint + e.Delta.Translation.X;
    yPoint = yPoint + e.Delta.Translation.Y;

    // Setting the controls left and top based on mouse position
    Canvas.SetLeft(myControl2, Canvas.GetLeft(myControl2) + xPoint);
    Canvas.SetTop(myControl2, Canvas.GetTop(myControl2) + yPoint);

    // Resetting our points
    xPoint = 0;
    yPoint = 0;

    // Setting Width - works to send values to custom control
    // But the canvas fails to update.
    myControl2.SetValue(WidthProperty,  800); // 500 to 800 as test. 
}

The StickyNote is a UserControl that has a text field on the XAML page. When SetValue for WidthProperty is called it steps into the StickNote code and update the Width to 800. Even though the Width parameter is set to 800, it does not change on the canvas. It shows the change in the StickyNote and in ManipulationDelta. It is a persistent change and shows up on the next call to ManipulationDelta. The canvas does not update the text field to the new size.

// here is the code that I used to setup my DependencyObject    
public  partial class StickyNote : UserControl, IPlugin, INotifyPropertyChanged
{
    // Constructor
    // Functions

    // Update control property width
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new   PropertyChangedEventArgs(propertyName));
        }
    }

    private static void OnWidthPropertyChanged(DependencyObject                    
                                  DependencyObject,  
                                  DependencyPropertyChangedEventArgs e)
   {
        StickyNote myUserControl = dependencyObject as StickyNote;
        myUserControl.OnPropertyChanged("Width");
        myUserControl.OnWidthPropertyChanged(e);
   }

   private void OnWidthPropertyChanged(DependencyPropertyChangedEventArgs e)
   { 
       Width = (double)e.NewValue;           
   }
}

Hoping someone can either show me a code sample that changes the width of custom controls that is added to a canvas, or point me in the right direction. Thank you, Ray

Answer 1

Your text field may have absolute Width of 300 , for example. If so, it does not matter whether you resize outer container or not. It will always have its Width set to 300 . If you want your text field to change width when you resize UserControl containing it ( StickyNote ), do not specify any width property ( MinWidth , MaxWidth , Width ) on text field and set its HorizontalAlignment to Stretch .

Answer 2

The solution was to fix my XAML. I have hard coded sizes in the Width and Height. Also need to look at the Min Width and Min Height too. These need to be bound to the properties that I am setting using the Dependency Object. Hope this helps anyone else that might be facing similar issues.