WPF Statusbar with dynamic content in MVVM

Question

I want to create a way to flexibly display status information and possibly also including interactive features, like retrying an operation if there was an error. In my opinion that is too big of a task for the main window where my status bar is currently managed.

That's why I want to have the statusbar as own view with a viewmodel, as well as a model that is responsible for creating the different status objects later managed by the viewmodel. Depending on the size of the resulting code, I'd maybe even merge the model and viewmodel using just the viewmodel for everything, though at the moment I'm unwilling to give other parts of my application direct access to a viewmodel.

My question is: What is the best way to move my statusbar in an own view with viewmodel?

I was thinking about using a content control in the MainWindow.xaml which gets the viewmodel with databinding, and associates the view with an DataTemplate located in the Window.Resources (I display all my viewmodels like this, currently). What I don't know, is whether this works out like I want it to. Since I'm new to WPF I'm not sure if there are any implications with using a ContentControl for displaying a statusbar.
Another idea was to create a usercontrol or if this doesn't work even a derivate of Statusbar to achieve the result, if the ContentControl doesn't work.

Since the approaches are fairly different, I'd like to get some hints before starting, to avoid having to refactor everything later.

Answer 1

This would be the status XAML as a User Control...

<UserControl x:Class="UserControls.UCFooter"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d"
             d:DesignHeight="24" d:DesignWidth="600">
    <Grid>
        <StatusBar HorizontalAlignment="Stretch">
            <StatusBarItem  Width="120">
                <TextBlock>Status:</TextBlock>
            </StatusBarItem>
            <StatusBarItem HorizontalAlignment="Stretch">
                <TextBlock x:Name="XTBStatus" >Ready</TextBlock>
            </StatusBarItem>
            <StatusBarItem HorizontalAlignment="Right">
                <ProgressBar x:Name="XPB" Width="100" Height="10"></ProgressBar>
            </StatusBarItem>
        </StatusBar>
    </Grid>
</UserControl>

And this would be the MainWindow using content controls to swap views in and out.

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:UserControls="clr-namespace:UserControls"  
        x:Class="Display"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        
        <Grid.RowDefinitions>
            <RowDefinition Height="24" />
            <RowDefinition Height="*" />
            <RowDefinition Height="24" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width ="200" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <UserControls:UCTitle  Grid.ColumnSpan="2" />
        <ContentControl x:Name="XCCMAIN"  Grid.Row="1" Grid.Column="1">
            <UserControls:UCMain />
        </ContentControl>
        <UserControls:UCNav  Margin="5,0,5,0" Grid.Row="1" />
        <UserControls:UCFooter  Grid.Row="2" Grid.ColumnSpan="2" />
    </Grid>
</Window>

There is a Title, Navigation, Main and Footer region. Using this design in your MainWindow, you can easily swap views in and out by simply making sure the proper region has what it needs. Notice that I did not put the footer into a content control, but that's the better way to do it as shown with the UCMain example. To swap a view out in that part notice the name is x:Name="XCCMAIN", This allows the code in code behind to say XCCMain.Content = MyNewUserControl. Or if you use binding just set the binding property to the new view.

This image shows a Title region at top (spanning all grid.columns), Navigation region on left (Grid.Row =1), Main region middle-right, (grid.row = 1, grid.column=1) and status region on bottom spanning all grid columns. (grid.row=2)