ScrollViewer issues with multiple panels on same page

Question

In my application I have different pages and each page loads into frame of main application Page.

Now Each page has two StackPanels named left and right. left panels plays role of side bar and should not scroll with all page so I wrapped only right StackPanel into ... and right part works fine. but when I do this and run my app left panel stops responding and I can't even click on its child controls like text box...

<Grid>
    <StackPanel Orientation="Vertical" Width="230">
        <Label Content="write message"/>
        <RichTextBox Height="300" >
            <FlowDocument/>
        </RichTextBox>
        <Label Content="Remaining Characters: 160" />
        <TextBox />
        <Button Content="SEND"/>
    </StackPanel>
    <ScrollViewer VerticalScrollBarVisibility="Auto" >
        <StackPanel CanVerticallyScroll="True"  Margin="230,0,0,40" Orientation="Vertical" MinHeight="600" ScrollViewer.CanContentScroll="True"/>
    </ScrollViewer>
</Grid>

program works fine if I wrap whole grid into but sidebar moves with it too.

Answer 1

Its not a good idea to put both stackpanel and scrollviewer in the same grid. As they do not have any ZIndex property, i believe the right panel came on top and the left panel stopped responding to mouse event. try using different columns:

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <StackPanel Orientation="Vertical" Width="230" Grid.Column="0">
            <Label Content="write message"/>
            <RichTextBox Height="200" >
                <FlowDocument/>
            </RichTextBox>
            <Label Content="Remaining Characters: 160" />
            <TextBox />
            <Button Content="SEND"/>
        </StackPanel>
        <ScrollViewer VerticalScrollBarVisibility="Auto" Grid.Column="1" >
            <StackPanel CanVerticallyScroll="True"  Margin="10,0,0,40" Orientation="Vertical" MinHeight="800" ScrollViewer.CanContentScroll="True">
                <Border Width="200" Height="600" Background="LightBlue"/>
            </StackPanel>
        </ScrollViewer>
    </Grid>

if you don't want to use Multiple columns you have to use canvas where you can control which element comes on top by changing ZIndex Property.