JavaFX 2.0 render controls inside control - styles

I work with .net WPF. Using this library allow me to completely redesign every control. F.e. - I've button, inside button I can render table (grid) with rows and columns. Then on specific cordination in table (grid) I can render image, label or something else.
here is the example for redesign ListBoxItem
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Grid x:Name="ShortCutGrid"
Height="96"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Width="96"
Background="Transparent">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="96"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Image Grid.Column="1" Name="Image1" Width="48" Height="48" Source="{Binding Path=ImageName}"/>
</Grid>
<StackPanel Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center">
<Label>
<TextBox Background="Transparent"
x:Name="TextBox1"
Text="{Binding Path=Text}"
Foreground="Black"
TextWrapping="WrapWithOverflow"
TextAlignment="Center"
BorderThickness="0"
IsReadOnly="True"
Focusable="False"
Cursor="Arrow">
</TextBox>
</Label>
</StackPanel>
</Grid>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="TextBox1" Property="Background" Value="Navy"/>
<Setter TargetName="TextBox1" Property="Foreground" Value="White"/>
<Setter TargetName="Image1" Property="OpacityMask" Value="{StaticResource ShortcutSelected}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<EventSetter Event="MouseDoubleClick" Handler="listBoxItem_DoubleClick" />
</Style>
My question is : Is possible in JavaFX 2.0 to render controls inside another control
in fxml?

With the basic controls, it isnt. But you can compose your own controls which can contain contains any node.

Related

Style for a CustomControl is not applied in Generic file

I have a custom control, in that custom control I have loaded the TextBox, and I have customized the style for TextBox in Generic.XAML file but the style is not applied, Please refer the below code
CustomControl.cs
class CustomControl1 : Control
{
public CustomControl1()
{
this.DefaultStyleKey = typeof(CustomControl1);
}
}
Generic.XAML
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CustomControl">
<Style TargetType="TextBox">
<Setter Property="Foreground" Value="Red"/>
</Style>
<Style TargetType="local:CustomControl1">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:CustomControl1">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<TextBox Width="100" Height="100" Text="Hi"
VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
MainWindow.XAML
<Page
x:Class="CustomControl.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CustomControl"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid>
<local:CustomControl1 VerticalAlignment="Center" HorizontalAlignment="Center" Width="200" Height="200"/>
</Grid>
I have set the foreground color for TextBox in Generic.XAML file but that is not set to the TextBox. Please refer the below image,
If I customized the style for a TextBox in Page.Resources in MainWindow.XAML its works fine. But I need to customized in Generic.XAML itself.
Any suggestion on this?
There are multiple solutions:
Just set the Foreground property on the TextBox.
Since you ask this question, I suppose you'll have multiple TextBoxes and don't want to repeat setting the property. If the color has to change some day, you'll have a lot of work.
Give your TextBox style a key and apply that style.
Easy fix, but not perfect if have multiple types of controls with Foreground property.
<Style x:Key="RedStyle" TargetType="TextBox">
<Setter Property="Foreground" Value="Red"/>
</Style>
<Style TargetType="local:CustomControl1" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:CustomControl1">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<TextBox Width="100" Height="100" Text="Hi" Style="{StaticResource RedStyle}"
VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Define the Foreground property on your template and use TemplateBinding
This is my favorite fix.
<Style TargetType="local:CustomControl1" >
<Setter Property="Foreground" Value="Red" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:CustomControl1">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<TextBox Width="100" Height="100" Text="Hi" Foreground="{TemplateBinding Foreground}"
VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

customizing ContentDialog in UWP

I have a ContentDialog, it has 2 default buttons : Primary and Secondary
I want to change some property of them, like width, height, position, font, ... or every property that one button has, How can I do it?
You can create a custom Style for the ContentDialog, the default template is here: https://msdn.microsoft.com/en-us/library/windows/apps/mt299120.aspx
<x:Double x:Key="ContentDialogMinWidth">320</x:Double>
<x:Double x:Key="ContentDialogMaxWidth">548</x:Double>
<x:Double x:Key="ContentDialogMinHeight">184</x:Double>
<x:Double x:Key="ContentDialogMaxHeight">756</x:Double>
<x:Double x:Key="ContentDialogButtonMinWidth">130</x:Double>
<x:Double x:Key="ContentDialogButtonMaxWidth">202</x:Double>
<x:Double x:Key="ContentDialogButtonHeight">32</x:Double>
<x:Double x:Key="ContentDialogTitleMaxHeight">56</x:Double>
<Thickness x:Key="ContentDialogBorderWidth">1</Thickness>
<Thickness x:Key="ContentDialogButton1HostMargin">24,0,0,24</Thickness>
<Thickness x:Key="ContentDialogButton2HostMargin">4,0,24,24</Thickness>
<Thickness x:Key="ContentDialogContentMargin">24,0,24,0</Thickness>
<Thickness x:Key="ContentDialogContentScrollViewerMargin">0,0,0,24</Thickness>
<Thickness x:Key="ContentDialogTitleMargin">24,18,24,0</Thickness>
<!-- Default style for Windows.UI.Xaml.Controls.ContentDialog -->
<Style TargetType="ContentDialog">
<Setter Property="Foreground" Value="{ThemeResource SystemControlPageTextBaseHighBrush}" />
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="MaxHeight" Value="{ThemeResource ContentDialogMaxHeight}" />
<Setter Property="MinHeight" Value="{ThemeResource ContentDialogMinHeight}" />
<Setter Property="MaxWidth" Value="{ThemeResource ContentDialogMaxWidth}" />
<Setter Property="MinWidth" Value="{ThemeResource ContentDialogMinWidth}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentDialog">
<Border x:Name="Container">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border x:Name="BackgroundElement"
Background="{TemplateBinding Background}"
FlowDirection="{TemplateBinding FlowDirection}"
BorderThickness="{ThemeResource ContentDialogBorderWidth}"
BorderBrush="{ThemeResource SystemControlForegroundAccentBrush}"
MaxWidth="{TemplateBinding MaxWidth}"
MaxHeight="{TemplateBinding MaxHeight}"
MinWidth="{TemplateBinding MinWidth}"
MinHeight="{TemplateBinding MinHeight}" >
<Grid x:Name="DialogSpace" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ScrollViewer x:Name="ContentScrollViewer"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Disabled"
ZoomMode="Disabled"
Margin="{ThemeResource ContentDialogContentScrollViewerMargin}"
IsTabStop="False">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ContentControl x:Name="Title"
Margin="{ThemeResource ContentDialogTitleMargin}"
Content="{TemplateBinding Title}"
ContentTemplate="{TemplateBinding TitleTemplate}"
FontSize="20"
FontFamily="XamlAutoFontFamily"
FontWeight="Normal"
Foreground="{TemplateBinding Foreground}"
HorizontalAlignment="Left"
VerticalAlignment="Top"
IsTabStop="False"
MaxHeight="{ThemeResource ContentDialogTitleMaxHeight}" >
<ContentControl.Template>
<ControlTemplate TargetType="ContentControl">
<ContentPresenter
Content="{TemplateBinding Content}"
MaxLines="2"
TextWrapping="Wrap"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="{TemplateBinding Padding}"
ContentTransitions="{TemplateBinding ContentTransitions}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</ControlTemplate>
</ContentControl.Template>
</ContentControl>
<ContentPresenter x:Name="Content"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
FontSize="{ThemeResource ControlContentThemeFontSize}"
FontFamily="{ThemeResource ContentControlThemeFontFamily}"
Margin="{ThemeResource ContentDialogContentMargin}"
Foreground="{TemplateBinding Foreground}"
Grid.Row="1"
TextWrapping="Wrap" />
</Grid>
</ScrollViewer>
<Grid x:Name="CommandSpace" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border x:Name="Button1Host"
Margin="{ThemeResource ContentDialogButton1HostMargin}"
MinWidth="{ThemeResource ContentDialogButtonMinWidth}"
MaxWidth="{ThemeResource ContentDialogButtonMaxWidth}"
Height="{ThemeResource ContentDialogButtonHeight}"
HorizontalAlignment="Stretch" />
<Border x:Name="Button2Host"
Margin="{ThemeResource ContentDialogButton2HostMargin}"
MinWidth="{ThemeResource ContentDialogButtonMinWidth}"
MaxWidth="{ThemeResource ContentDialogButtonMaxWidth}"
Height="{ThemeResource ContentDialogButtonHeight}"
Grid.Column="1"
HorizontalAlignment="Stretch" />
</Grid>
</Grid>
</Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
If you want to have full control over the content, visual, behaviour or animation for the Dialog, create a custom UserControl which implement events and elements.
Another solution is that you can firstly remove default buttons and event handlers:
As you can see there is a Grid control where you can place different controls. You can add your buttons here and also customize their design.
<ContentDialog
x:Class="SampleApp.Windows10.SampleContentDialog"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Grandler.Windows10"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="TITLE">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button x:Name="AcceptButton" Grid.Column="0" Content="Accept"/>
<Button x:Name="CancelButton" Grid.Column="1" Content="Ignore"/>
</Grid>
</ContentDialog>

Align radio button to right side of popup

I have a popup for select colors.
<Popup x:Name="colorSelectorPopup">
<Border BorderThickness="1" BorderBrush="Gray">
<StackPanel HorizontalAlignment="Stretch">
<Grid x:Name="colorSelectorTitle" Height="40" VerticalAlignment="Top">
<TextBlock x:Name="popupTitle" TextTrimming="CharacterEllipsis" FontSize="16" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="8"/>
</Grid>
<ListView x:Name="colorList" HorizontalAlignment="Stretch" Background="White">
<ListView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" x:Name="tbColor" Text="{Binding ColorName}" Foreground="{Binding ForegroundColor}" HorizontalAlignment="Left"/>
<RadioButton Grid.Column="1" x:Name="radioColor" GroupName="colorRadio" Tag="{Binding SelectionColor}" MinWidth="32" Checked="radioColor_Checked"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</Border>
</Popup>
I want the radio button to show on the right side. But It looks as in the image.
How can I move the radio button to the right side?
I got the answer from here.
By Adding the following xaml I got the desired output.
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
This works for me. I have updated my xaml as follows
<Popup x:Name="colorSelectorPopup">
<Border BorderThickness="1" BorderBrush="Gray">
<StackPanel HorizontalAlignment="Stretch">
<Grid x:Name="colorSelectorTitle" Height="40" VerticalAlignment="Top">
<TextBlock x:Name="popupTitle" TextTrimming="CharacterEllipsis" FontSize="16" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="8"/>
</Grid>
<ListView x:Name="colorList" HorizontalAlignment="Stretch" Background="White">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" x:Name="tbColor" Text="{Binding ColorName}" Foreground="{Binding ForegroundColor}" HorizontalAlignment="Left"/>
<RadioButton Grid.Column="1" x:Name="radioColor" GroupName="colorRadio" Tag="{Binding SelectionColor}" MinWidth="32" Checked="radioColor_Checked"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</Border>
</Popup>
Since the grid only contains 2 columns and the 2nd column only contains the radio button I would set the column definition to a fixed with for the 2nd one instead of auto. see if that works.
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>

stretch TextBlocks inside a Grid in a universal App

I am having a problem in fixing 3 TextBlocks inside a Grid,in a metro App,I used this link enter link description here
but I get always a problem in stretching my TextBlocks inside the Grid
this is my code:
<ListView Grid.Row="1" Grid.ColumnSpan="2" HorizontalAlignment="Stretch">
<ListView.ItemTemplate >
<DataTemplate>
<Grid Margin="0" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Margin="0">
<Image Grid.Column="0" Source="images/img1.png" Margin="0,5" Stretch="Fill" Width="80"/>
</Border>
<Grid Grid.Column="1" Margin="5" HorizontalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock x:Name="text1" Text="test1" Grid.Row="0" Margin="5" HorizontalAlignment="Stretch" ></TextBlock>
<TextBlock x:Name="text2" Text="test2" Grid.Row="1" HorizontalAlignment="Stretch" ></TextBlock>
<TextBlock x:Name="text3" Text="test3" Grid.Row="2" HorizontalAlignment="Stretch" ></TextBlock>
</Grid>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
so please I need your help,to fix that
thanks for help
You have to edit style of ListViewItem and set HorizontalAlignment to Stretch
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalAlignment"
Value="Stretch" />
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>

How to customize the DataGrid headers in Silverlight?

I am just started learning silverlight and it's controls. I am pretty much sure we can create this kind of headers for datagrid using silverlight too like other technologies like JQuery and Flex. But i am not sure how to do it. Can somebody suggest some examples or sites where i can learn to customize the headers like this?
_______________________________________________________
| Name | Age | Marks |
|_____________________| |___________________|
|First Name| Last Name| |Sub1 | Sub2 |Sub3 |
|_____________________|___________|___________________|
Try This Code In Xaml:
<UserControl x:Class="SilverlightApplication16.MainPage"
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:dataprimitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<UserControl.Resources>
<Style x:Key="DataGridBaseHeaderStyle"
TargetType="dataprimitives:DataGridColumnHeader">
<Setter Property="FontWeight" Value="Bold" />
</Style>
<Style x:Key="NameHeaderStyle" TargetType="dataprimitives:DataGridColumnHeader"
BasedOn="{StaticResource DataGridBaseHeaderStyle}">
<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="8"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid x:Name="Root">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Rectangle x:Name="BackgroundRectangle" Fill="#FF1F3B53" Stretch="Fill" Grid.ColumnSpan="2"/>
<Rectangle x:Name="BackgroundGradient" Stretch="Fill" Grid.ColumnSpan="2">
<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}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="1" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="1" />
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<!-- Row 0 -->
<ContentPresenter Content="Name"
VerticalAlignment="Center" HorizontalAlignment="Center" Grid.ColumnSpan="3" />
<!-- Row 1 -->
<Rectangle Fill="#FFC9CACA" VerticalAlignment="Stretch" Height="1" Visibility="Visible" Grid.Row="1" Grid.ColumnSpan="3" />
<!-- Row 2 -->
<ContentPresenter Content="First Name " Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Center" />
<Rectangle Fill="#FFC9CACA" VerticalAlignment="Stretch" Width="1" Visibility="Visible" Grid.Row="2" Grid.Column="1" />
<ContentPresenter Content="Last Name" Grid.Row="2" Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
<Rectangle x:Name="VerticalSeparator" Fill="#FFC9CACA"
VerticalAlignment="Stretch" Width="1" Visibility="Visible"
Grid.Row="1" Grid.Column="1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="MarkHeaderStyle" TargetType="dataprimitives:DataGridColumnHeader" BasedOn="{StaticResource DataGridBaseHeaderStyle}">
<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="8"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid x:Name="Root">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Rectangle x:Name="BackgroundRectangle" Fill="#FF1F3B53" Stretch="Fill" Grid.ColumnSpan="2"/>
<Rectangle x:Name="BackgroundGradient" Stretch="Fill" Grid.ColumnSpan="2">
<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}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" >
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="1" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="1" />
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="1" />
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<!-- Row 0 -->
<ContentPresenter Content="Marks" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.ColumnSpan="6" />
<!-- Row 1 -->
<Rectangle Fill="#FFC9CACA" VerticalAlignment="Stretch" Height="1" Visibility="Visible" Grid.Row="1" Grid.ColumnSpan="5" />
<!-- Row 2 -->
<ContentPresenter Content="Sub1" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Center" />
<Rectangle Fill="#FFC9CACA" VerticalAlignment="Stretch" Width="1" Visibility="Visible" Grid.Row="2" Grid.Column="1" />
<ContentPresenter Content="Sub2" Grid.Row="2" Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center" />
<Rectangle Fill="#FFC9CACA" VerticalAlignment="Stretch" Width="1" Visibility="Visible" Grid.Row="2" Grid.Column="3" />
<ContentPresenter Content="Sub3" Grid.Row="2" Grid.Column="4" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
<Rectangle x:Name="VerticalSeparator" Fill="#FFC9CACA"
VerticalAlignment="Stretch" Width="1" Visibility="Visible"
Grid.Row="1" Grid.Column="1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<sdk:DataGrid AutoGenerateColumns="False" Height="100" HorizontalAlignment="Left" Margin="12,101,0,0" Name="dataGrid1" VerticalAlignment="Top" Width="598">
<sdk:DataGrid.Columns>
<sdk:DataGridTemplateColumn Header="Tue" HeaderStyle="{StaticResource NameHeaderStyle}">
<sdk:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBox Text="{Binding FistName}"/>
<Rectangle Fill="#FFC9CACA" VerticalAlignment="Stretch" Width="1" />
<TextBox Text="{Binding LastName}" Margin="2,0,0,0"/>
</StackPanel>
</DataTemplate>
</sdk:DataGridTemplateColumn.CellTemplate>
</sdk:DataGridTemplateColumn>
<sdk:DataGridTemplateColumn HeaderStyle="{StaticResource DataGridBaseHeaderStyle}" CanUserReorder="True" Header="Age" CanUserResize="True" CanUserSort="True" Width="Auto" />
<sdk:DataGridTemplateColumn Header="Tue" HeaderStyle="{StaticResource MarkHeaderStyle}">
<sdk:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBox Text="{Binding Subject1}"/>
<Rectangle Fill="#FFC9CACA" VerticalAlignment="Stretch" Width="1" />
<TextBox Text="{Binding Subject2}" Margin="2,0,0,0"/>
<Rectangle Fill="#FFC9CACA" VerticalAlignment="Stretch" Width="1" />
<TextBox Text="{Binding Subject3}" Margin="2,0,0,0"/>
</StackPanel>
</DataTemplate>
</sdk:DataGridTemplateColumn.CellTemplate>
</sdk:DataGridTemplateColumn>
</sdk:DataGrid.Columns>
</sdk:DataGrid>
</Grid>

Resources