Modern UI For WPF Application by Example (Default Window Without Back Button)

Scope

The purpose of this article is to show how to create a default window in WPF using the Modern UI, but without the back button.

Introduction

Modern UI is a set of controls and styles converting our WPF application into a great looking Modern UI app. The Modern UI project can be found in mui.codeplex.com. Here it is possible to get the WPF app that demostrates the features provided by “mui”.

Description

In the sample Modern UI for WPF application by example (Default Window) we saw the default window provided by Modern UI that contains a back button. Now we will change the ModernWindow style to remove the back button.

To begin, we need to create, in our WPF application, a themes folder where we will add the resource dictionary, got from the original project, that contains the original style for ModernWindow.



After it, we need to search in the style for the back button, as in the following:



We can delete the button or only comment out the code and we need to define the key for the style. Here is the complete style.

<Style TargetType="mui:ModernWindow" x:Key="MyModernWindow">
       <Setter Property="BackgroundContent" Value="{DynamicResource WindowBackgroundContent}" />
       <Setter Property="FontFamily" Value="{DynamicResource DefaultFontFamily}" />
       <Setter Property="FontSize" Value="{DynamicResource DefaultFontSize}" />
       <Setter Property="Foreground" Value="{DynamicResource WindowText}" />
       <Setter Property="BorderBrush" Value="{DynamicResource WindowBorder}" />
       <Setter Property="Width" Value="800" />
       <Setter Property="Height" Value="640" />
       <Setter Property="MinWidth" Value="320" />
       <Setter Property="MinHeight" Value="320" />
       <Setter Property="ResizeMode" Value="CanResizeWithGrip" />
       <Setter Property="UseLayoutRounding" Value="True" />
       <Setter Property="TextOptions.TextFormattingMode" Value="Display" />

       <Setter Property="Template">
           <Setter.Value>
               <ControlTemplate TargetType="mui:ModernWindow">
                   <Border x:Name="WindowBorder" Margin="{Binding Source={x:Static SystemParameters.WindowNonClientFrameThickness}}">
                       <Border.Background>
                           <SolidColorBrush x:Name="WindowBorderBackground" Color="{DynamicResource WindowBackgroundColor}" />
                       </Border.Background>
                       <Border.Resources>
                           <Storyboard x:Key="BackgroundAnimation">
                               <ColorAnimation Storyboard.TargetName="WindowBorderBackground" Storyboard.TargetProperty="Color" To="{DynamicResource WindowBackgroundColor}" Duration="0:0:.6" />
                           </Storyboard>
                       </Border.Resources>

                       <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1">
                           <AdornerDecorator>
                               <Grid x:Name="LayoutRoot">
                                   <Grid.RowDefinitions>
                                       <RowDefinition Height="36" />
                                       <RowDefinition Height="Auto" />
                                       <RowDefinition Height="*" />
                                   </Grid.RowDefinitions>

                                   <!-- window background content -->
                                   <ContentControl Grid.RowSpan="5" Content="{TemplateBinding BackgroundContent}" />

                                   <!-- title bar -->
                                   <Grid>
                                       <Grid.ColumnDefinitions>
                                           <ColumnDefinition Width="*" />
                                           <ColumnDefinition Width="Auto" />
                                           <ColumnDefinition Width="Auto" />
                                           <ColumnDefinition Width="96" />
                                       </Grid.ColumnDefinitions>

                                       <!-- title -->
                                       <TextBlock Text="{TemplateBinding Title}" Margin="8,0" VerticalAlignment="Center" Style="{StaticResource ModernWindowTitle}"
                                                  DataContext="{TemplateBinding IsTitleVisible}"
                                                  Visibility="{Binding Converter={StaticResource BooleanToVisibilityConverter}}"/>

                                       <!-- title links -->
                                       <ItemsControl Grid.Column="1" ItemsSource="{TemplateBinding TitleLinks}" Margin="0,0,24,0" WindowChrome.IsHitTestVisibleInChrome="True">
                                           <ItemsControl.ItemsPanel>
                                               <ItemsPanelTemplate>
                                                   <StackPanel Orientation="Horizontal" />
                                               </ItemsPanelTemplate>
                                           </ItemsControl.ItemsPanel>
                                           <ItemsControl.ItemTemplate>
                                               <DataTemplate>
                                                   <StackPanel Orientation="Horizontal">
                                                       <Line x:Name="Separator" X1=".5" Y1="3" X2=".5" Y2="12" Margin="5,0" VerticalAlignment="Center" Stroke="{DynamicResource SeparatorBackground}" />

                                                       <Button Content="{Binding DisplayName}"
                                                               Command="mui:LinkCommands.NavigateLink"
                                                               CommandParameter="{Binding Source}"
                                                               CommandTarget="{Binding ElementName=ContentFrame}"
                                                               Style="{StaticResource SystemButtonLink}" />
                                                   </StackPanel>
                                                   <DataTemplate.Triggers>
                                                       <DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}" Value="{x:Null}">
                                                           <Setter Property="Visibility" TargetName="Separator" Value="Collapsed"/>
                                                       </DataTrigger>
                                                   </DataTemplate.Triggers>
                                               </DataTemplate>
                                           </ItemsControl.ItemTemplate>
                                       </ItemsControl>

                                       <!-- logo (visible only when LogoData is not null) -->
                                       <Border Grid.Column="2" Background="{DynamicResource Accent}" Width="36" Height="36" Margin="8,0"
                                               DataContext="{TemplateBinding LogoData}"
                                               Visibility="{Binding Converter={StaticResource NullToVisibilityConverter}, ConverterParameter=inverse}">
                                           <Path Data="{Binding}" Stretch="Fill" Fill="White" Width="24" Height="24" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                       </Border>

                                       <!-- window system buttons-->
                                       <StackPanel Grid.Column="3" Orientation="Horizontal" VerticalAlignment="Top" WindowChrome.IsHitTestVisibleInChrome="True">
                                           <Button Command="{Binding Source={x:Static SystemCommands.MinimizeWindowCommand}}" ToolTip="{x:Static modernUi:Resources.Minimize}" Style="{StaticResource SystemButton}">
                                               <Button.Content>
                                                   <Grid Width="13" Height="12" RenderTransform="1,0,0,1,0,1">
                                                       <Path Data="M0,6 L8,6 Z" Width="8" Height="7" VerticalAlignment="Center" HorizontalAlignment="Center"
                                                             Stroke="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" StrokeThickness="2"  />
                                                   </Grid>
                                               </Button.Content>
                                           </Button>
                                           <Grid Margin="1,0,1,0">
                                               <Button x:Name="Restore" Command="{Binding Source={x:Static SystemCommands.RestoreWindowCommand}}" ToolTip="{x:Static modernUi:Resources.Restore}" Style="{StaticResource SystemButton}" Visibility="Collapsed" >
                                                   <Button.Content>
                                                       <Grid Width="13" Height="12" UseLayoutRounding="True" RenderTransform="1,0,0,1,.5,.5">
                                                           <Path Data="M2,0 L8,0 L8,6 M0,3 L6,3 M0,2 L6,2 L6,8 L0,8 Z" Width="8" Height="8" VerticalAlignment="Center" HorizontalAlignment="Center"
                                                                 Stroke="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" StrokeThickness="1"  />
                                                       </Grid>
                                                   </Button.Content>
                                               </Button>
                                               <Button x:Name="Maximize" Command="{Binding Source={x:Static SystemCommands.MaximizeWindowCommand}}" ToolTip="{x:Static modernUi:Resources.Maximize}" Style="{StaticResource SystemButton}" >
                                                   <Button.Content>
                                                       <Grid Width="13" Height="12">
                                                           <Path Data="M0,1 L9,1 L9,8 L0,8 Z" Width="9" Height="8" VerticalAlignment="Center" HorizontalAlignment="Center"
                                                                 Stroke="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" StrokeThickness="2"  />
                                                       </Grid>
                                                   </Button.Content>
                                               </Button>
                                           </Grid>
                                           <Button Command="{Binding Source={x:Static SystemCommands.CloseWindowCommand}}" ToolTip="{x:Static modernUi:Resources.Close}" Style="{StaticResource SystemCloseButton}" >
                                               <Button.Content>
                                                   <Grid Width="13" Height="12" RenderTransform="1,0,0,1,0,1">
                                                       <Path Data="M0,0 L8,7 M8,0 L0,7 Z" Width="8" Height="7" VerticalAlignment="Center" HorizontalAlignment="Center"
                                                             Stroke="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" StrokeThickness="1.5"  />
                                                   </Grid>
                                               </Button.Content>
                                           </Button>
                                       </StackPanel>
                                   </Grid>

                                   <Grid Grid.Row="1">
                                       <Grid.ColumnDefinitions>
                                           <ColumnDefinition Width="42" />
                                           <ColumnDefinition Width="*"/>
                                       </Grid.ColumnDefinitions>

                                       <!-- back button -->
                                       <!--<mui:ModernButton Margin="8,10,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"
                                                              EllipseDiameter="24" IconWidth="12" IconHeight="12"
                                                              IconData="F1 M 33,22L 33,26L 19.75,26L 27,33L 20.5,33L 11,24L 20.5,15L 27,15L 19.75,22L 33,22 Z"
                                                              Command="NavigationCommands.BrowseBack"
                                                              CommandTarget="{Binding ElementName=ContentFrame}"
                                                              ToolTip="{x:Static modernUi:Resources.Back}"
                                                              WindowChrome.IsHitTestVisibleInChrome="True" />-->

                                       <!-- main menu -->
                                       <mui:ModernMenu Grid.Column="1"
                                                            SelectedSource="{Binding Source, ElementName=ContentFrame, Mode=TwoWay}"
                                                            LinkGroups="{TemplateBinding MenuLinkGroups}" />
                                   </Grid>

                                   <!-- content frame -->
                                   <mui:ModernFrame x:Name="ContentFrame" Grid.Row="3" Grid.RowSpan="2" Margin="42,8,16,16" Source="{Binding ContentSource, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" ContentLoader="{TemplateBinding ContentLoader}"/>

                                   <!-- resize grip -->
                                   <Grid Grid.Row="2" x:Name="ResizeGrip" Background="Transparent" Visibility="Collapsed" HorizontalAlignment="Right" VerticalAlignment="Bottom" WindowChrome.ResizeGripDirection="BottomRight">
                                       <Path Width="12" Height="12" Margin="1"
                                             Stroke="{DynamicResource WindowText}"
                                             StrokeThickness="1"
                                             Stretch="None"
                                             Data="F1 M1,10 L3,10 M5,10 L7,10 M9,10 L11,10 M2,9 L2,11 M6,9 L6,11 M10,9 L10,11 M5,6 L7,6 M9,6 L11,6 M6,5 L6,7 M10,5 L10,7 M9,2 L11,2 M10,1 L10,3" />
                                   </Grid>
                               </Grid>
                           </AdornerDecorator>
                       </Border>
                   </Border>

                   <ControlTemplate.Triggers>
                       <Trigger Property="IsActive" Value="True">
                           <Setter Property="BorderBrush" Value="{DynamicResource WindowBorderActive}" />
                       </Trigger>
                       <Trigger Property="WindowState" Value="Maximized">
                           <Setter TargetName="Maximize" Property="Visibility" Value="Collapsed" />
                           <Setter TargetName="Restore" Property="Visibility" Value="Visible" />
                           <Setter TargetName="LayoutRoot" Property="Margin" Value="7" />
                       </Trigger>
                       <Trigger Property="WindowState" Value="Normal">
                           <Setter TargetName="Maximize" Property="Visibility" Value="Visible" />
                           <Setter TargetName="Restore" Property="Visibility" Value="Collapsed" />
                       </Trigger>
                       <MultiTrigger>
                           <MultiTrigger.Conditions>
                               <Condition Property="ResizeMode" Value="CanResizeWithGrip" />
                               <Condition Property="WindowState" Value="Normal" />
                           </MultiTrigger.Conditions>
                           <Setter TargetName="ResizeGrip" Property="Visibility" Value="Visible" />
                       </MultiTrigger>
                   </ControlTemplate.Triggers>
               </ControlTemplate>
           </Setter.Value>
       </Setter>

After that, we need to define this style in the MainWindow, such as the following:

<mui:ModernWindow x:Class="ModernUIForWPFSample.WithoutBackButton.MainWindow"
                  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                  xmlns:mui="http://firstfloorsoftware.com/ModernUI"
                  Title="Modern UI without back button"
                  Width="650"
                  Height="550"
                  IsTitleVisible="True"
                  Style="{StaticResource MyModernWindow}">

In App.xaml.cs the following resources must be added:

<Application x:Class="ModernUIForWPFSample.WithoutBackButton.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.xaml" />
                <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.Light.xaml" />
                <ResourceDictionary Source="Themes/ModernWindow.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Here, in App.xaml, the difference from the Default Windows sample is that we added the new resource dictionary that contains the style we defined.

When we run the application we got something like the following.



Note: the preceding image has the entire procedure. To define the theme color for the window, we need to define the color in the constructor, by doing:

AppearanceManager.Current.AccentColor = Colors.DarkViolet;

To select the first view that will show we need to do something like:

ContentSource = MenuLinkGroups.First().Links.First().Source;

Source Code

Get the source code for this sample in github.

Visual Studio Extension used


<< Modern UI for WPF Application by Example (Default Window)          Modern UI for WPF Application by Example (Blank Window)>>