Freezing part of a canvas when scrolling in WPF? - wpf

Question

I'm a bit of a novice with WPF and XAML. I'm working on a piano roll interface for reading MIDI files, which, so far, looks something like this:
https://i.imgur.com/hBJZhnH.png
I have a canvas for the whole piano roll (wrapped around a ScrollViewer for horizontal and vertical scrolling). In that canvas, I have a grdPiano grid for drawing the piano notes, a grdGridColours grid for drawing the horizontal row fill colours, a cnvGridLines canvas where I draw the vertical grid lines (this is done in C# code), and a grdNotes grid where I draw the MIDI notes in C# code.
This works fine, but when I scroll horizontally, the piano keys (grdPiano) scroll out of view. I want it such that if I scroll vertically, everything scrolls, but if I scroll horizontally, the piano keys stay frozen in view on the left side of the screen. I've been messing around with nested ScrollViewers but I can't seem to get it to work.
Here's my XAML:
<ScrollViewer x:Name="srlPianoScroll" Margin="125,20,0,0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Canvas x:Name="cnvPianoRoll" HorizontalAlignment="Left" Height="1592" VerticalAlignment="Center" Width="132">
<Grid x:Name="grdPiano" HorizontalAlignment="Left" Height="1638" VerticalAlignment="Center" Width="132" Canvas.Top="-8">
<Grid.RowDefinitions>
<!--Row definitions...-->
</Grid.RowDefinitions>
<!--Drawing piano notes...-->
</Grid>
<Grid x:Name="grdGridColours" HorizontalAlignment="Left" Height="1628" VerticalAlignment="Center" Width = "0" Canvas.Top="2" Canvas.Left="132" Panel.ZIndex="1">
<Grid.RowDefinitions>
<!--Row definitions...-->
</Grid.RowDefinitions>
<!--Drawing horizontal fill colours...-->
</Grid>
<Canvas x:Name="cnvGridLines" HorizontalAlignment="Left" Height="1592" VerticalAlignment="Center" Width = "0" Canvas.Top="2" Canvas.Left="132" Panel.ZIndex="2"/>
<!--Vertical grid lines are drawn programatically.-->
<Grid x:Name="grdNotes" HorizontalAlignment="Left" Height="1628" VerticalAlignment="Center" Width = "0" Canvas.Top="2" Canvas.Left="132" Panel.ZIndex="3">
<Grid.RowDefinitions>
<!--Row definitions...-->
</Grid.RowDefinitions>
</Grid>
</Canvas>
</ScrollViewer>
Thanks!

Answer 1

Try binding grdPiano's Canvas.Left to the scrollviewer's HorizontalOffset.
When the scrollviewer scrolls horizontally, the binding will update Canvas.Left to be on the left edge of the visible area. You can use a converter to add an offset, if needed.
Here is an example:
XAML
<Window x:Class="WpfApp38.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:local="clr-namespace:WpfApp38"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<local:OffsetConverter x:Key="OffsetConverter" />
</Window.Resources>
<ScrollViewer Name="sv" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Canvas Width="10600" Height="500">
<!-- Rectangle that stays on the left side, your grdPiano -->
<Rectangle Canvas.Left="{Binding ElementName=sv, Path=HorizontalOffset}" Canvas.Top="0" Width="50" Height="500" Fill="Blue" Panel.ZIndex="1" />
<!-- Rectangle that stays on the left side, your grdPiano - - using the OffsetConverter to offset it 300 to the right -->
<!--<Rectangle Canvas.Left="{Binding ElementName=sv, Path=HorizontalOffset, Converter={StaticResource OffsetConverter}, ConverterParameter=300}" Canvas.Top="0" Width="50" Height="500" Fill="LightBlue" Panel.ZIndex="1" />-->
<!-- Rectangles that scrolls normally -->
<Rectangle Canvas.Left="150" Canvas.Top="50" Width="200" Height="25" Fill="Black" />
<Rectangle Canvas.Left="50" Canvas.Top="100" Width="100" Height="25" Fill="Black" />
<Rectangle Canvas.Left="350" Canvas.Top="200" Width="250" Height="25" Fill="Black" />
<Rectangle Canvas.Left="600" Canvas.Top="235" Width="10000" Height="25" Fill="Black" />
</Canvas>
</ScrollViewer>
</Window>
And the code for the converter:
public class OffsetConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value is double scrollViewerHorizontalOffset && parameter is string s)
{
double offsetAmount;
double.TryParse(s, out offsetAmount);
return scrollViewerHorizontalOffset + offsetAmount;
}
return value;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}