UWP FlipView height/vertical next button issue

Question

I am trying to get a FlipView streched to the height of its parent view. The XAML look like this:

<StackPanel Orientation="Vertical">
    <FlipView x:Name="flipView" 
                      BorderBrush="Black" BorderThickness="1"
                      VerticalAlignment="Stretch"
                      SelectionChanged="FlipView_SelectionChanged" >
        <!-- Use a vertical stack panel for vertical flipping. -->
        <FlipView.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel Orientation="Vertical"/>
            </ItemsPanelTemplate>
        </FlipView.ItemsPanel>
    </FlipView>

    <TextBlock x:Name="textOutput" Text="Hello"></TextBlock>
</StackPanel>

The children of the FlipView were added in C#:

var image1 = await MakeImageForPageIndex(1);
var image2 = await MakeImageForPageIndex(2);

flipView.Items.Add(image1);
flipView.Items.Add(image2);

As you can see in the screenshot the vertical next button and the bottom border are clipped.

I have tried setting VerticalAlignment of the FlipView to Strech with no luck. Setting the images a small Height didn't help either.

I have also tired Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ActualHeight}" from this question

Thank you all!

Answer 1

StackPanel stacks its children in one direction (vertical in this case), its size grows with its children, it does not define a bound for its children.

Use a Grid to replace the StackPanel.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <FlipView x:Name="flipView" />
    <TextBlock Grid.Row="1" />
</Grid>