当SplitView处于压缩模式时，拉伸SplitView.Pane的内容

Question

I'm trying to create a navigation bar using the SplitView control. I set it's DisplayMode property to CompactInline and two different values for CompactPaneLength and OpenPaneLength properties. Problem is when SplitView gets closed (compacted), content of it's Pane won't be aware of new size so if I put a let's say Border element in it, the element won't be stretched and goes out of the compact pane area:

 <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <SplitView IsPaneOpen="False" CompactPaneLength="100" OpenPaneLength="200" DisplayMode="CompactInline">
        <SplitView.Pane>
            <Border BorderBrush="Blue" Height="50"
                    BorderThickness="4"
                    VerticalAlignment="Top">
                <FontIcon Glyph="&#xE094;"
                          Width="40"
                          Height="40" />
            </Border>
        </SplitView.Pane>
    </SplitView>
</Grid>

Here is an image demonstrates the problem:

Question is: How to solve the problem without using the event handlers and code behind?

Answer 1

Your compactPane width is set to 100 px. Since the border is not limited in width, it will strech, becoming 100 px. The content of border will center.

Set CompactPane width to 50, or the border width to 50 to resolve the issue