UWP：控件不适合我的网格单元格的可用视图区域

Question

我正在为Windows Mobile设备使用电话拨号程序UWP应用程序。 在搜索拨号程序示例时，我在https://github.com/Microsoft/Windows-universal-samples上找到了与Windows Universal Samples捆绑在一起的PhoneCall示例。 PhoneCall示例包含Dialer和DialerPanel的示例实现，并带有一个文本框（用于显示或编辑所键入的号码）以及“呼叫”按钮。 到现在为止还挺好。

但是，示例拨号程序面板在MainPage.xaml实现的选项卡式界面中作为PivotItem托管，并且占用了整个可用空间。

我正在寻找的是示例中的DialerPanel之类的东西，但是可以缩小以适合我的Grid单元。 我将可用空间分为两个Grid单元，上半部分占据一个自定义控件或图像，而下半部分占据该拨号盘。

为了完成我需要的工作，我对示例DialerPanel.xaml进行了如下修改：

1. 我创建了一个新的外部网格，该网格有两行，每行占用了50％的可用空间。
2. 在上面的行中，我添加了一个填充为“浅黄色”的矩形
3. 在下面的行中，我添加了网格中包含的原始“拨号器面板”布局（基本上，我将“原始网格”移到了第1行第0列的“网格”单元格中。

下面是我的XAML大纲的图像（为了清楚起见，某些块被折叠了）：

这是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>

当我使用上述更改构建应用程序并运行示例时，这是它在电话上的显示方式，矩形覆盖了拨号盘：

我尝试了一些方法，包括减小了Dialer Panel的固定宽度和高度，但无法使其正常工作。

有两个问题： 1.我在这里做错了什么，如何解决？
2.是否有我可以在我的项目中引用并使用的第三方DialPad控件（免费或付费）？

感谢你的帮助！

Answer 1

我认为问题出在这一行：

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

该堆栈面板从第0行开始

<StackPanel Grid.Row="0">

你可以试试这个吗？

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