Wpf – How to lose focus on button press

lost-focusmvvmwpf

Simplified:
In my view I've got a xaml page containing a button and some kind of TextBox. The button is bound to a DelegateCommand in the ViewModel, the editbox is bound to some property in the ViewModel.

View:
<Button Command="{Binding MyCommand}"/>
<TextBox Text="{Binding MyString}"/>

ViewModel:
public DelegateCommand MyCommand { get; set; }
public String MyString { get; set; }

Now when the user enters something into the box and clicks on the button, the button does not receive a focus change event. So it will not update it's content to the property. So the property MyString does not reflect the content of the TextBox on clicking the button. So whatever processing MyCommand is doing, it is working with old data and not the current input.

Now if this really was just a TextBox I'd add UpdateSourceTrigger=PropertyChanged to the binding and I'd be good.
But in this case the edit control is a bit more complex and needs to do some validation to the content.
So I need some kind of "lost focus" signal when pressing the button by mouse.

My problem is: in MVVM the code behind for the button does not have any access to the view, so it can't make it lose the focus.

Is there any way in xaml (e.g. in the view) to make the button get the keyboard focus when it is clicked by mouse? That would be the easiest way for my custom control to get a "lost focus" message.

Best Answer

Re: Is there any way in xaml (e.g. in the view) to make the button get the keyboard focus when it is clicked by mouse? > A button does receive keyboard focus when it is clicked – provided the IsEnabled, Focusable, and IsHitTestVisible properties are all set to true as they are by default. To set keyboard focus programmatically call Keybaord.Focus as shown in the example below.

Contrary to a popular meme, Commands do not HAVE to be processed in the VM. If, on command execution, the view needs to be changed independently of the VM, the command can be handled in the view. In fact this is the native pattern for WPF.

The following example shows using the Command property on a button to process a command in the view. For simplicity the example does not have a VM. Even though the command is processed in the view, if there were a VM, the code behind in the view could make calls into it.

public partial class MainWindow : Window
{
    public static readonly RoutedUICommand MyCommand = new RoutedUICommand("My Command", "MyCommand", typeof(MainWindow));
    public String MyString { get; set; }

    public MainWindow()
    {
        MyString = "some text";
        DataContext = this; // this simple example has no VM 
        InitializeComponent();
    }
    private void MyCommand_Executed(object sender, ExecutedRoutedEventArgs e)
    {
        Button1.Content = MyString;
        Keyboard.Focus(Button1);   
    }
}
<Window x:Class="fwLoseFocus.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:me="clr-namespace:fwLoseFocus">
    <Window.CommandBindings>
        <CommandBinding Command="me:MainWindow.MyCommand" Executed="MyCommand_Executed"/>
    </Window.CommandBindings>
    <StackPanel>
        <TextBox Text="{Binding MyString}"/>
        <Button x:Name="Button1" Command="me:MainWindow.MyCommand"/>
    </StackPanel>
</Window>

Related Solutions

C# – How should the ViewModel close the form

I was inspired by Thejuan's answer to write a simpler attached property. No styles, no triggers; instead, you can just do this:

<Window ...
        xmlns:xc="clr-namespace:ExCastle.Wpf"
        xc:DialogCloser.DialogResult="{Binding DialogResult}">

This is almost as clean as if the WPF team had gotten it right and made DialogResult a dependency property in the first place. Just put a bool? DialogResult property on your ViewModel and implement INotifyPropertyChanged, and voilà, your ViewModel can close the Window (and set its DialogResult) just by setting a property. MVVM as it should be.

Here's the code for DialogCloser:

using System.Windows;

namespace ExCastle.Wpf
{
    public static class DialogCloser
    {
        public static readonly DependencyProperty DialogResultProperty =
            DependencyProperty.RegisterAttached(
                "DialogResult",
                typeof(bool?),
                typeof(DialogCloser),
                new PropertyMetadata(DialogResultChanged));

        private static void DialogResultChanged(
            DependencyObject d,
            DependencyPropertyChangedEventArgs e)
        {
            var window = d as Window;
            if (window != null)
                window.DialogResult = e.NewValue as bool?;
        }
        public static void SetDialogResult(Window target, bool? value)
        {
            target.SetValue(DialogResultProperty, value);
        }
    }
}

I've also posted this on my blog.

C# – Binding a WPF ComboBox to a custom list

You set the DisplayMemberPath and the SelectedValuePath to "Name", so I assume that you have a class PhoneBookEntry with a public property Name.

Have you set the DataContext to your ConnectionViewModel object?

I copied you code and made some minor modifications, and it seems to work fine. I can set the viewmodels PhoneBookEnty property and the selected item in the combobox changes, and I can change the selected item in the combobox and the view models PhoneBookEntry property is set correctly.

Here is my XAML content:

<Window x:Class="WpfApplication6.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300">
<Grid>
    <StackPanel>
        <Button Click="Button_Click">asdf</Button>
        <ComboBox ItemsSource="{Binding Path=PhonebookEntries}"
                  DisplayMemberPath="Name"
                  SelectedValuePath="Name"
                  SelectedValue="{Binding Path=PhonebookEntry}" />
    </StackPanel>
</Grid>
</Window>

And here is my code-behind:

namespace WpfApplication6
{

    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
            ConnectionViewModel vm = new ConnectionViewModel();
            DataContext = vm;
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            ((ConnectionViewModel)DataContext).PhonebookEntry = "test";
        }
    }

    public class PhoneBookEntry
    {
        public string Name { get; set; }

        public PhoneBookEntry(string name)
        {
            Name = name;
        }

        public override string ToString()
        {
            return Name;
        }
    }

    public class ConnectionViewModel : INotifyPropertyChanged
    {
        public ConnectionViewModel()
        {
            IList<PhoneBookEntry> list = new List<PhoneBookEntry>();
            list.Add(new PhoneBookEntry("test"));
            list.Add(new PhoneBookEntry("test2"));
            _phonebookEntries = new CollectionView(list);
        }

        private readonly CollectionView _phonebookEntries;
        private string _phonebookEntry;

        public CollectionView PhonebookEntries
        {
            get { return _phonebookEntries; }
        }

        public string PhonebookEntry
        {
            get { return _phonebookEntry; }
            set
            {
                if (_phonebookEntry == value) return;
                _phonebookEntry = value;
                OnPropertyChanged("PhonebookEntry");
            }
        }

        private void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
        public event PropertyChangedEventHandler PropertyChanged;
    }
}

Edit: Geoffs second example does not seem to work, which seems a bit odd to me. If I change the PhonebookEntries property on the ConnectionViewModel to be of type ReadOnlyCollection, the TwoWay binding of the SelectedValue property on the combobox works fine.

Maybe there is an issue with the CollectionView? I noticed a warning in the output console:

System.Windows.Data Warning: 50 : Using CollectionView directly is not fully supported. The basic features work, although with some inefficiencies, but advanced features may encounter known bugs. Consider using a derived class to avoid these problems.

Edit2 (.NET 4.5): The content of the DropDownList can be based on ToString() and not of DisplayMemberPath, while DisplayMemberPath specifies the member for the selected and displayed item only.

Best Answer

Related Solutions

C# – How should the ViewModel close the form

C# – Binding a WPF ComboBox to a custom list

Related Topic