Margin of a TabPanel via TabControl.Resources - wpf

How do we set the Margin of a TabPanel via TabControl.Resources, I tryed this code:
<TabControl.Resources>
<Style TargetType="TabPanel">
<Setter Property="Margin" Value="500,0,0,0" />
</Style>
</TabControl.Resources>
</TabControl>
But this doesn't work for some reason while setting its width does work:
<TabControl.Resources>
<Style TargetType="TabPanel">
<Setter Property="Width" Value="500" />
</Style>
</TabControl.Resources>
</TabControl>
For the moment I have set margin with a Template but I would like to edit it for one separate TabControl.
Thanks Mikael Törnqvist

You will need to specify the margin for the TabPanel within the Template of the TabControl
like:
<Style TargetType="{x:Type TabControl}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Border.BorderBrush).
(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="#FFAAAAAA" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TabPanel x:Name="HeaderPanel"
Grid.Row="0"
Panel.ZIndex="1"
Margin="500,0,4,-1"
IsItemsHost="True"
KeyboardNavigation.TabIndex="1"
Background="Transparent" />
<Border x:Name="Border"
Grid.Row="1"
BorderThickness="1"
CornerRadius="2"
KeyboardNavigation.TabNavigation="Local"
KeyboardNavigation.DirectionalNavigation="Contained"
KeyboardNavigation.TabIndex="2">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="{DynamicResource ContentAreaColorLight}"
Offset="0" />
<GradientStop Color="{DynamicResource ContentAreaColorDark}"
Offset="1" />
</LinearGradientBrush>
</Border.Background>
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource BorderMediumColor}"/>
</Border.BorderBrush>
<ContentPresenter x:Name="PART_SelectedContentHost"
Margin="4"
ContentSource="SelectedContent" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>

Related

WPF Material design date picker (select range aka range picker)

I have been searching quite a lot and not able to find any solution available, so I have decided to ask here. I am currently using WPF Material design for several controls (https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit). Date Picker works fine, however I have came up to the point when I need to select range of dated and not a single one. I need to be able to do like this:
Is there any way to select range instead of single date?
Here is part of my code for Datepicker.xaml:
<DatePicker x:Name="ReportDateTimePicker" HorizontalAlignment="Center" VerticalAlignment="Center" Height="40"
Padding="0,3,0,0" Margin="10,1,10,-1" FirstDayOfWeek="Monday" Width="148"
FontFamily="{StaticResource Roboto}"
CalendarStyle="{DynamicResource DatePickerCalendarStyle}"
SelectedDate="{Binding StartDate}"/>
Also this part is from style datetimepicker.xaml:
<Style TargetType="{x:Type DatePicker}">
<Setter Property="Foreground" Value="#FF333333" />
<Setter Property="FontSize" Value="14" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="IsTodayHighlighted" Value="True" />
<!--<Setter Property="SelectedDateFormat" Value="Short" />-->
<Setter Property="Padding" Value="0" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<!--Set CalendarStyle to DatePickerCalendarStyle.-->
<Setter Property="CalendarStyle" Value="{DynamicResource DatePickerCalendarStyle}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DatePicker}">
<Border BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="{DynamicResource BorderLightColor}" Offset="0" />
<GradientStop Color="{DynamicResource BorderDarkColor}" Offset="1" />
</LinearGradientBrush>
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Transparent" Offset="0" />
<GradientStop Color="Transparent" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0"
To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="PART_DisabledVisual" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="PART_Root"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button x:Name="PART_Button"
Grid.Column="1"
Foreground="{TemplateBinding Foreground}"
Focusable="False"
HorizontalAlignment="Left"
Margin="3,0,3,0"
Grid.Row="0"
Style="{StaticResource DropDownButtonStyle}"
VerticalAlignment="Center" />
<DatePickerTextBox x:Name="PART_TextBox"/>
<Grid x:Name="PART_DisabledVisual"
Grid.ColumnSpan="2"
Grid.Column="0"
IsHitTestVisible="False"
Opacity="0"
Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0"
Fill="#A5FFFFFF"
RadiusY="1"
Grid.Row="0"
RadiusX="1" />
<Rectangle Grid.Column="1"
Fill="Transparent"
Height="30"
Margin="3,0,3,0"
RadiusY="1"
Grid.Row="0"
RadiusX="1"
Width="260"/>
<Popup x:Name="PART_Popup"
AllowsTransparency="True"
Placement="Bottom"
PlacementTarget="{Binding ElementName=PART_TextBox}"
StaysOpen="False" />
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Expander Style questions

iam a newby in WPF and i need help again...
I have an expander with Round Corners, but i don't like this and i want rectangular corners. Can anyone tell me how i can solve this problem?
This is my expander
.. Style:
<Style x:Key="exp_AInfo_Style" TargetType="Expander">
<Setter Property="IsExpanded" Value="True"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="Margin" Value="18,5,0,0"/>
<Setter Property="Width" Value="259"/>
<Setter Property="Height" Value="29"/>
<Setter Property="FontSize" Value="14"/>
<Style.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Setter Property="Height" Value="155"/>
</Trigger>
</Style.Triggers>
</Style>
and the Object:
<Expander x:Name="exp_AInfo" Header="Allgemeine Info's"
Style="{StaticResource exp_AInfo_Style}" Height="116"
>
<Expander.Background>
<ImageBrush ImageSource="pct/expander.png" Opacity="0.9"/>
</Expander.Background>
<Grid Height="112">
<!--many many objects-->
</Grid>
</Expander>
Thanks 4 help
It's all about the CornerRadius of the ToggleButton ControlTemplate.
There you go:
<ControlTemplate x:Key="ExpanderToggleButton"
TargetType="{x:Type ToggleButton}">
<Border x:Name="Border"
CornerRadius="0,0,0,0"
BorderThickness="1" Background="White" BorderBrush="Black">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
</VisualState>
<VisualState x:Name="Pressed">
</VisualState>
<VisualState x:Name="Disabled">
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="CollapsedArrow">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{x:Static Visibility.Hidden}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="ExpandededArrow">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked" />
<VisualState x:Name="Indeterminate" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Path x:Name="CollapsedArrow"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z">
<Path.Fill>
<SolidColorBrush Color="Black" />
</Path.Fill>
</Path>
<Path x:Name="ExpandededArrow"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Visibility="Collapsed"
Data="M 0 4 L 4 0 L 8 4 Z">
<Path.Fill>
<SolidColorBrush Color="Black" />
</Path.Fill>
</Path>
</Grid>
</Border>
</ControlTemplate>
<Style TargetType="{x:Type Expander}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Expander}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition x:Name="ContentRow"
Height="0" />
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border"
Grid.Row="0"
BorderThickness="1"
CornerRadius="2,2,0,0">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0,1"
StartPoint="0,0">
<GradientStop Color="White" Offset="0" />
<GradientStop Color="White" Offset="1" />
</LinearGradientBrush>
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="White" Offset="0.0" />
<GradientStop Color="White" Offset="1.0" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ToggleButton OverridesDefaultStyle="True"
Template="{StaticResource ExpanderToggleButton}"
IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
<ToggleButton.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0" />
<GradientStop Color="White" Offset="1" />
</LinearGradientBrush>
</ToggleButton.Background>
</ToggleButton>
<ContentPresenter Grid.Column="1"
Margin="4"
ContentSource="Header"
RecognizesAccessKey="True" />
</Grid>
</Border>
<Border x:Name="Content"
Grid.Row="1"
BorderThickness="1,0,1,1"
CornerRadius="0,0,0,0">
<ContentPresenter Margin="4" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Setter TargetName="ContentRow"
Property="Height"
Value="{Binding DesiredHeight, ElementName=Content}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Silverlight DataGrid control customizing column headers

I want to improve default datagrid control by some needs like filtering, easy adding-editing etc... I'm trying to customize column headers but couldn't get it. I need to add some other controls to headers and reach them in code side. Is there a way to do this?
Thanks.
<sdk:DataGrid
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"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
mc:Ignorable="d"
x:Class="DataGridTest.SLDataGrid"
d:DesignWidth="640" d:DesignHeight="480">
<sdk:DataGrid.Resources>
<Style x:Key="SLDataGridStyle" TargetType="sdk:DataGrid">
<Setter Property="RowBackground" Value="#AAEAEFF4"/>
<Setter Property="AlternatingRowBackground" Value="#00FFFFFF"/>
<Setter Property="Background" Value="#FFFFFFFF"/>
<Setter Property="HeadersVisibility" Value="Column"/>
<Setter Property="HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="SelectionMode" Value="Extended"/>
<Setter Property="CanUserReorderColumns" Value="True"/>
<Setter Property="CanUserResizeColumns" Value="True"/>
<Setter Property="CanUserSortColumns" Value="True"/>
<Setter Property="AutoGenerateColumns" Value="True"/>
<Setter Property="RowDetailsVisibilityMode" Value="VisibleWhenSelected"/>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="DragIndicatorStyle">
<Setter.Value>
<Style TargetType="ContentControl">
<Setter Property="Foreground" Value="#7FFFFFFF"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Grid>
<VisualStateManager.VisualStateGroups>
<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="#66808080" Stretch="Fill"/>
<Rectangle x:Name="BackgroundGradient" Grid.ColumnSpan="2" Opacity="0" Stretch="Fill">
<Rectangle.Fill>
<LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
<GradientStop Color="#FFFFFFFF" Offset="0.015"/>
<GradientStop Color="#F9FFFFFF" Offset="0.375"/>
<GradientStop Color="#E5FFFFFF" Offset="0.6"/>
<GradientStop Color="#C6FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentPresenter Content="{TemplateBinding Content}"/>
<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="#7FFFFFFF" 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>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="DropLocationIndicatorStyle">
<Setter.Value>
<Style TargetType="ContentControl">
<Setter Property="Background" Value="#FF3F4346"/>
<Setter Property="Width" Value="2"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="GridLinesVisibility" Value="Vertical"/>
<Setter Property="HorizontalGridLinesBrush" Value="#FFC9CACA"/>
<Setter Property="IsTabStop" Value="True"/>
<Setter Property="VerticalGridLinesBrush" Value="#FFC9CACA"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="sdk:DataGrid">
<Grid>
<VisualStateManager.CustomVisualStateManager>
<ei:ExtendedVisualStateManager/>
</VisualStateManager.CustomVisualStateManager>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates" ei:ExtendedVisualStateManager.UseFluidLayout="True">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.3"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ValidationStates" ei:ExtendedVisualStateManager.UseFluidLayout="True">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.3"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Invalid"/>
<VisualState x:Name="Valid"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2">
<Grid x:Name="Root" Background="{TemplateBinding Background}">
<Grid.Resources>
<ControlTemplate x:Key="TopLeftHeaderTemplate" TargetType="sdk:DataGridColumnHeader">
<Grid x:Name="Root">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border BorderBrush="#FFC9CACA" BorderThickness="0,0,1,0" Background="#FF1F3B53" Grid.RowSpan="2">
<Rectangle Stretch="Fill" StrokeThickness="1">
<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>
</Border>
<Rectangle Fill="#FFDBDCDC" Height="1" Grid.RowSpan="2" StrokeThickness="1" VerticalAlignment="Bottom" Width="Auto"/>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="TopRightHeaderTemplate" TargetType="sdk:DataGridColumnHeader">
<Grid x:Name="RootElement">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border BorderBrush="#FFC9CACA" BorderThickness="1,0,0,0" Background="#FF1F3B53" Grid.RowSpan="2">
<Rectangle 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>
</Border>
</Grid>
</ControlTemplate>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<sdk:DataGridColumnHeader x:Name="TopLeftCornerHeader" Template="{StaticResource TopLeftHeaderTemplate}" Width="22"/>
<sdk:DataGridColumnHeadersPresenter x:Name="ColumnHeadersPresenter" Grid.Column="1"/>
<sdk:DataGridColumnHeader x:Name="TopRightCornerHeader" Grid.Column="2" Template="{StaticResource TopRightHeaderTemplate}"/>
<Rectangle x:Name="ColumnHeadersAndRowsSeparator" Grid.ColumnSpan="3" Fill="#FFC9CACA" Height="1" StrokeThickness="1" VerticalAlignment="Bottom" Width="Auto"/>
<sdk:DataGridRowsPresenter x:Name="RowsPresenter" Grid.ColumnSpan="2" Grid.Row="1"/>
<Rectangle x:Name="BottomRightCorner" Grid.Column="2" Fill="#FFE9EEF4" Grid.Row="2"/>
<Rectangle x:Name="BottomLeftCorner" Grid.ColumnSpan="2" Fill="#FFE9EEF4" Grid.Row="2"/>
<ScrollBar x:Name="VerticalScrollbar" Grid.Column="2" Margin="0,-1,-1,-1" Orientation="Vertical" Grid.Row="1" Width="18"/>
<Grid Grid.Column="1" Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle x:Name="FrozenColumnScrollBarSpacer"/>
<ScrollBar x:Name="HorizontalScrollbar" Grid.Column="1" Height="18" Margin="-1,0,-1,-1" Orientation="Horizontal"/>
</Grid>
<sdk:ValidationSummary x:Name="ValidationSummary" Grid.ColumnSpan="3" MaxHeight="90" Grid.Row="3"/>
</Grid>
</Border>
<Border x:Name="DisabledVisualElement" Background="#8CFFFFFF" CornerRadius="2" HorizontalAlignment="Stretch" Height="Auto" IsHitTestVisible="False" Opacity="0" VerticalAlignment="Stretch" Width="Auto"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SLDataGridColumnHeaderStyle" 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">
<StackPanel x:Name="Root">
<VisualStateManager.CustomVisualStateManager>
<ei:ExtendedVisualStateManager/>
</VisualStateManager.CustomVisualStateManager>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates" ei:ExtendedVisualStateManager.UseFluidLayout="True">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.3"/>
</VisualStateGroup.Transitions>
<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" ei:ExtendedVisualStateManager.UseFluidLayout="True">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.3"/>
</VisualStateGroup.Transitions>
<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>
<Grid Height="24" Width="147">
<Rectangle x:Name="BackgroundRectangle" Fill="#FF1F3B53" Stretch="Fill" Margin="0,0,-1,0"/>
<Rectangle x:Name="BackgroundGradient" Stretch="Fill" Margin="0,0,-1,0">
<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="4,4,0,4" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentPresenter Content="{TemplateBinding Content}"/>
<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>
</Grid>
<Rectangle x:Name="VerticalSeparator" Fill="{TemplateBinding SeparatorBrush}" Visibility="{TemplateBinding SeparatorVisibility}" VerticalAlignment="Stretch" Width="1" HorizontalAlignment="Right" Margin="0,0,-1,0" d:LayoutOverrides="Width"/>
</Grid>
<Grid Height="24" Background="#FFE4E4E4">
<TextBox TextWrapping="Wrap" Text="TextBox" d:LayoutOverrides="Width"/>
</Grid>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</sdk:DataGrid.Resources>
<sdk:DataGrid.Style>
<StaticResource ResourceKey="SLDataGridStyle"/>
</sdk:DataGrid.Style>
<sdk:DataGrid.ColumnHeaderStyle>
<StaticResource ResourceKey="SLDataGridColumnHeaderStyle"/>
</sdk:DataGrid.ColumnHeaderStyle>
It is possible to add custom controls to the headers of a Silverlight DataGrid, but it's not obvious how to do so, and it is a bit of a pain.
There are two things you need to do:
Specify the controls you want to add to the column header by applying a ContentTemplate to the HeaderStyle of the column header. For this to work, you'll need the following two XAML namespace declarations:
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
xmlns:dataprimitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data"
<sdk:DataGridTemplateColumn Binding="...">
<sdk:DataGridTemplateColumn.HeaderStyle>
<Style TargetType="dataprimitives:DataGridColumnHeader">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox IsChecked="{Binding Path=SomeFlag, Mode=TwoWay}" />
<TextBlock Text="Header text" />
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</sdk:DataGridTemplateColumn.HeaderStyle>
<!-- other DataGridTemplateColumn stuff -->
<sdk:DataGridTemplateColumn>
In this example, I've used a CheckBox with an IsChecked property bound to a view-model property SomeFlag, and a TextBlock. I used a DataGridTemplateColumn in this example, but this approach should also work with DataGridTextColumn and DataGridCheckBoxColumn provided you replace sdk:DataGridTemplateColumn.HeaderStyle with sdk:DataGridTextColumn.HeaderStyle and similarly for DataGridCheckBoxColumn.
If you only want to add static content to the column header, there's nothing more you need to do. However, if you wish to use data-binding, you need a further step, as otherwise the data-context of the controls in the header will not be set correctly. This requires a bit of code-behind.
The following methods search through the visual tree for ContentPresenters within DataGridColumnHeaders and set the DataContexts of these ContentPresenters:
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Media;
/// <summary>
/// Sets the DataContext of each column header within the given data-grid.
/// </summary>
/// <param name="dataGrid">The DataGrid.</param>
/// <param name="dataContext">The data-context to set.</param>
public static void SetHeaderDataContexts(DataGrid dataGrid, object dataContext)
{
// First we look for a DataGridColumnHeadersPresenter.
DataGridColumnHeadersPresenter colsPresenter = GetObjectOfType<DataGridColumnHeadersPresenter>(dataGrid);
if (colsPresenter == null)
{
return;
}
// The ColumnHeadersPresenter contains all of the column headers as
// direct children. Within each column header is a ContentPresenter,
// whose DataContext will normally be null. For each ContentPresenter
// found, set its DataContext to be that given.
int colHeaderCount = VisualTreeHelper.GetChildrenCount(colsPresenter);
for (int i = 0; i < colHeaderCount; ++i)
{
var header = VisualTreeHelper.GetChild(colsPresenter, i) as DataGridColumnHeader;
if (header != null)
{
ContentPresenter contentPresenter = GetObjectOfType<ContentPresenter>(header);
if (contentPresenter != null)
{
contentPresenter.DataContext = dataContext;
}
}
}
}
/// <summary>
/// Returns the first descendant object of the given parent object within
/// the visual tree that is an instance of the specified type.
/// </summary>
/// <remarks>
/// The visual tree is searched in a depth-first manner, and the first
/// object of type <c>TObject</c> found within the tree is returned. If no
/// control of this type is found, <c>null</c> is returned instead.
/// </remarks>
/// <typeparam name="TObject">The type of object to search for. This must
/// be a subclass of <see cref="DependencyObject"/>.</typeparam>
/// <param name="parent">The parent control to search within.</param>
/// <returns>
/// The first control of the specified type found, or <c>null</c> if none
/// were found.
/// </returns>
public static TObject GetObjectOfType<TObject>(DependencyObject parent) where TObject : DependencyObject
{
int count = VisualTreeHelper.GetChildrenCount(parent);
for (int i = 0; i < count; ++i)
{
DependencyObject child = VisualTreeHelper.GetChild(parent, i);
if (child is TObject)
{
return child as TObject;
}
else
{
TObject obj = GetObjectOfType<TObject>(child);
if (obj != null)
{
return obj;
}
}
}
return null;
}
The only thing that remains to be done is to call SetHeaderDataContexts. I found that calling it from the user-control constructor didn't work, nor did calling it from the Loaded event (in both cases it had no effect). Calling it from the LayoutUpdated event of the grid really didn't work, as that caused an exception to be thrown.
However, calling it within the constructor by using
Dispatcher.BeginInvoke(() => SetHeaderDataContexts(theDataGrid, this.DataContext));
did appear to work.
Acknowledgements: the idea of setting the ContentTemplate comes from Lars Holm Jensen's answer to a similar question, and the idea of searching through the visual tree comes from a blog post from Manas Patnaik. Both links were found via a similar question.
Luke's answer is excellent.
However, I found that when I put a ComboBox into the header template, the binding (set in code-behind from part (2) of Luke's answer) disappeared after an item in the Combo was selected, or when the column is resized. This is because the column header is being recreated when the column resizes, so the binding gets lost.
I fixed it by setting the binding instead like this -
XAML -
<DataTemplate>
<StackPanel Orientation="Horizontal" Loaded="HeaderTemplate_OnLoaded" >
<CheckBox IsChecked="{Binding Path=SomeFlag, Mode=TwoWay}" />
<TextBlock Text="Header text" />
</StackPanel>
</DataTemplate>
Code-behind -
private void HeaderTemplate_OnLoaded(object sender, RoutedEventArgs e)
{
((FrameworkElement)sender).DataContext = this.DataContext;
}
This worked for me without problems every time.
The column header's style can indeed be changed. I was trying to center the header text & this link's technique worked for me: Silverlight DataGrid Header Horizontal Alignment

How to remove border around the DataGrid in silverlight

How do i remove the border around the Data grid in silverlight when i try BorderThickness="0" BorderBrush="Transparent" it gets rid of the broder on right left and bottom of the grid but not the top i think thats the header border or something but unsure i have also removed headers HeadersVisibility="None"
would be great if someone could help.
Cheers
In Silverlight 2 Beta 2 the generated DataGrid is surrounded by a border. Unfortunately, the removal of this border cannot be accomplished by simply setting a property on the DataGrid. To remove this, the definition of the DataGrid style or "skin" will need to be overridden.
The appearance for each Silverlight control (FrameworkElement) is defined within a ControlTemplate. Using Styles, this template can be overridden within your application with a set of customized XAML code. Default XAML definitions are found within the Silverlight Control Styles and Templates documentation. Specific to this topic, XAML definitions for the DataGrid are found in the DataGrid Styles and Templates documentation.
In the DataGrid XAML, look for the Template definition. Once this has been located, note that the RootElement of the the DataGrid is surrounded by three distinct Border elements.
These elements are likely the items that need to be removed. To start the customization, the style XAML for the DataGrid will need to be added as a new resource into our application. I'm going to add this directly to my UserControl, but it could also be added to the Application resources (in App.xaml).
To add the XAML to the UserControl create a new node named UserControl.Resources and copy the DataGrid XAML into it (use the handy "Copy Code" link on the documentation web page).
The namespace definitions for the DataGrid and the Resource must match. In the copied XAML the namespace is local:DataGrid. The default namespace generated by the Visual Studio tool is my:DataGrid. In the above example, I changed all references of local to my.
The next item to take care of is that the Style must have a Key. This is used to map a Framework element (our DataGrid) to a specific style definition. I've given the style a key of TestGrid which is used in the following DataGrid definition.
At this point, when you run the application the DataGrid should appear exactly as it did before (we haven't changed anything yet).
Before I start removing the definitions for the Border elements, I want to make sure that these are the culprits. To do this, I'm going to change their colors to something a little more obvious.
Running the application, I get the a screen
Zooming in, it's obvious how these elements take part in the display of the DataGrid.
Removing the Border elements from the XAML generates the desired results.
Hopefully, this not only provides a reference for how to remove the border from a DataGrid, but also provides a quick introduction to the possibilities available for customizing Silverlight controls.
Copied from: http://devcenter.auburnrandall.com/Default.aspx?type=post&id=52
The element you are seeing it is a Rectangle called ColumnHeadersAndRowsSeparator. Just create a Style without it:
<Style TargetType="sdk:DataGrid">
<Setter Property="RowBackground" Value="#AAEAEFF4" />
<Setter Property="AlternatingRowBackground" Value="#00FFFFFF" />
<Setter Property="Background" Value="#FFFFFFFF" />
<Setter Property="HeadersVisibility" Value="Column" />
<Setter Property="HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="SelectionMode" Value="Extended" />
<Setter Property="CanUserReorderColumns" Value="True" />
<Setter Property="CanUserResizeColumns" Value="True" />
<Setter Property="CanUserSortColumns" Value="True" />
<Setter Property="AutoGenerateColumns" Value="True" />
<Setter Property="RowDetailsVisibilityMode" Value="VisibleWhenSelected" />
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderThickness" Value="1" />
<Setter Property="DragIndicatorStyle">
<Setter.Value>
<!-- TODO: Change the TargetType to Control when the fix Jolt bugs 18719 is verified -->
<Style TargetType="ContentControl">
<Setter Property="Foreground" Value="#7FFFFFFF" />
<Setter Property="Template">
<Setter.Value>
<!-- TODO: Change the TargetType to Control when the fix Jolt bugs 18719 is verified -->
<ControlTemplate TargetType="ContentControl">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SortStates">
<VisualState x:Name="Unsorted" />
<VisualState x:Name="SortAscending">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="Opacity" Duration="0" To="1.0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="SortDescending">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="Opacity" Duration="0" To="1.0"/>
<DoubleAnimation Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="(RenderTransform).ScaleY" Duration="0" To="-.9"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="BackgroundRectangle" Stretch="Fill" Fill="#66808080" Grid.ColumnSpan="2" />
<Rectangle x:Name="BackgroundGradient" Stretch="Fill" Grid.ColumnSpan="2" Opacity="0" >
<Rectangle.Fill>
<LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
<GradientStop Color="#FFFFFFFF" Offset="0.015" />
<GradientStop Color="#F9FFFFFF" Offset="0.375" />
<GradientStop Color="#E5FFFFFF" Offset="0.6" />
<GradientStop Color="#C6FFFFFF" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentPresenter Content="{TemplateBinding Content}"/>
<Path Grid.Column="1" Name="SortIcon" Fill="#7FFFFFFF" RenderTransformOrigin=".5,.5" HorizontalAlignment="Left" VerticalAlignment="Center" Opacity="0" Stretch="Uniform" Width="8" Margin="4,0,0,0" Data="F1 M -5.215,6.099L 5.215,6.099L 0,0L -5.215,6.099 Z ">
<Path.RenderTransform>
<ScaleTransform ScaleX=".9" ScaleY=".9" />
</Path.RenderTransform>
</Path>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="DropLocationIndicatorStyle">
<Setter.Value>
<Style TargetType="ContentControl">
<Setter Property="Background" Value="#FF3F4346"/>
<Setter Property="Width" Value="2"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Rectangle Fill="{TemplateBinding Background}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="GridLinesVisibility" Value="Vertical" />
<Setter Property="HorizontalGridLinesBrush" Value="#FFC9CACA" />
<Setter Property="IsTabStop" Value="True" />
<Setter Property="VerticalGridLinesBrush" Value="#FFC9CACA" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="sdk:DataGrid">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="2">
<Grid Name="Root" Background="{TemplateBinding Background}">
<Grid.Resources>
<!--Start: TopLeftHeaderTemplate-->
<ControlTemplate x:Key="TopLeftHeaderTemplate" TargetType="localprimitives:DataGridColumnHeader">
<Grid Name="Root">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border BorderThickness="0,0,1,0" BorderBrush="#FFC9CACA" Background="#FF1F3B53" Grid.RowSpan="2">
<Rectangle Stretch="Fill" StrokeThickness="1">
<Rectangle.Fill>
<LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
<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>
</Border>
<Rectangle VerticalAlignment="Bottom" Width="Auto" StrokeThickness="1" Height="1" Fill="#FFDBDCDC" Grid.RowSpan="2"/>
</Grid>
</ControlTemplate>
<!--End: TopLeftHeaderTemplate-->
<!--Start: TopRightHeaderTemplate-->
<ControlTemplate x:Key="TopRightHeaderTemplate" TargetType="localprimitives:DataGridColumnHeader">
<Grid Name="RootElement">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border BorderThickness="1,0,0,0" BorderBrush="#FFC9CACA" Background="#FF1F3B53" Grid.RowSpan="2">
<Rectangle Stretch="Fill">
<Rectangle.Fill>
<LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
<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>
</Border>
</Grid>
</ControlTemplate>
<!--End: TopRightHeaderTemplate-->
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition/>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition/>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<localprimitives:DataGridColumnHeader Name="TopLeftCornerHeader" Template="{StaticResource TopLeftHeaderTemplate}" Width="22" />
<localprimitives:DataGridColumnHeadersPresenter Name="ColumnHeadersPresenter" Grid.Column="1"/>
<localprimitives:DataGridColumnHeader Name="TopRightCornerHeader" Grid.Column="2" Template="{StaticResource TopRightHeaderTemplate}" />
<!-- HERE IT IS THAT LINE YOU SEE -->
<!--<Rectangle Name="ColumnHeadersAndRowsSeparator" Grid.ColumnSpan="3" VerticalAlignment="Bottom" Width="Auto" StrokeThickness="1" Height="1" Fill="#FFC9CACA"/>-->
<localprimitives:DataGridRowsPresenter Name="RowsPresenter" Grid.ColumnSpan="2" Grid.Row="1" />
<Rectangle Name="BottomRightCorner" Fill="#FFE9EEF4" Grid.Column="2" Grid.Row="2" />
<Rectangle Name="BottomLeftCorner" Fill="#FFE9EEF4" Grid.Row="2" Grid.ColumnSpan="2" />
<ScrollBar Name="VerticalScrollbar" Orientation="Vertical" Grid.Column="2" Grid.Row="1" Width="18" Margin="0,-1,-1,-1"/>
<Grid Grid.Column="1" Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle Name="FrozenColumnScrollBarSpacer" />
<ScrollBar Name="HorizontalScrollbar" Grid.Column="1" Orientation="Horizontal" Height="18" Margin="-1,0,-1,-1"/>
</Grid>
</Grid>
</Border>
<Border x:Name="DisabledVisualElement" IsHitTestVisible="False" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" CornerRadius="2" Background="#8CFFFFFF" Opacity="0"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

How to wrap text in Silverlight DataGridTextColumn

I am trying to create a simple DataGrid in Silverlight 4 Beta but cannot seem to figure out how to get my Note column to wordwrap.
The table represents notes made on an order, so they will be of variable length. i want the 'Note' cell to expand vertically to fit the contents.
I've found numerous similar questions but no answer. Is there something new in Silverlight 4 that will address this?
<data:DataGrid AutoGenerateColumns="False" Name="dataGrid1" IsReadOnly="True">
<data:DataGrid.Columns>
<data:DataGridTextColumn Header="Date" Binding="{Binding Date}" />
<data:DataGridTextColumn Header="User" Binding="{Binding User}" />
<data:DataGridTextColumn Header="Note" Binding="{Binding Note}" />
</data:DataGrid.Columns>
</data:DataGrid>
Use a DataGridTemplateColumn instead of a text column. Have a TextBlock in there with it's TextWrapping set to true:
<data:DataGrid x:Name="LayoutRoot" AutoGenerateColumns="False" IsReadOnly="True" RowDetailsVisibilityMode="Visible" >
<data:DataGrid.Columns>
<data:DataGridTextColumn Header="Date" Binding="{Binding Date}" />
<data:DataGridTextColumn Header="User" Binding="{Binding User}" />
<data:DataGridTemplateColumn Header="Note" Width="100">
<data:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock TextWrapping="Wrap" Text="{Binding Note}" />
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>
</data:DataGrid.Columns>
</data:DataGrid>
I use ElementStyle to set the wrap text,and it works all right. Happy coding!
<Style x:Key="DataGridTextColumnStyle" TargetType="TextBlock">
<Setter Property="TextWrapping" Value="Wrap"/>
</Style>
<data:DataGridTextColumn Binding="{Binding DESC}"
Header="Short Description"
HeaderStyle="{StaticResource DataGridHeaderStyle}"
ElementStyle="{StaticResource DataGridTextColumnStyle}" >
</data:DataGridTextColumn>
Either of the other solutions work - but they both cause a scrolling problem.
If you have a DataGrid that does not have RowHeight set, then the row height will be determined by the size of these TextBlocks. Well, the DataGrid uses virtualization and doesn't draw the TextBlocks until they are displayed. So it simply does not know how big the scrollbar should be. Scrolling with the middle mouse button then causes all sorts of unfortunate behavior.
I'm using paging on my datagrid so I'm disabling virtualization by setting the DataGrid's Style to this:
xmlns:dataprimitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data"
xmlns:SystemWindowsControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">
<UserControl.Resources>
<Style x:Key="DataGridStyleNoVirtualization" TargetType="SystemWindowsControls:DataGrid">
<Setter Property="RowBackground" Value="#AAEAEFF4" />
<Setter Property="AlternatingRowBackground" Value="#00FFFFFF" />
<Setter Property="Background" Value="#FFFFFFFF" />
<Setter Property="HeadersVisibility" Value="Column" />
<Setter Property="HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="SelectionMode" Value="Extended" />
<Setter Property="CanUserReorderColumns" Value="True" />
<Setter Property="CanUserResizeColumns" Value="True" />
<Setter Property="CanUserSortColumns" Value="True" />
<Setter Property="AutoGenerateColumns" Value="True" />
<Setter Property="RowDetailsVisibilityMode" Value="VisibleWhenSelected" />
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderThickness" Value="1" />
<Setter Property="DragIndicatorStyle">
<Setter.Value>
<!-- TODO: Change the TargetType to Control when the fix Jolt bugs 18719 is verified -->
<Style TargetType="ContentControl">
<Setter Property="Foreground" Value="#7FFFFFFF" />
<Setter Property="Template">
<Setter.Value>
<!-- TODO: Change the TargetType to Control when the fix Jolt bugs 18719 is verified -->
<ControlTemplate TargetType="ContentControl">
<Grid>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="SortStates">
<vsm:VisualState x:Name="Unsorted" />
<vsm:VisualState x:Name="SortAscending">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="Opacity" Duration="0" To="1.0"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="SortDescending">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="Opacity" Duration="0" To="1.0"/>
<DoubleAnimation Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="(RenderTransform).ScaleY" Duration="0" To="-.9"/>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Rectangle x:Name="BackgroundRectangle" Stretch="Fill" Fill="#66808080" Grid.ColumnSpan="2" />
<Rectangle x:Name="BackgroundGradient" Stretch="Fill" Grid.ColumnSpan="2" Opacity="0" >
<Rectangle.Fill>
<LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
<GradientStop Color="#FFFFFFFF" Offset="0.015" />
<GradientStop Color="#F9FFFFFF" Offset="0.375" />
<GradientStop Color="#E5FFFFFF" Offset="0.6" />
<GradientStop Color="#C6FFFFFF" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentPresenter Content="{TemplateBinding Content}"/>
<Path Grid.Column="1" Name="SortIcon" Fill="#7FFFFFFF" RenderTransformOrigin=".5,.5" HorizontalAlignment="Left" VerticalAlignment="Center" Opacity="0" Stretch="Uniform" Width="8" Margin="4,0,0,0" Data="F1 M -5.215,6.099L 5.215,6.099L 0,0L -5.215,6.099 Z ">
<Path.RenderTransform>
<ScaleTransform ScaleX=".9" ScaleY=".9" />
</Path.RenderTransform>
</Path>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="DropLocationIndicatorStyle">
<Setter.Value>
<Style TargetType="ContentControl">
<Setter Property="Background" Value="#FF3F4346"/>
<Setter Property="Width" Value="2"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Rectangle Fill="{TemplateBinding Background}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="GridLinesVisibility" Value="Vertical" />
<Setter Property="HorizontalGridLinesBrush" Value="#FFC9CACA" />
<Setter Property="IsTabStop" Value="True" />
<Setter Property="VerticalGridLinesBrush" Value="#FFC9CACA" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="SystemWindowsControls:DataGrid">
<Grid>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="2">
<Grid Name="Root" Background="{TemplateBinding Background}">
<Grid.Resources>
<!--Start: TopLeftHeaderTemplate-->
<ControlTemplate x:Key="TopLeftHeaderTemplate" TargetType="dataprimitives:DataGridColumnHeader">
<Grid Name="Root">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border BorderThickness="0,0,1,0" BorderBrush="#FFC9CACA" Background="#FF1F3B53" Grid.RowSpan="2">
<Rectangle Stretch="Fill" StrokeThickness="1">
<Rectangle.Fill>
<LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
<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>
</Border>
<Rectangle VerticalAlignment="Bottom" Width="Auto" StrokeThickness="1" Height="1" Fill="#FFDBDCDC" Grid.RowSpan="2"/>
</Grid>
</ControlTemplate>
<!--End: TopLeftHeaderTemplate-->
<!--Start: TopRightHeaderTemplate-->
<ControlTemplate x:Key="TopRightHeaderTemplate" TargetType="dataprimitives:DataGridColumnHeader">
<Grid Name="RootElement">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border BorderThickness="1,0,0,0" BorderBrush="#FFC9CACA" Background="#FF1F3B53" Grid.RowSpan="2">
<Rectangle Stretch="Fill">
<Rectangle.Fill>
<LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
<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>
</Border>
</Grid>
</ControlTemplate>
<!--End: TopRightHeaderTemplate-->
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition/>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition/>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<dataprimitives:DataGridColumnHeader Name="TopLeftCornerHeader" Template="{StaticResource TopLeftHeaderTemplate}" Width="22" />
<dataprimitives:DataGridColumnHeadersPresenter Name="ColumnHeadersPresenter" Grid.Column="1"/>
<dataprimitives:DataGridColumnHeader Name="TopRightCornerHeader" Grid.Column="2" Template="{StaticResource TopRightHeaderTemplate}" />
<Rectangle Name="ColumnHeadersAndRowsSeparator" Grid.ColumnSpan="3" VerticalAlignment="Bottom" Width="Auto" StrokeThickness="1" Height="1" Fill="#FFC9CACA"/>
<ScrollViewer Grid.ColumnSpan="2" Grid.Row="1">
<dataprimitives:DataGridRowsPresenter Name="RowsPresenter" />
</ScrollViewer>
<Rectangle Name="BottomRightCorner" Fill="#FFE9EEF4" Grid.Column="2" Grid.Row="2" />
<Rectangle Name="BottomLeftCorner" Fill="#FFE9EEF4" Grid.Row="2" Grid.ColumnSpan="2" />
<Grid Grid.Column="1" Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle Name="FrozenColumnScrollBarSpacer" />
</Grid>
</Grid>
</Border>
<Border x:Name="DisabledVisualElement" IsHitTestVisible="False" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" CornerRadius="2" Background="#8CFFFFFF" Opacity="0"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
To resolve scrolling issue you can just strongly set the Height property of TextBlock, for example:
<Style x:Key="DataGridTextColumnStyle" TargetType="TextBlock">
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="Height" Value="15"/>
</Style>

Resources