SimpleMVVM, Part 4: Implementing the page frame 08/02/2017
SimpleMVVM
0 Comment

You might have noticed that we forgot the “Main Menu” button in the page frame. Let’s add a button to the data template of the page frame:

<DataTemplate DataType="{x:Type VM:PageFrameVM}">
    <Border Style="{StaticResource ContentBorder}">
        <StackPanel>
            <ContentPresenter Content="{Binding CurrentPage}" />
            <Button Content="Main Menu" />
        </StackPanel>
    </Border>
</DataTemplate>

If you run the program, you’ll see this:

The button is far too long and the font is far too small. Add another style for the button to the App.xaml file:

<Style TargetType="Button">
    <Setter Property="FontSize" Value="20" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="Width" Value="175" />
    <Setter Property="Margin" Value="5" />
    <Setter Property="FontWeight" Value="Bold" />
</Style>

That looks better now but actually the main menu page shouldn’t have a button at all…

We need a Visibility property in the PageFrameVM class that the data template can bind to.
Add a MainMenuButtonVisibility property for the button to PageFrameVM:

using System.Windows;

namespace SimpleMVVM.ViewModels
{
    public class PageFrameVM : ViewModelBase
    {
        private Visibility _mainMenuButtonVisibility;

        public Visibility MainMenuButtonVisibility
        {
            get
            {
                return _mainMenuButtonVisibility;
            }
            set
            {
                _mainMenuButtonVisibility = value;
                NotifyPropertyChanged();
            }
        }
    }
}

Bind to this property from the data template for the PageFrameVM class:

<DataTemplate DataType="{x:Type VM:PageFrameVM}">
    <Border Style="{StaticResource ContentBorder}">
        <StackPanel>
            <ContentPresenter Content="{Binding CurrentPage}" />
            <Button Content="Main Menu" Visibility="{Binding MainMenuButtonVisibility}" />
        </StackPanel>
    </Border>
</DataTemplate>

Whether the main menu button should be displayed is actually depending on the page, so define the same property in the PageVM class:

using System.Windows;

namespace SimpleMVVM.ViewModels
{
    public class PageVM : ViewModelBase
    {
        private Visibility _mainMenuButtonVisibility = Visibility.Visible;
        // ...

        public Visibility MainMenuButtonVisibility
        {
            get
            {
                return _mainMenuButtonVisibility;
            }
            set
            {
                _mainMenuButtonVisibility = value;
                NotifyPropertyChanged();
            }
        }
    }
}

Note: we give the property a default value of Visible, which means that the button is displayed by default, so we only have to take care of the pages, that don’t require the button, like our MainMenuPageVM:

using System.Windows;

namespace SimpleMVVM.ViewModels
{
    public class MainMenuPageVM : PageVM
    {
        public MainMenuPageVM(ISystemConnector systemConnector, PageFrameVM pageFrame)
            : base(systemConnector, pageFrame)
        {
            _quitCommand = new RelayCommand(ExecuteQuit, QuitCanExecute);
            _showEditCustomerPageCommand = new RelayCommand(ExecuteShowEditCustomerPageCommand, ShowEditCustomerPageCommandCanExecute);
            MainMenuButtonVisibility = Visibility.Collapsed;
        }

        // ...
    }
}

Now when a new page is displayed, the page frame should get the MainMenuButtonVisibility from the new page and set it as the MainMenuButtonVisibility of the page frame:

using System.Windows;

namespace SimpleMVVM.ViewModels
{
    public class PageFrameVM : ViewModelBase
    {
        // ...
        public PageVM CurrentPage
        {
            get { return _currentPage; }
            set
            {
                _currentPage = value;
                if (_currentPage != null)
                {
                    MainMenuButtonVisibility = _currentPage.MainMenuButtonVisibility;
                }
                NotifyPropertyChanged();
            }
        }
    }
}

Now the button should be gone…