silverlight 加强版GroupBox

最近想要修改一下UI界面,发现Silverlight没有原生的GroupBox,于是百度了一下立马就发现了一些共享的很是受用,但是一用发现GroupBox的title必须有背景色颜色来遮挡住border ,这样在多种颜色背景的时候就会很悲催了,于是就有了这个GroupBox。

不废话上图

image 

主要原理就是clip.上代码:

/// <summary>
/// 分组框
/// </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 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 1" Grid.Row="1" Grid.RowSpan="3"/>
                   </Grid>
               </ControlTemplate>
           </Setter.Value>
       </Setter>
   </Style>
希望对大家有用~

你可能感兴趣的:(silverlight)