"Miles Journey--windows App development" app Bar

Basic usage we have already spoken in the "Miles Journey--windows App development" page layout and basic navigation, which continues to add more usage to the app bar.

Icon

In the previous study, we know that there are many many system predefined in the icon attribute, but perhaps these are not enough, now to add several usages.

Character Set Application

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

So what is a character set app? Please refer to Wikipedia.

Pathicon

We can also use the path to draw a graph of their own, oh, the following figure is probably the 9 o'clock look.

<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 this is also a problem to solve, after all, whether it is from a 8-inch tablet or 25-inch desktop, and even 4-inch to 7-inch phone, when the app bar buttons too much and the screen is not large enough, how to do the extra button?

By default, the width of the app bar icon is ok 100 pixels. So let's look at two pictures first, because Windows 10 can directly adjust the size of the modern app (not the kind of Windows 8 that can only be full-screen), so I directly stretch the modern size 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>

This is more convenient for debugging, so the Issticky property is used. Appbarbutton also has a very important property yo, not used before, but this is the core member, it is iscompact. This property allows the app bar button to display only the icon without displaying the text, which is the label. Then our work will be carried out around this attribute.

We can assume that there is a function that has a Boolean variable argument, and the argument is true, then all of these Appbarbutton Iscompact properties are also true. In the following code, we first select the Bottomappbar from the object as root, so that, if the application also has the top application bar, it will not interfere with each other. Then step through the root and the panel from the object is good.

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

The next thing you need to know is whether you need to enable iscompact, and what is the decision, since the screen resolution, which is the width of the application, will cause the application bar to overlap, then the answer is no doubt. See the following code to believe that we all understand, as to why the width of the boundary at 1000, that is because there are 10 Appbarbutton, the front also said that their width is 100. (without a label, it only takes 60 pixels.) ）

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

Let's take a picture to get this problem done.

But like my so-so-so people, 10 appbarbutton in this way to fix, those 20? Let's show you how to copy and paste the Appbarbutton from the previous XAML. If it is 2K, 4K screen to deal with 20 no problem ah, but I this 1920x1080 screen will not fit.

So is there any way to solve this? Of course, it would be nice to cut these 20 icons into 2 columns. We first add a row to the grid.

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

This is the way to adjust which line it is in, and the right or left side of the horizontal direction. Here I set the two lines on the right side.

leftBottomAppBar.SetValue(Grid1);leftBottomAppBar.SetValue(HorizontalAlignmentProperty, HorizontalAlignment.Right);           

Of course, so you can put 40 Appbarbutton, if you reduce the size of the application to accommodate more can also use the Iscompact property. But there's no application to make it this way ^_^

In addition, if the application bar is designed to do so.

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

So for Windows 10, in the process of stretching, the middle part of the control will fade away. Here's a picture of me stretching to the middle with 2 controls just overlapping. As for the design of Appbarbutton so that is good or bad everyone decided, I think it is not good anyway. But the interesting thing is, even so, the click events are valid for each other. Oh, it distinguishes between the left and right parts, not stacked together.

"Miles Journey--windows App development" app Bar