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

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>

Related

Silverlight datagrid virtualization creating issues in scrolling

I have a Datagrid with two columns. First column contains a DataTemplate with a custom control in it. I have set MaxHeight and VerticalScrollbarvisibility=Auto on Datagrid. When the grid contains approx 20 rows scroll bar becomes visible. Upon scrolling quickly data in bottom or upper rows is not reflecting properly (perhaps due to virtualization, it shows data from previous cells). So i have a couple of questions -
Is it possible to turn off virtualization? I am using silverlight 5.
Is it possible to fix the grid headers and put the grid itself in a scroll viewer so that it gives the impression of grids own scroll bar.
Any help is greatly appreciated.
Thanks
Yes it is possible to turn off virtualization.
I had exactly the same problem as you - this custom style turns off virtualization and works like a charm:
<Style x:Key="NonVirtualizingDataGridStyle" TargetType="sdk:DataGrid">
<Setter Property="RowBackground" Value="#EBEBED" />
<Setter Property="AlternatingRowBackground" Value="#EBEBED" />
<Setter Property="RowHeight" Value="25" />
<Setter Property="GridLinesVisibility" Value="All"/>
<Setter Property="HeadersVisibility" Value="Column" />
<Setter Property="HorizontalGridLinesBrush" Value="#A0A0A0" />
<Setter Property="HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="SelectionMode" Value="Single" />
<Setter Property="CanUserReorderColumns" Value="False" />
<Setter Property="CanUserResizeColumns" Value="False" />
<Setter Property="CanUserSortColumns" Value="True" />
<Setter Property="AutoGenerateColumns" Value="True" />
<Setter Property="RowDetailsVisibilityMode" Value="VisibleWhenSelected" />
<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 x:Name="Root" Background="{TemplateBinding Background}">
<Grid.Resources>
<!--Start: TopLeftHeaderTemplate-->
<ControlTemplate x:Key="TopLeftHeaderTemplate" TargetType="sdk:DataGridColumnHeader">
<Grid x: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="sdk:DataGridColumnHeader">
<Grid x: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>
<!-- Fill up the space in the header above the vertical scroll bar -->
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="0.5*" />
<RowDefinition Height="0.5*" />
</Grid.RowDefinitions>
<!--<Rectangle x:Name="BackgroundGradient" Stretch="Fill" Fill="#FF79C1C0" Grid.RowSpan="2"/>
<Rectangle x:Name="BackgroundGradient_Copy" Fill="#6BFFFFFF" VerticalAlignment="Stretch" Grid.RowSpan="1"/>-->
<Rectangle x:Name="BackgroundGradient" Stretch="Fill"
Fill="{StaticResource CustomRed}" Grid.ColumnSpan="2"
Grid.RowSpan="2" />
<Border BorderBrush="Transparent"
BorderThickness="1,1,1,1"
Grid.ColumnSpan="3" Grid.RowSpan="3">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.5*"/>
<RowDefinition Height="0.5*"/>
</Grid.RowDefinitions>
<!--dark-->
<Border HorizontalAlignment="Stretch"
Margin="0,0,0,0" x:Name="dark"
Width="Auto" Grid.ColumnSpan="3"
Grid.RowSpan="3"
Background="#66000000"
Opacity="0"/>
<!--glow-->
<Border Opacity="0"
HorizontalAlignment="Stretch" x:Name="glow"
Width="Auto" Grid.RowSpan="2"
Grid.ColumnSpan="3">
<Border.Background>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform ScaleX="1.7"
ScaleY="2.2"/>
<SkewTransform AngleX="0"
AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="-0.3"
Y="-0.1"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#B2FFFFFF"
Offset="0"/>
<GradientStop Color="#00FFFFFF"
Offset="1"/>
</RadialGradientBrush>
</Border.Background>
</Border>
<!--shine-->
<Border HorizontalAlignment="Stretch"
Margin="0,0,0,0" x:Name="shine"
Width="Auto"
Grid.ColumnSpan="3">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,0.9"
StartPoint="0.5,0.1">
<GradientStop Color="#99FFFFFF"
Offset="0"/>
<GradientStop Color="#33FFFFFF"
Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</Grid>
</Border>
</Grid>
<sdk:DataGridColumnHeader x:Name="TopLeftCornerHeader" Template="{StaticResource TopLeftHeaderTemplate}" Width="22" />
<sdk:DataGridColumnHeadersPresenter Grid.Column="1" x:Name="ColumnHeadersPresenter" HorizontalAlignment="Left"/>
<sdk:DataGridColumnHeader x:Name="TopRightCornerHeader" Grid.Column="2" Template="{StaticResource TopRightHeaderTemplate}" />
<Rectangle x:Name="ColumnHeadersAndRowsSeparator" Grid.ColumnSpan="3" VerticalAlignment="Bottom" Width="Auto" StrokeThickness="1" Height="1" Fill="#FFC9CACA"/>
<ScrollViewer Style="{StaticResource RowScrollViewerStyle}" Grid.ColumnSpan="2" Grid.Row="1" Padding="0" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" >
<sdk:DataGridRowsPresenter x:Name="RowsPresenter" />
</ScrollViewer>
<Rectangle x:Name="BottomRightCorner" Fill="#FFE9EEF4" Grid.Column="2" Grid.Row="2" />
<Rectangle x: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 x:Name="FrozenColumnScrollBarSpacer" />
<!--<local:Navigator Margin="4,0,2,0" />-->
<ScrollBar x: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>
There is a more simple style used to turn off virtualization but the one above has modifications to freeze the grid headers. I have just dumped the style that i use, you may want to remove the styling - but the functionality is there.
This style will solve your 2 points.

Margin of a TabPanel via TabControl.Resources

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>

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>

Removing the MouseOver effect from a Silverlight Context Menu

I'm trying to achieve the effect of a pop-up when the user right-clicks in a Silverlight application that shows essentially a custom control. I'm using a Context Menu, and all is working great except that I'm having trouble styling the context menu so that it doesn't highlight itself when the user mouses over.
Here's a snippet of what I'm trying to do:
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu Height="100" Background="Transparent" HorizontalOffset="-100" VerticalOffset="-100" Margin="98,112,0,0" Name="contextMenu1" VerticalAlignment="Top" Width="200">
<toolkit:ContextMenu.Style>
<Style TargetType="toolkit:ContextMenu">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Padding" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:ContextMenu">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="2">
<Grid>
<ItemsPresenter Margin="{TemplateBinding Padding}" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</toolkit:ContextMenu.Style>
<Canvas Width="100" Height="100" Background="Transparent">
<Button Width="100" Height="30">Something</Button>
<Button Width="100" Height="30" Canvas.Top="70">Something Else</Button>
</Canvas>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
When the menu is visible I get the effect I want (the two buttons just floating near the mouse), but when I mouse over it the entire box of the context menu highlights itself.
Here's a sample app that demonstrates this:
http://github.com/vermeeca/ContextMenuDemo
How can I disable that effect?
Thanks to a co-worker I've got the solution. I just had to set the ItemContainerStyle on the ContextMenu.
<UserControl.Resources>
<Style x:Key="NoMouseOverStyle" TargetType="toolkit:MenuItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="4,3,2,3"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:MenuItem">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Presenter"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Unfocused"/>
<!-- VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Bg"/>
<ColorAnimation Duration="0" To="#40FFFFFF" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="InnerBorder"/>
</Storyboard>
</VisualState -->
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle Fill="{TemplateBinding Background}" RadiusY="2" RadiusX="2" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="1"/>
<Rectangle x:Name="Bg" Opacity="0" RadiusY="2" RadiusX="2" Stroke="#8071CBF1" StrokeThickness="1">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#34C5EBFF" Offset="0"/>
<GradientStop Color="#3481D8FF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="InnerBorder" Margin="1" RadiusY="2" RadiusX="2" Stroke="Transparent"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="24" Width="Auto"/>
<ColumnDefinition Width="4"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="17"/>
</Grid.ColumnDefinitions>
<ContentPresenter Content="{TemplateBinding Icon}" Margin="1" VerticalAlignment="Center"/>
<ContentPresenter x:Name="Presenter" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="2" Margin="{TemplateBinding Padding}"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
And then
<toolkit:ContextMenu Height="100" Background="Transparent" HorizontalOffset="-100" VerticalOffset="-100" Margin="98,112,0,0" Name="contextMenu1" VerticalAlignment="Top" Width="200" ItemContainerStyle="{StaticResource NoMouseOverStyle}">

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