Wpf toggle button content on click

Go To StackoverFlow.com

6

I want to change the button content depends on the previous content lick if its Add the it should change in Save and if its Save then it should change to Add. I know how to change the content of a button but how can I read the content to be changed.

2012-04-04 03:10
by Hasan Zubairi


6

Store the value of last click in the tag property of that button and check for its value on click.

Tag Description

Gets or sets an arbitrary object value that can be used to store custom information about this element.

MSDN Link

OR

void MyButton_OnClick(object sender, RoutedEventArgs e)
{
    if(mybutton.Content.ToString() == "Add")
    {
        \\ Lines for add
        mybutton.Content = "Save";
    }
    else
    {
        \\ Lines for Save
        mybutton.Content = "Add";    
    }
}
2012-04-04 03:14
by Nikhil Agrawal
This is not how you show do this in WPF. Maybe in WinForms - Alexandru Dicu 2018-11-21 12:23


12

If you are using MVVM, bind the content to a value and bind the command to function.

<Button Content="{Binding ButtonText}" Command="{Binding ButtonClickCommand}"/>

Of course, you then have String ButtonText and ButtonClickCommand as properties in your ViewModel.

private string _ButtonText;
public string ButtonText
{
    get { return _ButtonText ?? (_ButtonText = "Add"); }
    set
    { 
        _ButtonText = value;
        NotifyPropertyChanged("ButtonText"); 
    }
}

private ICommand _ButtonClickCommand;
public ICommand ButtonClickCommand
{
    get { return _ButtonClickCommand ?? (_ButtonClickCommand = _AddCommand); }
    set
    {
        _ButtonClickCommand = value;
        NotifyPropertyChanged("ButtonClickCommand");
    }
} 

private ICommand _AddCommand = new RelayCommand(f => Add());
private ICommand _SaveCommand = new RelayCommand(f => Save());

private void Add()
{
    // Add your stuff here

    // Now switch the button   
    ButtonText = "Save";
    ButtonClickCommand = SaveCommand;
}

private void Save()
{
    // Save your stuff here

    // Now switch the button   
    ButtonText = "Add";
    ButtonClickCommand = AddCommand;
}

Then you can have the ButtonClickCommand change the properties and binding takes care of everything.

2012-04-04 03:35
by Rhyous
How do you get NotifyPropertyChanged() to be accessible? What do you have to implement - rolls 2017-01-20 05:19
When I answered this, I was likely using a ViewModelBase with NotifyPropertyChanged already implemented. See Step 2 of this article: http://www.rhyous.com/2010/12/29/a-progress-bar-using-wpfs-progress-bar-control-backgroundworker-and-mvvm - Rhyous 2017-01-20 18:34
Id recommend you show that in your answer, eg what namespaces you are using (really helpful to show using statements) and what you are extending - rolls 2017-01-21 04:34


6

I agree with Surfens answer that the question here is not a perfect example for a ToggleButton because "Save" and "Add" a really different operations which should each have the own "ICommand" set on the respective button.

But here is some style that will change the content depending on the IsChecked value of the ToggleButton.

The content will be "ValueForUnToggledState" if the button is not checked and change to "ValueForToggledState" when checked.

<ToggleButton>
    <ToggleButton.Style>
        <Style TargetType="{x:Type ToggleButton}">
            <Setter Property="Content" Value="ValueForUnToggledState" />
            <Style.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Content" Value="ValueForToggledState" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </ToggleButton.Style>
</ToggleButton>

This is more WPF like than some of the other answers.

2017-06-09 07:27
by Martin


3

Your application would be better designed if you created 2 buttons AddButton and SaveButton, and you show or hide them respectively (using Visibility property)

Why? It's a metter of Separation of Concerns. For example, in the click handler you wouldn't need to check the mode you're in, because you'll have separate handlers. You will also want the buttons to have different icons, different Tooltips, etc.

2012-04-04 03:14
by surfen
I always wondered if this was a simpler solution - rolls 2017-01-20 22:41


3

You can also use a ToggleButton with EventTriggers to execute the different methods for Checked and Unchecked states.

<ToggleButton x:Name="ToggleButton" Content="Add"
              Style="{StaticResource ToggleStyle}"
              IsThreeState="False">
     <i:Interaction.Triggers>
      <i:EventTrigger EventName="Checked">
      <ei:CallMethodAction MethodName="Save" TargetObject="{Binding}" />
     </i:EventTrigger>
     <i:EventTrigger EventName="Unchecked">
       <ei:CallMethodAction MethodName="Add" TargetObject="{Binding}" />
     </i:EventTrigger>
 </i:Interaction.Triggers>
 </ToggleButton>

You can also use a style to modify the ToggleButton template and change the text for the checked state. To do this, get a copy of the ToggleButton style and in the Checked VisualState add this to the story board:

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.Content)">
 <DiscreteObjectKeyFrame KeyTime="0">
    <DiscreteObjectKeyFrame.Value>
         Save
    </DiscreteObjectKeyFrame.Value>
   </DiscreteObjectKeyFrame>
 </ObjectAnimationUsingKeyFrames>

If you'd rather not go down that route then you could add this to your Checked Triggers:

<ei:ChangePropertyAction PropertyName="ButtonText" Value="Save"/>

To use these approaches you will need a reference to the Microsoft.Expression.Interactions and System.Windows.Interactivity binaries from C:\Program Files (x86)\Microsoft SDKs\Expression\Blend.NETFramework\v4.5\Libraries.

2014-08-07 15:08
by santos
what are the namespaces i and ei ??? This is not helpful at al - sLw 2018-08-14 15:14
They are blend namespace aliases in the xaml for Microsoft.Expression.Interaction (ei) and System.Windows.Interactivit - santos 2018-08-29 13:59
Ads