Adding Axis to a Canvas in WPF

Question

Hi I have a simple requirement. I am given the task to show a Couple of PolyLines on an XY Axis that scale well on any screen and can show any range of data.

So I created PloyLines and Added scaling transform on them using the Screen Size and the Maximum value at the time.

XAML- Basically a straight line, added for simplicity, can be complex equations curves

<Polyline Name="Line45" Points="0,0 1,1 2,2 3,3 4,4 5,5 6,6 7,7 8,8 9,9 10,10 11,11 12,12 13,13 14,14 15,15 16,16 17,17 18,18 19,19 20,20 " 
              Stroke="Blue" StrokeThickness="10">
            <Polyline.LayoutTransform>
                <ScaleTransform ScaleY="{Binding ScaleY,Mode=TwoWay}" ScaleX="{Binding ScaleX,Mode=TwoWay}"/>
            </Polyline.LayoutTransform>
        </Polyline>

Code Behind

private void Canvas_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            vm.ScaleCanvas(e.NewSize, e.PreviousSize);
        }

And ViewModel

 public void ScaleCanvas(Size thisNewSize, Size thisOldSize)
        {
            NewSize = thisNewSize;
            ScaleY = thisNewSize.Height / MaxLimitY;
            ScaleX = thisNewSize.Width / MaxLimitX;
        }

Now my requirement is to add dynamically scaling XY Axis so I can Plot from 0 to MaxLimitX and 0 to MaxLimitY.

I have No Idea how to proceed. Any ideas will be helpful. Thanks in advance.

score 0 · Accepted Answer · edited May 23 '17 at 12:09

I can think of one solution;

Create a grid with 2 columns.
1st grid will have a slider with vertical orientation.
2nd grid will be made up of a stack panel. Top one will have your "Polyline" and below that there will be another slider.

Sample code is here

 <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
        <Slider Orientation="Vertical" Margin="0,0,0,20"
                 Maximum="10" Minimum="1" Width="Auto" 
                    AutoToolTipPrecision="2" AutoToolTipPlacement="TopLeft"
                    TickPlacement="TopLeft"
                    Ticks="0.5, 1.5, 2.5, 3.5, 4.5, 5.5, 6.5, 7.5, 8.5, 9.5"
                    IsSelectionRangeEnabled="true" />

                <StackPanel Grid.Column="2">
       <Polyline  Points="0,0 301,301" Stroke="Blue" StrokeThickness="10">
            <Polyline.LayoutTransform>
                <ScaleTransform ScaleY="{Binding ScaleY,Mode=TwoWay}" ScaleX="{Binding ScaleX,Mode=TwoWay}"/>
            </Polyline.LayoutTransform>
        </Polyline>
            <Slider Margin="0 10" Maximum="10" Minimum="1" Width="Auto" 
                    AutoToolTipPrecision="2" AutoToolTipPlacement="BottomRight"
                    TickPlacement="BottomRight"
                    Ticks="0.5, 1.5, 2.5, 3.5, 4.5, 5.5, 6.5, 7.5, 8.5, 9.5"
                    IsSelectionRangeEnabled="true">

            </Slider>

        </StackPanel>
        </Grid>

After this only thing that is pending is styling the slider as per your liking and adding your own custom TickBar

Adding Axis to a Canvas in WPF

1 Answers1