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

【问题标题】：UWP: Control won't fit to the available view area of my Grid cellUWP：控件不适合我的网格单元格的可用视图区域
【发布时间】：2018-08-01 17:30:37
【问题描述】：

我正在开发适用于 Windows Mobile 设备的电话拨号器 UWP 应用程序。在搜索拨号器示例时，我遇到了与 Windows 通用示例捆绑在一起的 PhoneCall 示例，地址为 https://github.com/Microsoft/Windows-universal-samples。 PhoneCall 示例包含 Dialer 和 DialerPanel 的示例实现，并带有一个用于显示或编辑正在键入的号码的文本框以及 Call 按钮。到目前为止一切顺利。

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

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

为了完成我的需要，我修改了示例 DialerPanel.xaml，如下所示：

我创建了一个包含两行的新外部 Grid，每行占用 50% 的可用空间。
在上面一行，我添加了一个填充为“浅黄色”的矩形
在下一行，我添加了包含在网格中的原始拨号器面板布局（基本上，我将原始网格移动到第 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>

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

我尝试了一些方法，包括减少拨号器面板的固定宽度和高度，但我无法让它工作。

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

感谢您的帮助！

【问题讨论】：

标签： c# windows uwp windows-phone uwp-xaml

【解决方案1】：

我认为问题出在这一行：

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

此堆栈面板从您放置的第 0 行开始

<StackPanel Grid.Row="0">

你可以试试这个吗？

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

【讨论】：