UWP: Control won't fit to the available view area of my Grid cell

Question

I am working on a Phone Dialer UWP application for Windows Mobile devices. In searching for dialer examples, I came across the PhoneCall sample that is bundled with Windows Universal Samples at https://github.com/Microsoft/Windows-universal-samples. The PhoneCall sample contains an example implementation of Dialer and a DialerPanel, complete with a text box to display or edit the number being typed, as well as the Call button. So far so good.

However, the sample dialer panel is hosted as a PivotItem in a tabbed interface implemented by MainPage.xaml, and it occupies the entire space available to it.

What I am looking for is something like a DialerPanel in the sample, but one that could shrink to fit in my Grid cell. I will have the available space split into two Grid cells, with the upper half occupying a custom control or an image, while the lower half will host the Dial Pad.

In my attempt to accomplish what I need, I modified the sample DialerPanel.xaml as follows:

1. I created a new outer Grid with two rows, each taking up 50% of the available space.
2. In the upper row, I added a rectangle with a fill of "Light Yellow"
3. In the lower row, I added the original Dialer Panel layout contained in a Grid (basically, I moved the ORIGINAL Grid into a Grid cell at Row 1, Column 0.

Below is the image of my XAML outline (with certain blocks collapsed for clarity):

Here's the XAML:

<UserControl
    x:Class="PhoneCall.Controls.DialerPanel"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:PhoneCall.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

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

        <Rectangle Fill="LightYellow" Grid.Row="0"/>

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

            <StackPanel Grid.Row="0">
                <local:LinePicker Margin="0,20,0,0"/>

                <Grid Style="{StaticResource DigitViewGridStyle}">

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>

                    <ScrollViewer x:Name="dialerNumberControlScrollviewer"
                                  Grid.Column="0"
                                  Style="{StaticResource DigitViewScrollerStyle}">

                        <TextBlock Style="{StaticResource DigitViewTextStyle}"
                                   SizeChanged="OnDialerNumberControlSizeChanged"
                                   Text="{Binding DialerPhoneNumber.NumberToDial, Mode=OneWay}">
                        </TextBlock>
                    </ScrollViewer>

                    <Button Grid.Column="1"
                            Command="{Binding ProcessBackspace}"
                            IsEnabled="{Binding DialerPhoneNumber.DialPadEnabled, Mode=OneWay}"
                            Holding="OnBackspaceHolding">
                        <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE750;" FontSize="30"/>
                    </Button>
                </Grid>
            </StackPanel>

            <StackPanel Grid.RowSpan="2" VerticalAlignment="Bottom">

                <StackPanel Style="{StaticResource DialpadPanelStyle}">

                    <local:Dialpad x:Name="Dialpad"/>

                    <Button IsEnabled="{Binding DialerPhoneNumber.DialPadEnabled, Mode=OneWay}"
                            Style="{StaticResource AccentLongButtonStyle}"
                            Command="{Binding ProcessDialDialerNumberHeap}" >
                        <Button.ContentTemplate>
                            <DataTemplate>
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="*" />
                                    </Grid.RowDefinitions>
                                    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE717;" RenderTransformOrigin="0.5,0.5">
                                        <FontIcon.RenderTransform>
                                            <CompositeTransform ScaleX=".75" ScaleY=".75"/>
                                        </FontIcon.RenderTransform>
                                    </FontIcon>
                                    <TextBlock Text="Call"
                                               Grid.Row="1"
                                               Style="{StaticResource CaptionTextBlockStyle}"
                                               Margin="0,4,0,0"
                                               LineHeight="14"
                                               HorizontalAlignment="Center" />
                                </Grid>
                            </DataTemplate>                           
                        </Button.ContentTemplate>
                    </Button>
                </StackPanel>
            </StackPanel>
        </Grid>

    </Grid>

</UserControl>

When I build the app with the changes above and run the sample, this is how it appears on the phone with my rectangle covering the Dial Pad:

I tried a couple of things including reduced fixed width and height for the Dialer Panel, but I could not make it work.

A couple of questions: 1. What am I doing wrong here and how can I fix it?
2. Is there a third party DialPad control (free or paid) that I can reference in my project and just use it?

Thanks for all your help!

Answer 1

I think the problem is in this line:

<StackPanel Grid.RowSpan="2" VerticalAlignment="Bottom">

This stack panel starts in row 0 where you the put

<StackPanel Grid.Row="0">

Can you try this?

<StackPanel Grid.Row="2" VerticalAlignment="Bottom">