Learning notes for UWP:WIN10 Software development (2017.5.11 update)

application development of modern operating system

The following is my personal learning notes, welcome to ask questions, we explore together.

GitHub 1.XAML XAML is just XML in a particular format, and it follows all the rules of XML. The user of XML is the compiler that turns our code into a WINDOWS10 executable; XAML is a simple way to create instances of classes and set properties, which can save a lot of code than C #. Type converters in XAML allow users to use very concise characters to replace lengthy type names and enumeration values when setting properties

Xaml-xml Syntax, create instances of Classes that define the UI

Type Converters-convert literal strings in XAML into enumerations, instances of classes, etc 2.Grid && Stack Panel grid and Stackpanel will automatically extend certain controls such as image and Retangular to 100%, but grid will automatically center the elements within the grid, and the elements in the grid can overlap, and Stackpanel will not. So most layouts can be done with StackPanel, but it's not that grid is useless, it can still play a very good role in adaptive change, and this is StackPanel. 3.Understanding Default Properties, Complex properties and the property Element Syntax

Default Prpperty ... Ex. Sets Content Property

<button>click me</button>

Complex Properties-break out of a property in its own element syntax:

<button name= "Clickmebutton"
        horizonalalignment= "left"
        content= "click Me"
        margin= "20,20,0,0"
        Verticalalignment= "Top"
        click= "Clickmebutton_click"
        width= "heigh="
        >
        < button.background>
            <lineargradientbrush endpoint= "0.5,1" startpoint= "0.5,0" >
                <gradientstop Color= "BLACK" offset= "0"/>
                <gradientstop color= "Red" offset= "1"/>
            </LinearGradientBrush>
        </Button.Background>
</Button>

Elements put themselves to rows and columns using attached property syntax

...
 ...
 <button grid.row= "0"/>
</Grid>

When referencing Rows and Columns ... 0-based. There ' s always one default implicit cell:row 0, Column 0 If not specified, element would be in the default cell 4.Understanding XAML Schemas and Namesoace DeclarationsDon ' t touch the schema stuff-it ' s necessary! Schemas define rules for XAML, for UWP, for designer support, etc. Namesoaces tell XAML parser where to find the definition of a given element in the XAML. 5.XAML layout with Grids

Layout controls don ' t have a content properety ...
They have a Children property of type Uielementcollection.
By embedding no control inside's a layout control, you are implicitly calling the Add method of the Children collection property.

<grid background= "Black" >
    <Grid.RowDefinitions>
        <rowdefinition height= "*"/>
        < RowDefinition height= "*"/>
        <rowdefinition height= "*"/>
    </Grid.RowDefinition>
    < Grid.columndefinitions></grid.columndefinition>
</Grid>

Sizes expressed in terms of:
-Auto-use The largest value of elements it contains to define the Width/height
-* (Star sizing)-utilize all available spaces
-1*-of all available spaces, give me 1 "share"
-2*-of all available spaces, give me 2 "shares"
-3*-of all available spaces, give me 3 "shares"

6 Total shares ... 3* would is 50% of the available width/height 6.XAML layout with Stackpanel

<StackPanel>
    <TextBlock>Top</TextBlock>
    <TextBlock>Bottom</TextBlock>
</StackPanel>

Vertical orientation by default. Left-to-right flow By default when horizontal aligment Most layouts'll combine multiple layout. Grid would overlap controls. StackPanel'll stack them. 7.SplitView

The split view allows us to create a panel which can be displayed or hidden.

We would use the Splitview to implement Hamburger navogation.

There are two parts to a splitview:
(1) The part, hidden by default (Pane)
(2) The part, shown by default (Content)

Splitview can be used to implement menus.

Hidden in the section next to the show, we call it pane.

A part that is easily covered or pushed aside for presentation, which we call content.

Property Ispaneopen DisplayMode Inline The content pushed away to let pane, but the pane closed when the content is not displayed overlap completely blocked, but pane closed when not displayed Compactoverlay The content is completely blocked, but the pane is closed when there is a display
You need to set the Compactpanelength compactinline to push the content out of the pane, but when the pane closes, the compactpanelength is used to set the width when pane closes openpanelength To set the width of the pane when opened- 8.Relative Panel

It basically defines a within which you can position and align child objects in relation to

or in relation to the parent panel

The additional attributes (Attach property) that are used to locate within the relative panel have three main categories: the Panel alignment relationship (panels alignment relationship): such as aligning the control to the top of the panel, left-aligned, and so on (sibling Alignment relationship): For alignment of sibling elements, such as top alignment between controls, left-aligned, and so on. Sibling position relationship (sibling Position relationship): Used to place sibling elements, such as the top, bottom, left, and right of controls.

The above priority is appended to the attribute from high to Low:
Alignrightwithpanel (True/false) Alignleftwith (the name of controls) Leftof (the name of controls) Alignverticalcenterwit H (the name of controls) Alignhorizontalcenterwithpanel (True/false) Alignbottomwithpanel (true/false) Aligntopwith (the Name of controls) 9.Navigation

APP > Window > Frame > MainPage

Can load pages into a child frame or into the root frame. In UWP, the page exists in the frame object. When the app starts, there will be a top-level application Object, in which there will be a window, in the desktop version of the UWP, it will show the top of the column, that is, the "minimize", "maximize", "close" button, and the application name of the column. Inside, a frame is used to store pages (pages). In APP.xaml.cs there will be code rootframe.navigate to MainPage jumps (typeof (MainPage), e.argument) to import the export page like an app in MainPage, We can define a frame in mainpage and then add Myframe.navigate (typeof (Page1)) to the mainpage () function, while allowing the navigation bar defined in mainpage to have multiple pages defined jump buttons

Myframe.navigate (typeof (Page1));

-Define Back button

if (myframe.cangoback) {
    myframe.goback ();
}

Define the Forward button

if (Myframe.cangoforward ()) {
    myframe.goforward ();
}

Hyperlinkbutton button

When you define a page outside of mainpage, use frame.navigate instead of myframe. Because MyFrame is in mainpage, not in other pages. In order to achieve forward retention before the page information, we can introduce a second parameter in the frame.navigate to achieve data transmission, such as:
Frame.navigate (typeof (Page1), textbox.text);
 
Also, set the method to accept this parameter in the next page. Add the Onnavigatedto function below the page constructor in the Xaml.cs of the corresponding page:

protected override void Onnavigatedto (NavigationEventArgs e) {
    var value = (string) e.parameter;
    TextBox.Text = Value;
}
In order to save the back information, we can actually put the information we want to keep in a static variable (scope in this app, added in the App Class): Create a global variable by declaring a static internal field The App class definition.
Internal static string Someimportant Value;
 
The Onnavigateto function in each page is then replaced with the following:

if (! String.IsNullOrEmpty (App.someimportantvalue)) {
    valuetextbox.text = app.someimportantvalue;
}
 
10. Basic XAML Controls 
Note: IsChecked is a nullable Boolean type (nullable bool), so if you want to get true or false then you need to convert it to bool for how to use it. How to display a control on the screen how to handle major events, such as selecting or clicking on how to retrieve the controlled values, regardless of type, nature

Control checkbox (check box)
Name Content tapped
Checkboxresulttextblock.text = MyCheckBox.IsChecked.ToString (); RadioButton
Name Content GroupName Checked
radiobuttontextblock.text= (BOOL) yesradiobutton.ischecked. Yes:no; Combbox
SelectionChanged Child Tags: combboxitem
Content isselected

if (Comboboxresulttextblock = null) return;
var combo = (ComboBox) sender;
var item = (ComboBoxItem) combo. SelectedItem;
Comboboxresulttextblock.text = Item. Content.tostring ();
The listbox ListBox will be the important control Name SelectionMode (multiple/single) selectionchanged Child label for learning the Hamburg menu (Hambuger navigation): ListBoxItem
var SelectedItems = mylistbox.items.cast<listboxitem> ()
                    . Where (P => p.isselected)
                    . Select (t => t.content.tostring ())
                    . ToArray ();
Listboxresulttextblock.text = string. Join (",", SelectedItems);
 
Image Source horizontalalignment Width Height grid.row grid.column Stretch
None fill, stretching the picture to fill the space uniform, scaling the picture to an exact size UniformToFill Margin

ToggleButton (toggle button) Name Content isthreestate Click togglebuttonresulttextblock.text= MyToggleButton.Ischeckes.ToString ();

Toggleswitch (toggle switch) Complex properties
Offcontent oncontent

Timepicker (Time picker) Clockidentifier (12hourclock/24hourclock)

Calendardatepicker (Calendar selector) Placeholdertext

CalendarView (date view) SelectionMode (multiple, None, single) selecteddateschanged renders the selected date

var selecteddates = sender. Selecteddates.select (P => p.date.month.tostring () + "/" + p.date.day.tostring ()). ToArray ();
var values = string. Join (",", selecteddates);
Canlendarviewresulttextblock.text = values;
 
Flyout myflyout.hide ();

<Button>
    <Button.Flyout>
        <flyout x:name= "Myflyout" > ...
          .
        </Flyout>
    </Button.Flyout>
</Button>
 
Menuflyout Placement
Bottom full left right top Menuflyoutitem Menuflyoutsubitem
It is recommended that you use the Menuflyoutsubitem items property to write the next level of menu elements into this attribute menuflyoutseparator (underlined) Togglemenuflyoutitem (checked on the left side)

Autosuggestbox (suggested list) if you have a search feature in an application, this control will be very useful in its style with the search box defined by our TextBox it can narrow the range of choices as we enter text

var autosuggestbox = (autosuggestbox) sender;
var filtered = Selectionitems.where (P => p.startswith (Autosuggestbox.text)). ToArray ();
Autosuggestbox.itemssource = filtered;
 
Where Selectionitems is an array of characters that we set up beforehand. Queryicon Placeholdertext TextChanged

Slider (Slider control) Maximum mininum

ProgressBar (progress bar) Maxinum Value

Value= "{X:bind myslider.value, mode=oneway}"
 
Progressring (Progress Circle)

IsActive (True/false)

 Software recommends XAML UI control  11. Hamburger navigation  Character Map segoe MDL2 Assets Find icon Overall mainpage 

 <grid background= "{themeresource Applicationpagebackgroundthemebrush}" > <Grid.RowDefinitions> <rowdefinition height= "Auto"/> <rowdefinition height= "*"/> </grid.rowdefinit ions> <RelativePanel> <button name= "Hamburgerbutton" fontfamily= "Segoe MDL2 Assets" Cont Ent= "& #xE700;" Fontsize= "click=" Hamburgerbutton_click "/> </RelativePanel> <splitview name=" Mysplitview "grid.row=" 1 "displaymode=" Compactoverlay "openpanelength= "Compactpanelength=" horizontalalignment= "left" > &LT;SPL 

                         itview.pane> <listbox selectionmode= "single" Name= "Iconslistbox" selectionchanged= "iconslistbox_selectionchanged" > <listboxitem name= "Sharel IstboXitem "> <stackpanel orientation=" Horizontal "> <textblock fontfamily= "Segoe MDL2 Assets" fontsize= "text=" & #xE72D; "/> <textblock text=" S Hare "fontsize=" margin= "20,0,0,0"/> </StackPanel> </listbox item> <listboxitem name= "Favoriteslistboxitem" > <stackpanel Or ientation= "Horizontal" > <textblock fontfamily= "segoe MDL2 Assets" "Fontsize="

                        amp; #xE734; "/> <textblock text=" Favorites "fontsize=" margin= "20,0,0,0"/>

            </StackPanel> </ListBoxItem> </ListBox> </SplitView.Pane> <SplitView.Content> <textblock name= "Resulttextblo CK "/> &Lt;/splitview.content> </SplitView> </Grid> 
Background
private void Hamburgerbutton_click (object sender, RoutedEventArgs e)

    {

      Mysplitview.ispaneopen =! Mysplitview.ispaneopen;

    }



    private void Iconslistbox_selectionchanged (object sender, SelectionChangedEventArgs e)

    {

      if ( sharelistboxitem.isselected) {resulttextblock.text = "Share";}

      else if (favoriteslistboxitem.isselected) {resulttextblock.text = "Favorites";}

    }
 
12.TextBox of placeholdertext= "" 
Can be used in the input box prompt, which automatically clears the prompt when the mouse focus is in the text box, or the prompt is displayed (without any input) 13.ScrollViewer

Properties: HorizontalScrollBarVisibility vertiacalscrollbarvisibility
Set to auto indicates that the scroll bar is displayed only when needed and is hidden when not needed

The 
 Placing ScrollViewer in StackPanel causes the scroll bars to not appear, but this is not the case if StackPanel is used as a subclass of ScrollViewer. We'll put ScrollViewer in the entire visible area of the application.  14. Canvas and graphics  have tapped property settings events in the canvas you can manage these graphics controls with additional properties of the canvas Canvas allows you Absolute positioning via attached properties. Line 
 X1 X2 Y1 Y2 Stroke (ambient color) Fill (internal color) strokethickness strokeendlinecap (tail shape) strokestartlinecap polyline 
 St Roke strokethickness Fill Points strokelinejoin strokestartlinecap Rectangle Ellipse (ellipse) Canvas.ZIndex equivalent to three-dimensional z-axes, You can use to define how the control overlaps, that is, you can define the top level as the specified control, and the larger the value of the zindex, the higher the hierarchy it is in, and the maximum value represents the highest level of control.  15.page.resources  When we want to bind a resource, the expression format required is "StaticResource" in the curly braces, plus the resource name (key). The meaning of the binding at the curly braces, and the word "StaticResource" indicates that the type of resource we are binding on is too complex to set, and whether there are settings similar to the one in CSS style, that is, adding a style tag to the resources 

<style targettype= "button" x:key= "Mybuttonstyle" > <setter property= "Background" value= "
    Blue"/>
    <setter property= "FontFamily" value= "Arial black"/> <setter "property= fontsize" value= "
</Style>
Set its Style property in a control
<button style= "{StaticResource Mybuttonstyle}"/>
If I want to apply resource to individual pages and controls in the app, you need to create the resources on the application.resources element in App.xaml we can also write these settings to the file. Write CSS to a file just like the Web. Create resource Dictionary and call it in the page we want to use
<Page.Resources>
    <ResourceDictionary.MergedDictionaries>
        <resourcedictionary source= " Dictionary1.xaml ">
    </ResourceDictionary.MergedDictionaries>
</Page.Resources>
 
The above resource bindings are static and are only performed once when the app first runs. So it won't change in the life cycle of the app. The theme resource settings allow us to develop applications that set the style we apply based on the user's device's theme settings. We can choose from different theme settings to achieve the user's choice of color and theme color, whether the desktop, mobile or Xbox can request theme color changes

<app requesttheme= "Light" >
High Contrast themes will force you to cover all themes and styles 16.VisualStateGroup

-Statetriggers state trigger
-setters Property Builder
 
<