Search code examples
c#wpfoxyplot

How to create square plot area with Oxyplot


I'm trying to create a square graph (X axis width is the same as the Y axis height).

I can't find any documentation on this and all of the properties I've seen which might be able to do this are inaccessible.

I've tried:

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

This obviously doesn't work because this sets the entire area (not the graph specific portion).


Solution

  • I solved this by hooking into the LayoutUpdated event on the PlotView and updating the PlotView.Width from the PlotArea width/height difference.

    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>
    

    Code Behind:

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