title: UWP: Control won't fit to the available view area of my Grid cell
body: <p>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 <a href="https://github.com/Microsoft/Windows-universal-samples" rel="nofollow noreferrer">https://github.com/Microsoft/Windows-universal-samples</a>. 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.</p>
  
  <p>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.</p>
  
  <p>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. </p>
  
  <p>In my attempt to accomplish what I need, I modified the sample DialerPanel.xaml as follows:</p>
  
  <ol>
  <li>I created a new outer Grid with two rows, each taking up 50% of the available space.</li>
  <li>In the upper row, I added a rectangle with a fill of "Light Yellow"</li>
  <li>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.</li>
  </ol>
  
  <p>Below is the image of my XAML outline (with certain blocks collapsed for clarity):</p>
  
  <p><img src="https://i.imgur.com/MEsMO8g.png" alt="Test"></p>
  
  <p>Here's the XAML:</p>
  
  <pre><code>&lt;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}"&gt;
  
      &lt;Grid&gt;
          &lt;Grid.RowDefinitions&gt;
              &lt;RowDefinition Height="1*"/&gt;
              &lt;RowDefinition Height="1*"/&gt;
          &lt;/Grid.RowDefinitions&gt;
  
          &lt;Rectangle Fill="LightYellow" Grid.Row="0"/&gt;
  
          &lt;Grid Grid.Row="1"&gt;
              &lt;Grid.RowDefinitions&gt;
                  &lt;RowDefinition Height="Auto" /&gt;
                  &lt;RowDefinition Height="*" /&gt;
              &lt;/Grid.RowDefinitions&gt;
  
              &lt;StackPanel Grid.Row="0"&gt;
                  &lt;local:LinePicker Margin="0,20,0,0"/&gt;
  
                  &lt;Grid Style="{StaticResource DigitViewGridStyle}"&gt;
  
                      &lt;Grid.ColumnDefinitions&gt;
                          &lt;ColumnDefinition /&gt;
                          &lt;ColumnDefinition Width="Auto"/&gt;
                      &lt;/Grid.ColumnDefinitions&gt;
  
                      &lt;ScrollViewer x:Name="dialerNumberControlScrollviewer"
                                    Grid.Column="0"
                                    Style="{StaticResource DigitViewScrollerStyle}"&gt;
  
                          &lt;TextBlock Style="{StaticResource DigitViewTextStyle}"
                                     SizeChanged="OnDialerNumberControlSizeChanged"
                                     Text="{Binding DialerPhoneNumber.NumberToDial, Mode=OneWay}"&gt;
                          &lt;/TextBlock&gt;
                      &lt;/ScrollViewer&gt;
  
                      &lt;Button Grid.Column="1"
                              Command="{Binding ProcessBackspace}"
                              IsEnabled="{Binding DialerPhoneNumber.DialPadEnabled, Mode=OneWay}"
                              Holding="OnBackspaceHolding"&gt;
                          &lt;FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&amp;#xE750;" FontSize="30"/&gt;
                      &lt;/Button&gt;
                  &lt;/Grid&gt;
              &lt;/StackPanel&gt;
  
              &lt;StackPanel Grid.RowSpan="2" VerticalAlignment="Bottom"&gt;
  
                  &lt;StackPanel Style="{StaticResource DialpadPanelStyle}"&gt;
  
                      &lt;local:Dialpad x:Name="Dialpad"/&gt;
  
                      &lt;Button IsEnabled="{Binding DialerPhoneNumber.DialPadEnabled, Mode=OneWay}"
                              Style="{StaticResource AccentLongButtonStyle}"
                              Command="{Binding ProcessDialDialerNumberHeap}" &gt;
                          &lt;Button.ContentTemplate&gt;
                              &lt;DataTemplate&gt;
                                  &lt;Grid&gt;
                                      &lt;Grid.RowDefinitions&gt;
                                          &lt;RowDefinition Height="Auto" /&gt;
                                          &lt;RowDefinition Height="*" /&gt;
                                      &lt;/Grid.RowDefinitions&gt;
                                      &lt;FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&amp;#xE717;" RenderTransformOrigin="0.5,0.5"&gt;
                                          &lt;FontIcon.RenderTransform&gt;
                                              &lt;CompositeTransform ScaleX=".75" ScaleY=".75"/&gt;
                                          &lt;/FontIcon.RenderTransform&gt;
                                      &lt;/FontIcon&gt;
                                      &lt;TextBlock Text="Call"
                                                 Grid.Row="1"
                                                 Style="{StaticResource CaptionTextBlockStyle}"
                                                 Margin="0,4,0,0"
                                                 LineHeight="14"
                                                 HorizontalAlignment="Center" /&gt;
                                  &lt;/Grid&gt;
                              &lt;/DataTemplate&gt;                           
                          &lt;/Button.ContentTemplate&gt;
                      &lt;/Button&gt;
                  &lt;/StackPanel&gt;
              &lt;/StackPanel&gt;
          &lt;/Grid&gt;
  
      &lt;/Grid&gt;
  
  &lt;/UserControl&gt;
  </code></pre>
  
  <p>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:</p>
  
  <p><img src="https://i.imgur.com/P2rRAjr.png" alt="Rectangle covering the Dial Pad"></p>
  
  <p>I tried a couple of things including reduced fixed width and height for the Dialer Panel, but I could not make it work.</p>
  
  <p><strong>A couple of questions:</strong>
  1. What am I doing wrong here and how can I fix it?<BR>
  2. Is there a third party DialPad control (free or paid) that I can reference in my project and just use it?</p>
  
  <p>Thanks for all your help!</p>