How do bind the value of a C# class parameter to XAML components in this case?

Question

I am trying to learn databinding and new in C#. To isolate the code from UI I want to bind the value from the XAML. And I made the following example to ask my question as clear as possible:

Here is the program. I want the progress bar to increase or decrease by using increase or decrease buttons but these should be tied to "value" parameter in a class. The increaseValue method in the class Power returns value and I want to bind that value to the button and the progress bar. So when the user clicks on the button the value will increase and also the progress bar will be tied to the new value:

XAML code:

<Window x:Class="WpfBindingTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfBindingTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>
        
        <Grid.RowDefinitions>
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
        </Grid.RowDefinitions>

        <Button x:Name="Increase" Content="Increase" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></Button>
        <Button  Grid.Row="1" x:Name="Decrease" Content="Decrease" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></Button>
        <ProgressBar Grid.Row="0" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Center" Height="10"></ProgressBar>
        <Label Grid.Row="1" Grid.Column="1"  HorizontalAlignment="Stretch" VerticalAlignment="Center"></Label>
        
    </Grid>
</Window>

MainWindow.xaml.cs:

namespace WpfBindingTest
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        Power power = new Power();
        public MainWindow()
        {
            InitializeComponent();          
        }
    }
}

class Power:

namespace WpfBindingTest
{
    public class Power
    {

        public int increaseValue(int value)
        {
            value++;
            return value;
        }
    }
}

I can achieve what I want by code but I want to isolate the Power class from UI but super confused about how to do data binding.

Answer 1

I have currently no way to test my answer, so please take this with a grain of salt:

First of all, if you want to bind to the Power class, you have to set it as Datacontext in MainWindow.xaml.cs:

namespace WpfBindingTest
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        Power power = new Power();
        DataContext = power;
        public MainWindow()
        {
            InitializeComponent();          
        }
    }
}

Then Add the RelaisCommand class, which inherits from ICommand to your project (you can simply copy this code:

public class RelayCommand : ICommand
    {
        #region Private Fields
        private readonly Action<object> _executeHandler;
        private readonly Predicate<object> _canExecuteHandler;
        #endregion

        #region Constructors
        public RelayCommand(Action<object> execute) : this(execute, null)
        {
        
        }
        public RelayCommand(Action<object> execute, Predicate<object> canExecute)
        {
            if (execute == null)
                throw new ArgumentNullException("Execute cannot be 'null'!");
            _executeHandler = execute;
            _canExecuteHandler = canExecute;
        }
        #endregion

        #region public Methods
        public void Execute(object parameter)
        {
            _executeHandler(parameter);
        }
        public bool CanExecute(object parameter)
        {
            if (_canExecuteHandler == null) return true;
            return _canExecuteHandler(parameter);
        }
        #endregion

        #region Events
        public event EventHandler CanExecuteChanged
        {
            add { CommandManager.RequerySuggested += value; }
            remove { CommandManager.RequerySuggested -= value; }
        }
        #endregion

    }

In your Power class, you can add a Binding property as follows:

public class Power
{

    ICommand increaseValueCommand;
    int value = 0;

    /// <summary>
    /// Command to increase value
    /// </summary>
    public ICommand IncreaseValueCommand
    {
        get
        {
            return increaseValueCommand?? (increaseValueCommand= new RelayCommand(command => increaseValue()));
        }
    }

    public void increaseValue()
    {
        value++;
    }
}

In your xaml you then should be able to bind the button command to your ICommand interface:

<Button x:Name="Increase" Content="Increase" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Command={Binding IncreaseValueCommand}>

Keep in mind, that while this binds the Button command to your ICommand Interface, which subsequently will execute your increaseValue() Method, if you want to bind value (which I change to be a private property of the Power class) to the Progressbar, you will have to implement the INotifyPropertyChanged Interface. How this is done, is also shown in my MVVM example in the repo linked in the commments above.