ContentDialog Windows 10 Mobile XAML - FullScreen - Padding

Question

I put an ContentDialog in my project to use for Login Popup on Windows 10. When I run this project on mobile, ContentDialog not shown in full screen and have a minimal padding around this element.On keyboard is visible (on focus element textbox for example) exist margin between keyboard and content dialog

Have any solution to how this on FullScreen? I set the property "FullSizeDesired" true, mas the problem is the same?

Someone help to remove this: - Padding, - Full Screen

My code are:

<ContentDialog
    x:Class="ExampleApp.SignInContentDialog"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ExampleApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="SIGN IN">

    <Grid x:Name="GridMobile" VerticalAlignment="Center" HorizontalAlignment="Center">

            <Button x:Name="MakeOff" 
            Height="32" BorderThickness="1" 
            HorizontalAlignment="Center"
            Foreground="Red" Background="Black"
            Style="{StaticResource ButtonStyle}"
            Margin="0">

            <HyperlinkButton x:Name="btnRegister"
            Height="32" BorderThickness="1" 
            HorizontalAlignment="Center"
            Foreground="Red" Background="Black"
            Margin="0"
            NavigateUri="www.google.pt"
            Style="{StaticResource HyperLinkButtonStyleMobile}"
            Content="Register">
                <HyperlinkButton.ContentTemplate>
                    <DataTemplate>
                    <TextBlock Text="{Binding}" />
                    </DataTemplate>
                </HyperlinkButton.ContentTemplate>
            </HyperlinkButton>
    </Grid>

The margin/space have in button of page is reserved for the "PrimaryButton" and "SecondaryButton" I think but I need more buttons and this margin/space is not appropriated for me. I want to remove this.

Thanks.

Answer 1

The reason that you see the gaps in between is not because of any specific Padding values but because in ContentDialog's default style, the height and width are set to Auto which means your content will only be given the size it needs to.

So make the content stretch to fit its parent, you just need to override the default style by applying your own default style of the local:SignInContentDialog and put it inside your App.xaml.

<Style TargetType="local:SignInContentDialog">
    <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="local:SignInContentDialog">
                <Border x:Name="Container">
                    <Grid x:Name="LayoutRoot">                                                     
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>

                        <!-- COMMENT OUT THESE FOLLOWING LINES -->

                        <!--<Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>-->
                        <Border x:Name="BackgroundElement" Background="{TemplateBinding Background}" FlowDirection="{TemplateBinding FlowDirection}" 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 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="Segoe UI" 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>