Application layout and basic navigation for Windows App development, app Layout

Application layout and basic navigation for Windows App development, app Layout
Simple Example: view the page layout and navigation

First, create a new project in the order in the previous blog. After the creation, click MainPage. xaml to start coding.

<Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Grid. rowDefinitions> <RowDefinition Height = "100"/> <RowDefinition Height = "auto"/> <RowDefinition Height = "*"/> </Grid. rowDefinitions> <Grid. columnDefinitions> <ColumnDefinition Width = "4 *"/> <ColumnDefinition Width = "6 *"/> </Grid. columnDefinitions> <StackPanel Grid. row = "0" Grid. columnSpan = "2" Orientation = "Horizontal"> <TextBlock Text = "page layout" Foreground = "Red" FontSize = "40" Margin = "12" Width = "200" Height = "80"/> <TextBlock Text = "basic navigation" Foreground = "Green" FontSize = "40" Margin = "12" Width = "200" Height = "80 "/> </StackPanel> <Grid. row = "1" Grid. column = "0"> <Button Content = "navigate to the second page" Foreground = "Blue" FontSize = "35" Margin = "12,480, 0, 0 "Name =" btnGoSecondPage "Click =" btnGoSecondPage_Click "/> </Grid> <Canvas Grid. row = "1" Grid. column = "1" HorizontalAlignment = "Center" verticalignment = "Center"> <Rectangle Fill = "Blue"/> <Rectangle Fill = "Yellow" Height = "100" Width =" 100 "Canvas. left = "50" Canvas. top = "20"/> <Rectangle Fill = "White" Height = "100" Width = "100" Canvas. left = "70" Canvas. top = "90"/> </Canvas> </Grid>

Next we will explain in sequence what the above Code has been written.

1) First, the Grid control at the periphery is divided into three rows and two columns. The height of the first line is 100 pixels, and the height of the second line is automatic. The so-called automatic is determined based on the height of the controls added in the second line; the height of the third line is the rest, so it may not be clear what the asterisk means. Let's take a look at the two cut columns. Its width ratio is. Obviously, the ratio is not necessarily equal to 10, even.

2) A StackPanel is nested in the outermost Grid and located in the first row across two columns. Grid is best at operating specific pixels, which can precisely locate any control. The most important Orientation attribute of StackPanel can be used to arrange the controls in it. For example, two TextBlock controls are arranged horizontally.

3) Grid is nested here, with a Button in it. The Foreground attribute defines the font color and the FontSize attribute defines the font size. Next we will focus on the Margin attributes. We define Marin = "12,480,", which is the distance from left to right from the left, top, right, and bottom four directions to the outer border.

The left margin is marked as 12 in the designer, but the top margin is not shown, but it is indeed 480. Do you still remember the previous auto, which is shown here, because the bottom margin is 0, so the Grid split line is just under the Button. But why is the split line on the right not just on the right side of the Button? This is because our previous two columns are cut at a ratio of 4 to 6, rather than the auto set.

4) The Canvas is located in the center of the Grid control on the periphery. HorizontalAligment and verticalignment indicate the placement of the horizontal and vertical directions respectively. Canvas. Top and Canvas. Left indicate the distance from the Top and bottom of the Canvas, respectively.

5) set a name for the Button and Click = "", as shown in. You can directly name the Button by pressing Enter. Tips.

Double-Click the name of the Click Event and press F12 to automatically generate an event and jump to the C # file. The following code redirects the page from MainPage to SecondPage.

private void btnGoSecondPage_Click(object sender, RoutedEventArgs e){      if (this.Frame != null)  {     this.Frame.Navigate(typeof(SecondPage));  }}

Do not rush to debug the code because you have not created a SecondPage. It is recommended that you add something to it after creating it. Otherwise, the jump will be a piece of black and thought it was a Bug. Just add a basic TextBlock.

   <TextBlock Text="Second Page" FontSize=" 50"/>

Let me briefly introduce some of the things commonly used in VS, which are only intended for beginners. In the figure below, box 1 can change the positions of the designer and the XAML code. I put the designer to the right, but only, the designer is still a habit on the left.

Box 2 allows the designer and the XAML code to move up and down columns and left and right columns without displaying one of them. You can also set grid alignment and scale ratio of the designer.

There are too many things that can be set in box 3 and Box 4. You can set gradient, Click event, and control layout.

Application bar Layout

I don't usually use the modern application on Windows, but the biggest difference between the application on WP8 and Android is its application column, the following describes how the application bar is created.

In Document Outline (found in the view, or press Ctrl + W, U), there are TopAppBar and BottomAppBar, which are the application bar at the top and bottom. Right-click the AppBar and CommandBar to quickly define the AppBar and CommandBar. Generally, the AppBar is placed at the upper end of the application, that is, the TopAppBar, And the CommandBar is placed at the lower end, that is, the BottomAppBar.

Maybe many people do not know. In the Modern application, press Win + Z to directly call out the application bar. In addition, note that the AppBar and CommandBar are different. The former can only contain one piece of content. Generally, a Grid control is defined and other controls are nested in the Grid. The following is an example of An AppBar:

<Page.TopAppBar>  <AppBar IsSticky="True">     <Grid>       <Grid.ColumnDefinitions>          <ColumnDefinition/>          <ColumnDefinition/>       </Grid.ColumnDefinitions>       <StackPanel Orientation="Horizontal">          <Button Content="Main Page" Width="140" Height="80" Click="AppBarButton1_Click"/>          <Button Content="Second Page" Width="140" Height="80" Click="AppBarButton2_Click"/>          <Button Content="Third Page" Width="140" Height="80" Click="AppBarButton3_Click"/>          <TextBlock Text="AppBar" Foreground="Red" FontSize="40" VerticalAlignment="Center" Margin="12" Width="200"/>       </StackPanel>                          <SearchBox Grid.Column="1" Width="300" Height="50" HorizontalAlignment="Right"/>    </Grid>  </AppBar></Page.TopAppBar><Page.BottomAppBar>    <CommandBar>       <AppBarButton Label="Refresh" Icon="Refresh"             Click="appBarBtn4_Click"/>       <AppBarButton Label="Redo" Icon="Redo"           Click="appBarBtn5_Click"/>               <CommandBar.SecondaryCommands>          <AppBarButton Label="Add" Icon="Add" Click="AppBarButton6_Click"/>          <AppBarButton Label="Delete" Icon="Delete" Click="AppBarButton7_Click"/>          <AppBarButton Label="Edit" Icon="Edit" Click="AppBarButton8_Click"/>       </CommandBar.SecondaryCommands>                                        </CommandBar></Page.BottomAppBar>

However, we should have noticed that the application bar is hidden by default. What should we do if we want to start it during loading? It is easy to define the IsOpen attribute in AppBar as true.

<CommandBar IsOpen="True">    <!-- --></CommandBar>

There are also viscosity attributes. That is to say, when you use the right-click interface to call out the application bar, and click the left button to click the application bar in another location, the application bar will disappear, but what if the IsSticky attribute is true, you have to right-click a few more times to disappear.

<AppBar IsSticky="True">    <!-- --></AppBar>

In addition to defining these attributes in XAML, we can also use functions in the background code. Here I am using two Button Click events.

private void btnSetAppBar_Click(object sender, RoutedEventArgs e){   if (this.TopAppBar != null)   {       this.TopAppBar.IsSticky = true;   }}private void btnSetAppBar2_Click(object sender, RoutedEventArgs e){    if (BottomAppBar.IsOpen ==false)    {       this.BottomAppBar.IsOpen = true;    }}

Since it is a common application, the WP side is naturally similar, but currently only the BottomAppBar does not have a TopAppBar. The following is the code generated by the system, which is the same as that on Windows.

    <Page.BottomAppBar>        <CommandBar>            <AppBarButton Icon="Accept" Label="appbarbutton"/>            <AppBarButton Icon="Cancel" Label="appbarbutton"/>        </CommandBar>    </Page.BottomAppBar>

Want to know