To code or not to code - for a mousewheel?

Jul 3, 2013 at 5:29 AM
Markus,
In trying to keep with the whole FW approach, what is the recommended approach to add such effects as scroll wheel support, etc.

I know I can add a MouseWheelEventHandler to my model and bind to that, but figured that with all the other cool stuff you have built into your templates, you may have this built in as well - at least to scroll froms when the controls are not on the visible page.

So I thought I would check before I started writing code to do that.

Thanks,

Fletcher
Coordinator
Jul 8, 2013 at 12:18 AM
The mouse wheel should work in places like lists, or large text areas or such. For custom scenarios however, it is fine to bind a command to the wheel events.

Are there any specific scenarios you are thinking of?


Markus
Jul 8, 2013 at 11:34 PM
Markus,

The mouse works great with the listboxes. But I have an edit form. If I just put the controls in (label/Textbox) - they form one column and extend well below the page. A scrollbar appears to the right, but the mouse wheel is ignored.

It makes sense that the listbox supports the mouse wheel by default. But I can't seem to get the edit form to scroll. I have found code, but before I start trying to implement it, I thought I would check with you first.

On that same note, when I try to add code to a form, it complains that I don't have a code behind page set up. I don't really want one as I believe all the code should be in the Model, not in a code behind page. But it's nice to be able to have the IDE create the various events for me (even if I then move them to the model).

Do you have any suggestions or recommendations on this? I think it's similar in that I was going to use something like this approach to implement the mouse scroll in the edit form.

Thanks,

Fletcher
Coordinator
Jul 12, 2013 at 12:53 AM
Ah, that is true. That form doesn't support mouse-wheel stuff out of the box.

What you could do is re-define that style and then wire up your own events to commands. Or, alternatively, you could subclass the edit form panel we have and put your C# code right in there. But I would recommend the first approach. Using that, you could put your changed style into your theme resources local to your project, which will change that style globally for your app.

Here's an example:
<Style TargetType="ItemsControl" x:Key="CODE.Framework-Layout-EditFormLayout" BasedOn="{StaticResource CODE.Framework-Layout-EditFormLayout}">
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <layout:EditForm Margin="10" LayoutElasticity="LayoutAndReflow">
                    <c:Ex.EventCommand>
                        <c:EventCommand Command="{Binding MyMouseWheelCommand}" Event="MouseWheel" />
                    </c:Ex.EventCommand>
                </layout:EditForm>
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
</Style>
If you wanted to use the second approach with subclassing the control and adding your own code there, you would first create a subclass of the EditForm class like this:
public class MyEditForm : EditForm
{
    public MyEditForm()
    {
        // Wire up whatever events you would like here...
    }
}
Then, you still change your style to use the newly created form instead of the default one:
<Style TargetType="ItemsControl" x:Key="CODE.Framework-Layout-EditFormLayout" BasedOn="{StaticResource CODE.Framework-Layout-EditFormLayout}">
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <my:MyEditForm Margin="10" LayoutElasticity="LayoutAndReflow" />
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
</Style>
So you basically copy the default style and replace the line that brings in the EditForm class with your new MyEditForm class.


Markus