Can't scroll when mouse over header

2 posts, 0 answers
  1. David
    David avatar
    1 posts
    Member since:
    Jul 2014

    Posted 23 Sep Link to this post

    Maybe (hopefully) I'm just being stupid.

     

    Consider the xaml below. If the Window is small a scrollbar will appear in the ScrollView. The mousewheel controls scrolling - unless the mouse is over the tab header.

    Is there some way to allow scrolling to work / not be swallowed by the RadTabControl

    Regards David

    <Grid>
      <ScrollViewer>
        <telerik:RadTabControl>
          <telerik:RadTabItem Header="One">
            <StackPanel>
              <Label>One</Label>
              <Label>Two</Label>
              <Label>Three</Label>
          <telerik:RadButton Height="200" Width="200">BIG</telerik:RadButton>              
            </StackPanel>
         </telerik:RadTabItem>
        </telerik:RadTabControl>
      </ScrollViewer>
    </Grid>

  2. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 27 Sep Link to this post

    Hello David,

    The described behavior is observed because of the nature of the ScrollViewer panel. The area where the tab items are placed is also wrapped in a ScrollViewer element. Basically, the scroll viewer is handling its MouseMove event and if you have nested scroll viewers only the one under the mouse will be scrolled.

    So in your case the mouse is over the scroll viewer of the tab items area. The event is handled and the parent ScrollViewer that wraps the RadTabControl is not scrolled.

    To work this around you can manually scroll the ScrollViewer. Here is an example for this:
    <ScrollViewer Height="300" x:Name="scrollviewer">
        <telerik:RadTabControl Height="500">
            <telerik:RadTabItem Header="One">
                <StackPanel>
                    <Label>One</Label>
                    <Label>Two</Label>
                    <Label>Three</Label>
                    <telerik:RadButton Width="200" Height="200">BIG</telerik:RadButton>
                </StackPanel>
            </telerik:RadTabItem>
        </telerik:RadTabControl>
    </ScrollViewer>

    this.scrollviewer.AddHandler(ScrollViewer.MouseWheelEvent, new MouseWheelEventHandler(ScrollViewer_MouseWheel), true);       
    //--------------
    private void ScrollViewer_MouseWheel(object sender, MouseWheelEventArgs e)
    {  
        if (e.Delta > 0)
        {
            this.scrollviewer.ScrollToVerticalOffset(this.scrollviewer.VerticalOffset - 50);
        }
        else
        {
            this.scrollviewer.ScrollToVerticalOffset(this.scrollviewer.VerticalOffset + 50);
        }
    }

    Please give this approach a try and let me know if it helps.

    Regards,
    Martin
    Telerik by Progress
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top