Change the properties of a local class that draws on DrawingVisual

Question

I have defined a Drawing class that derives from the FrameworkElement. I'm using this to draw on the DrawingVisual. In my XAML I have included this local class.

Now my question is how can I bind the properties of this class to a variable or how can I even change them?

For example, let's say I want to change the width property. I included a Button on my XAML and tried to change the width but nothing happens.

All the required code is below:

<Window x:Class="Geom.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:geom="clr-namespace:Geom"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="100"/>
        </Grid.RowDefinitions>
        <Canvas Width="0" Height="0">
            <geom:Drawing x:Name="Drawing" />
        </Canvas>
        <Button Grid.Row="1" Content="Change" Click="ButtonBase_OnClick"/>
    </Grid>
</Window>


public class Drawing : FrameworkElement
{
    private readonly VisualCollection _visuals;
    public int width { get; set; }

    public Drawing()
    {
        RenderOptions.SetEdgeMode(this, EdgeMode.Aliased);
        _visuals = new VisualCollection(this);

        var geometryGroup = new GeometryGroup();
        width = 50;
        var depth = 50;
        var x = 50;
        var y = 50;
        var rect = new Rect(x, y , width, depth);
        var rectGeom = new RectangleGeometry(rect);
        geometryGroup.Children.Add(rectGeom);
        geometryGroup.Freeze();

        var drawingVisual = new DrawingVisual();
        using (var dc = drawingVisual.RenderOpen())
        {
            dc.DrawGeometry(Brushes.Blue, null, geometryGroup);
        }
        _visuals.Add(drawingVisual);
    }

    protected override Visual GetVisualChild(int index)
    {
        return _visuals[0];
    }

    protected override int VisualChildrenCount
    {
        get
        {
            return 1;
        }
    }
}


public partial class MainWindow
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
    {
        Drawing.width = 10;
    }
}

Answer 1

For DrawingVisual to refresh you have to re-draw visual on it's drawingContext with new values.

So, in case you set width you have to re-draw visual on it's drawing context. Change your code to this:

public class Drawing : FrameworkElement
{
    private readonly VisualCollection _visuals;

    private int width;
    public int VisualWidth
    {
        get { return width; }
        set
        {
            width = value;
            RefreshDrawing();
        }
    }

    public Drawing()
    {
        RenderOptions.SetEdgeMode(this, EdgeMode.Aliased);
        _visuals = new VisualCollection(this);

        var geometryGroup = new GeometryGroup();
        width = 50;
        DrawingVisual drawingVisual = new DrawingVisual();
        RefreshDrawing(drawingVisual);
        _visuals.Add(drawingVisual);
    }

    private void RefreshDrawing(DrawingVisual drawingVisual = null)
    {
        var geometryGroup = new GeometryGroup();
        var rect = new Rect(50, 50, VisualWidth, 50);
        var rectGeom = new RectangleGeometry(rect);
        geometryGroup.Children.Add(rectGeom);
        geometryGroup.Freeze();

        drawingVisual = drawingVisual ?? (DrawingVisual)GetVisualChild(0);
        using (var dc = drawingVisual.RenderOpen())
        {
            dc.DrawGeometry(Brushes.Blue, null, geometryGroup);
        }
    }

    protected override Visual GetVisualChild(int index)
    {
        return _visuals[0];
    }

    protected override int VisualChildrenCount
    {
        get
        {
            return 1;
        }
    }
}

Set VisualWidth from button click handler:

Drawing.VisualWidth = 10;