[Wanli journey-Windows App development] Application bar, journey app

[Wanli journey-Windows App development] Application bar, journey app

The basic usage has been discussed in the layout and basic navigation of the [Wanli journey-Windows App development] Page. Here we will continue to add more methods for using the application bar.

Icon

In our previous studies, we know that the Icon attributes have many predefined system meanings, but these may not be enough. Now we will add several usage methods.

Character Set Application

<AppBarToggleButton Label="Sigma" Click="AppBarButton_Click">    <AppBarToggleButton.Icon>        <FontIcon Glyph="&#x03A3;"/>    </AppBarToggleButton.Icon></AppBarToggleButton>

So what is Character Set application? See Wikipedia.

PathIcon

We can also use a path to draw a graph of our own. The following figure looks like nine o'clock.

<AppBarToggleButton Label="Time" Click="AppBarButton_Click">    <AppBarToggleButton.Icon>                                      <PathIcon Data="F1 M 20,20 21,1L 21,21L 8,21"/>    </AppBarToggleButton.Icon></AppBarToggleButton>

How to adapt to different resolutions

How to adapt to different resolutions is also worth solving. After all, whether it's from 8 inch tablets or 25 inch desktops, or even 4 inch to 7 inch mobile phones, what should I do if there are too many buttons in the application bar and the screen is not large enough?

By default, the width of the application bar icons is determined to be 100 pixels. So let's take a look at the two images first, Because Windows 10 can directly adjust the size of the Modern application (instead of windows 8, which can only be displayed in full screen ), so I stretched the Modern size directly to simulate the probability of resolution.

    <Page.BottomAppBar>        <AppBar x:Name="bottomAppBar" IsSticky="True">            <Grid>                          <StackPanel x:Name="leftBottomAppBar"                             Orientation="Horizontal">                    <AppBarButton Label="Like" Icon="Like"/>                    <AppBarButton Label="Dislike" Icon="Dislike"/>                    <AppBarButton Label="Delete" Icon="Delete"/>                    <AppBarButton Label="Download" Icon="Download"/>                    <AppBarButton Label="Pin" Icon="Pin"/>                </StackPanel>                <StackPanel x:Name="rightBottomAppBar"                         Orientation="Horizontal" HorizontalAlignment="Right">                    <AppBarButton Label="Play" Icon="Play"/>                    <AppBarButton Label="Pause" Icon="Pause"/>                    <AppBarButton Label="Stop" Icon="Stop"/>                    <AppBarButton Label="Previous" Icon="Previous"/>                    <AppBarButton Label="Next" Icon="Next"/>                </StackPanel>            </Grid>        </AppBar>    </Page.BottomAppBar>

The IsSticky attribute is used for easier debugging. AppBarButton also has a very important attribute, which is not used before, but here it is the core member, which is IsCompact. This attribute allows the buttons in the application bar to only display icons without text, that is, Label. Then our work will focus on this attribute.

We can assume that there is a function with a Boolean variable parameter. If the parameter is true, then all the IsCompact attributes of these appbarbuttons are true. In the following code, we first select the self-object bottomAppBar as the root, so that if there is a top application bar in the application, it will not interfere with each other. Then gradually retrieve the self-object in the root and panel.

     private void AppBarButtonCompact(bool isCompact)        {            Panel root = bottomAppBar.Content as Panel;            if(root!=null)            {                foreach(Panel panel in root.Children)                {                    foreach (ICommandBarElement child in panel.Children)                    {                        child.IsCompact = isCompact;                    }                }            }        }

Next, we need to determine whether or not to enable IsCompact. So what is the decision? As mentioned above, it is because of the screen resolution, that is, the width occupied by the application will cause the application column to overlap, so there is no doubt about the answer. I believe everyone understands the following code. As for why the Width limit is 1000, it is because there are 10 appbarbuttons whose width is 100. (If there is no Label, it only needs 60 pixels .)

     void AppSizeChanged(object sender, SizeChangedEventArgs e)        {            if (e.NewSize.Width != e.PreviousSize.Width)            {                if (e.NewSize.Width < 1000)                {                    AppBarButtonCompact(true);                }                else                {                    AppBarButtonCompact(false);                }            }        }

Let's take a picture to solve this problem.

But ten appbarbuttons, like me, are handled in this way. What about the 20? Let's demonstrate how to copy and paste the AppBarButton in the previous XAML. If it's a 2 K or 4 K screen, there's no problem with 20 screens, but I can't fit my X screen.

Is there any way to solve this problem? Of course. Just cut the 20 icons into two columns. First, add a row to the Grid.

<Grid.RowDefinitions>          <RowDefinition Height="auto"/>                         <RowDefinition Height="auto"/>                </Grid.RowDefinitions>

Then, adjust the row in which it is located and the right or left side in the horizontal direction. Here I will set both rows on the right.

leftBottomAppBar.SetValue(Grid.RowProperty, 1);leftBottomAppBar.SetValue(HorizontalAlignmentProperty, HorizontalAlignment.Right);           

Of course, you can put 40 appbarbuttons in this way. If you reduce the application size, you can also use the IsCompact attribute to accommodate more. But there is no application like this. ^_^

In addition, if you design the application bar as this.

<Page.BottomAppBar>      <AppBar x:Name="bottomAppBar" IsSticky="True">                  <Grid>                         <Grid.ColumnDefinitions>                                   <ColumnDefinition Width="*"/>                                 <ColumnDefinition Width="*"/>                         </Grid.ColumnDefinitions>                        <StackPanel Grid.Column="0" x:Name="leftBottomAppBar"  Orientation="Horizontal" HorizontalAlignment="Left">                                                  <AppBarButton Label="Like" Icon="Like"/>                             <AppBarButton Label="Dislike" Icon="Dislike"/>                        <AppBarButton Label="Delete" Icon="Delete"/>                              <AppBarButton Label="Download" Icon="Download"/>                    <AppBarButton Label="Pin" Icon="Pin"/>                         </StackPanel>              <StackPanel Grid.Column="1" x:Name="rightBottomAppBar" Orientation="Horizontal" HorizontalAlignment="Right">                                                     <AppBarButton Label="Play" Icon="Play"/>                    <AppBarButton Label="Pause" Icon="Pause"/>                    <AppBarButton Label="Stop" Icon="Stop"/>                      <AppBarButton Label="Previous" Icon="Previous"/>                    <AppBarButton Label="Next" Icon="Next"/>                 </StackPanel>         </Grid>      </AppBar>  </Page.BottomAppBar>

For Windows 10, the control in the middle will gradually disappear during the stretching process. The following figure shows the overlap of the two widgets in the middle. Designing the AppBarButton is good or bad. I think it is not good. However, even so, their respective Click events are still effective. They will distinguish between the left and right parts rather than overlap.

Add a menu on the application bar

We have seen buttons in the application bar with menus, right? The implementation is actually quite simple. Use the Flyout attribute.

<Page.BottomAppBar>            <CommandBar>         <AppBarButton Icon="Rotate" Label="Rotate">                            <AppBarButton.Flyout>                                    <MenuFlyout>                      <MenuFlyoutItem Text="Rotate 90" Click="MenuFlyoutItem_Click" Tag="Rotate90"/>                              <MenuFlyoutItem Text="Rotate 180" Click="MenuFlyoutItem_Click" Tag="Rotate180"/>                         <MenuFlyoutItem Text="Rotate 270" Click="MenuFlyoutItem_Click" Tag="Rotate270"/>                                   </MenuFlyout>                           </AppBarButton.Flyout>                   </AppBarButton>        </CommandBar>   </Page.BottomAppBar>

Tag attributes. Since the shoes are reading the CSDN blog, you will naturally know the Tag. The following code plays a role in the Flyout menu.

private void MenuFlyoutItem_Click(object sender, RoutedEventArgs e){    MenuFlyoutItem selectedItem = sender as MenuFlyoutItem;    if (selectedItem != null)    {        if (selectedItem.Tag.ToString() == "Rotate90")        {            DoRotate(90);        }        else if (selectedItem.Tag.ToString() == "Rotate180")        {            DoRotate(180);        }        else if (selectedItem.Tag.ToString() == "Rotate270")        {            DoRotate(270);        }    }}