Implement the combogrid function using Silverlight

Silverlight has a combox control, but this control can only be selected and cannot be edited. Although it can define the appearance of items, it does not seem easy to define if you select a DataGrid control from the drop-down list. fortunately, Silverlight provides a flexible popup control that can implement functions similar to combogrid.

First, let's take a look at the required functional effects:

After selecting an item, we need to automatically fill the selected data in the two textbox Of the relevance. to implement this function, we select Textbox, button, and a custom popup DataGrid user control. since popup is only responsible for display, but we need to solve some problems, that is, when popup is displayed, click itself or other areas to automatically close, so we need to encapsulate the popup DataGrid together for convenient processing.

The following is the implementation of the popup DataGrid:

<Usercontrol X: class = "combogrid. combogrid "xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "xmlns: D =" http://schemas.microsoft.com/expression/blend/2008 "xmlns: MC =" http://schemas.openxmlformats.org/markup-compatibility/2006 "MC: ignorable =" D "D: designheight = "300" D: designwidth = "400" xmlns: SDK = "http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" loaded = "usercontrol_loaded"> <grid X: name = "layoutroot" background = "#09 ffffff" mouserightbuttondown = "layoutroot_mouserightbuttondown" mouseleftbuttondown = "layoutroot_mouseleftbuttondown"> <SDK: dataGrid autogeneratecolumns = "false" placement = "Left" name = "maid" verticalignment = "TOP" width = "253" mouseleftbuttondown = "inline" selectionchanged = "Maid selectionchanged"> <SDK: dataGrid. columns> <SDK: datagridtextcolumn binding = "{binding name}" canuserreorder = "true" canuserresize = "true" canusersort = "true" width = "120" header = "name"/> <SDK: datagridtextcolumn binding = "{binding Host}" canuserreorder = "true" canuserresize = "true" canusersort = "true" width = "*" header = "host"/> </SDK: dataGrid. columns> </SDK: DataGrid> </GRID> </usercontrol>

Layoutroot's background settings are very important, because we need to use it for this mask to capture mouse click events around the DataGrid. In order not to affect the overall layout, we try our best to set the background settings close to Xiu Ming. define two mouse down events for the user control to hide automatically

 
Private void layoutroot_mouserightbuttondown (Object sender, mousebuttoneventargs e) {hide ();} private void layoutroot_mouseleftbuttondown (Object sender, mousebuttoneventargs e) {hide ();}
 

To prevent operations such as DataGrid sorting from touching these two events, you need to set an attribute value in the leftmousedown of the DataGrid.

 
Private void datagrid=mouseleftbuttondown (Object sender, mousebuttoneventargs e) {e. Handled = true ;}
 

In this way, the left mouse button of the DataGrid will not hide the popup. The following is a display method for the control.

Public void show (control target, point offset) {mpopup = new popup (); this. width = application. current. host. content. actualwidth; this. height = application. current. host. content. actualheight; generaltransform GT = target. transformtovisual (application. current. rootvisual as uielement); point offset = gt. transform (new point (0, 0); double controltop = offset. y; double controlleft = offset. x; point postion = new point (controlleft + offset. x, controltop + offset. y); mpopup. child = This; maid = New thickness (postion. x, postion. y, 0, 0); mpopup. isopen = true ;}
 

The method has two parameters. The first is the target control, which means that the position of the popup is displayed on the control. The second method is the offset coordinate. finally, you can modify the margin of the DataGrid to display the desired position. control hiding methodCodeRelatively simple

Public void hide () {If (mpopup! = NULL) {mpopup. isopen = false; mpopup. Child = NULL; mpopup = NULL ;}}
 

 

The following task is to process the selectchanged event of the DataGrid. When we change the selection item, an event is triggered to notify the caller and close the current Popup.

 
Private void maid (Object sender, selectionchangedeventargs e) {If (maid! = NULL) {hide (); If (selected! = NULL) selected (userdata) datagrid1.selecteditem );}}
 

By now, the popup DataGrid has been encapsulated. The actual call code is as follows:

Private combogrid mcombogrid = new combogrid (); Private void button#click (Object sender, routedeventargs e) {mcombogrid. show (textbox1, new point (0, 26);} private void usercontrol_loaded (Object sender, routedeventargs e) {mcombogrid. selected + = (s) =>{ textbox1.text = S. name; textbox2.text = S. host ;};}
 

 

The popup provided by Silverlight provides many functions, such as MessageBox, custom combox, and right-click menu. Later, we will explain how to implement a right-click menu.

The following addresses achieve these effects: sl.henryfan.net

Download the complete code: combogrid.rar (1.88 MB)