C # 30 minutes Learning xaml_c# Tutorial

1. The Arrogant WPF
Compared with traditional Windows graphics programming, many complex tasks need to be done to refer to many different APIs. For example: WinForm (with control forms), GDI + (2D graphics), DirectX APIs (3D graphics), and streaming and streaming documents require different APIs to build applications.

WPF is looking at the complexity and discomfort of the above, decided to be the boss, want to use DirectX technology to cover everything, so want to integrate all of the above things to their own, reduce complexity, so that programming becomes a technology.

It is undeniable that although WPF is very arrogant, but this technology has a lot of commendable things. The capital that supports WPF hubris is the XAML technology that can be separated from its background code. Let's take a 30-minute time to talk about XAML.

2. What is XAML
The core of an interface program is undoubtedly the interface and background code, and XAML is a descriptive language created by Microsoft to build the application interface, that is to say, it is an interface.

First previous XAML code:

 <window x:class= ' myxaml.window1 ' xmlns= ' http://schemas.microsoft.com/winfx/2006/xaml/presentation ' xmlns:x= ' Http://schemas.microsoft.com/winfx/2006/xaml ' title= ' myxaml ' height= ' width= ' > <Grid> <grid.ro wdefinitions> <rowdefinition height= '/> <rowdefinition height= '/> <rowdefinition ' '/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <columndefinition width= ' Auto '/> &l T ColumnDefinition width= ' * '/> </Grid.ColumnDefinitions> <textblock grid.column= ' 0 ' grid.row= ' 0 ' Fontweigh t= ' bold ' text= ' name: ' width= '/> <textblock grid.column= ' 0 ' grid.row= ' 1 ' fontweight= ' bold ' width= ' > Sex: </TextBlock> <textblock grid.column= ' 0 ' grid.row= ' 2 ' fontweight= ' Bold ' width= ' text= ' age ' ></ textblock> <textbox grid.column= ' 1 ' grid.row= ' 0 ' fontweight= ' Bold ' width= '/> <textbox ' 1 ' grid.row= ' 1 ' fontweight= ' Bold ' width= ' 1'/> <textbox grid.column= ' 1 ' grid.row= ' 2 ' fontweight= ' Bold ' width= '/> </Grid> </Window> 

The XAML above is that I designed a three-row two-column interface, which is displayed as follows:

I'm not writing a line of C # code here, but it can run, so I can say it's also a programming language. But it's more about what's on the interface.

So how does it work? Here are a few things to look at:

X:class= ' Myxaml.window1 '--Using the class attribute to specify the C # class name (background C # code)

xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml--This means replacing the namespace of XAML with X. Used to contain a subset of the types in a particular keyword and System.Windows.Markup.

xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation--another namespace. Mapping many wpf.net namespaces (System.windows.xxx, is a one-to-many mapping that encapsulates three assemblies, WindowsBase.dll, Presentation.dll and PresentationFramework.dll)

2.1 Start
The place where the program starts is actually in the App.xaml file of the program:

 <application x:class= ' Myxaml.app '
  xmlns= ' http://schemas.microsoft.com/winfx/2006/xaml/presentation '
  xmlns:x= ' http://schemas.microsoft.com/winfx/2006/xaml '
  startupuri= ' Window1.xaml ' >
  < application.resources>
   
  </Application.Resources>
 </Application>

Look at the following sentence:

Startupuri= ' Window1.xaml '
This is the entry point of the program, after running the program, we will display the Window1 on the display.

3.XAML Syntax overview
One of the core layouts shown in the XAML above is the following code:

 <Grid> <Grid.RowDefinitions> <rowdefinition height= '/> <rowdefinition height= '/> <rowdefinition height= '/> </Grid.RowDefinitions> <grid.colum ndefinitions> <columndefinition width= ' Auto '/> <columndefinition width= ' * '/> </Grid.ColumnDefin itions> <textblock grid.column= ' 0 ' grid.row= ' 0 ' fontweight= ' Bold ' text= ' name: ' width= '/> <textblock d.column= ' 0 ' grid.row= ' 1 ' fontweight= ' Bold ' width= ' > Sex:</textblock> <textblock ' 0 ' grid.row= ' 2 ' fontweight= ' Bold ' width= ' text= ' age ' ></TextBlock> <textbox grid.column= ' 1 ' grid.row= ' 0 ' fontweight= ' bold ' width= '/> <textbox grid.column= ' 1 ' grid.row= ' 1 ' fontweight= ' bold ' width= '/> ' < TextBox grid.column= ' 1 ' grid.row= ' 2 ' fontweight= ' Bold ' width= '/> </Grid> 

1, look at the grid control, this is a layout control in WPF, with the form to set the cell difference However, you can set rows and columns based on its row and column properties. This sets the layout of a three-row two column.

2, see TextBlock and TextBox controls, these are some display controls, a display bar and a text box, in addition to WPF, there are many controls.

The first thing to reconfirm is that everything in C # is the object. In this way, it is good to understand.

These kinds of controls in XAML are actually a class, we apply them to the equivalent of the application of each object, and they define some of the width, height and other attributes, is the class of some of the properties of the property fields.

Of course, such attributes as the grid.column= ' 1 ' grid.row= ' 2 ' in the TextBox and TextBlock above do not actually belong to the properties and fields in these two classes.

What makes them have this property is, of course, the outside Grid layout control, which is called an additional property in WPF and is a special use of dependent properties. About dependency properties, which will be discussed in more detail later.

First summary
WPF's XAML syntax can actually be understood as another form of programming language, with syntax representations similar to XML, but more rigorous and demanding accuracy.

The XAML consists primarily of layouts and controls to build various forms of applications, and beyond that, there are many new and powerful things that make it more flexible and convenient, such as dependency properties.

3.1 Layout
Layouts commonly used in WPF include five main types: Canvas, Grid, StackPanel, DockPanel, and WrapPanel. Let's say the use of these five kinds of layout controls separately.

1, Canvas

To say canvas, first look at the following XAML code:

<Canvas>
  <button name= ' btn1 ' height= ' width= ' content= ' btn1 ' margin=/> ' ' <button '
  Name= ' btn2 ' height= ' width= ' content= ' btn2 ' margin= '-/> '---
</Canvas>

Then, look at the picture generated on the canvas canvas, as follows:

Why not show btn1? Because two button overlaps, display only the topmost control (the closer to the end tag </Canvas> control, if the position of the two button is reversed, it appears to be btn1).

The layout of the canvas is basically the same as the previous WinForm, is centered on the upper left corner, according to the upper and lower distance from the upper left corner of the coordinates for the standard. If you want to change the position of the button, set the four properties Canvas.Left, Canvas.Top, Canvas.bottom, and canvas.right to the button control.

So canvas has to focus on the absolute layout, the requirements of the interface and a relatively fixed interface can be used to drag and drop the control layout.

2, Grid

The default layout for a WPF form program is a grid, looking at the following code first:

<Grid>
  <button name= ' btn1 ' height= ' width= ' content= ' btn1 margin= '/> ' <button '
  = ' btn2 ' height= ' width= ' content= ' btn2 ' margin= ' a '/> ',
</Grid>

See here, you may say, this is not the same as the canvas above? But is it really the same? Their form is shown below:

I'm sure you'll see, yes, unlike canvas, the grid form default display is centered, unlike the canvas layout, which is based on the upper-left corner.

So what are the benefits of grid layout? Look at the following code:

<Grid>
  <Grid.RowDefinitions>
   <rowdefinition height= ' * '/>
   <rowdefinition height= ' * '/>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
   <columndefinition width= ' * '/>
   <columndefinition width= ' * '/>
  </Grid.ColumnDefinitions>
  <button name= ' btn1 ' height= ' width= ' content= ' btn1 '/> <button grid.row= '
  1 ' grid.column= ' 1 ' name= ' btn2 ' height= ' = ' content= ' btn2 '/>
</Grid>

Then take a look at the generated window:

I'm sure you can see that the grid is a grid that divides the form into pieces, The split feature is defined by Grid.rowdefinitions and grid.columndefinitions, where rows and columns are defined, the form is divided into rows and columns, and the height of the row and the width of the column can be set according to the Width property.

As shown in the figure above, a grid of two rows and two columns is defined with XAML, and BTN1 is placed in row No. 0 0 columns (if the definition is not displayed, the control that is dragged is placed by default in this grid.) ), row 1th 1 column placed btn2.

The following are some instructions for grid properties.

RowDefinition represents a row of a grid with only one height attribute and no width property, * indicates that the row occupies all of the remaining heights of the form, and if all is set to *, the form is divided equally. As shown above, you can also make the form 3:1, as long as the two row definitions are set to 3* and *.

ColumnDefinition represents a grid column in which there is only one width property without the height attribute, and the use of the * number is the same as that of the rowdefinition, but relative to the height of the RowDefinition split form, here * Represents the width of a split form.

It can be said that grid implementation is a grid layout, this layout is quite powerful, can and use is very flexible.

3, StackPanel

The default principle that the StackPanel layout follows is to arrange the controls from the middle of the window, starting at the top, and up and down. First look at the following code:

<StackPanel>
    <button name= ' btn1 ' height= ' width= ' ' content= ' btn1 '/> <button '
    height= ' width= ' content= ' btn2 '/>
</StackPanel>

The form shown is as follows:

As shown in the figure above, the layout of the control is vertical by default, so how do you set the control landscape layout? All we need to do is set the StackPanel Orientation property:

orientation= ' horizontal ' landscape layout, from the middle of the form, to the left, starting from left to right to arrange the control.

orientation= ' Vertical ' portrait layout, default properties.

Examples of landscape layouts are as follows:

<stackpanel orientation= ' horizontal ' > <button name= ' btn1 ' ' height= ' width= ' content= '
  <button name= ' btn2 ' height= ' width= ' content= ' btn2 ',/>
</StackPanel>

Window display:

4, DockPanel

DockPanel the default layout principle, starting from the left, where the controls are arranged sequentially, and the last control fills the remaining areas from the center. Look at the following code:

<DockPanel> <button name= ' btn1 ' height= ' width= ' content= ' btn1 '/> ', <button, height= '
  40 ' Width= ' content= ' btn2 '/> <button height= ' ' width= ', content= ' btn2/> '--------------------'-'
  Width= ' content= ' btn2 '/> <button height= ' ' width= ', content= ' btn2/> '--------------------'-'
  Width= ' content= ' btn2 '/>
</DockPanel>

The form for the layout is displayed as follows:

Unlike StackPanel, the DockPanel layout relies on its four additional properties attached to the remaining controls, looking at the following table:

DockPanel.Dock Property	Description
Top	Top, if set, start at the top of the center according to the above principles layout
Left	Left part, default layout
Right	Right, if set, start from the middle right and lay out according to the above principles
Button	Bottom, if set, start from middle bottom according to the above principle layout

Look at the example below, XAML code:

<DockPanel>
	<button dockpanel.dock= "Bottom" name= "btn1" "height=" width= "-" content= "btn1"/>
	<button dockpanel.dock= "Bottom" height= "width=" content= "btn2/>"
	"Content=" "btn2"/>
	<button height= "width=", "content= btn2"/> "<button"
	"Content=" "btn2"/> <button height= "width= content=" btn2 "
 </DockPanel>

The interface behaves as follows:

The above description code shows that here StackPanel two btn from the bottom, in the remaining space (the top of the form), and then from the left side of the default position to place the btn, and the last btn to fill the last remaining space.

5, WrapPanel

The WrapPanel layout follows the principle of wrapping the multiple controls from the upper-left corner of the form. Like StackPanel, it also has orientation properties that represent both portrait and landscape. Look at the following XAML code:

<WrapPanel>
     <button name= "btn1" height= "width=" content= "btn1"/> <button height= "
     40" Width= "content=", "btn2"/> <button height= "width=" content= "btn2"/> "
     <button" height= "
     40" Width= "content=", "btn2"/> <button height= "width=" content= "btn2"/> "
     <button" height= "
     40" Width= "content=", "btn2"/> <button height= "width=" content= "btn2"/> "
     <button" height= "
     40" Width= "content=" "btn2"/> <button height= "width=", "content=" btn2 "/> <button" height= "
     40 "Width=" content= "btn2"/>
</WrapPanel>

The resulting interface is as follows:

As a wrappanel, the default layout is landscape, and the rest of the controls will be rearranged from the second line, until the right side is not free.

If you set its Orientation property to vertical, the arrangement will start in the upper-left corner, from top to bottom, and there will be no slack from the top to the bottom of the second row. XAML as follows:

<wrappanel orientation= "Vertical" > <button name= "btn1" "height="
     width= "
     " content= "Btn1"/> <button height= "width=" content= "btn2
     "/> <button "height=" width= "content=" btn2 <button height= "width=" content= "btn2
   "/> <button "height=" width= "content=" btn2 </WrapPanel>

The form is laid out as follows:

From the above, WrapPanel mainly provides the function from the top left corner of the form, multiple control of the automatic line wrap.

A second summary:

Layouts in WPF In addition to the following several: Abpanel, ToolBarOverflowPanel, Toolbarpanel, UniformGrid, Virtualizingpanel, VirtualizingStackPanel, they all derive from the Panel abstract class, and content properties children can add multiple controls. They use this to control the layout of the control.

3.2 Control

In fact, the layout is also one of the controls, but the layout is listed separately. Because layouts occupy an unusually important place in WPF. Next, the main thing to say about other controls, in general, in addition to the layout of the control can be divided into the following three categories.

The first Category: core user Input control, the user creates the core of the user interface. The more commonly used are button, RadioButton, ComboBox, CheckBox, DataGrid, ListBox, ListView, TreeView, TextBlock, TextBox, Label.

Class Two: Window-decoration controls that are used to decorate the frame of a Window object. The commonly used are menu, ToolBar, StatusBar, ToolTip, ProgressBar.

Third Category: Media control, support audio/video playback and image display. The more commonly used controls are image, MediaElement, and Soundplayeraction.

The basic functions of each type of control are explained below.

One, core user input controls

1. The basic usage of button, Radiobutton,button control is mainly the way to handle the Click event when the button is clicked. The button's Click event is declared through the click Attribute, which has three main modes:

Click event occurs when Release:button is pressed and released

Hover: Mouse hover over button to raise click event

Press: Raises a Click event when the button is clicked

We can use the button click event mode to set the effect of the click Control we want.

The button is a content control, and we can set something else for its contents, such as the following code, which is to set a picture of the button buttons:

<button x:name= "ImageButton" margin= "3" grid.row= "1" horizontalalignment= "left" > 
    <stackpanel Margin= "1 "Orientation=" Horizontal "width=" 620 "> <image source=" back.bmp "stretch=" UniformToFill "Width=" 160 "/> 
      <textblock width= "130"/> 
      <textblock text= "Picture button" margin= "1,15,1,1"/> 
    </StackPanel> 
  </Button>

In addition, we can set a different style for the button to make it look good. It involves styles, templates, and triggers, but it's more than a statement.

RadioButton and Button are inherited from the ButtonBase class, the basic attributes are the same, and the usage is very similar.

2, the ComboBox control, which represents a selection control with a drop-down list, can be displayed or hidden by clicking the arrows on the control. Usage is as follows:

<ComboBox>

 AAA

</ComboBox>

The item represents the Drop-down item, which can be set by itself or obtained by binding. The interface Editor has a collection of items in the properties of the ComboBox to set the ComboBox options. The property used by binding is the ItemsSource property. The effect of the following figure:

The ComboBox control selection event can binding event-handling logic from the SelectedItem properties of its selected item.

3. A CheckBox control that represents a control that the user can select and clear. Its usage forms are as follows:

<CheckBox>
 Content
</CheckBox>

The effect is shown in the following illustration:

The CheckBox control is primarily used to handle three events, select event checked, Unchecked, and indeterminate events that affect appearance, and can display the processing logic of the three in the background respectively.

<checkbox x:name= "CB1" grid.row= "1" margin= "5,0,0,0" content= "three-state 
      CheckBox" isthreestate= "True"
      Checked= "Handlecheck" unchecked= "handleunchecked" indeterminate= "handlethirdstate" 
      />

4, the DataGrid, the ListBox, the ListView, the TreeView, are used to display in rows and columns of the control, the first three are a few lines of the form, and the last TreeView is a display of a tree-shaped structure.

These controls can be used for data binding XML data or databases, each of which has a different form. The basic display diagram looks like this:

Treeview:

The textbox can also be used to do data binding, you can associate other control objects to achieve the desired effect.

The core user input control, in addition to these listed above, there are many, for example: Calendar, Slider, TabControl, and so on, they constitute the WPF's complete input control family, is the user to create the core of the interface.

Second, window decoration controls

1, the Menu control, menus control, I believe that everyone is not unfamiliar, first look at the following XAML:

<Grid>
	<Menu>
	<menuitem header= "i" >
		<menuitem header= "Second"/>
		< MenuItem header= "Secend" >
			<menuitem header= "third" click= "Handler"/>
		</MenuItem>
		</ menuitem>
	</Menu>
</Grid>

Display the interface:

As you can see, the menu control uses the MenuItem subkey to form a hierarchy, and you can set the Click event for each menu item. The above example does not set the height of the menu, so the menu is full of global.

A menu item has several properties that need to be noted. The above figure shows that there are three parts of a submenu, one of which is the display content, the content is preceded by a blank (this is a placeholder for icons icon), and the black Triangle arrow behind the subkey.

Icon: You can set the menu icons, the contents of which can be an image space, use the following:

<MenuItem.Icon>
    <image source= "delete.png"/>
 </MenuItem.Icon>

Where source points to the picture you want to display as icon.

Header: The contents of the menu, as shown in the XAML above.

2, toolbar control, tool bar menu. ToolBar is a headereditemscontrol. Its content attributes are items and ItemsSource, whose Header property is header. Basic usage look at the following XAML:

<toolbartray background= "White" >
 <toolbar band= "Ten" bandindex= "ten" >
  <Button>
   < Image source= "ore.jpg"/>
  </Button>
  <Separator/>
  <Button>
   <image source= " Ore.jpg "/>
  </Button>
 </ToolBar>
</ToolBarTray>

where separator represents a separator bar, you can open a program for each button design Click event in the sidebar.

The toolbar appears as landscape by default, and if you want to display the Orientation property of the toolbar, you need to set the bar.

The sidebar is probably shown as follows:

4, tooltip control, tooltip control is a simple, but very useful control. It can provide very beautiful information for our software, improve the usability of the software, and give the user a better experience. On XAML:

<button height= "content=" hint tool demo "horizontalalignment= Center" >
			<Button.ToolTip>
				< ToolTip background= "#60AA4030" foreground= "white" hasdropshadow= "False" 
						 placement= "Mouse" >
					< stackpanel>
						<textblock margin= "3" > Tip: What is this? </TextBlock>
						<!--<image source= "black.jpg" stretch= "Fill"/>--> <textblock
						"3" > 300 million sites in the legendary. </TextBlock>
					</StackPanel>
				</ToolTip>
			</Button.ToolTip>
		</button >

5, ProgressBar control, progress bar. The progress bar has two properties minimum and maximum, which you can use to bind events to achieve progress on the progress bar. In general, the progress bar is used for a visual loading effect that requires waiting while the startup time is too long.

There is a Isindeterminate property that sets progress animation for the progress bar and displays progress information when set to true. The default condition is false.

Third, media controls

2, MediaElement control, you can use MediaElement to add media playback controls to your application in WPF to complete playback of audio and video features. Because MediaElement belongs to the UIElement, it also supports mouse and keyboard operations.

Reference instance.

3, soundplayeraction control, WPF defines a soundplayeraction class (inherited from TriggerAction) that encapsulates the SoundPlayer class in a friendly way. The advantage of this is that you can add Soundplayeraciton actions to the eventtrigger of the control, and you can play audio files.

For example:

<button content= "Xirihanlin" >
    <Button.Triggers>
      <eventtrigger routedevent= "Button.Click" >
        <soundplayeraction source= "BLOW. WAV "/>
      </EventTrigger>
    </Button.Triggers>
 </Button>

One advantage of having a soundplayeraction class is that you don't have to write code in the background to play audio files. However, such benefits can also give you limitations because you simply cannot control the interaction between Soundplayeraction and SoundPlayer.

When the button is clicked, a Soundplayeraction object is created, and a SoundPlayer instance is built inside the soundplayeraction. The source attribute value of Soundplayeraction is passed to the SoundPlayer instance, and the play of SoundPlayer is called, and in fact, because the audio file is not loaded in advance, you will not be able to hear the sound while clicking. As a result, the limitations of using the Soundplayeraction class also include the inability to load files in advance and set up looping playback.