Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Binding commands to ToggleButton Checked and Unchecked events

I have a ToggleButton in my C# WPF application where I would like to bind one Command to the Checked event and one Command to the Unchecked event.

What I have currently is the following:

<ToggleButton Name="btnOpenPort" Style="{StaticResource myOnOffBtnStyle}" Content="Open Port"
              Checked="btnOpenPort_Checked" Unchecked="btnOpenPort_Unchecked"
              IsChecked="{Binding Path=PortViewModel.PortIsOpen, Mode=OneWay}"
              Canvas.Left="75" Canvas.Top="80" Height="25" Width="100"/>

But this is not what I aim to do. Because in this case, I would have to set properties in the code behind for the Checked and Unchecked event. Instead, I would like to call a Command (ICommand) in my ViewModel once the Checked or Unchecked event gets fired so that I don't need any code-behind for my toggle button.

Is there a way to bind a command directly for these two events in XAML? Similar to the command property of the "standard" button control in WPF?

EDIT This is how it works with regards to @har07 hint:

1: Added references if you dont have it yet:

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ei="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions"

2: Implemented Interaction.Triggers for Checked and Unchecked events:

<ToggleButton 
        Name="btnOpenPort" Style="{StaticResource myOnOffBtnStyle}" Content="Open Port"
        IsChecked="{Binding Path=PortViewModel.PortIsOpen, Mode=OneWay}"
        Canvas.Left="75" Canvas.Top="80" Height="25" Width="100">
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="Checked">
                <i:InvokeCommandAction Command="{Binding Path=PortViewModel.OpenPort}"/>
            </i:EventTrigger>
            <i:EventTrigger EventName="Unchecked">
                <i:InvokeCommandAction Command="{Binding Path=PortViewModel.ClosePort}"/>
            </i:EventTrigger>
        </i:Interaction.Triggers>
</ToggleButton>

With this solution, I don't have to change a single line of code in my ViewModel or my code behind. I can just call my ICommand as I would do it with a standard button following MVVM pattern.

like image 520
ck84vi Avatar asked Sep 11 '14 03:09

ck84vi


People also ask

When we checked and unchecked toggle button which event is handled?

Android Toggle Button can be used to display checked/unchecked (On/Off) state on the button. It is beneficial if user have to change the setting between two states. It can be used to On/Off Sound, Wifi, Bluetooth etc. Since Android 4.0, there is another type of toggle button called switch that provides slider control.

What is command binding in WPF?

The command is the action to be executed. The command source is the object which invokes the command. The command target is the object that the command is being executed on. The command binding is the object which maps the command logic to the command.

How do I check my toggle button?

To check current state of a toggle button programmatically we use isChecked() method. This method returns a Boolean value either true or false. If a toggle button is checked then it returns true otherwise it returns false.


1 Answers

you may not be able to bind two commands for each checked and unchecked directly however you can still bind a command, which will be invoked for both. you also have option for attached behaviors if you need different command for both events.

<ToggleButton Command="{Binding MyCommand}"/>

in the vm

public ICommand MyCommand { get; private set; }

you will need to initialize it accordingly

and to determine the current state you may have a condition on the bonded property PortIsOpen

void Execute(object state)
{
    if(PortIsOpen)
    {
        //checked
    }
    else
    {
        //unchecked
    }
}

or perhaps you may pass it as a parameter too

eg

<ToggleButton Command="{Binding MyCommand}" 
              CommandParameter="{Binding IsChecked,RelativeSource={RelativeSource Self}}"/>

and use it as

void Execute(object state)
{
    if((bool)state)
    {
        //checked
    }
    else
    {
        //unchecked
    }
}
like image 184
pushpraj Avatar answered Sep 19 '22 11:09

pushpraj