Syed
Syed

Reputation: 931

Usercontrol events in VM or View in MVVM

I am using MVVM pattern in my application. I have some issues where to handle the events of Usercontrol.

I have a user control which is called DatePicker contains two textboxes(for start date and end date), and button which fetch data from model for particular range of date.

When I focus any of the textboxes I need to change its border color(say Green). When user enter wrong date value again I need to change the border color with Red.

If user enter wrong date values then I need to disable the button also.

What is the best practice to handle these events?

Thanks in advance.

Note: I modified the application in such way that, the user can enter date manually also, when the start date textbox is focused Calendar will be shown as a popup and when he/she focused end date textbox again Calendar will be shown with blocking the dates which is selected/typed in start date text box.

Sorry for late edit.

Upvotes: 1

Views: 461

Answers (2)

Robert Rossney
Robert Rossney

Reputation: 96702

The best practice for handling the events you're describing is not to use events. Use styles to change the visual appearance of focused elements, commands to enable/disable buttons, and validation to change the appearance of controls when bad data is entered.

There are still use cases for events in user controls. When they're needed, usually the best thing to do is to put the event handlers in the control's code-behind, and make the event handlers communicate with the view model by setting known properties on the DataContext. It's a good idea to create an interface if you do this, which will clarify the nature of the interoperation between the control and the view model, and limit what the user control needs to know about the object it's communicating with.

Upvotes: 2

Ashley Grenon
Ashley Grenon

Reputation: 9565

If you need to update the appearance of the UI based on invalid data from the user, you should look into Data Validation. Here's another useful link on the topic.

For changing the border color green, you should consider using a style. I, unfortunately, am unable to test this out for you at the moment, but you should look into the property FocusVisualStyle.

The MSDN documentation says it:

Gets or sets a property that enables customization of appearance, effects, or other style characteristics that will apply to this element when it captures keyboard focus.

Hope that helps! When I get on a computer with VS installed, I'll try to see if I can get a nice sample together of using the FocusVisualStyle property. I haven't used it yet, so this should be interesting. :o)

EDIT:

Okay, so for the "on focus, highlight TextBox border green" you can use a style very similar to this.

   <Window.Resources>
        <Style TargetType="TextBox">
            <Style.Triggers>
                <Trigger Property="IsFocused" Value="True">
                    <Setter Property="BorderBrush" Value="Green" />
                    <Setter Property="BorderThickness" Value="2" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>

I increased the BorderThickness to 2 so the change to green would be more noticeable.

Upvotes: 2

Related Questions