Windows 10 UWP get content dialog to center in screen vertically on mobile

Question

I am using ContentDialogs throughout my app on Windows 10 Mobile. Both ContentDialog and MessageDialog seem to prefer to anchor to the top of the screen by default. However, I have seen some apps where it shows right in the middle of the screen vertically so it appears as a strip. I cannot figure out how to position it in the middle vertically. I have tried this

cd.VerticalAlignment = VerticalAlignment.Center;

Where cd is my ContentDialog intance but this does not work. It is still anchored at the top of the window.

Thanks!

Answer 1

You should override Style for your ContentDialog. I've tried to setup VerticalAlignment.Center to Container, LayoutRoot and BackgroundElement but it doesn't help. So, place the BackgroundElement to center Row in LayoutRoot just added new RowDefinition and setup Grid.Row="1" for your BackgroundElement.

<Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>

Look at the full ContentDialog Style.

NOTES

But be careful, because this works only for mobile. You should apply this style only for mobile platform.

<ContentDialog.Style>
    <Style TargetType="ContentDialog">
        <Setter Property="Foreground" Value="{ThemeResource SystemControlPageTextBaseHighBrush}" />
        <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" />
        <Setter Property="HorizontalAlignment" Value="Center" />
        <Setter Property="VerticalAlignment" Value="Top" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="MaxHeight" Value="{ThemeResource ContentDialogMaxHeight}" />
        <Setter Property="MinHeight" Value="{ThemeResource ContentDialogMinHeight}" />
        <Setter Property="MaxWidth" Value="{ThemeResource ContentDialogMaxWidth}" />
        <Setter Property="MinWidth" Value="{ThemeResource ContentDialogMinWidth}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ContentDialog">
                    <Border x:Name="Container">
                        <Grid x:Name="LayoutRoot">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Border x:Name="BackgroundElement"
                                    Grid.Row="1"
                                    Background="{TemplateBinding Background}"
                                    FlowDirection="{TemplateBinding FlowDirection}"
                                    BorderThickness="{ThemeResource ContentDialogBorderWidth}"
                                    BorderBrush="{ThemeResource SystemControlForegroundAccentBrush}"
                                    MaxWidth="{TemplateBinding MaxWidth}"
                                    MaxHeight="{TemplateBinding MaxHeight}"
                                    MinWidth="{TemplateBinding MinWidth}"
                                    MinHeight="{TemplateBinding MinHeight}" >
                                <Grid x:Name="DialogSpace" VerticalAlignment="Stretch">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="Auto" />
                                    </Grid.RowDefinitions>
                                    <ScrollViewer x:Name="ContentScrollViewer"
                                        HorizontalScrollBarVisibility="Disabled"
                                        VerticalScrollBarVisibility="Disabled"
                                        ZoomMode="Disabled"
                                        Margin="{ThemeResource ContentDialogContentScrollViewerMargin}"
                                        IsTabStop="False">
                                        <Grid>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="Auto" />
                                            </Grid.RowDefinitions>
                                            <ContentControl x:Name="Title"
                                            Margin="{ThemeResource ContentDialogTitleMargin}"
                                            Content="{TemplateBinding Title}"
                                            ContentTemplate="{TemplateBinding TitleTemplate}"
                                            FontSize="20"
                                            FontFamily="XamlAutoFontFamily"
                                            FontWeight="Normal"
                                            Foreground="{TemplateBinding Foreground}"
                                            HorizontalAlignment="Left"
                                            VerticalAlignment="Top"
                                            IsTabStop="False"
                                            MaxHeight="{ThemeResource ContentDialogTitleMaxHeight}" >
                                                <ContentControl.Template>
                                                    <ControlTemplate TargetType="ContentControl">
                                                        <ContentPresenter
                                                        Content="{TemplateBinding Content}"
                                                        MaxLines="2"
                                                        TextWrapping="Wrap"
                                                        ContentTemplate="{TemplateBinding ContentTemplate}"
                                                        Margin="{TemplateBinding Padding}"
                                                        ContentTransitions="{TemplateBinding ContentTransitions}"
                                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                                    </ControlTemplate>
                                                </ContentControl.Template>
                                            </ContentControl>
                                            <ContentPresenter x:Name="Content"
                                            ContentTemplate="{TemplateBinding ContentTemplate}"
                                            Content="{TemplateBinding Content}"
                                            FontSize="{ThemeResource ControlContentThemeFontSize}"
                                            FontFamily="{ThemeResource ContentControlThemeFontFamily}"
                                            Margin="{ThemeResource ContentDialogContentMargin}"
                                            Foreground="{TemplateBinding Foreground}"
                                            Grid.Row="1"
                                            TextWrapping="Wrap" />
                                        </Grid>
                                    </ScrollViewer>
                                    <Grid x:Name="CommandSpace" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition/>
                                            <ColumnDefinition/>
                                        </Grid.ColumnDefinitions>
                                        <Border x:Name="Button1Host"
                                        Margin="{ThemeResource ContentDialogButton1HostMargin}"
                                        MinWidth="{ThemeResource ContentDialogButtonMinWidth}"
                                        MaxWidth="{ThemeResource ContentDialogButtonMaxWidth}"
                                        Height="{ThemeResource ContentDialogButtonHeight}"
                                        HorizontalAlignment="Stretch" />
                                        <Border x:Name="Button2Host"
                                        Margin="{ThemeResource ContentDialogButton2HostMargin}"
                                        MinWidth="{ThemeResource ContentDialogButtonMinWidth}"
                                        MaxWidth="{ThemeResource ContentDialogButtonMaxWidth}"
                                        Height="{ThemeResource ContentDialogButtonHeight}"
                                        Grid.Column="1"
                                        HorizontalAlignment="Stretch" />
                                    </Grid>
                                </Grid>
                            </Border>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ContentDialog.Style>