c# wpf refresh a canvas with drawn rectangles

Question

this may be a stupid question to you, but I have been searching for hours to get an answer to that.

I have a Canvas in my main Window with some Rectangles. With a TextBox and a Button, I want to modify the width of the Rectangles (and the Canvas.)

That's my wpf code:

<Canvas Name="IV" Width="{Binding Path=Länge}" Height="280" VerticalAlignment="Top" Margin="443,22,443.5,0">
        <Rectangle Canvas.Left="0" Canvas.Top="157.5" Width="{Binding Path=Länge}" Height="136" Name="rect3704" Fill="#FF999999" StrokeThickness="0.26458332"/>
        <Rectangle Canvas.Left="0" Canvas.Top="20.5" Width="{Binding Path=Länge}" Height="136" Name="rect37047" Fill="#FF999999" StrokeThickness="0.26458332"/>
        <Rectangle Canvas.Left="0" Canvas.Top="294.5" Width="{Binding Path=Länge}" Height="2.5" Name="rect3721" Fill="#FF999999" StrokeThickness="0.26458332"/>
        <Rectangle Canvas.Left="0" Canvas.Top="17" Width="{Binding Path=Länge}" Height="2.5" Name="rect37217" Fill="#FF999999" StrokeThickness="0.26458332"/>
        <Rectangle Canvas.Left="0" Canvas.Top="293.5" Width="{Binding Path=Länge}" Height="1" Name="rect3738" Fill="#FF333333" StrokeThickness="0.26458332"/>
        <Rectangle Canvas.Left="0" Canvas.Top="156.5" Width="{Binding Path=Länge}" Height="1" Name="rect37386" Fill="#FF333333" StrokeThickness="0.26458332"/>
        <Rectangle Canvas.Left="0" Canvas.Top="19.5" Width="{Binding Path=Länge}" Height="1" Name="rect373867" Fill="#FF333333" StrokeThickness="0.26458332"/>
    </Canvas>

My c# code is that

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = this;

    }
    public int Länge { get; set; } = 50;



    public void button_Click(object sender, RoutedEventArgs e)
    {
        int Length = Convert.ToInt32(textBox.Text);
        Länge = Length;
        IV.InvalidateVisual();
        IV.InvalidateMeasure();
        IV.UpdateLayout();
        Action emptyDelegate = delegate { };
        IV.Dispatcher.Invoke(emptyDelegate, DispatcherPriority.Render);
        MessageBox.Show(Convert.ToString(Länge));


    }
}

If I modify the start value where I declare the variable 'Länge', the rectangles take the specified width. But the update via button doesn't do anything except for the messagebox. As you can see, I tried some soloutings like Dispatcher.Invoke or canvas.InvalidateVisual() etc, but none of that works.. Sorry, new to C#, only learn by doing.

Answer 1

Use a DependencyPropety and it should work:

    public int Länge
    {
        get { return (int)GetValue(LängeProperty); }
        set { SetValue(LängeProperty, value); }
    }
    public static readonly DependencyProperty LängeProperty =
      DependencyProperty.Register(
      "Länge ", typeof(int), typeof(MainWindow), new PropertyMetadata(50));

There is no need to Invalidate measure or other stuff:

public void button_Click(object sender, RoutedEventArgs e)
{
    int Length = Convert.ToInt32(textBox.Text);
    Länge = Length;
    MessageBox.Show(Convert.ToString(Länge));
}

Also, note that you should whether set the Binding ElementName to the current control or set the proper DataContext. Something like this:

Width="{Binding ElementName=window, Path=Länge}"

in which "window" is the name of the MainWindow, in MainWindow.Xaml.