wpf - 在 WPF 中将轴添加到画布

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);
        }

和视图模型

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

现在我的要求是添加动态缩放 XY 轴，这样我就可以从 0 到MaxLimitX0 到MaxLimitY.

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

Answer 1

我可以想到一种解决方案；

• 创建一个有 2 列的网格。
• 第一个网格将有一个垂直方向的滑块。
• 第二个网格将由一个堆栈面板组成。顶部将有您的“折线”，下面将有另一个滑块。

示例代码在这里

 <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