Application layout and basic navigation for Windows app development

Simple Demo sample view page layout and navigation

Start by creating a new project based on the order in the previous blog post. After the new good, I opened the MainPage.xaml and started to write the program.

<Grid Background="{ThemeResource Applicationpagebackgroundthemebrush}"> <Grid. Rowdefinitions> <rowdefinition height=" the"/> <rowdefinition height="Auto"/> <rowdefinition height="*"/> </Grid. Rowdefinitions> <Grid. Columndefinitions> <columndefinition width=" the"/> <columndefinition width="6*"/> </Grid. Columndefinitions> <stackpanelGrid.Row="0" Grid. columnspan="2"orientation="Horizontal"> <textblockText="Page Layout"Foreground="Red" FontSize="Max"margin=" A"Width=" the"height="a"/> <textblockText="Basic Navigation"Foreground="Green" FontSize="Max"margin=" A"Width=" the"height="a"/> </StackPanel> <Grid Grid.Row="1" Grid.Column="0"> <ButtonContent="Navigate to Page two"Foreground="Blue" FontSize="very"margin="12,480,0,0"Name="Btngosecondpage"click="Btngosecondpage_click"/> </Grid> <canvasGrid.Row="1" Grid.Column="1"Horizontalalignment="Center"Verticalalignment="Center"> <RectangleFill="Blue"/> <RectangleFill="Yellow"height=" the"Width=" the"Canvas. Left=" the"Canvas.Top="a"/> <RectangleFill="White"height=" the"Width=" the"Canvas. Left=" the"Canvas.Top=" the"/> </Canvas> </Grid>

Here's how this code is written in turn.

1) First, the outermost grid control is divided into 3 rows and 2 columns. The height of the first row is 100 pixels. The height of the second line is self-motivated. The so-called self-initiative, will be based on the future of the control to be added to the height of the decision, the height of the third row is the rest, so it may not be clear enough to know what the asterisk means. Well, then look at the two columns that are cut. Its width ratio is 4:6.

It is very clear that the ratio is not necessarily equal to 10, even if it is 4:100.

2) nested a StackPanel in the outermost grid, and position it in the first row, and across 2 columns.

The grid's best practice is to manipulate detailed pixels, which can pinpoint whatever the control is to whatever point it is. The most important orientation attribute of StackPanel, however, is the ability to arrange the arrangement of the controls inside it, for example, by letting two TextBlock controls be arranged horizontally.

3) The grid is nested here with a button in it. The foreground property defines the font color. The FontSize property defines the font size. The following focuses on the margin property.

We define the marin= "12,480,0,0" from left to right in the left, top, right, and bottom four directions away from the perimeter border.

The left margin is already labeled 12 in the designer. And the top margin is not reflected. But it really is 480.

Remember the previous auto, here is the embodiment of it. Because the bottom margin is 0, the grid's cutting line is just below the button. But why the right cutting line is not exactly on the right side of the button. This is because our previous 2 columns were cut according to the 4:6 ratio. Instead of setting auto.

4) The canvas is in the center of the grid control on its periphery, and horizontalaligment and verticalalignment represent the horizontal and vertical positions 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. Then, after knocking down the click= "", it will appear for example to see. This is directly by pressing the ENTER key can be directly named.

Little tricks.

Then double click on the name of the click event and press the F12 key to generate an event yourself and jump to the C # file. The following code will make the page jump from mainpage to Secondpage.

privatevoidbtnGoSecondPage_Click(object sender, RoutedEventArgs e){      if (thisnull)  {     this.Frame.Navigate(typeof(SecondPage));  }}

Finish writing this code also don't hurry debugging, because have not created secondpage yet. It's best to add something to it after the proposal is created. Otherwise jump past is black boundless piece still thought is out of the bug, join a main TextBlock will be able to.

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

I'll go over some of the things that are often used in VS, just for people who just started learning. In the figure below, Box 1 allows you to swap the location of the designer and the XAML code. I just put the designer on the right side, only for the sake of the designer or the left.

Box 2 allows designers and XAML code to be arranged and left and right, or not to display one of them.

You can also set the grid alignment and the zoom ratio of the designer next to it.

There are too many things to set in box 3 and box 4 to set the gradient color. You can also set the Click event. You can also set the layout of controls, and so on.

App Bar Layout

Modern apps on Windows I don't use them very often. It's just an application on the WP8. I think the biggest difference with Android is its application bar, the following is how the application bar is done.

In document Outline (found in the view. or press CTRL+W. U) with Topappbar and Bottomappbar, each of which is the top and bottom application bar. Click the right mouse button to define AppBar and CommandBar at high speed. AppBar is usually placed in the upper end of the application is the Topappbar, CommandBar placed in the lower end is Bottomappbar inside.

Perhaps very many people do not know, under the modern application, press the WIN+Z key can directly call out the application bar yo. Also note that AppBar and CommandBar are different, the former can only include a sub-content, usually define a grid control, and then nested inside the grid other controls. The following example shows a sample of a appbar:

<page.topappbar>  <AppBar issticky="True">     <Grid>       <grid.columndefinitions>          <columndefinition/>          <columndefinition/>       </grid.columndefinitions>       <StackPanel Orientation="Horizontal">          <button Content="Main page" Width=" $" Height=" " Click=" Appbarbutton1_click "/>          <button Content="Second page" Width=" $" Height=" appbarbutton2_click" Click="/> "          <button  Content  =< Span class= "Hljs-value" > "third page"  width  = " " height  ="  " click  = "Appbarbutton3_click" />           <TextBlock Text="AppBar" Foreground="Red" FontSize= "Max" verticalalignment= "Center" Margin=" Width=" " />       </StackPanel>                          <searchbox grid.column= "1" Width=" Height=" " 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>

But we should all find out. By default, the application bar is hidden, false assumptions to be loaded when it is started, then what to do? Very easy. It is good to define the IsOpen property directly in AppBar.

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

There are also sticky properties yo. Other words. Originally when the right button to call out the application bar, and then left-click the other location of the application bar will disappear, but assuming that the Issticky property is true, it is necessary to press a few more right button will disappear.

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

In addition to defining these properties in XAML, we can also implement them in the background code using the 2 button click event.

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 universal application, then the WP side naturally is similar. Just temporary still have bottomappbar but not topappbar, the following is the system to generate code, and on the same as on Windows.

 < Page.bottomappbar ;  <commandbar  >
      <appbarbutton  Icon  = "Accept"  label  =  "Appbarbutton" />  < Appbarbutton  icon  = "Cancel"  label  =/>     </commandbar ;  </page.bottomappbar ;   

Want to learn a lot about other things about the app bar. You can refer to the application bar in the next article.

Frequently use attributes

Background: Background color
BorderBrush: Border Color
BorderThickness: Border Size

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

Clickmode: Click Mode, detailed 3 kinds: hover (Hover), press, release

Content: Contents
FontFamily: Font
FontSize: Font Size
Foreground: Font Color
FontStretch: How the font expands on the screen

Application layout and basic navigation for Windows app development