Thursday, August 23, 2012

Adding button in DataGrid Header in Silverlight/WPF


Use this style to



       <Style x:Key="DataGridColumnHeaderStyle1"
               TargetType="sdk:DataGridColumnHeader">
            <Setter Property="Foreground"
                    Value="#FF000000" />
            <Setter Property="HorizontalContentAlignment"
                    Value="Left" />
            <Setter Property="VerticalContentAlignment"
                    Value="Center" />
            <Setter Property="IsTabStop"
                    Value="False" />
            <Setter Property="SeparatorBrush"
                    Value="#FFC9CACA" />
            <Setter Property="Padding"
                    Value="4" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="sdk:DataGridColumnHeader">
                        <Grid x:Name="Root">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimation Duration="0"
                                                            To="#FF448DCA"
                                                            Storyboard.TargetProperty="(Fill).Color"
                                                            Storyboard.TargetName="BackgroundRectangle" />
                                            <ColorAnimation Duration="0"
                                                            To="#7FFFFFFF"
                                                            Storyboard.TargetProperty="(Fill).(GradientStops)[3].Color"
                                                            Storyboard.TargetName="BackgroundGradient" />
                                            <ColorAnimation Duration="0"
                                                            To="#CCFFFFFF"
                                                            Storyboard.TargetProperty="(Fill).(GradientStops)[2].Color"
                                                            Storyboard.TargetName="BackgroundGradient" />
                                            <ColorAnimation Duration="0"
                                                            To="#F2FFFFFF"
                                                            Storyboard.TargetProperty="(Fill).(GradientStops)[1].Color"
                                                            Storyboard.TargetName="BackgroundGradient" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ColorAnimation Duration="0"
                                                            To="#FF448DCA"
                                                            Storyboard.TargetProperty="(Fill).Color"
                                                            Storyboard.TargetName="BackgroundRectangle" />
                                            <ColorAnimation Duration="0"
                                                            To="#D8FFFFFF"
                                                            Storyboard.TargetProperty="(Fill).(GradientStops)[0].Color"
                                                            Storyboard.TargetName="BackgroundGradient" />
                                            <ColorAnimation Duration="0"
                                                            To="#C6FFFFFF"
                                                            Storyboard.TargetProperty="(Fill).(GradientStops)[1].Color"
                                                            Storyboard.TargetName="BackgroundGradient" />
                                            <ColorAnimation Duration="0"
                                                            To="#8CFFFFFF"
                                                            Storyboard.TargetProperty="(Fill).(GradientStops)[2].Color"
                                                            Storyboard.TargetName="BackgroundGradient" />
                                            <ColorAnimation Duration="0"
                                                            To="#3FFFFFFF"
                                                            Storyboard.TargetProperty="(Fill).(GradientStops)[3].Color"
                                                            Storyboard.TargetName="BackgroundGradient" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SortStates">
                                    <VisualState x:Name="Unsorted" />
                                    <VisualState x:Name="SortAscending">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0"
                                                             To="1.0"
                                                             Storyboard.TargetProperty="Opacity"
                                                             Storyboard.TargetName="SortIcon" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SortDescending">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0"
                                                             To="1.0"
                                                             Storyboard.TargetProperty="Opacity"
                                                             Storyboard.TargetName="SortIcon" />
                                            <DoubleAnimation Duration="0"
                                                             To="-.9"
                                                             Storyboard.TargetProperty="(RenderTransform).ScaleY"
                                                             Storyboard.TargetName="SortIcon" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Rectangle x:Name="BackgroundRectangle"
                                       Grid.ColumnSpan="2"
                                       Fill="#FF1F3B53"
                                       Stretch="Fill" />
                            <Rectangle x:Name="BackgroundGradient"
                                       Grid.ColumnSpan="2"
                                       Stretch="Fill">
                                <Rectangle.Fill>
                                    <LinearGradientBrush EndPoint=".7,1"
                                                         StartPoint=".7,0">
                                        <GradientStop Color="#FCFFFFFF"
                                                      Offset="0.015" />
                                        <GradientStop Color="#F7FFFFFF"
                                                      Offset="0.375" />
                                        <GradientStop Color="#E5FFFFFF"
                                                      Offset="0.6" />
                                        <GradientStop Color="#D1FFFFFF"
                                                      Offset="1" />
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                  Margin="{TemplateBinding Padding}"
                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <Path x:Name="SortIcon"
                                      Grid.Column="1"
                                      Data="F1 M -5.215,6.099L 5.215,6.099L 0,0L -5.215,6.099 Z "
                                      Fill="#FF444444"
                                      HorizontalAlignment="Left"
                                      Margin="4,0,0,0"
                                      Opacity="0"
                                      RenderTransformOrigin=".5,.5"
                                      Stretch="Uniform"
                                      VerticalAlignment="Center"
                                      Width="8">
                                    <Path.RenderTransform>
                                        <ScaleTransform ScaleY=".9"
                                                        ScaleX=".9" />
                                    </Path.RenderTransform>
                                </Path>
                                <Button Content="Button"
                                        d:LayoutOverrides="Height" />
                            </Grid>
                            <Rectangle x:Name="VerticalSeparator"
                                       Grid.Column="1"
                                       Fill="{TemplateBinding SeparatorBrush}"
                                       Visibility="{TemplateBinding SeparatorVisibility}"
                                       VerticalAlignment="Stretch"
                                       Width="1" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

References xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"

You can customized header as per your wish here.

Comments are welcomed

admin@exploresilverlight.com

No comments:

Post a Comment

Send us your comment related to the topic mentioned on the blog