locked
UserControl looks great in designer, layout changes in unwanted ways at run-time

    Question

  • 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.

    **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 *gridQuestion* grid and hide the *gridRateAndReview* and *gridSendFeedback* grids.  When one of the buttons is clicked on the *gridQuestion* grid, I hide that grid and show one of the other child grids based on the button clicked.**  When I hide an element I set it's *opacity* property to *0*, it's *IsHitTestVisible* property to *false*, and it's *Visibility* property to *Collapsed*.  I do the reverse when I show an element.

    1) Why are the child controls resizing themselves at runtime?

    2) Why doesn't the main text message wrap, and how do I stop it from resizing the TextBlock that contains it?

    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:

        <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">
    
            <Border CornerRadius="6" BorderThickness="2">
                <Grid x:Name="gridOuter">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="31*"/>
                        <RowDefinition Height="117*"/>
                    </Grid.RowDefinitions>
                    <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"/>
                    <!-- The contents first shown to the user and ask them if they're happy with the product. -->
                    <Grid x:Name="gridQuestion" Grid.Row="1" d:IsHidden="True">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="137*"/>
                            <RowDefinition Height="35*"/>
                            <RowDefinition Height="84*"/>
                        </Grid.RowDefinitions>
                        <TextBlock TextWrapping="Wrap" Text="{Binding RatingMessage, ElementName=userControl}" FontSize="24" Grid.Row="0" Margin="55,25,54,25"/>
                        <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"/>
                        <StackPanel x:Name="stackButtons" Grid.Row="2" Orientation="Horizontal" >
                            <Button x:Name="btnYes" Content="YES" VerticalAlignment="Center" Width="150" Margin="35,0,30,0" Background="#FF464F41" Click="btnYes_Click" />
                            <Button x:Name="btnNo" Content="NO" VerticalAlignment="Center" Width="150" Background="#FF875F4D" Click="btnNo_Click"/>
                        </StackPanel>
                    </Grid>
    
                    <!-- The contents shown to the user if they say YES that prompts them to rate/review the app. -->
                    <Grid x:Name="gridRateAndReview" Grid.Row="1" d:IsHidden="True" >
                        <Grid.RowDefinitions>
                            <RowDefinition Height="183*"/>
                            <RowDefinition Height="73*"/>
                        </Grid.RowDefinitions>
                        <TextBlock TextWrapping="Wrap" Margin="25" FontSize="22" Text="{Binding GladYouAreEnjoyingAppMessage, ElementName=userControl}"/>
                        <Button x:Name="btnRateAndReview" Content="Rate &amp; Review" VerticalAlignment="Center" Width="150" Background="#FF464F41" Grid.Row="1" HorizontalAlignment="Center" Click="btnRateAndReview_Click" />
                    </Grid>
    
                    <!-- The contents shown to the user if they say NO that prompts them to rate/review the app. -->
                    <Grid x:Name="gridSendFeedback" Grid.Row="1" d:IsHidden="True" >
                        <Grid.RowDefinitions>
                            <RowDefinition Height="183*"/>
                            <RowDefinition Height="73*"/>
                        </Grid.RowDefinitions>
                        <TextBlock TextWrapping="Wrap" Margin="25" FontSize="22" Text="{Binding SendFeedbackMessage, ElementName=userControl}"/>
                        <Button x:Name="btnSendFeedback" Content="Send Feedback" VerticalAlignment="Center" Width="150"  Background="#FF875F4D" Grid.Row="1" HorizontalAlignment="Center" Click="btnSendFeedback_Click" />
                    </Grid>
                </Grid>
            </Border>
        </UserControl>
    

    Here's the code that displays the user control on a popup:

            public static Popup ShowPopup(UserControl userControl, int width, int height)
            {
                if (userControl == null)
                    throw new ArgumentNullException("The user control is unassigned.");
    
                if (width <= 0)
                    throw new ArgumentException("The width is zero or negative.");
    
                if (height <= 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;
            }



    -- roschler

    Tuesday, March 4, 2014 6:08 PM

Answers

  • Hi,

    As far as I know, you should set the fixed width and height to the TextBlock. If you do not set the width, the TextBlock cannot make the text warp. I create a project to test it:

     <TextBlock Margin="8" HorizontalAlignment="Left"  TextWrapping="Wrap" Name="text" >                
                You can use MediaElementinstead of PlayerFramework:MediaPlayer.
    And you can refer to see video and audio to know how to play audio and video media using a MediaElement in your Windows Store app using C++, C#, or Visual Basic.Also you can refer to XAML media playback sample
    And if you have any questions about PlayerFramework, you should go t this link to post your thread:
    </TextBlock>

    The TextBlock cannot wrap text.

    If you set the width and height to it, it can wrap text:

     <TextBlock Margin="8" HorizontalAlignment="Left" Width="300" Height="200" TextWrapping="Wrap" Name="text" >                
                You can use MediaElementinstead of PlayerFramework:MediaPlayer.
    And you can refer to see video and audio to know how to play audio and video media using a MediaElement in your Windows Store app using C++, C#, or Visual Basic.Also you can refer to XAML media playback sample
    And if you have any questions about PlayerFramework, you should go t this link to post your thread:
    </TextBlock>
    Best Wishes!


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by roschler Wednesday, March 5, 2014 4:42 AM
    Wednesday, March 5, 2014 3:44 AM

All replies

  • Hi,

    As far as I know, you should set the fixed width and height to the TextBlock. If you do not set the width, the TextBlock cannot make the text warp. I create a project to test it:

     <TextBlock Margin="8" HorizontalAlignment="Left"  TextWrapping="Wrap" Name="text" >                
                You can use MediaElementinstead of PlayerFramework:MediaPlayer.
    And you can refer to see video and audio to know how to play audio and video media using a MediaElement in your Windows Store app using C++, C#, or Visual Basic.Also you can refer to XAML media playback sample
    And if you have any questions about PlayerFramework, you should go t this link to post your thread:
    </TextBlock>

    The TextBlock cannot wrap text.

    If you set the width and height to it, it can wrap text:

     <TextBlock Margin="8" HorizontalAlignment="Left" Width="300" Height="200" TextWrapping="Wrap" Name="text" >                
                You can use MediaElementinstead of PlayerFramework:MediaPlayer.
    And you can refer to see video and audio to know how to play audio and video media using a MediaElement in your Windows Store app using C++, C#, or Visual Basic.Also you can refer to XAML media playback sample
    And if you have any questions about PlayerFramework, you should go t this link to post your thread:
    </TextBlock>
    Best Wishes!


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by roschler Wednesday, March 5, 2014 4:42 AM
    Wednesday, March 5, 2014 3:44 AM
  • Thanks Anne, that did it.  I set the MaxWidth of the TextBlock to a desired value and everything works now.

    -- roschler

    Wednesday, March 5, 2014 4:42 AM