Drawing on a canvas using WriteableBitmap, C# WPF

Question

hope you can help me. I'm trying to use the WriteableBitmap class to draw points on my canvas but nothing shows up on on execution I've had a look at similar issues but nothing seems to work. Here's my code;

<Window x:Class="DASP_WorkstationWPF.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:DASP_WorkstationWPF"
    mc:Ignorable="d"
    Title="" Height="900" Width="1440" Background="PaleGoldenrod" >

<Canvas>
    <Canvas.Background>
        <SolidColorBrush Color="Black" Opacity="0"/>
    </Canvas.Background>

    <Label x:Name="labela" Content="Amplitude" Canvas.Left="70" Canvas.Top="60"/>
    <Label x:Name="labelf" Content="Frequency" Canvas.Left="70" Canvas.Top="90"/>
    <Label x:Name="labelp" Content="Phase" Canvas.Left="70" Canvas.Top="120"/>

    <Label x:Name="label0" Content="Sine Wave 1" Canvas.Left="170" Canvas.Top="36"/>
    <TextBox x:Name="amplitude0" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="100" Canvas.Left="160" Canvas.Top="64" />
    <TextBox x:Name="frequency0" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="100" Canvas.Left="160" Canvas.Top="94" />
    <TextBox x:Name="phase0" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="100" Canvas.Left="160" Canvas.Top="124" />

    <Label x:Name="label1" Content="Sine Wave 2" Canvas.Left="290" Canvas.Top="36"/>
    <TextBox x:Name="amplitude1" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="100" Canvas.Left="280" Canvas.Top="64" />
    <TextBox x:Name="frequency1" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="100" Canvas.Left="280" Canvas.Top="94" />
    <TextBox x:Name="phase1" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="100" Canvas.Left="280" Canvas.Top="124" />

    <Label x:Name="label2" Content="Sine Wave 3" Canvas.Left="410" Canvas.Top="36"/>
    <TextBox x:Name="amplitude2" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="100" Canvas.Left="400" Canvas.Top="64" />
    <TextBox x:Name="frequency2" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="100" Canvas.Left="400" Canvas.Top="94" />
    <TextBox x:Name="phase2" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="100" Canvas.Left="400" Canvas.Top="124" />

    <Label x:Name="label3" Content="Sine Wave 4" Canvas.Left="530" Canvas.Top="36"/>
    <TextBox x:Name="amplitude3" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="100" Canvas.Left="520" Canvas.Top="64" />
    <TextBox x:Name="frequency3" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="100" Canvas.Left="520" Canvas.Top="94" />
    <TextBox x:Name="phase3" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="100" Canvas.Left="520" Canvas.Top="124" />

    <Label x:Name="label4" Content="Sine Wave 5" Canvas.Left="650" Canvas.Top="36"/>
    <TextBox x:Name="amplitude4" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="100" Canvas.Left="640" Canvas.Top="64" />
    <TextBox x:Name="frequency4" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="100" Canvas.Left="640" Canvas.Top="94" />
    <TextBox x:Name="phase4" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="100" Canvas.Left="640" Canvas.Top="124" />

    <Label x:Name="label5" Content="Sine Wave 6" Canvas.Left="770" Canvas.Top="36"/>
    <TextBox x:Name="amplitude5" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="100" Canvas.Left="760" Canvas.Top="64" />
    <TextBox x:Name="frequency5" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="100" Canvas.Left="760" Canvas.Top="94" />
    <TextBox x:Name="phase5" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="100" Canvas.Left="760" Canvas.Top="124" />

    <Label x:Name="label6" Content="Sine Wave 7" Canvas.Left="890" Canvas.Top="36"/>
    <TextBox x:Name="amplitude6" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="100" Canvas.Left="880" Canvas.Top="64" />
    <TextBox x:Name="frequency6" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="100" Canvas.Left="880" Canvas.Top="94" />
    <TextBox x:Name="phase6" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="100" Canvas.Left="880" Canvas.Top="124" />


    <Label x:Name="label7" Content="Sine Wave 8" Canvas.Left="1010" Canvas.Top="36"/>
    <TextBox x:Name="amplitude7" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="100" Canvas.Left="1000" Canvas.Top="64" />
    <TextBox x:Name="frequency7" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="100" Canvas.Left="1000" Canvas.Top="94" />
    <TextBox x:Name="phase7" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="100" Canvas.Left="1000" Canvas.Top="124" />

    <Label x:Name="label8" Content="Sine Wave 9" Canvas.Left="1130" Canvas.Top="36"/>
    <TextBox x:Name="amplitude8" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="100" Canvas.Left="1120" Canvas.Top="64" />
    <TextBox x:Name="frequency8" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="100" Canvas.Left="1120" Canvas.Top="94" />
    <TextBox x:Name="phase8" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="100" Canvas.Left="1120" Canvas.Top="124" />

    <Label x:Name="label9" Content="Sine Wave 10" Canvas.Left="1250" Canvas.Top="36"/>
    <TextBox x:Name="amplitude9" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="100" Canvas.Left="1240" Canvas.Top="64" />
    <TextBox x:Name="frequency9" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="100" Canvas.Left="1240" Canvas.Top="94" />
    <TextBox x:Name="phase9" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="100" Canvas.Left="1240" Canvas.Top="124" />

    <Button x:Name="plot" Content="Plot Signal" Canvas.Left="160" Canvas.Top="185" Width="134" Height="26" Click="plot_Click"/>
    <Button x:Name="save" Content="Save Preset" Canvas.Left="330" Canvas.Top="185" Width="134" Height="26"/>
    <Label x:Name="label10" Content="Preset Signals" Canvas.Left="600" Canvas.Top="185"/>
    <ComboBox x:Name="defaults" Canvas.Left="699" Canvas.Top="185" Width="188" Height="26"/>
    <Label x:Name="label11" Content="Sampling Rate" Canvas.Left="1050" Canvas.Top="185"/>
    <ComboBox x:Name="samplingRate" SelectedIndex="1" Canvas.Left="1152" Canvas.Top="185" Width="188" Height="26" SelectionChanged="samplingRate_SelectionChanged">
        <ComboBoxItem Content="44.1kHz" HorizontalAlignment="Left" Width="186"/>
        <ComboBoxItem Content="48kHz" HorizontalAlignment="Left" Width="186"/>
        <ComboBoxItem Content="96kHz" HorizontalAlignment="Left" Width="186"/>
        <ComboBoxItem Content="192kHz" HorizontalAlignment="Left" Width="186"/>
    </ComboBox>

    <Rectangle Fill="#F0F8FF" Height="200" Canvas.Left="70" Stroke="Black" Canvas.Top="240" Width="1270"/>


    <Rectangle Fill="#F0F8FF" Height="200" Canvas.Left="70" Stroke="Black" Canvas.Top="600" Width="1270"/>
</Canvas>

...and the C# funtion;

void plotSignal()
    {
        WriteableBitmap writeableBmp = BitmapFactory.New(240, 1270);
        using (writeableBmp.GetBitmapContext())
        {
            //writeableBmp.SetPixel(10, 13, Colors.Black);
            writeableBmp.DrawLine(1, 2, 200, 400, Colors.Black);
        }
    }

The idea being I would plot a signal with writeableBmp.SetPixel in the rectangles at the bottom of the XAML however at the moment I can't get anything to draw anywhere on my canvas.

Thanks in advance

Answer 1

Thanks Clemens, perhaps not exactly what you had in mind but that pointed me in the right direction - added a name to the canvas

<Canvas Name="mainCanvas">

and edited the function...

void plotSignal()
    {
        // http://writeablebitmapex.codeplex.com/
        WriteableBitmap writeableBmp = BitmapFactory.New(240, 1270);
        using (writeableBmp.GetBitmapContext())
        {
            //writeableBmp.SetPixel(10, 13, Colors.Black);
            writeableBmp.DrawLine(1, 2, 200, 400, Colors.Black);
            Image waveform = new Image();
            waveform.Source = writeableBmp;
            mainCanvas.Children.Add(waveform);
        }
    }

the result is an ugly but visible line