Allow Mouse Wheel scroll on a TabPage Control

Question

A TabPage of a TabControl is populated with using a XML source. Once the XML contents are loaded into the TabPage, two ScrollBars appear on either side of the TabPage, to allow a user to scroll.
The user cannot scroll with the Mouse Wheel, though. I have checked the properties of the TabPage Control but I cannot find any property to assist with this.

Someone suggested to handle the MouseWheel event or override OnMouseWheel, but I'm not sure how this can be applied.
The gist of this is simple, how do I activate the Mouse wheel scroll on a tab page?

public partial class ModifyTransformerContentsView : Form
{
    private readonly ITransformerConfigurationViewModel ViewModel;

    public ModifyTransformerContentsView(ITransformerConfigurationViewModel viewModel)
    {
        InitializeComponent();

        this.ViewModel = viewModel;
        this.ViewModel.Notify += this.OnNotify;

        this.xmlEditExampleStdfOutFile.SetFormateText(File.ReadAllText(this.ViewModel.SampleProcessingFilePath));
        this.xmlEditExampleStdfOutFile.ReadOnly = true;

        this.rtbXsl.SetFormateText(File.ReadAllText(this.ViewModel.TransformerFilePath));
        this.rtbXsl.ReadOnly = false;
        this.rtbXsl.RichTextBox.ClearUndo();

        this.btnSave.Enabled = false;

        this.rtbCheatSheet.Text = File.ReadAllText(this.ViewModel.CheatSheetFilePath);
    }

    private void OnValidateClick(object sender, System.EventArgs e)
    {
        this.ViewModel.SetTemporaryTransformerFileContents(this.rtbXsl.Text);

        this.ViewModel.ValidateXsl(this.rtbXsl.Text,
            validationSuccessful =>
            {
                this.btnSave.Enabled = validationSuccessful;

                this.rtbExampleOutputFileContents.SetFormateText(this.ViewModel.ExampleFileOutputContents);
            });
    }

    private void OnSaveClick(object sender, System.EventArgs e) => this.ViewModel.Save(this.rtbXsl.Text);

    private void OnNotify(NotificationEventArgs obj)
    {
        switch (obj.NotificationType)
        {
            case NotificationType.Info:
                MessageBox.Show(obj.Message, "Information", MessageBoxButtons.OK, MessageBoxIcon.Information);

                if (obj.Exit)
                {
                    this.Close();
                }

                break;
            case NotificationType.Warning:
                MessageBox.Show(obj.Message, "Warning", MessageBoxButtons.OK, MessageBoxIcon.Warning);
                break;
            case NotificationType.Error:
                MessageBox.Show(obj.Message, "Error", MessageBoxButtons.OK, MessageBoxIcon.Error);

                if (obj.Exit)
                {
                    this.Close();
                }

                break;
        }
    }

    private void ModifyTransformerContentsView_FormClosing(object sender, FormClosingEventArgs e)
        => this.ViewModel.DeleteTemporaryModifiedTransformerFile();

    private void OnButtonCheatSheetSaveClick(object sender, System.EventArgs e) =>
        this.ViewModel.SaveCheatSheet(rtbCheatSheet.Text);

    private void ModifyTransformerContentsView_Load(object sender, System.EventArgs e)
    {

    }
}

Any assistance would be appreciated.

Answer 1

The TagPage Control class is derived from the Panel class.
This type of Control is not selectable (ControlStyles.Selectable is set to false in its Constructor), so it doesn't receive focus and cannot be selected with a Mouse click.

You can override this behavior in different ways. Three simple methods:

1. Build a Custom Control derived from TabPage then:

   • in its Constructor, call SetStyle():

     SetStyle(ControlStyles.Selectable | 
              ControlStyles.UserMouse | 
              ControlStyles.StandardClick, true);  
     

   • Create an instance of this Custom Control and add it to the TabPages of a TabControl

2. Build a Custom Control derived from Panel:

   • Set the same ControlStyles in its Constructor
   • Build the Control, find it in the ToolBox and drop it inside a TabPage, then set Dock = DockStyle.Fill and AutoScroll = true (or do this directly in the Custom Control class).
   • Add all child Controls to this Panel.

3. Using Reflection, get the non-public SetStyle method of a TabPage and use MethodInfo.Invoke() to change the values. e.g.,:

    using System.Reflection;
   
    var flags = BindingFlags.NonPublic | BindingFlags.Instance;
    var method = tabPage1.GetType().GetMethod("SetStyle", flags);
    var newStyles = ControlStyles.Selectable | ControlStyles.UserMouse;
    method.Invoke(tabPage1, new object[] { newStyles, true });
   

   You can do this to all TabPages in a loop.