Xaml 如何使用应用程序栏使项目流动

我想将一些项目悬停在应用程序栏上方，这样看起来它们就像是堆叠在应用程序栏的顶部。当用户点击appbar的省略号进入菜单项选项时，我需要相应地使用appbar移动这些内容，然后在用户点击退出时跟随appbar返回其原始位置

下面是我想要完成的事情

MainPage.xaml

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <ListBox x:Name="ImageBar"
            Grid.Row="1" Background="Silver"
            ScrollViewer.VerticalScrollBarVisibility="Disabled"
            ItemContainerStyle="{StaticResource ListBoxItemStyle}"                     
            SelectedIndex="{Binding SelectedIndex, ElementName=ContentPivot, Mode=TwoWay}">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <customcontrols:SplitPanel />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBoxItem>
                            <Image Source="/Assets/add.png"/>
            </ListBoxItem>
            <ListBoxItem>
                <Image Source="/Assets/edit.png"/>
            </ListBoxItem>
            <ListBoxItem>
                <Image Source="/Assets/close.png"/>
            </ListBoxItem>
            <ListBoxItem>
                <Image Source="/Assets/delete.png"/>
            </ListBoxItem>
        </ListBox>

        <controls:Pivot x:Name="ContentPivot"
            Grid.Row="0"
            Margin="0,-12,0,0">
            <controls:PivotItem>
                <StackPanel>
                    <TextBlock Text="add" Style="{StaticResource PhoneTextTitle2Style}" FontWeight="Bold"/>
                    <RichTextBox Margin="0,12,0,0">
                        <Paragraph>
                            <Run Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit."/>
                        </Paragraph>
                    </RichTextBox>
                </StackPanel>
            </controls:PivotItem>
            <controls:PivotItem>
                <StackPanel>
                    <TextBlock Text="edit" Style="{StaticResource PhoneTextTitle2Style}" FontWeight="Bold"/>
                    <RichTextBox Margin="0,12,0,0">
                        <Paragraph>
                            <Run Text="Sed bibendum vehicula quam."/>
                        </Paragraph>
                    </RichTextBox>
                </StackPanel>
            </controls:PivotItem>
            <controls:PivotItem>
                <StackPanel>
                    <TextBlock Text="close" Style="{StaticResource PhoneTextTitle2Style}" FontWeight="Bold"/>
                    <RichTextBox Margin="0,12,0,0">
                        <Paragraph>
                            <Run Text="Integer eget molestie lacus."/>
                        </Paragraph>
                    </RichTextBox>
                </StackPanel>
            </controls:PivotItem>
            <controls:PivotItem>
                <StackPanel>
                    <TextBlock Text="delete" Style="{StaticResource PhoneTextTitle2Style}" FontWeight="Bold"/>
                    <RichTextBox Margin="0,12,0,0">
                        <Paragraph>
                            <Run Text="Phasellus molestie volutpat ante pulvinar convallis."/>
                        </Paragraph>
                    </RichTextBox>
                </StackPanel>
            </controls:PivotItem>
        </controls:Pivot>
    </Grid>

---

主题和所有我不担心的事情。我只想把功能搞定。基本上，当用户点击椭圆时，我希望

ImageBar

能够像在应用程序条顶部一样上升和下降。我怎么能做这样的事？此外，我希望能够支持肖像和景观，以及超过1个菜单项。有没有一种方法可以自动做到这一点？如果没有，我可以如何完成此操作？

您可以订阅ApplicationBar.StateChanged事件：

从事件处理程序中检查事件参数IsMenuVisible属性，并相应地进行布局调整

public MainPage()
{
    ApplicationBar = new ApplicationBar();
    ApplicationBar.StateChanged += ApplicationBar_StateChanged;
}

void ApplicationBar_StateChanged(object sender, ApplicationBarStateChangedEventArgs e)
{
    if (e.IsMenuVisible)
    {
        // Move Image Up
    }
    else
    {
        // Move Image Down
    }
}

关于你的其他问题。是的，您可以支持纵向/横向或两者。在XAML中查找phone:PhoneApplicationPage SupportedOrientations属性时，它将在新项目中默认为“纵向”。把它改成肖像画或风景画

<phone:PhoneApplicationPage
    SupportedOrientations="PortraitOrLandscape" Orientation="Portrait">
</phone:PhoneApplicationPage>

XAML：

好的，我来检查一下。关于设备方向和菜单项的数量，我想知道在显示菜单项时如何最好地确定应用程序栏的最终高度，因为这将根据应用程序栏中菜单项的数量进行调整。订阅StateChanged事件时，如何根据打开和关闭的appbar的准确速度和高度移动

ImageBar

列表框？我认为没有办法检查appbar的大小。所以你可能只需要做一些尝试和错误，让它看起来不错。您肯定无法与appbar上下移动的速度相匹配，只有在appbar完成移动并触发事件后，您才能捕捉到appbar。

<phone:PhoneApplicationPage
    SupportedOrientations="PortraitOrLandscape" Orientation="Portrait">
</phone:PhoneApplicationPage>

private void BuildApplicationBar()
{
    ApplicationBar = new ApplicationBar();
    ApplicationBar.Mode = ApplicationBarMode.Minimized;

    ApplicationBarMenuItem menuItem1 = new ApplicationBarMenuItem();
    menuItem1.Text = "menu item 1";
    menuItem1.Click += menuItem1_Click;

    ApplicationBarMenuItem menuItem2 = new ApplicationBarMenuItem();
    menuItem2.Text = "menu item 2";
    menuItem2.Click += menuItem2_Click;

    ApplicationBar.MenuItems.Add(menuItem1);
    ApplicationBar.MenuItems.Add(menuItem2);
}

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
        <shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem x:Name="menuButton1" Text="menu button 1"
                                          Click="menuButton1_Click" IsEnabled="True"/>
            <shell:ApplicationBarMenuItem x:Name="menuButton2" Text="menu button 2"
                                          Click="menuButton2_Click" IsEnabled="True"/>
        </shell:ApplicationBar.MenuItems>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>