如何使用 Oxyplot 创建方形绘图区域答案

【问题标题】：How to create square plot area with Oxyplot如何使用 Oxyplot 创建方形绘图区域
【发布时间】：2018-01-12 19:02:48
【问题描述】：

我正在尝试创建一个方形图（X 轴宽度与 Y 轴高度相同）。

我找不到任何关于此的文档，并且我看到的所有可能能够执行此操作的属性都无法访问。

我试过了：

<oxy:PlotView Model="{Binding Model}" Width="500" Height="500"/>

这显然行不通，因为这会设置整个区域（而不是图形特定部分）。

【问题讨论】：

标签： c# wpf oxyplot

【解决方案1】：

我通过挂钩PlotView 上的LayoutUpdated 事件并根据PlotArea 宽度/高度差异更新PlotView.Width 解决了这个问题。

XAML：

<Window x:Class="Temp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:oxy="http://oxyplot.org/wpf"
        Title="MainWindow" Width="500" Height="500">
    <Grid>
        <oxy:PlotView Model="{Binding PlotModel}" x:Name="PlotView"/>
    </Grid>
</Window>

代码背后：

public partial class MainWindow
    {
        public MainWindow()
        {
            InitializeComponent();

            DataContext = new MainViewModel();
        }

        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            var plotView = (PlotView) this.FindName("PlotView");

            plotView.LayoutUpdated += OnLayoutUpdated;
        }

        private void OnLayoutUpdated(object sender, EventArgs e)
        {
            var plotView = (PlotView) this.FindName("PlotView") ;

            if (plotView.Model != null)
            {
                var widthAdjustment = plotView.Model.PlotArea.Width - plotView.Model.PlotArea.Height;

                plotView.Width = plotView.ActualWidth - widthAdjustment;
            }
        }
    }

【讨论】：

【解决方案2】：

假设您不希望它可调整大小，如果您将其包装在一个 Border 中，它的大小等于 Width 加上标题部分的高度。例如：

XAML：

<Window x:Class="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:oxy="http://oxyplot.org/wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Border Width="200" Height="224">
            <oxy:PlotView x:Name="plot" Model="{Binding Path=PlotModel}"/>
        </Border>
    </Grid>
</Window>

模型对象的代码隐藏：

using OxyPlot;
using OxyPlot.Series;
using System.Windows;

/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
    public PlotModel Model
    {
        get; set;
    }

    public MainWindow()
    {
        DataContext = this;

        Model = new PlotModel
        {
            Title = "Test",
            TitlePadding = 0,
            TitleFontSize = 24
        };
        LineSeries line = new LineSeries();
        line.Points.Add(new DataPoint(0, 0));
        line.Points.Add(new DataPoint(1, 1));
        line.Points.Add(new DataPoint(2, 2));
        Model.Series.Add(line);
    }
}

这就是它的样子：

如果你想做一个可调整大小的版本，那么使用包含窗口的SizeChanged 事件，并在该事件处理程序中重新调整Border 容器的大小。

【讨论】：

【解决方案3】：

如何使用外部元素来定义绘图区域的宽度和高度，例如 Grid 或 Border

<Border width="500" height="500">
    <oxy:PlotView Model="{Binding Model}" />
</Border>

【讨论】：

这会将控件设置为具有这些尺寸，而不是图形特定（x/y 轴长度）部分。