WPF Getting Started Tutorial series 19--listview Example (i)

Following the previous study, today I do a more comprehensive example of a WPF program, which includes these features:

1) query function. The city information data is read from the S_city table in the database (local database)/test, and then displayed on a ListView on the WPF window.

2) Data linkage function. When the left mouse button selects a record in the ListView, the details are displayed in the text box below the ListView box.

3) Modify the function. After modifying the contents of the textbox, click on the "Update" button to save the modified data to the database and linkage with the ListView.

First step, build a WPF project

Open Visual Studio 2013, and on the menu, click File--New project->WPF application. Enter "WpfApp1" in the text box for "name" in the pop-up interface, then click the "OK" button. Such as.

Step Two: Install the entity Framework

1) Use NuGet to download the latest version of entity Framework 6.1. In Solution Explorer-right-click on Project WpfApp1 and pop up a menu, select "Manage NuGet packages for solution" and open the NuGet package management interface. Such as.

2) search for entity in the NuGet package management interface, find the latest version of the entity Framework, click Install. Such as.

3) After the installation is complete, such as.

Step three, WPF interface layout

1) After you have created a WPF project, there is a default interface in the WPF project. Such as.

2) Click on the edge of the box to create the corresponding split line. Such as.

3) We will break the form into three lines at random, and then make specific adjustments in the XAML code. After adding the split line, take a look at the XAML code area below, with each split line as a line rowdefinition. Such as.

4) Modify the height of the three lines that we just defined in the XAML code editing interface. The code is as follows.

        <rowdefinition height= "*"/>            <rowdefinition height= "Auto"/>            

Yes	Description
Line No. 0	Set to * to place the ListView so that the actual running process of the program fills the entire area as much as possible
Line 1th	Set to auto as compact as possible, reducing space usage (if there is no control in this line, he will be as small as 0 so that it will not appear on the interface.) ）
Line 2nd	Set to 22 fixed value, just to place the button control

Description

If you often do ASP. NET or Windows development, you may develop a habit of dragging controls directly from the Toolbox to where you need them. By dragging and dropping the controls directly, VS automatically generates a fixed coordinate, which is deprecated in WPF, and is recommended for use in WPF to assemble the interface using the Canvas, StackPanel, WrapPanel, DockPanel, and grid panel combinations.

For the interface layout of WPF, here are some suggestions:

First, the layout of the control should have a container to decide, rather than control the position through the control's margin property.

Second, the control should avoid explicitly defining specific dimensions, because the display resolution and size of the Windows Form are subject to change at any time, if the dimensions are clearly defined.

When the form changes, there will be a large area of white space or missing. However, for the display of control functions and effects, an acceptable maximum and minimum size should be defined.

This can be achieved by MinWidth, MinHeight, MaxWidth, MaxHeight properties.

Third, because the display resolution is now very much (1366x768, 1600x900, 1980x1080, and so on), if you set the interface element location to the screen coordinates related, this will be risky.

The container should share the effective space to its child controls, which is also to leave a large chunk of spare after the form is adjusted.

Five, container nesting use, because different containers, the performance of different effects, when necessary, should be used in combination.

5) Next, double-click the ListView in the Toolbox and a small box will appear on the interface.

6) Next, double-click on the WrapPanel in the Toolbox and a large box will appear on the interface.

7) Add another button.

8) After you drag and drop the above controls, you will find that the current interface is a bit messy, and just now we are in the top grid above the picture of the split line will play a role, let us in the XAML editing window to modify the corresponding XAML statement, the final result is as follows:

 <Grid> <Grid.RowDefinitions> <rowdefinition height= "*"/> <rowdefinitio n height= "Auto"/> <rowdefinition height= "All"/> </Grid.RowDefinitions> <listvi EW name= "ListView1" minwidth= "280" > <ListView.View> <gridview x:name= "GridView1"                    ; <gridviewcolumn header= "ContactID" ></GridViewColumn> <gridviewcolumn header= "FirstName" &                    gt;</gridviewcolumn> <gridviewcolumn header= "LastName" ></GridViewColumn> <gridviewcolumn header= "EmailAddress" ></GridViewColumn> </GridView> &lt ;/listview.view> </ListView> <wrappanel grid.row= "1" orientation= "Horizontal" ></wrappanel&        Gt <button grid.row= "2" horizontalalignment= "right" click= "Button1_Click" name= "Button1" >Refresh</Button>    </Grid> 

Here are a few things that need to be explained:

(1) Container Control Panel, now there are two container-type controls in the interface. One is grid and the other is WrapPanel. They are all container-type controls, but behave differently.

(2) You should notice the grid.row= "n" above the WrapPanel and button, this is attached properties (attached property). The function of this property is to set where the WrapPanel and button should be in the parent container. The XAML usage of attached properties is to use the container's type name directly in place of its own property settings. Container property name (Grid. Row) to set the corresponding value.

(3) It should be noted that similar to Listview.view and grid.rowdefinitions usage, this is called complex properties (complex attribute).

(4) <gridview x:name= "GridView1" >

As in the above code, the use of X:name= "Gridcitys" is called markup Extensions (markup extension) to easily implement XAML page property assignment, resource reference, type conversion, and so on.

For example, the DataGrid object used in our example, but the DataGrid object does not have a Name property, so there is markup Extensions. This is so handy when we want to locate a control with no Name attribute, just to extend a name.

9) Now our example TextBlock and TextBox is not in pairs, in order to achieve a more friendly interface generally need to appear in pairs, and to be on the same level, can not wrap, in WPF can not use absolute positioning, how should be implemented? Very simple, use the StackPanel panel. The modified code is as follows:

 <wrappanel grid.row= "1" orientation= "horizontal" > <stackpanel orientation= "Horizontal" Margin= "5,2,5, 2 "> <textblock name=" Textblock_contactid "text=" ContactID: "/> <textbox name=" Te Xtbox_contactid "minwidth="/> </StackPanel> <stackpanel orientation= "Horizontal" Ma rgin= "5,2,5,2" > <textblock name= "textblock_firstname" text= "FirstName:"/> <text Box name= "Textbox_firstname" minwidth= "/> </StackPanel> <stackpanel orientation=" Ho                Rizontal "margin=" 5,2,5,2 "> <textblock name=" textblock_lastname "text=" LastName: "/> <textbox name= "textbox_lastname" minwidth= "/> </StackPanel> <stackpanel Orient ation= "Horizontal" margin= "5,2,5,2" > <textblock name= "textblock_emailaddress" text= "EmailAddress:"/&                Gt <tExtbox name= "textbox_emailaddress" minwidth= "/> </StackPanel> </WrapPanel> 

10) In Visual Studio 2013, press the F5 key to run our first WPF program. Then, you stretch freely on the edges of the form. As shown in the following 2 figure, the control will constantly change position regardless of how the form is stretched or shrunk-adapting to the minimum principle if you want to fix it. You'll need to change the WrapPanel to another panel, but the TextBlock and the TextBox are always paired in the same horizontal position. As shown in 1 (Zoom out), Figure 2 (enlarged):

Figure 1

Figure 2

WPF Getting Started Tutorial series 19--listview Example (i)