1

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.

Syed
  • 931
  • 13
  • 28

2 Answers2

2

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.

Ashley Grenon
  • 9,305
  • 4
  • 41
  • 54
  • The question in regarding where events should be handled in MVVM pattern. Any how thanks for your answer. – Syed Aug 14 '11 at 11:31
  • well if I understand your question correctly you don't necessarily need to create events. For example, wanting to change the border color is something you want to do as a style, not an event. Changing the border color red on invalid input is a good situation to use data validation. – Ashley Grenon Aug 14 '11 at 14:05
  • if you're having trouble deciding whether or not to put event handling in the code behind or using commanding, here's a useful question you should check out: http://stackoverflow.com/questions/6137771/events-rather-than-commands-in-mvvm – Ashley Grenon Aug 14 '11 at 14:17
2

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.

Robert Rossney
  • 94,622
  • 24
  • 146
  • 218
  • So you mean to say that in MVVM pattern the "View" can contain code behind also for event handling? – Syed Aug 15 '11 at 05:25
  • Sure. An example: a ListBox where clicking on the selected item or pressing F2 lets you edit its text, and you can press ESC to abort the edit or ENTER to save. To make this, you have to handle mouse-up and key-press events in the view. The view model needs to expose a `Text` property and an `IsEditingText` property (which the style in the `ItemTemplate` uses to determine whether a `TextBox` or `TextBlock` should present the `Text`). Eventually this evolves into a custom control for use with view models that implement an `IEditableText` interface. – Robert Rossney Aug 15 '11 at 16:32