了解UWP中的应用栏和命令栏

by Santhakumar Munuswamy

  Posted on  24 June 2016

  超人


 

在本文中,我们将讨论如何理解UWP中的应用栏和命令栏。 我们可以通过UWP中的示例应用程序轻松实现App Bar和Command Bar。大家都知道AppBar,Command Bar是Windows运行时API中Windows.UI.Xaml.Controls包上的默认类。仅当您在Windows 8中开发通用Windows 8应用程序时,才可以使用AppBar。如果要在Windows 10中开发新应用程序,则强烈建议使用CommandBar控件而不是UWP中的AppBar。

普遍 Windows Platform series

背景

命令栏是一个UI组件及其轻量级控件,可用于复杂的内容(例如图像或文本块)以及简单的建议(例如AppBarButton,AppBarToggleButton和AppBarSeparator控件)。它可以与任何导航模式和主要三个属性(例如PrimaryCommands,SecondaryCommands和Content)一起使用。

怎么样 to implement AppBar and CommandBar and run UWP App

We are going to discuss how to implement AppBar and CommadBar with a sample apps on UWP and show the demo in  multiple  device. We will see the step by step guidelines for the 超人 AppBar and CommandBar 应用程式 creation here.

步 1:

打开 Visual Studio 2015. Go to file menu, point to new and then click new project. New Project window 将 open, 

您 can select a installed template like “ Universal” under the Windows on Visual C# Template, and then 

选择 a Blank App (Universal Windows) and type Project Name UWPCommandBar. Choose the project location 

路径 and then click on the OK button.

现在, you can see the 超人CommandBar 项目 structure as in the following screen shot.

 

步 2:

As you all know, we have discussed project folder structure and files on my previous article at earlier. 

步 3:

As you all know, we have toolbox available on visual studio in that which is available on CommandBar

控制 in the below screen shots  

 

现在, you can see the auto generated code as below 

<Page.BottomAppBar>

        <CommandBar>

            <CommandBar.Content>

                <Grid/>

            </CommandBar.Content>

            <AppBarButton Icon="Accept" Label="应用程式barbutton"/>

            <AppBarButton Icon="Cancel" Label="应用程式barbutton"/>

        </CommandBar>

 </Page.BottomAppBar>

 

首页.xaml

<Page

    x:Class="超人CommandBar.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:UWPCommandBar"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Page.BottomAppBar>

        <CommandBar ClosedDisplayMode="Compact">

            <CommandBar.PrimaryCommands>

                <AppBarButton Name="home" Icon="首页" Label="首页" Click="应用程式Home_Click"/>                

                <AppBarButton Name="admin" Icon="Admin" Label="Admin" Click="应用程式Admin_Click"/>

                <AppBarButton Name="contact" Icon="联系" Label="联系" Click="应用程式Contact_Click"/>

            </CommandBar.PrimaryCommands>

            <CommandBar.SecondaryCommands>

                <AppBarButton Name="setting" Icon="Setting" Label="Setting"/>

            </CommandBar.SecondaryCommands>

        </CommandBar>

    </Page.BottomAppBar>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <StackPanel>

            <TextBlock Text="首页" Padding="25 25 25 25"></TextBlock>

        </StackPanel>

    </Grid>

</Page>

 

首页.xaml.cs

using System;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409 

namespace UWPCommandBar

{

    /// <summary>

    /// An empty page that can be used on its own or navigated to within a Frame.

    /// </summary>

    public sealed partial class MainPage : Page

    {

        public MainPage()

        {

            this.InitializeComponent();

        } 

        private void AppHome_Click(object sender, RoutedEventArgs e)

        {

            Frame.Navigate(typeof(MainPage));

        }

        private void AppAdmin_Click(object sender, RoutedEventArgs e)

        {

            Frame.Navigate(typeof(About));

        } 

        private void AppContact_Click(object sender, RoutedEventArgs e)

        {

            Frame.Navigate(typeof(Contact));

        }

    }

}

 

步 4: 

现在, if you can run the 超人CommandBar 应用程式s with the different devices, you can see how 

an 应用 看起来, as shown below: 

选择 a Debug and 移动 Emulator 10.0.10586.0 WVGA4 inch 512 MB option to run the apps 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

怎么样 to Customize the CommendBar in UWP

We can easily customize the UI/UX based on your requirements in UWP. I have used in 

应用栏Separator for the UI looks pretty in the sample universal windows apps.

步 1:

<Page.TopAppBar>

        <CommandBar ClosedDisplayMode="Minimal" Background="#1FA2E1"></CommandBar>

    </Page.TopAppBar>

    <Page.BottomAppBar>

        <CommandBar ClosedDisplayMode="Compact" Background="#1FA2E1">

            <CommandBar.PrimaryCommands>

                <AppBarButton Name="home" Icon="首页" Label="首页" Click="应用程式Home_Click"/>

                <AppBarSeparator/>

                <AppBarButton Name="admin" Icon="Admin" Label="Admin" Click="应用程式Admin_Click"/>

                <AppBarSeparator/>

                <AppBarButton Name="contact" Icon="联系" Label="联系" Click="应用程式Contact_Click"/>

                <AppBarSeparator/>

            </CommandBar.PrimaryCommands>

            <CommandBar.SecondaryCommands>

                <AppBarButton Name="setting" Icon="Setting" Label="Setting"/>

            </CommandBar.SecondaryCommands>

        </CommandBar>

    </Page.BottomAppBar>

 

第2步: 

现在, if you can run the 超人CommandBar 应用程式s with the different devices您 can see how an 应用 看起来, as shown below: 
选择 a Debug and 移动 Emulator 10.0.10586.0 WVGA4 inch 512 MB option to run the apps

 
























 



选择“调试和本地计算机”选项以运行应用程序

源代码

您 can download the source code to 这里

结论

I hope you understood the CommendBar, AppBar, Customize UI and run it on multiple devices. I have covered 

所有 the required things. If you find anything that I missed in this article, please let me know. 请 share your 

有价值 feedback or suggestions. 

 


关于作者
Santhakumar Munuswamy是一位经验丰富的解决方案架构师,并且是Cloud / AI解决方案中最有价值的专家。他在解决方案设计,软件产品开发,技术文档,Web和云应用程序的项目管理方面拥有大约14年的经验。他在不同领域(汽车,电信,医疗保健,物流和仓库自动化等)的IT行业经验丰富,担任过技术架构师,Genesys顾问,技术负责人,团队负责人和开发人员。他在指导和指导高潜力开发人员方面经验丰富。

跟着我: 脸书, 推特, 谷歌加, 领英
博客评论由 领英


Month List

社区徽章