Oxyplot (wpf) get rid of empty space to the right of PlotView

Question

I'm using OxyPlot for WPF and the PlotView adds a space to the right of it instead of filling up the entire area as you can see in this picture:

I added the black box to show to where the PlotView should extend to.

But in the designer the PlotView does extrend so far:

Is this something that is fixable? Or is the only way to fix it is to "cheat" and instead of fitting controls together in a panel i just overlap the rightside over the PlotView.

<Grid Background="{StaticResource Milky}">
    <DockPanel>
        <Grid Height="50" Width="5" DockPanel.Dock="Left"/>
        <Grid Height="5" Width="50" DockPanel.Dock="Top"/>
        <Grid Width="122" DockPanel.Dock="Right" VerticalAlignment="Top">
            <StackPanel>
                <Border Margin="3" Height="248" Width="116" BorderThickness="1" BorderBrush="{StaticResource LightGrayGray}" CornerRadius="3">
                    <ItemsControl ItemsSource="{Binding Path=GraphLineItems}" HorizontalAlignment="Left">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <local:GraphLineItemV DataContext="{Binding }" ColorPalette="{StaticResource MilkyPalette}">
                                </local:GraphLineItemV>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </Border>
                <Border Margin="3 0 3 3" Height="128" BorderThickness="1" BorderBrush="{StaticResource LightGrayGray}" CornerRadius="3">
                    <WrapPanel>
                        <local:IconButton Width="32" Command="{Binding Path=FitToFrameCmd}" ToolTip="{StaticResource ToolTipFitGraph}" Margin="1" Height="32" BorderThickness="1" IconHeight="28" IconWidth="28" ColorPaletteFore="{StaticResource DarkestGraySolid}" ColorPalette="{StaticResource MilkyGPalette}" Image="{StaticResource ZoomIcon}" IconMargin="1"/>
                        <local:IconButton Width="32" Command="{Binding Path=ClearGraphCmd}" ToolTip="{StaticResource ToolTipClearGraph}" Margin="1" Height="32" BorderThickness="1" IconHeight="24" IconWidth="24" ColorPaletteFore="{StaticResource DarkestGraySolid}" ColorPalette="{StaticResource MilkyGPalette}" Image="{StaticResource DeleteIcon}" IconMargin="4"/>
                    </WrapPanel>
                </Border>
            </StackPanel>
        </Grid>

        <Grid Height="80" DockPanel.Dock="Bottom">
            <StackPanel>
                <StackPanel Orientation="Horizontal">
                <local:ColoredImage x:Name="zoomIcon" Image="{StaticResource ZoomIcon}" Width="24" Height="24" HorizontalAlignment="Left" VerticalAlignment="Top" Color="{StaticResource Gray}"/>
                    <Slider HorizontalAlignment="Left" Minimum="0.5" Maximum="85" VerticalAlignment="Top" Margin="0,5,0,0" Value="{Binding Zoom, UpdateSourceTrigger=PropertyChanged}">
                        <Slider.Width>
                            <MultiBinding Converter="{StaticResource Subtraction}">
                                <Binding Path="ActualWidth" ElementName="graph"/>
                                <Binding Path="ActualWidth" ElementName="zoomIcon"/>
                            </MultiBinding>
                        </Slider.Width>
                    </Slider>
                </StackPanel>
                <StackPanel Orientation="Horizontal" Margin="0,8,0,0">
                    <TextBlock Text="Refresh rate:  " HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    <TextBox Text="{Binding UpdateInterval, Mode=TwoWay, UpdateSourceTrigger=LostFocus}" PreviewTextInput="NumberValidationTextBox" MaxLength="3" FontFamily="{StaticResource MonoFont}" Width="28" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                    <TextBlock Text=" (ms)" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal" Margin="0,8,0,0">
                    <TextBlock Text="Saved length: " HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    <TextBox Text="{Binding SavedLength, Mode=TwoWay, UpdateSourceTrigger=LostFocus}" PreviewTextInput="NumberValidationTextBox" MaxLength="3" FontFamily="{StaticResource MonoFont}" Width="28" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                    <TextBlock Text=" (s)" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </StackPanel>
            </StackPanel>
        </Grid>
        <Grid x:Name="grid">
            <Canvas x:Name="canvas" Background="{StaticResource White}"/>
            <Grid Background="Black" Width="20" Height="20" HorizontalAlignment="Right"/>
            <oxy:PlotView x:Name="graph" Background="Transparent"/>
        </Grid>
    </DockPanel>
</Grid>

score 0 · Accepted Answer · answered Mar 16 '22 at 17:27

I guess you bind your PlotView to a PlotModel? In that case you can set the PlotModel's PlotMargins property to set the margins of the plot area within the plot view and assign values for all four sides independently.

In order to get completely rid of the margin at the right side, you need to assign a negative value.

I have created the plot below using this line

plotModel.PlotMargins = new OxyThickness(40, -8, -8, 35);

I have changed the general background color of the plot view to make it clearer.

Oxyplot (wpf) get rid of empty space to the right of PlotView

1 Answers1