deharodk deharodk - 18 days ago 4
C# Question

WPF - XAML Page Center to Window

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.

Jim Jim
Answer

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>