How to fire event from ComboBox inside StackPanel in WPF and MVVM

I have ComboBox inside StackPanel. I am using MVVM and try to bind 'GotFocus' event Command to Command in ViewModel but when I Click on 'ComboBox', it don't work (It don't call Command in ViewModel) but if I move that 'ComboBox' out of 'StackPanel' it's working properly.

How can I fire event from 'CombBox' inside 'StackPanel' in MVVM?

  <StackPanel x:Name="StackPanel" Grid.Column="2" Grid.Row="6">
    <ComboBox x:Name="ComboBox" ItemsSource="{Binding Values}">
      <i:Interaction.Triggers>
        <i:EventTrigger EventName="GotFocus">
          <cmd:EventToCommand Command="{Binding Path=GotFocusCommand}"/>
        </i:EventTrigger>
      </i:Interaction.Triggers>
    </ComboBox>
  </StackPanel>

ViewModel's code is:

public ViewModelCommand GotFocusCommand { get; set; } 

Answers


////Change your tag from EventToCommand to InvokeCommandAction

<StackPanel x:Name="StackPanel" Grid.Column="2" Grid.Row="6">
<ComboBox x:Name="ComboBox" ItemsSource="{Binding Values}">
  <i:Interaction.Triggers>
    <i:EventTrigger EventName="GotFocus">
      <cmd:InvokeCommandAction="{Binding Path=GotFocusCommand}"/>
    </i:EventTrigger>
  </i:Interaction.Triggers>
</ComboBox>

////Then, I use my commands this way in my view model:

  private ICommand _GotFocusCommand;
    public ICommand GotFocusCommand
    {
        get
        {
            if (_GotFocusCommand == null)
            {
                _GotFocusCommand =
                    new RelayCommand(
                        param => GotFocusCommand_Executed(),
                        GotFocusCommand_CanExecute
                     );
            }

            return _GotFocusCommand;
        }
    }

////RelayCommandClass.cs:

public class RelayCommand : ICommand
{
private Action _handler;
public RelayCommand(Action handler)
{
    _handler = handler;
}

private bool _isEnabled;
public bool IsEnabled
{
    get { return _isEnabled; }
    set
    {
        if (value != _isEnabled)
        {
            _isEnabled = value;
            if (CanExecuteChanged != null)
            {
                CanExecuteChanged(this, EventArgs.Empty);
            }
        }
    }
}

public bool CanExecute(object parameter)
{
    return IsEnabled;
}

public event EventHandler CanExecuteChanged;

public void Execute(object parameter)
{
    _handler();
}
}

////Finally, you can create an event in your view model:

private void GotFocusCommand_Executed()
    {
        //DoSomething here
    }

private bool GotFocusCommand_CanExecute()
    {
        return true;
    }

Need Your Help

Dynamically create bootstrap alerts box through javascript

javascript twitter-bootstrap

I'm using bootstrap 2.0 for my project and I would like to dynamically add bootstrap alert box in my page (http://twitter.github.com/bootstrap/javascript.html#alerts). I want to do something like

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.