Route event to element under the current element

Question

I've been trying to have one canvas with two layers. One layer scrolls horizontally, the second one is on top and scrolls vertically. In the second layer (the one that scrolls vertically), I stacked a transparent grid (or panel) and a panel with information so that we can see the first layer that is under this one and if we scroll up, we have the information that appears on the screen.

That works like a charm except that if I scroll horizontally, the first layer (the one under) does not scroll at all. It's not a problem if the vertical scrolls does not scroll if we swipe the transparent grid.

This is my xaml

<Canvas x:Name="Canvas">
    <local:MyPage x:Name="PageContainer"/> <!--This one scrolls horizontally -->
    <ScrollViewer
                  HorizontalScrollBarVisibility="Disabled"
                  VerticalScrollBarVisibility="Hidden"
                  Height="{Binding ActualHeight, ElementName=UcRoot}">
<!--This one scrolls vertically and appears on top -->
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid Height="600" Width="600" Grid.Row="0" x:Name="TransparentGrid" ></Grid>
            <Grid x:Name="Information" Background="Azure" Height="1200" Width="600" Grid.Row="1">
            </Grid>
        </Grid>
    </ScrollViewer>

</Canvas>

I tried many things on the transparent grid (setting width to 1, removing it and setting the information grid margin top to 1200 for example) but the grid captures the event and does not relay to my page.

Can I get some help?

Thanks!

How about set `ScrollViewer Margin= "0, 0, 0, 25"` ? Your layer is transparent so this can be OK — NoName, Feb 24 '16 at 10:26
This doesn't work. The information panel needs to take the full width of my canvas and it should respond to finger swipe also — Daniel, Feb 24 '16 at 10:30
Then you need to [handle](http://stackoverflow.com/a/12662362/1560697) `ManipulationDelta` event on the top layer. If user wipe left/right, you scroll bottom layer accordingly — NoName, Feb 24 '16 at 10:58

score 1 · Answer 1 · answered Feb 24 '16 at 11:12

You have to set the background to 'Transparent' to the grid in order to be able to tap on it and swipe.. and you maybe need these properties to play with:

ScrollViewer.VerticalScrollMode
ScrollViewer.HorizontalScrollMode

Although, this is my suggested solutions:

        <ScrollViewer ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.HorizontalScrollMode="Disabled" >
            <Grid >
                <TextBlock Text="contnet" />
            </Grid>
        </ScrollViewer>

        <ScrollViewer  ScrollViewer.VerticalScrollMode="Disabled" ScrollViewer.HorizontalScrollMode="Enabled"  >
            <Grid Background="Transparent">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid Height="600" Width="600" Grid.Row="0" x:Name="TransparentGrid" Background="Transparent" ></Grid>
                <Grid x:Name="Information" Background="Azure" Height="1200" Width="600" Grid.Row="1"/>


            </Grid>
        </ScrollViewer>

    </Canvas>

Thanks for the scrollmode. It helped me solved another bug (this why I gave you +1). However it did not solve the initial problem. — Daniel, Feb 24 '16 at 11:32
Good to hear that :D.. So I maybe misunderstand you in this, can you please be more clear about your problem? Do you want to have a top header with transparent background with ability to horizontally scroll it w/ some items? — Nasser AlNasser, Feb 24 '16 at 11:35

Route event to element under the current element

1 Answers1