在 WPF 中将轴添加到 Canvas

Question

您好，我有一个简单的要求。我的任务是在 XY 轴上显示一对折线，这些折线可以在任何屏幕上很好地缩放并且可以显示任何范围的数据。

所以我创建了 PloyLines 并使用当时的屏幕尺寸和最大值在它们上添加了缩放变换。

XAML- 基本上是直线，为了简单添加，可以是复杂的方程曲线

<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>

代码隐藏

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

和 ViewModel

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

现在我的要求是添加动态缩放的 XY 轴，这样我就可以绘制从 0 到 MaxLimitX 和 0 到 MaxLimitY。

我不知道如何进行。任何想法都会有所帮助。提前致谢。

Answer 1

我能想到一个解决办法；

创建一个包含 2 列的网格。
第一个网格将有一个垂直方向的滑块。
第二个网格将由堆栈面板组成。最上面的将有你的 "Polyline" 下方将有另一个滑块。

示例代码在这里

 <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>

在此之后唯一待定的事情是根据您的喜好设置滑块样式并添加您自己的自定义 TickBar

在 WPF 中将轴添加到 Canvas

Adding Axis to a Canvas in WPF

data-binding

wpf

scaling

system.drawing

wpf-graphics