UWP ToggleButton text depending on IsChecked C#

Question

I would to change the button text from "Run" to "Stop" and backwards in the UWP application and change the boolean property for click flag. I tried using Microsoft XamlBehaviors library.

XAML:

<ToggleButton x:Name="ToggleButton" Grid.Row="1" Grid.Column="0"
                      Height="79" HorizontalAlignment="Stretch" Margin="33,0,-74,0"
                      IsChecked="{Binding IsGraphRenderingEnabled, Mode=TwoWay}"
                      Command="{Binding ToogleGraphRendering}">

            <Grid>
                <interactivity:Interaction.Behaviors>
                    <core:DataTriggerBehavior
                        Binding="{Binding IsChecked, 
                            ElementName=ToggleButton}"
                        Value="True" />
                    <core:DataTriggerBehavior
                        Binding="{Binding IsChecked, 
                            ElementName=ToggleButton}"
                        Value="False" />
                    <core:ChangePropertyAction TargetObject="{Binding GraphRenderingButtonText}"
                                               PropertyName="Content"
                                               Value="Run" />

                </interactivity:Interaction.Behaviors>

            </Grid>
        </ToggleButton>

Code behind:

 public MainViewModel()
    {
        InitializeCommands();
    }
    private bool _isGraphRenderingEnabled;

    public bool IsGraphRenderingEnabled
    {
        get => _isGraphRenderingEnabled;
        set => SetField(ref _isGraphRenderingEnabled, value);
    }

    private string _graphRenderingButtonText;
    public string GraphRenderingButtonText
    {
        get => _graphRenderingButtonText;
        private set => SetField(ref _graphRenderingButtonText, value);
    }
    
    private void InitializeCommands()
    {
        ToogleGraphRendering = new RelayCommand(StartStopRendering);
    }

    private async void StartStopRendering()
    {
        if (IsGraphRenderingEnabled)
        {
            GraphRenderingButtonText = "Stop";
            var contentDialog = new ContentDialog
            {
                Title = "Attention!",
                Content = "Are you sure to stop rendering?",
                PrimaryButtonText = "ОК",
                SecondaryButtonText = "Cancel"
            };

            await contentDialog.ShowAsync();
        }
    }

It works doesn't correctly. I Can't change button text. So I think I have mistake in Xaml Behaviors but I can't figure out where...

Answer 1

I would add the following code to your MainViewModel class:

public string RenderToggleText(bool? c)
    => c is bool check && check ? "Stop" : "Run";

And define your ToggleButton in the XAML as follows:

<ToggleButton x:Name="ToggleButton" Grid.Row="1" Grid.Column="0"
              Height="79" HorizontalAlignment="Stretch" Margin="33,0,-74,0"
              IsChecked="{Binding IsGraphRenderingEnabled, Mode=TwoWay}"
              Command="{Binding ToogleGraphRendering}"
              Content="{x:Bind RenderToggleText(ToggleButton.IsChecked), Mode=OneWay}"/>

The RenderToggleButton method will now be called when the IsChecked value of the ToggleButton changes, therefore updating its content accordingly.

Since you already seem to have a GraphRenderingButtonText property in place that implements INotifyPropertyChanged, you could also just bind the Content of the ToggleButton to this property:

Content="{x:Bind GraphRenderingButtonText, Mode=TwoWay}"

However with the first method you don't need this property anymore, and you thus don't have to change it, since it is done automatically.