Prism WPF Data Binding

1. Create an empty Prism WPF project and apply Material Design In XAML Toolkit and MahApps.Metro with the same way you created MaterialDesignWithMetro. In the repository, the project name is DataBinding.

2. Modify Views/MainWindow.xaml to use MetroWindow as in MaterialDesignWithMetro. Then add the highlighted lines of codes.

I prepared a Window that displays a current date and time and updates it with a latest date and time by pressing a button. A Label to display the date and time and a Button to update the date and time are in a StackPanel. The ContentControl in the following code is not used this time.

<metro:MetroWindow x:Class="DataBinding.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:metro="http://metro.mahapps.com/winfx/xaml/controls"
        xmlns:prism="http://prismlibrary.com/"
        prism:ViewModelLocator.AutoWireViewModel="True"
        Title="{Binding Title}" Height="350" Width="525" >
    <Grid>
        <StackPanel>
            <Label FontSize="16" Content="{Binding DateTimeLabel}" />
            <Button Content="Update Time" Command="{Binding DateTimeUpdateButton}"/>
            <ContentControl prism:RegionManager.RegionName="ContentRegion" />
        </StackPanel>
    </Grid>
</metro:MetroWindow>

3. Rewrite Views/MainWindow.xaml.cs as in MaterialDesignWithMetro.

using MahApps.Metro.Controls;

namespace DataBinding.Views
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : MetroWindow
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

4. Rewrite ViewModels/MainWindowViewModel.cs as follows. The highlighted lines are the lines that were rewritten or added.

In line 8, the title of the window is changed to “Prism DataBinding”.

In lines 15-20, the string property DateTimeLabel to be displayed is prepared. DateTimeLabel is bound to the Content of the Label in MainWindow.xaml. The following codes will change the string to be displayed immediately after the value of the DateTimeLabel is changed.

DateTimeUpdateButton declared in line 22 is bound to the Button’s Command in MainWindow.xaml.
In line 26, the function DateTimeUpdateButtonExecute is passed to the constructor of DelegateCommand. The DateTimeUpdateButtonExecute function is executed when the Button is clicked.

Lines 29-32 describe the function that is called when the Button is pressed. System.DateTime.Now.ToString() is used to obtain the date and time string when the button is clicked. The string is set to the DateTimeLabel. As soon as the value of the DateTimeLabel is changed, the value displayed in the Label of MainWindow is also updated.

using Prism.Commands;
using Prism.Mvvm;

namespace DataBinding.ViewModels
{
    public class MainWindowViewModel : BindableBase
    {
        private string _title = "Prism DataBinding";
        public string Title
        {
            get { return _title; }
            set { SetProperty(ref _title, value); }
        }

        private string _dateTimeLabel = System.DateTime.Now.ToString();
        public string DateTimeLabel
        {
            get { return _dateTimeLabel; }
            set { SetProperty(ref _dateTimeLabel, value); }
        }

        public DelegateCommand DateTimeUpdateButton { get; }

        public MainWindowViewModel()
        {
            DateTimeUpdateButton = new DelegateCommand(DateTimeUpdateButtonExecute);
        }

        private void DateTimeUpdateButtonExecute()
        {
            DateTimeLabel = System.DateTime.Now.ToString();
        }
    }
}

5. Click on the blue box in the figure to build and start debugging execution.

6. A window named Prism DataBinding will appear, as shown in the figure. The date and time when the program was started is set to the Label section. There is a button named Update Time below the Label.

7. Clicking the Update Time button updates the date and time on the Label.