Unwanted red border around a WriteableBitmap

Question

I'm playing around with fractals as a private project to practice (to leave beginner level^^). I have a canvas holding an image, which is bound to a WriteableBitmap:

<Canvas Grid.Column="1" Grid.ColumnSpan="1" Grid.Row="1" Grid.RowSpan="1" Name="RenderCanvas" Background="LightCyan">
  <Image Name="RenderImage" Source="{Binding Path=RenderBitmap}" Stretch="Fill" Height="{Binding Path=BitmapHeight, Mode=OneWayToSource}" Width="{Binding Path=BitmapWidth, Mode=OneWayToSource}"/>
</Canvas>

My viewmodel class currently looks like this:

public class MainViewModel : ViewModelBase  
{
  #region private fields
  private int _bitmapheight;
  private int _bitmapwidth;
  private WriteableBitmap _renderbitmap = new WriteableBitmap(500, 500, 96, 96, PixelFormats.Bgr32, null);
  #endregion

  #region public properties
  public int BitmapHeight
  {
  get { return _bitmapheight; }
  set { SetProperty<int>(ref _bitmapheight, value); }
  }
  public int BitmapWidth
  {
    get { return _bitmapwidth; }
    set { SetProperty<int>(ref _bitmapwidth, value); }
  }
  public WriteableBitmap RenderBitmap
  {
    get { return _renderbitmap; }
    set { SetProperty<WriteableBitmap>(ref _renderbitmap, value); }
  }
  #endregion

  #region Constructors
  public MainViewModel ()
  {
  }
  #endregion

  #region public Methods
  public void updateRenderBitmap(int size, int destX, int destY)
  {
    Int32Rect rect = new Int32Rect(0, 0, size, size);
    byte[] sourcebuffer = new byte[size * size * 4];
    for(int currentbyte = 0; currentbyte < sourcebuffer.Length;   currentbyte++)
    {
      sourcebuffer[currentbyte] = 255;
    }
    int stride = size * 4;
    _renderbitmap.WritePixels(rect, sourcebuffer, stride, destX, destY);
  }
  #endregion
}

So just to test if everything works so far I called the update method from the MainWindow.xaml.cs:

  public MainWindow()
  {
    InitializeComponent();
    MainViewModel vm = (MainViewModel)this.DataContext;
    vm.updateRenderBitmap(250, 125, 125);
  }

Turns out, everything works as expected, I have my Canvas with the set Background, inside of it a black square from the WriteableBitmap, and within that the white square I updated:

However, there are two questions I have so far:

1. As you can see, there is a red border around the image. I don't really know where it comes from, but I want to remove it.
2. Currently, I initialize the _renderbitmap with a fixed set number. However, I want it to have the size of the RenderImage, which is bound to BitmapWidth and BitmapHeight. But I can't use those apparently, because they are not static - if I make them static I can use them, but they still have the value 0 during the instantiation.

Answer 1

The reason for the red border is validation errors, resulting from the non-working Bindings

Width="{Binding Path=BitmapWidth, Mode=OneWayToSource}"

and

Height="{Binding Path=BitmapHeight, Mode=OneWayToSource}" 

These Bindings produce errors because the values of the Width and Height properties are double.NaN when they aren't set explicitly.

You shouldn't have these Bindings at all. Instead of having a view model that knows about the rendered size of an image, it would be better to pass logical coordinates (e.g. in the interval 0 .. 1) to the view model.