[Wanli journey-Windows App development] page layout and basic navigation, journey app

[Wanli journey-Windows App development] page layout and basic navigation, journey app

An application was created in the previous blog, which is almost blank. If you are a beginner, you certainly want to add something in it, right. So this blog will look at the layout of the page.

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

<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. Then let's look at the two cut columns. Its width ratio is. Obviously, it is not necessarily because the percentage of the fly is equal to 10 or something. You can also get it.

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. After the creation, you 'd better add something to it. Otherwise, the jump will be a dark piece and I thought it was a Bug. For example, I added a simple TextBlock.

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

Let me briefly introduce some of the common things in VS, as shown in the following figure. The position in box 1 can be changed between the designer and the XAML code. I put the designer to the right, but it is just for the sake that the designer is still used to 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.

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

Common attributes

Background: Background Color
BorderBrush: border color
BorderThickness: border size

  <Button Background="Red" BorderBrush="Blue" BorderThickness="5" Height="66" Width="153"/>

ClickMode: Click mode, which can be Hover, Press, or Release)

Content: Content
FontFamily: font
FontSize: font size
Foreground: font color
FontStretch: the degree of expansion of the font on the screen

You are welcome to ask questions. Let's see you next time on the blog.