locked
Binding a button in view with Icommand Interface in the view model

    Question

  • Hello,

    I am trying to develop a windows 8.1 Universal App. I have a text box "WebBox" which requires a website address and there is a go button "GoButton", which on click a) Validates the Website address entered, if correct a webview for navigation is shown, else an alert is given to the user.

    My Xaml file (View) has the following snippet:

    <TextBox x:Name="WebBox" ..... />

    <Button x:Name="GoButton" ... Command = "{Binding Execute}" CommandParameters = "{Binding Text, ElementName = WebBox}" />

    I have defined a ViewModel defined as

    public class WebViewModel : ICommand

    {

       public event EventHandler CanExecuteChanged;           

       public void Execute(object parameter)
            {
                if( the web address in String(parameter) is valid)
                {
                              // Do STH
                }
            }

            public bool CanExecute(object parameter)
            {

                    // do STH

                    return true;

            }

    }

    I am facing an issue that when I click the GoButton, the appropriate event is not getting triggered. Is there anything that needs to be done.

    I have set the datacontext for binding in the xaml.cs file appropriately to the WebViewModel Object.

    Could any one please help in this regards?

    Many Thanks,

    Sreeram


    Thursday, June 12, 2014 11:50 AM

Answers

  • Hi Sreeram

    You can't directly bind the Execute method of ICommand to Button Command, You need to create the command of type ICommand and bind that command to Button. 

    Refer the below code,

    public class ViewModel
        {
            public ICommand ButtonCommand { get; set; }
    
            public ViewModel()
            {
                ButtonCommand =new DelegateCommand(ClickCommand);
            }
    
            private void ClickCommand(object args)
            {
                //Do Something.
            }
        }
    
        public class DelegateCommand : ICommand
        {
            Action<object> executeAction;
            public DelegateCommand(Action<object> action)            
            {
                executeAction = action;
            }
    
    
            public bool CanExecute(object parameter)
            {
                return true;
            }
    
            public event EventHandler CanExecuteChanged;
    
            public void Execute(object parameter)
            {            
                executeAction(parameter);
            }
        }

    //Xaml Part

    <TextBlock Text=" Name" x:Name="txtblk"/>
                <Button Content="CLick"
                        Width="226"
                        Height="50"
                        Command="{Binding ButtonCommand}"
                        CommandParameter="{Binding Text,ElementName=txtblk}" />

    I hope this will help you.


    Santyy

    Thursday, June 12, 2014 12:44 PM

All replies

  • Hi Sreeram

    You can't directly bind the Execute method of ICommand to Button Command, You need to create the command of type ICommand and bind that command to Button. 

    Refer the below code,

    public class ViewModel
        {
            public ICommand ButtonCommand { get; set; }
    
            public ViewModel()
            {
                ButtonCommand =new DelegateCommand(ClickCommand);
            }
    
            private void ClickCommand(object args)
            {
                //Do Something.
            }
        }
    
        public class DelegateCommand : ICommand
        {
            Action<object> executeAction;
            public DelegateCommand(Action<object> action)            
            {
                executeAction = action;
            }
    
    
            public bool CanExecute(object parameter)
            {
                return true;
            }
    
            public event EventHandler CanExecuteChanged;
    
            public void Execute(object parameter)
            {            
                executeAction(parameter);
            }
        }

    //Xaml Part

    <TextBlock Text=" Name" x:Name="txtblk"/>
                <Button Content="CLick"
                        Width="226"
                        Height="50"
                        Command="{Binding ButtonCommand}"
                        CommandParameter="{Binding Text,ElementName=txtblk}" />

    I hope this will help you.


    Santyy

    Thursday, June 12, 2014 12:44 PM
  • Thanks Santyy,

    This explained it all and my issue is resolved. I mark this as answer.

    Regards

    Sreeram

    Friday, June 13, 2014 6:39 AM