Question

I have a textbox inside a StackPanel and the TextBox is set to AcceptsReturn, so when you press the Enter/Return key the textbox will become bigger in height.

The problem I’m having is that I don’t know how to make the surrounding StackPanel change in height along with the textbox. So when the textbox changes, so should the StackPanel.

How can we do this?

    <GridView x:Name="texties" Grid.Row="1" Margin="120, 0, 0, 0" ItemsSource="{Binding Something, Mode=TwoWay}" SelectionMode="Multiple">
        <GridView.ItemTemplate>
            <DataTemplate>
                <StackPanel Margin="10" Orientation="Vertical" Width="210" >
                    <StackPanel.ChildrenTransitions>
                        <TransitionCollection>
                            <AddDeleteThemeTransition/>
                        </TransitionCollection>
                    </StackPanel.ChildrenTransitions>
                    <TextBlock Text="{Binding Name, Mode=TwoWay}" FontWeight="Bold" Style="{StaticResource ItemTextStyle}" />
                    <TextBox Text="{Binding Content, Mode=TwoWay}" FontSize="12" Background="{x:Null}" BorderBrush="{x:Null}" BorderThickness="0, 0, 0, 0" AcceptsReturn="True" IsSpellCheckEnabled="True" />
                </StackPanel>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>

Answer 1

Based on your sample you are not setting the GridView.ItemsPanel. The default value of GridView.ItemsPanel is <WrapGrid /> which has a set cell size that cannot be changed. You might be tempted to update to <VariableSizedWrapGrid /> but this control cannot change span values except during render. If what you want is even possible, it will require that you use <StackPanel/> as your GridView.ItemsPanel. However, <StackPanel/> does not wrap natively, so you will either need to locate a wrapping version someone else has made, make your own, or live with it in a single row or column.

Some developers attempt to change the size of their template based on the height of their <TextBlock />. This is a good idea but a difficult tech to execute. It turns out that the size of a UI Element is not determined until it is rendered and so you have to render it first, and then it is too late. If you want to see how one developer has accomplished this calculation (consider the difficulty of font-family and font-size and margin, etc) look here. Such a calc would allow you to use <VariableSizedWrapGrid />.

In this sample he is calculating for an ellipse, but it’s ~the same calculation.

protected override Size MeasureOverride(Size availableSize)
{
    // just to make the code easier to read
    bool wrapping = this.TextWrapping == TextWrapping.Wrap;


    Size unboundSize = wrapping ? new Size(availableSize.Width, double.PositiveInfinity) : new Size(double.PositiveInfinity, availableSize.Height);
    string reducedText = this.Text;


    // set the text and measure it to see if it fits without alteration
    if (string.IsNullOrEmpty(reducedText)) reducedText = string.Empty;
    this.textBlock.Text = reducedText;
    Size textSize = base.MeasureOverride(unboundSize);


    while (wrapping ? textSize.Height > availableSize.Height : textSize.Width > availableSize.Width)
    {
        int prevLength = reducedText.Length;

        if (reducedText.Length > 0)
            reducedText = this.ReduceText(reducedText);    

        if (reducedText.Length == prevLength)
            break;

        this.textBlock.Text = reducedText + "...";
        textSize = base.MeasureOverride(unboundSize);
    }

    return base.MeasureOverride(availableSize);
}

Best of luck.