Question

我想将一些项目悬停在应用栏上方，因此看起来它们只是堆叠在应用栏的顶部。当用户点击appbar的椭圆以转到菜单项选项时，我需要相应地移动应用栏，然后在用户点击时按照应用栏回到其原始位置。

以下是我想要完成的事情

enter image description here

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>

MainPage.xaml.cs中

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

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

        ApplicationBar.MenuItems.Add(menuItem1);
    }

    private void menuItem1_Click(object sender, System.EventArgs e)
    {
        MessageBox.Show("Menu item 1 works!");
    }

主题和我不担心的一切。我只想降低功能。基本上当用户点击椭圆时，我希望ImageBar能够像应用栏顶部一样上升和下降。我怎么能这样做？此外，我希望能够支持肖像和风景，以及超过1个菜单项。有没有办法自动执行此操作？如果没有，我怎么能做到这一点？

Answer 1

您可以订阅ApplicationBar.StateChanged事件：http://msdn.microsoft.com/en-us/library/windowsphone/develop/microsoft.phone.shell.applicationbar.statechanged(v=vs.105).aspx

从事件处理程序中检查事件args 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中寻找手机：PhoneApplicationPage SupportedOrientations属性，它将在新项目中默认为“Portrait”。只需将其更改为PortraitOrLandscape。

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

是的，您可以拥有多个菜单项。只需创建多个ApplicationBarMenuItem对象并将它们全部添加到ApplicationBar.MenuItems集合中，或者在XAML中定义它们：

C＃

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);
}

XAML：

<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>

如何使用应用程序栏创建项目流程

1 个答案: