xaml - Windows 8 AppBar はページ コンテンツをカバーします。代わりにスキッシュが欲しい

Question

WinRT の Page.AppBars でページのコンテンツを圧迫/移動させて、コンテンツの上に移動するのではなく、いくつかのトリックはありますか?

Answer 1

できますが、それを行うにはいくつかのコードを記述する必要があります。

視覚状態を使用した私のバージョン:

<Page.BottomAppBar>
    <AppBar
        x:Name="bottomAppBar"
        Opened="OnBottomAppBarOpened"
        Closed="OnBottomAppBarClosed">
        <StackPanel
            Orientation="Horizontal">
            <Button
                Style="{StaticResource PlayAppBarButtonStyle}" />
        </StackPanel>
    </AppBar>
</Page.BottomAppBar>
<Grid
    Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup
            x:Name="AppBarPushStates">
            <VisualState
                x:Name="AppBarClosed">
                <Storyboard>
                    <DoubleAnimation
                        Storyboard.TargetName="pushedContentTransform"
                        Storyboard.TargetProperty="Y"
                        To="0"
                        Duration="0:0:0.2">
                        <DoubleAnimation.EasingFunction>
                            <CubicEase
                                EasingMode="EaseOut" />
                        </DoubleAnimation.EasingFunction>
                    </DoubleAnimation>
                </Storyboard>
            </VisualState>
            <VisualState
                x:Name="AppBarOpened">
                <Storyboard>
                    <DoubleAnimation
                        Storyboard.TargetName="pushedContentTransform"
                        Storyboard.TargetProperty="Y"
                        To="-88"
                        Duration="0:0:0.2">
                        <DoubleAnimation.EasingFunction>
                            <CubicEase
                                EasingMode="EaseOut" />
                        </DoubleAnimation.EasingFunction>
                    </DoubleAnimation>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Border
        VerticalAlignment="Stretch"
        HorizontalAlignment="Stretch"
        BorderBrush="Orange"
        BorderThickness="5">
        <Border.RenderTransform>
            <TranslateTransform
                x:Name="pushedContentTransform" />
        </Border.RenderTransform>
        <TextBox
            TextWrapping="Wrap"
            Foreground="Brown"
            FontSize="48"
            Text="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat." />
    </Border>
</Grid>

コードビハインド:

    private void OnBottomAppBarClosed(object sender, object e)
    {
        VisualStateManager.GoToState(this, "AppBarClosed", true);
    }

    private void OnBottomAppBarOpened(object sender, object e)
    {
        VisualStateManager.GoToState(this, "AppBarOpened", true);
    }