Search code examples
c#avaloniaui

How to bind 2 ScrollViewer controls when horizontal scroll change event is raised in a ControlTemplate in Avalonia?


I'm making a custom table control. It has 2 ScrollViewers, one for the rows section and the other hidden in the columns section. They are both sitting inside a DataTemplate. I would like to scroll the columns section horizontal when the user scrolls the rows section horizontal. I tried Binding the Offset property to one another but couldn't figure out how to do it only to the X axis. Is this possible on the xaml side or does it have to happen in C#? Either way is fine, just trying to figure out how to do it.


Solution

  • Someone over at Avalonia's Github answered it. I'll share it here. I was over thinking it. You can just Bind the whole Offset object.

    <StackPanel Spacing="5">
      <ScrollViewer x:Name="ScrollViewer1" HorizontalScrollBarVisibility="Visible" Height="50">
        <Border MinWidth = "2000" Background="{DynamicResource SystemAccentColor}">
        <TextBlock>This is a very very long Text in ScrollViewer 1. This is a very very long Text in ScrollViewer 1. This is a very very long Text in ScrollViewer 1. This is a very very long Text in ScrollViewer 1.  </TextBlock>
        </Border>
      </ScrollViewer>
      <ScrollViewer x:Name="ScrollViewer2" HorizontalScrollBarVisibility="Visible" Height="50"
                    Offset="{Binding #ScrollViewer1.Offset, Mode=TwoWay}">
        <Border MinWidth = "2000" Background="{DynamicResource SystemAccentColorDark2}">
          <TextBlock>This is a very very long Text in ScrollViewer 2. This is a very very long Text in ScrollViewer 2. This is a very very long Text in ScrollViewer 2. This is a very very long Text in ScrollViewer 2.  </TextBlock>
        </Border>
      </ScrollViewer>
    </StackPanel>