Silverlight enhanced groupbox

Recently I want to modify the UI and find that Silverlight does not have a native groupbox, So Baidu immediately finds that some sharing is very useful, however, when we find that the title of groupbox must have a background color to block the border, it will be miserable when there are multiple color backgrounds, so we have this groupbox.

No nonsense

 

The main principle is the code on clip:

/// <Summary>
/// Group box
/// </Summary>
[Templatepart (name = "part_header", type = typeof (frameworkelement), templatepart (name = "part_border", type = typeof (frameworkelement)]
Public class groupbox: headeredcontentcontrol
{
Private frameworkelement header;
Private frameworkelement border;
Public groupbox ()
{
This. defaultstylekey = typeof (groupbox );
}
Public override void onapplytemplate ()
{
Base. onapplytemplate ();

This. header = (base. gettemplatechild ("part_header") as frameworkelement );
This. Border = (base. gettemplatechild ("part_border") as frameworkelement );
If (this. header! = NULL & this. border! = NULL)
{
This. header. Clip = NULL;
This. header. sizechanged + = This. groupboxsizechanged;
This. Border. sizechanged + = This. groupboxsizechanged;
}
}
 
Private void groupboxsizechanged (Object sender, eventargs E)
{
If (this. header! = NULL & this. border! = NULL)
{
VaR geometrygroup = new geometrygroup ();
Presentationframeworkcollection <geometry> geometrys = geometrygroup. Children;
VaR rectanglegeometry = new rectanglegeometry
{
Rect = (New rect (-1.0,-1.0, this. Border. actualwidth + 2.0, this. Border. actualheight + 2.0 ))
};
Geometrys. Add (rectanglegeometry );
VaR rect = new rect (default (point), new point (this. header. actualwidth, this. header. actualheight ));
Try
{
Generaltransform = This. header. transformtovisual (this. Border );
Rect = generaltransform. transformbounds (rect );
}
Catch
{
}
Presentationframeworkcollection <geometry> geometrys2 = geometrygroup. Children;
VaR rectanglegeometry2 = new rectanglegeometry {rect = rect };
Geometrys2.add (rectanglegeometry2 );
This. Border. Clip = geometrygroup;
}
}

<Style targettype = "widgetui: groupbox">
<Setter property = "background" value = "{X: NULL}"> </setter>
<Setter property = "borderbrush" value = "# 687b8b"> </setter>
<Setter property = "borderthickness" value = "1"> </setter>
<Setter property = "foreground" value = "# ff000000"/>
<Setter property = "template">
<Setter. value>
<Controltemplate targettype = "widgetui: groupbox">
<Grid>
<Grid. columndefinitions>
<Columndefinition width = "6"/>
<Columndefinition width = "Auto"/>
<Columndefinition width = "*"/>
<Columndefinition width = "6"/>
</Grid. columndefinitions>
<Grid. rowdefinitions>
<Rowdefinition Height = "Auto"/>
<Rowdefinition Height = "Auto"/>
<Rowdefinition Height = "*"/>
<Rowdefinition Height = "6"/>
</Grid. rowdefinitions>
<Border X: Name = "background" borderbrush = "{X: NULL}" borderthickness = "{templatebinding borderthickness}" background = "{templatebinding background}" grid. columnspan = "4" grid. column = "0" cornerradius = "4" grid. row = "1" grid. rowspan = "3"/>
<Border X: Name = "part_header" grid. Column = "1" padding = "5 0 5 1" grid. Row = "0" grid. rowspan = "2">
<Contentpresenter contenttemplate = "{templatebinding headertemplate}" content = "{templatebinding header}"/>
</Border>
<Contentpresenter X: Name = "content" grid. columnspan = "2" grid. Column = "1" margin = "{templatebinding padding}" grid. Row = "2"/>
<Border X: Name = "part_border" borderbrush = "{templatebinding borderbrush}" borderthickness = "{templatebinding borderthickness}" grid. columnspan = "4" cornerradius = "4" ishittestvisible = "false" margin = "1 0 1" grid. row = "1" grid. rowspan = "3"/>
</GRID>
</Controltemplate>
</Setter. value>
</Setter>
</Style>
I hope it will be useful to you ~