Maintaining position of one of the controls inside ScrollViewer

Question

Let's say I have XAML code like this:

<UserControl x:Class="Sample.MyClass"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="220" d:DesignWidth="750">
    <ScrollViewer Width="730" Height="150" CanContentScroll="True" HorizontalScrollBarVisibility="Visible">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50" />
                <ColumnDefinition Width="680" />
            </Grid.ColumnDefinitions>

            <TextBox Width="50" Height="200" Grid.Row="0" Grid.Column="0" />
            <TextBox Width="680" Height="200" Grid.Row="0" Grid.Column="1" />
        </Grid>
    </ScrollViewer>
</UserControl>

Now when I scroll to the right I'd like the first TextBox to be fully visible. In other words - I would like the horizontal scrolling (only horizontal scrolling) to apply only to the second TextBox and vertical scrolling to aplly to both. I can't put the first one outside of the ScrollViewer because then vertical scrolling would not work on it.

To give you a more real-life example: In VisualStudio you have the text area where you can enter code. And on the left side there's a panel showing line numbers and code folding. If you scroll the text area vertically also the left panel is scrolling down or up. When you scroll the text area horizontally, only the text area is affected by it.

Alexander Bell · Accepted Answer · 2016-03-03T20:09:53.450

1

You can try to modify XAML as following:

<UserControl x:Class="Sample.MyClass"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="220" d:DesignWidth="750">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50" />
            <ColumnDefinition Width="680" />
        </Grid.ColumnDefinitions>
        <ScrollViewer Grid.Row="0" Grid.Column="0" 
                  CanContentScroll="True" 
                  VerticalScrollBarVisibility="Visible" 
                  HorizontalAlignment="Stretch">
            <TextBox  />
       </ScrollViewer>
       <ScrollViewer Grid.Row="0" Grid.Column="1"  
                  CanContentScroll="True" 
                  VerticalScrollBarVisibility="Visible" 
                  HorizontalScrollBarVisibility="Visible" 
                  HorizontalAlignment="Stretch" 
                  VerticalAlignment="Stretch">
            <TextBox />
        </ScrollViewer>
    </Grid>
</UserControl>

Hope this may help.

edited Mar 03 '16 at 20:09

answered Mar 03 '16 at 19:29

Alexander Bell

7,842
3
26
42

This won't work for me. As I mentioned in my question I want vertical scrolling to apply to both `TextBox`es and horizontal scrolling to apply only to the second one. – Marek M. Mar 03 '16 at 19:36
Then you can use 2 ScrollViewer controls as shown in extended answer. Best regards, – Alexander Bell Mar 03 '16 at 19:41
Using this code I'm getting this error: `The property "Content" can only be set once.`. If however I'd set the outer `ScrollViewer` to wrap the `Grid` control whole thing would look really crappy and what's more important - the horizontal scroll would appear only if I'd scroll to the bottom... – Marek M. Mar 03 '16 at 19:47
See the modified XAML. Regards, – Alexander Bell Mar 03 '16 at 19:58
Ok, but what I'm trying to accomplish here is to scroll both `TextBox`es vertically at the same time and without adding a separate `ScrollViewer` to the first one. I guess a more real-life example would be good for you to understand my intent better. In VisualStudio you have the text area where you can enter code, right? And on the left side there's a panel showing line numbers and code folding. If you scroll the text field vertically also the left panel is scrolling. When you scroll the text area horizontally, only the text area is affected by it. – Marek M. Mar 03 '16 at 20:06
Well, then you can further modify the layout as per you particular task definition, probably adding another nested grid or panel wrapped in the first ScrollView. Best regards, – Alexander Bell Mar 03 '16 at 20:13
Actually thanks to your ideas I came up with one that probably will help me achieve my goals. After all I can bind the first `ScrollViewer`s scroll event to the second one therefore achieving simultaneous scroll with both `TextBox`es, right? – Marek M. Mar 03 '16 at 20:17
I guess you are right. Also, you may need to add TextWrapping="Wrap" to the first TextBox. Anyway, thanks likewise, and best of luck with your project. Kind Regards, – Alexander Bell Mar 03 '16 at 20:20

score 1 · Answer 2 · edited May 23 '17 at 11:50

1

I think what you want to do is svnc 2 scroll viewers,

You can do it with a little code behind voodoo, check this out

Synchronized scrolling of two ScrollViewers whenever any one is scrolled in wpf

edited May 23 '17 at 11:50

Community

1
1

answered Mar 03 '16 at 23:45

Dave

109
1

Maintaining position of one of the controls inside ScrollViewer

2 Answers2