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

Use of TemplateBinding and Custom Control in Silverlight

To create a custom control in Silverlight it is quite easy .
Select "Silverlight Template Control" after clicking on Add new Item on your silverlight project.
Once you add this you will notice generic.xaml is already added under theme folder. It contains the control template of your newly create template control.

You can add as many dependency property as you want.

Your Control.cs will look like this after adding some dependency property


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace WrapPanel
{
    public class FieldSet : Control
    {
        public FieldSet()
        {
            this.DefaultStyleKey = typeof(FieldSet);
        }

        public String Title
        {
            get { return (String)GetValue(TitleProperty); }
            set { SetValue(TitleProperty, value); }
        }
        public static readonly DependencyProperty TitleProperty =
            DependencyProperty.Register("TitleProperty", typeof(String), typeof(Orientation), null);

        public  FrameworkElement Content
        {
            get { return (FrameworkElement)GetValue(MyContentProperty); }
            set { SetValue(MyContentProperty, value); }
        }

        public static readonly DependencyProperty MyContentProperty =
            DependencyProperty.Register("ContentProperty", typeof(FrameworkElement), typeof(Orientation), null);
    }
}

and generic.xaml will look like below

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

                    xmlns:local="clr-namespace:WrapPanel">

    <Style TargetType="local:FieldSet">

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="local:FieldSet">

                    <Border Background="{TemplateBinding Background}"

                            BorderBrush="{TemplateBinding BorderBrush}"

                            BorderThickness="{TemplateBinding BorderThickness}">

                        <Grid x:Name="FieldsetLayoutRoot"

                              HorizontalAlignment="Stretch"

                              VerticalAlignment="Stretch">

                            <Border HorizontalAlignment="Stretch"

                                    VerticalAlignment="Stretch">

                                <ContentPresenter x:Name="TheFieldsetContentPresenter"

                                                  Content="{TemplateBinding Content}"

                                                  HorizontalAlignment="Stretch"

                                                  VerticalAlignment="Stretch"

                                                  Margin="0" />

                            </Border>

                            <Border HorizontalAlignment="Left"

                                    VerticalAlignment="Top">

                                <TextBlock x:Name="FieldsetTitleTextBlock"

                                           HorizontalAlignment="Left"

                                           VerticalAlignment="Top"

                                           Text="{TemplateBinding Title}" />

                            </Border>

                        </Grid>

                    </Border>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

</ResourceDictionary>

Please not the use of TemplateBinding tells the XAML parser to look for the said property in the Control's dependency property

Feedback and comments are always welcomed

Cheers!

Vinod

String Format in Binding in Silverlight/WPF

StringFormat is very useful property in DataBinding in Silverilght/WPF where you can format the binding data as per your requirment without writting any futher property in your Entity.

Let's see if you want to show the logged in user info like "Logged in as XXXX".
 Usually what we do is we create two textblocks 1. For showing Logged in as and 2. for showing the data from Binding. Here I will show how you can avoid adding extra textblock.

<TextBlock Text=”{Binding UserName, StringFormat=’Logged in as \{0\}’}“/>

Let me know if you have any question regarding StringFormat. Comments are welcomed.

Cheers!

Vinod