Click here to Skip to main content
15,892,643 members
Articles / Desktop Programming / WPF

Improving WPF Mouse Wheel Processing

Rate me:
Please Sign up or sign in to vote.
4.91/5 (29 votes)
11 Jun 2016MIT16 min read 94.1K   3.8K   52  
How to quickly improve your WPF application to give your users a pleasant mouse wheel experience
<!-- DataContext : MouseWheelOptions -->
  
<UserControl
  x:Class="Logitech.WpfMouseWheel.Views.WorkspaceView"
  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" 
  xmlns:i="clr-namespace:Logitech.Windows.Input;assembly=WpfMouseWheelLib"
  mc:Ignorable="d" 
  d:DesignHeight="300" d:DesignWidth="300">
  <UserControl.Resources>
    <ResourceDictionary Source="WorkspaceResources.xaml"/>
  </UserControl.Resources>

  <TabControl>

    <!-- Scroll -->
    <TabItem>
      <TabItem.Header>
        <TextBlock Text="Scroll" FontSize="14" FontWeight="DemiBold"/>
      </TabItem.Header>
      <DockPanel>
        <Border DockPanel.Dock="Bottom" Margin="0,4,0,0" Style="{StaticResource StatusBarStyle}">
          <TextBlock Margin="4" TextAlignment="Center" TextWrapping="Wrap" FontSize="16">
            <TextBlock.Style>
              <Style TargetType="{x:Type TextBlock}">
                <Setter Property="Text" Value="To scroll horizontally, hold down the Shift key while rotating the mouse wheel."/>
                <Setter Property="Foreground" Value="Black"/>
                <Style.Triggers>
                  <DataTrigger Binding="{Binding Enhanced}" Value="False">
                    <Setter Property="Text" Value="In native mode, horizontal mouse wheel scrolling is not available"/>
                    <Setter Property="Foreground" Value="DarkRed"/>
                  </DataTrigger>
                </Style.Triggers>
              </Style>
            </TextBlock.Style>
          </TextBlock>
        </Border>
        <TabControl>
          <TabItem Header="Vertical Scroll">
            <TabControl>
              <TabItem Header="Nested Scroll" DataContext="{Binding Source={StaticResource _nestedCollectionBuilder}, Path=Items}" >
                <TabControl>
                  <TabItem Header="In an ItemsControl"            Background="{StaticResource PhysicalModeBrush}" Content="{StaticResource L1-ItemsControl}"/>
                  <TabItem Header="In a ListBox"                  Background="{StaticResource LogicalModeBrush}"  Content="{StaticResource L1-ListBox}"/>
                  <TabItem Header="In a FlowDocumentScrollViewer" Background="{StaticResource PhysicalModeBrush}" Content="{StaticResource L1-FlowDocumentScrollViewer}"/>
                  <TabItem Header="In a FlowDocumentPageViewer"   Background="{StaticResource PhysicalModeBrush}" Content="{StaticResource L1-FlowDocumentPageViewer}"/>
                  <TabItem Header="In a RichTextBox"              Background="{StaticResource TextBoxBaseBrush}"     Content="{StaticResource L1-RichTextBox}"/>
                </TabControl>
              </TabItem>
              <TabItem Header="Non Nested Scroll" DataContext="{Binding Source={StaticResource _collectionBuilder}, Path=Items}">
                <TabControl>
                  <TabItem Header="Image"                    Background="{StaticResource PhysicalModeBrush}" Content="{StaticResource L0-Image}" />
                  <TabItem Header="ItemsControl"             Background="{StaticResource PhysicalModeBrush}" Content="{StaticResource L0-ItemsControl}" />
                  <TabItem Header="ListBox"                  Background="{StaticResource LogicalModeBrush}"  Content="{StaticResource L0-ListBox}" />
                  <TabItem Header="ListView"                 Background="{StaticResource LogicalModeBrush}"  Content="{StaticResource L0-ListView}" />
                  <TabItem Header="DataGrid"                 Background="{StaticResource LogicalModeBrush}"  Content="{StaticResource L0-DataGrid}" />
                  <TabItem Header="ComboBox"                 Background="{StaticResource LogicalModeBrush}"  Content="{StaticResource L0-ComboBox}" />
                  <TabItem Header="TextBox"                  Background="{StaticResource TextBoxBaseBrush}"     Content="{StaticResource L0-TextBox}" />
                  <TabItem Header="RichTextBox"              Background="{StaticResource TextBoxBaseBrush}"     Content="{StaticResource L0-RichTextBox}" />
                  <TabItem Header="FlowDocumentScrollViewer" Background="{StaticResource PhysicalModeBrush}" Content="{StaticResource L0-FlowDocumentScrollViewer}" />
                  <TabItem Header="FlowDocumentPageViewer"   Background="{StaticResource PhysicalModeBrush}" Content="{StaticResource L0-FlowDocumentPageViewer}" />
                </TabControl>
              </TabItem>
            </TabControl>
          </TabItem>
          <TabItem Header="Horizontal Scroll">
            <TabControl>
              <TabItem Header="Nested Scroll" DataContext="{Binding Source={StaticResource _nestedCollectionBuilder}, Path=Items}" >
                <TabControl>
                  <TabItem Header="In an ItemsControl" Background="{StaticResource PhysicalModeBrush}" Content="{StaticResource L1H-ItemsControl}"/>
                  <TabItem Header="In a ListBox"       Background="{StaticResource LogicalModeBrush}"  Content="{StaticResource L1H-ListBox}"/>
                </TabControl>
              </TabItem>
              <TabItem Header="Non Nested Scroll" DataContext="{Binding Source={StaticResource _narrowCollectionBuilder}, Path=Items}">
                <TabControl>
                  <TabItem Header="ItemsControl" Background="{StaticResource PhysicalModeBrush}" Content="{StaticResource L0H-ItemsControl}"/>
                  <TabItem Header="ListBox"      Background="{StaticResource LogicalModeBrush}"  Content="{StaticResource L0H-ListBox}"/>
                </TabControl>
              </TabItem>
            </TabControl>
          </TabItem>
          <TabItem Header="Overriding" DataContext="{Binding Source={StaticResource _collectionBuilder}, Path=Items}">
            <TabControl>
              <TabItem
                Header="ItemsControl - Physical(64)"
                Background="{StaticResource PhysicalModeBrush}"
                i:MouseWheel.ScrollMode="Physical"
                i:MouseWheel.ScrollSmoothing="None"
                i:MouseWheel.PhysicalScrollIncrement="64"
                Content="{StaticResource L0-ItemsControl}">
              </TabItem>
              <TabItem
                Header="ListBox - V:Auto(2*) H:Smooth(32*)"
                Background="{StaticResource LogicalModeBrush}"
                i:MouseWheel.VScrollMode="Auto"
                i:MouseWheel.HScrollMode="Physical"
                i:MouseWheel.HScrollSmoothing="Smooth"
                i:MouseWheel.LogicalVScrollIncrement="2*"
                i:MouseWheel.PhysicalHScrollIncrement="32*"
                Content="{StaticResource L0-ListBox}">
              </TabItem>
            </TabControl>
          </TabItem>
        </TabControl>
      </DockPanel>
    </TabItem>

    <!-- Zoom -->
    <TabItem>
      <TabItem.Header>
        <TextBlock Text="Zoom" FontSize="14" FontWeight="DemiBold"/>
      </TabItem.Header>
      <DockPanel>
        <Border DockPanel.Dock="Bottom" Margin="0,4,0,0"  Style="{StaticResource StatusBarStyle}">
          <TextBlock DockPanel.Dock="Top" Text="To zoom, hold down the Control key while rotating the mouse wheel."
               TextAlignment="Center" TextWrapping="Wrap" FontSize="16"/>
        </Border>
        <TabControl>
          <TabItem Header="Nested Zoom">
            <TabControl>
              <TabItem Header="In a FlowDocumentScrollViewer" Background="{StaticResource PhysicalModeBrush}" Content="{StaticResource L1Z-FlowDocumentScrollViewer}"/>
              <TabItem Header="In a FlowDocumentPageViewer"   Background="{StaticResource PhysicalModeBrush}" Content="{StaticResource L1Z-FlowDocumentPageViewer}"/>
            </TabControl>
          </TabItem>
          <TabItem Header="Non Nested Zoom">
            <TabControl>
              <TabItem Header="FlowDocumentScrollViewer" Background="{StaticResource PhysicalModeBrush}" Content="{StaticResource L0-FlowDocumentScrollViewer}" />
              <TabItem Header="FlowDocumentPageViewer"   Background="{StaticResource PhysicalModeBrush}" Content="{StaticResource L0-FlowDocumentPageViewer}" />
            </TabControl>
          </TabItem>
        </TabControl>
      </DockPanel>
    </TabItem>
    
    <!-- Adaptation -->
    <TabItem>
      <TabItem.Header>
        <TextBlock Text="Adaptation" FontSize="14" FontWeight="DemiBold"/>
      </TabItem.Header>
      <DockPanel>
        <Border DockPanel.Dock="Bottom" Margin="0,4,0,0" Style="{StaticResource StatusBarStyle}">
          <TextBlock DockPanel.Dock="Top" TextAlignment="Center" TextWrapping="Wrap" FontSize="16">
            <TextBlock.Style>
              <Style TargetType="{x:Type TextBlock}">
                <Setter Property="Text" Value="To move the slider, move the cursor on it and rotate the mouse wheel."/>
                <Setter Property="Foreground" Value="Black"/>
                <Style.Triggers>
                  <DataTrigger Binding="{Binding Enhanced}" Value="False">
                    <Setter Property="Text" Value="In native mode, slider cannot be moved with the mouse wheel"/>
                    <Setter Property="Foreground" Value="DarkRed"/>
                  </DataTrigger>
                </Style.Triggers>
              </Style>
            </TextBlock.Style>
          </TextBlock>
        </Border>
        <ContentPresenter Content="{StaticResource L0-Slider}" />
      </DockPanel>
    </TabItem>

  </TabControl>
</UserControl>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The MIT License


Written By
Software Developer (Senior)
Switzerland Switzerland
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions