title: UserControl layout changing at run-time in WinRT app?
body: <p>I have a UserControl that is used on a Popup in a WinRT app.  It looks great in the designer, but when I run it the layout changes and the UserControl's child controls resize themselves in  unwanted ways: A) It is smaller vertically than what I set at design time and what I explicitly set for the popup that hosts it.  B) If the main text message is long it widens the entire popup to be as long as the text string, instead of wrapping it to meet the TextBlock's fixed width.  If the text message is short, the popup seems to shift to the left of dead center.</p>
  
  <p><strong>Note, there are three child grids in the UserControl.  Only one of them is shown at any time so it's not a conflict between them as far as I know.  When the popup is first run, I show the <em>gridQuestion</em> grid and hide the <em>gridRateAndReview</em> and <em>gridSendFeedback</em> grids.  When one of the buttons is clicked on the <em>gridQuestion</em> grid, I hide that grid and show one of the other child grids based on the button clicked.</strong>  When I hide an element I set it's <em>opacity</em> property to <em>0</em>, it's <em>IsHitTestVisible</em> property to <em>false</em>, and it's <em>Visibility</em> property to <em>Collapsed</em>.  I do the reverse when I show an element.</p>
  
  <p>1) Why are the child controls resizing themselves at runtime?</p>
  
  <p>2) Why doesn't the main text message wrap, and how do I stop it from resizing the TextBlock that contains it?</p>
  
  <p>Note, I've tried various combinations of Stretch and Center for each of the container child controls.  Nothing seems to work.  Here's the XAML for the user control:</p>
  
  <pre><code>&lt;UserControl x:Name="userControl"
      x:Class="RecNote.UserControls.RateMyApp"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:RecNote.UserControls"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d"
      d:DesignHeight="300"
      d:DesignWidth="400" 
      DataContext="{Binding Main, Mode=OneWay, Source={StaticResource Locator}}" HorizontalAlignment="Center" VerticalAlignment="Center"&gt;
  
      &lt;Border CornerRadius="6" BorderThickness="2"&gt;
          &lt;Grid x:Name="gridOuter"&gt;
              &lt;Grid.RowDefinitions&gt;
                  &lt;RowDefinition Height="31*"/&gt;
                  &lt;RowDefinition Height="117*"/&gt;
              &lt;/Grid.RowDefinitions&gt;
              &lt;TextBlock x:Name="lblTitle" Grid.Row="0" HorizontalAlignment="Center" TextWrapping="Wrap" Text="Feedback Please" VerticalAlignment="Center" FontSize="24" Height="29" Width="195" FontFamily="Bookman Old Style" Foreground="#FFF5A3A3"/&gt;
              &lt;!-- The contents first shown to the user and ask them if they're happy with the product. --&gt;
              &lt;Grid x:Name="gridQuestion" Grid.Row="1" d:IsHidden="True"&gt;
                  &lt;Grid.RowDefinitions&gt;
                      &lt;RowDefinition Height="137*"/&gt;
                      &lt;RowDefinition Height="35*"/&gt;
                      &lt;RowDefinition Height="84*"/&gt;
                  &lt;/Grid.RowDefinitions&gt;
                  &lt;TextBlock TextWrapping="Wrap" Text="{Binding RatingMessage, ElementName=userControl}" FontSize="24" Grid.Row="0" Margin="55,25,54,25"/&gt;
                  &lt;TextBlock TextWrapping="Wrap" FontSize="24" Grid.Row="1" Text="Are you enjoying RecNote?" HorizontalAlignment="Center" VerticalAlignment="Center" Height="29" Margin="55,5,54,1" Width="287"/&gt;
                  &lt;StackPanel x:Name="stackButtons" Grid.Row="2" Orientation="Horizontal" &gt;
                      &lt;Button x:Name="btnYes" Content="YES" VerticalAlignment="Center" Width="150" Margin="35,0,30,0" Background="#FF464F41" Click="btnYes_Click" /&gt;
                      &lt;Button x:Name="btnNo" Content="NO" VerticalAlignment="Center" Width="150" Background="#FF875F4D" Click="btnNo_Click"/&gt;
                  &lt;/StackPanel&gt;
              &lt;/Grid&gt;
  
              &lt;!-- The contents shown to the user if they say YES that prompts them to rate/review the app. --&gt;
              &lt;Grid x:Name="gridRateAndReview" Grid.Row="1" d:IsHidden="True" &gt;
                  &lt;Grid.RowDefinitions&gt;
                      &lt;RowDefinition Height="183*"/&gt;
                      &lt;RowDefinition Height="73*"/&gt;
                  &lt;/Grid.RowDefinitions&gt;
                  &lt;TextBlock TextWrapping="Wrap" Margin="25" FontSize="22" Text="{Binding GladYouAreEnjoyingAppMessage, ElementName=userControl}"/&gt;
                  &lt;Button x:Name="btnRateAndReview" Content="Rate &amp;amp; Review" VerticalAlignment="Center" Width="150" Background="#FF464F41" Grid.Row="1" HorizontalAlignment="Center" Click="btnRateAndReview_Click" /&gt;
              &lt;/Grid&gt;
  
              &lt;!-- The contents shown to the user if they say NO that prompts them to rate/review the app. --&gt;
              &lt;Grid x:Name="gridSendFeedback" Grid.Row="1" d:IsHidden="True" &gt;
                  &lt;Grid.RowDefinitions&gt;
                      &lt;RowDefinition Height="183*"/&gt;
                      &lt;RowDefinition Height="73*"/&gt;
                  &lt;/Grid.RowDefinitions&gt;
                  &lt;TextBlock TextWrapping="Wrap" Margin="25" FontSize="22" Text="{Binding SendFeedbackMessage, ElementName=userControl}"/&gt;
                  &lt;Button x:Name="btnSendFeedback" Content="Send Feedback" VerticalAlignment="Center" Width="150"  Background="#FF875F4D" Grid.Row="1" HorizontalAlignment="Center" Click="btnSendFeedback_Click" /&gt;
              &lt;/Grid&gt;
          &lt;/Grid&gt;
      &lt;/Border&gt;
  &lt;/UserControl&gt;
  </code></pre>
  
  <p>Here's the code that displays the user control on a popup:</p>
  
  <pre><code>    public static Popup ShowPopup(UserControl userControl, int width, int height)
      {
          if (userControl == null)
              throw new ArgumentNullException("The user control is unassigned.");
  
          if (width &lt;= 0)
              throw new ArgumentException("The width is zero or negative.");
  
          if (height &lt;= 0)
              throw new ArgumentException("The height is zero or negative.");
  
          // Create the popup.
          Popup popup = new Popup();
  
          // --------------- POPUP STYLING -----------------------
  
          // Set the width and height.
          popup.Width = width;
          popup.Height = height;
  
          // Center the popup on the screen.
          // popup.HorizontalAlignment = HorizontalAlignment.Center;
          // popup.VerticalAlignment = VerticalAlignment.Center;
  
          // Center the popup.
          popup.HorizontalOffset = (Window.Current.Bounds.Width - popup.Width) / 2;
          popup.VerticalOffset = (Window.Current.Bounds.Height - popup.Height) / 2;
  
          popup.MinWidth = width;
          popup.MaxWidth = width;
          popup.MinHeight = height;
          popup.MaxHeight = height;
  
          popup.IsLightDismissEnabled = true;
  
          // Make the user control a child of the popup.
          popup.Child = userControl;
  
          // Show it.
          popup.IsOpen = true;
  
          return popup;
      }
  </code></pre>