WPF - XAML Page Center to Window

Question

I'm building a WPF app using .NET 4.0 and MVVM Light.

I have implemented navigation in the app using a single Window with a Frame that is changing based in my current view.

Here's the code I have in my MainWindow.xaml:

<Controls:MetroWindow x:Class="App.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
        xmlns:resx="clr-namespace:App.Resources"
        xmlns:utils="clr-namespace:App.Utils"
        Title="{Binding Path=Content.Title, ElementName=MainFrame}"
        Height="{Binding Source={x:Static SystemParameters.PrimaryScreenHeight}, Converter={utils:RatioConverter}, ConverterParameter='0.9' }" 
        Width="{Binding Source={x:Static SystemParameters.PrimaryScreenWidth}, Converter={utils:RatioConverter}, ConverterParameter='0.9' }"
        xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
        WindowStartupLocation="CenterScreen">

    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>

    <Grid>
        <Frame Source="\Views\LoginView.xaml" NavigationUIVisibility="Hidden" Name="MainFrame"></Frame>
    </Grid>
</Controls:MetroWindow>

By default, the MainWindow is occupying the 90% of the screen. I would like to center the contents of the MainFrame inside the MainWindow.

Is it posible? How can I do it? I guess it's a simple task to do, but I've been looking for 1 hour and I couldn't find something specific.

Answer 1

Since you are using a grid, you can insert a stackpanel and center them out, like this:

<Grid VerticalAlignment="Center">
    <StackPanel HorizontalAlignment="Center">
        <Frame Source="\Views\LoginView.xaml" NavigationUIVisibility="Hidden" Name="MainFrame"></Frame>
    </StackPanel>
</Grid>