Question

我正在开发适用于Windows Mobile设备的Phone Dialer UWP应用程序。在搜索拨号器示例时，我遇到了与https://github.com/Microsoft/Windows-universal-samples处的Windows Universal Samples捆绑在一起的PhoneCall示例。 PhoneCall示例包含Dialer和DialerPanel的示例实现，其中包含一个文本框，用于显示或编辑正在键入的数字，以及“呼叫”按钮。到目前为止一切都很好。

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

我正在寻找的是样本中的DialerPanel，但是可以收缩以适应我的Grid单元格。我将可用空间拆分为两个网格单元格，上半部分占用自定义控件或图像，而下半部分将托管拨号盘。

在我尝试完成我需要的工作时，我修改了示例DialerPanel.xaml，如下所示：

我创建了一个新的外部网格，其中包含两行，每行占用可用空间的50％。
在上面一行，我添加了一个填充＆＃34;浅黄色＆＃34;
在下排，我添加了Grid中包含的原始Dialer Panel布局（基本上，我将ORIGINAL Grid移动到第1行第0列的Grid单元格中。

以下是我的XAML大纲的图像（为清晰起见，某些块已折叠）：

Test

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

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

Rectangle covering the Dial Pad

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

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

感谢您的帮助！

Answer 1

我认为问题出现在这一行：

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

此堆栈面板从第0行开始，您可以在其中放置

<StackPanel Grid.Row="0">

你能试试吗？

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

UWP：Control不适合我的Grid单元的可用视图区域

1 个答案: