We Keep Coding

How do I automatically resize the content in a grid so that it fits on al resolutions

I was submitting this piece of XAML code (a simon game) for a class project, and the Windows couldn't resize to a smaller resolution, so I was wondering if you could help me, I've tried to use *s and autos in my Grid.Columns and Rows but it only seeems to resize the content vertically, not horizontally.
I'm quite new to WPF so if anyone can help me I would appreciate it.
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:local="clr-namespace:SimonWPF"
mc:Ignorable="d"
Title="Simon" Height="1080" Width="1920"
SizeToContent="WidthAndHeight">
<StackPanel HorizontalAlignment="Center" Background="White"
>
<!--STYLING-->
<StackPanel.Resources>
<Style TargetType="TextBlock" x:Key="HeadingStyle">
<Setter Property="FontFamily" Value="Nexa Demo"/>
<Setter Property="FontSize" Value="26"/>
<Setter Property="Margin" Value="10,40"/>
</Style>
<Style TargetType="TextBlock" x:Key="SubheadingStyle">
<Setter Property="FontFamily" Value="Nexa Demo"/>
<Setter Property="FontSize" Value="56"/>
<Setter Property="Margin" Value="10,-50,8,8"/>
</Style>
</StackPanel.Resources>
<!--STYLING-->
<TextBlock Style="{StaticResource SubheadingStyle}" Name="SimonStatus"
Text="WATCH"
HorizontalAlignment="Left"
Margin="280,20"/>
<!--HEADING-->
<Grid Width="777" Height="777">
<!--COLUMN DEFINITIONS-->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="350*"/>
<ColumnDefinition Width="70*"/>
<ColumnDefinition Width="350*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="350*"/>
<RowDefinition Height="70*"/>
<RowDefinition Height="350*"/>
</Grid.RowDefinitions>
<!--COLUMN DEFINITIONS-->
<!--STYLING-->
<Grid.Resources>
<Style TargetType="Rectangle">
<Setter Property="Fill">
<Setter.Value>
<RadialGradientBrush>
<RadialGradientBrush.GradientOrigin>0.5,0.5</RadialGradientBrush.GradientOrigin>
<RadialGradientBrush.Center>0.5,0.5</RadialGradientBrush.Center>
<RadialGradientBrush.RadiusX>0.5</RadialGradientBrush.RadiusX>
<RadialGradientBrush.RadiusY>0.5</RadialGradientBrush.RadiusY>
<RadialGradientBrush.Opacity>0</RadialGradientBrush.Opacity>
<GradientStop>
<GradientStop.Color>White</GradientStop.Color>
<GradientStop.Offset>0</GradientStop.Offset>
</GradientStop>
<GradientStop>
<GradientStop.Color>Blue</GradientStop.Color>
<GradientStop.Offset>1.9</GradientStop.Offset>
</GradientStop>
</RadialGradientBrush>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<!--STYLING-->
<!--GRADIENT SECTION-->
<Rectangle Grid.Column="2" Grid.Row="0"
Fill="Blue"
RadiusX="0,100"
RadiusY="0,55"/>
<Rectangle Grid.Column="2" Grid.Row="0"
Name="BlueBlock"
RadiusX="0,100"
RadiusY="0,55">
<Rectangle.Fill>
<RadialGradientBrush
x:Name="BlueBlockGradient"
GradientOrigin="0.5,0.5"
Center="0.5,0.5"
RadiusX="0.5"
RadiusY="0.5"
Opacity="0">
<GradientStop Color="White" Offset="0"
x:Name="WhiteStop4"/>
<GradientStop Color="Blue" Offset="1.9"
x:Name="BlueStop"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!--GRADIENT SECTION-->
<Rectangle Grid.Column="0" Grid.Row="2"
Fill="Orange"
RadiusX="0,100"
RadiusY="0,55"/>
<Rectangle Grid.Column="0" Grid.Row="2"
Name="OrangeBlock"
RadiusX="0,100"
RadiusY="0,55">
<Rectangle.Fill>
<RadialGradientBrush
x:Name="OrangeBlockGradient"
GradientOrigin="0.5,0.5"
Center="0.5,0.5"
RadiusX="0.5"
RadiusY="0.5"
Opacity="0">
<GradientStop Color="White" Offset="0"
x:Name="WhiteStop3"/>
<GradientStop Color="Orange" Offset="1.9"
x:Name="OrangeStop"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!--GRADIENT SECTION-->
<Rectangle Grid.Column="2" Grid.Row="2"
Fill="Green"
RadiusX="0,100"
RadiusY="0,55"/>
<Rectangle Grid.Column="2" Grid.Row="2"
Name="GreenBlock"
RadiusX="0,100"
RadiusY="0,55">
<Rectangle.Fill>
<RadialGradientBrush
x:Name="GreenBlockGradient"
GradientOrigin="0.5,0.5"
Center="0.5,0.5"
RadiusX="0.5"
RadiusY="0.5"
Opacity="0">
<GradientStop Color="White" Offset="0"
x:Name="WhiteStop2"/>
<GradientStop Color="Green" Offset="1.9"
x:Name="GreenStop"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!--GRADIENT SECTION-->
<Rectangle Grid.Column="0" Grid.Row="0"
Fill="Red"
RadiusX="0,100"
RadiusY="0,55"/>
<Rectangle Grid.Column="0" Grid.Row="0"
Name="RedBlock"
RadiusX="0,100"
RadiusY="0,55">
<Rectangle.Fill>
<RadialGradientBrush
x:Name="RedBlockGradient"
GradientOrigin="0.5,0.5"
Center="0.5,0.5"
RadiusX="0.5"
RadiusY="0.5"
Opacity="0">
<GradientStop Color="White" Offset="0"
x:Name="WhiteStop"/>
<GradientStop Color="Red" Offset="1.9"
x:Name="RedStop"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Grid.Column="1" Grid.Row="1" Fill="LightBlue"
RadiusX="100"
RadiusY="100"
Name="ScoreRectangle"/>
<TextBlock Text="0" Grid.Row="1" Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="50"
FontFamily="Nexa Demo"
Name="Score"
Foreground="White"/>
</Grid>
<Button Content="PLAY" FontFamily="Nexa Demo"
Width="200" Height="90" FontSize="50
" BorderBrush="LightBlue"
Margin="290,30,950,0"
Name="PlayButton"
Background="Transparent"
BorderThickness="9"
/>
</StackPanel>
</Window>

Put your outer StackPanel inside a Viewbox:
<Viewbox>
<StackPanel HorizontalAlignment="Center" Background="White" ...>
... etc ...
</StackPanel>
</Viewbox>

Blurry Adorner WPF Xaml

I cannot for the life of me figure this out, using the same control template I get a blurry Adorner on one Element in my panel:
Control Template:
<ControlTemplate x:Key="validationErrorTemplateBubble" >
<DockPanel >
<Grid DockPanel.Dock="Bottom" Margin="10,0,0,0" >
<Grid.Effect>
<DropShadowEffect ShadowDepth="2" Direction="315" />
</Grid.Effect>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border Grid.Row="1" BorderBrush="Gray" BorderThickness="1" CornerRadius="5" Margin="0,-1.6,0,0">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFE7E8F1" Offset="1"/>
<GradientStop Color="White"/>
<GradientStop Color="#FFF3F4F6" Offset="0.472"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<WrapPanel VerticalAlignment="Center" Margin="5,5,10,5">
<Image Source="/Sesam;component/Modules/Images/wrongsmall.png" Height="15" Width="15" />
<TextBlock Foreground="Red" FontSize="12" Margin="5,0,0,0" Text="{Binding ElementName=ErrorAdorner, Path=AdornedElement.(Validation.Errors).CurrentItem.ErrorContent}" />
</WrapPanel>
<ContentPresenter Margin="5" Grid.Column="1" Grid.Row="1"/>
</Grid>
</Border>
<Path Data="M306.375,133.125L306.375,100.875L335.75,133.25" Stroke="Gray" Height="15" Fill="White" StrokeThickness="1" Stretch="Uniform" Margin="10,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center"/>
</Grid>
<AdornedElementPlaceholder x:Name="ErrorAdorner" />
</DockPanel>
Non-Blury Text Box Code:
<TextBox BorderThickness="0" VerticalAlignment="Center" Width="150" Padding="3" Margin="8,0,0,0" Foreground="{StaticResource myDarkBlue}" Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListView}}, Path=DataContext.encTypeValidation, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}" Validation.ErrorTemplate="{StaticResource validationErrorTemplateBubble}" HorizontalAlignment="Left" >
<TextBox.Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Visibility" Value="Collapsed" />
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListViewItem}}, Path=IsSelected}" Value="True" />
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListView}}, Path=DataContext.editClicked}" Value="True" />
</MultiDataTrigger.Conditions>
<Setter Property="Visibility" Value="Visible" />
</MultiDataTrigger>
</Style.Triggers>
</Style>
</TextBox.Style>
Blurry TextBox Code:
<Grid>
<WrapPanel>
<TextBox x:Name="tbox" Text="{Binding encTypeValidation, Mode=OneWayToSource, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}" Foreground="{StaticResource myTextBoxColor}" Validation.ErrorTemplate="{StaticResource validationErrorTemplateBubble}" PreviewMouseDown="tbox_PreviewMouseDown" Width="200" >
<TextBox.InputBindings>
<MouseBinding Gesture="LeftClick" Command="{Binding addBoxClicked}" />
</TextBox.InputBindings>
</TextBox>
</WrapPanel>
</Grid>
Something about the way it renders, the first (non blury) is within a "ListViewItem" Control Template, the other is a userControl..
Any ideas?
FIXED
Fixed by adding UseLayoutRounding="True" to parent Control ie: ContentControl!
Thank you Aybe!
<Grid Grid.Row="2" Background="{StaticResource myLightGrey}" >
<Border BorderBrush="{StaticResource myLightGrey}" BorderThickness="0,1,1,0">
<ContentControl x:Name="AddPanel" VerticalAlignment="Center" HorizontalAlignment="Center" UseLayoutRounding="True"/>
</Border>
</Grid>

Adding UseLayoutRounding="True" to the parent container control solves the rendering issue.

Dotted Horizontal Grid Lines in WPF DataGrid

Is there a way to have a dotted line on the horizontal grid lines in WPF datagrid? I have googled everywhere and cannot seem to find a concrete way of doing so. One solution that may solve this is setting the Datagrid.RowStyle. I have tried this and it causes error. I have binded my datagrid to a datatable. 2 columns are just text and the 3rd one is an image column. For this columns, I used DataGridTemplateColumn. Textblock and Image. I hope you can help me guys...If you want a sample of my code here it is.
<StackPanel>
<dg:DataGrid Name="questionList"
HeadersVisibility="None"
AutoGenerateColumns="False"
Background="White"
Margin="42,32,43,0"
BorderThickness="0"
GridLinesVisibility="Horizontal"
CanUserAddRows="False"
HorizontalGridLinesBrush="#FFCCCCCC"
MaxHeight="549"
Cursor="Hand"
PreviewMouseLeftButtonUp="questionnaireList_PreviewMouseLeftButtonUp">
<dg:DataGrid.CellStyle>
<Style TargetType="{x:Type dg:DataGridCell}">
<Setter Property="BorderThickness" Value="0"/>
</Style>
</dg:DataGrid.CellStyle>
<dg:DataGrid.RowStyle>
<Style TargetType="{x:Type dg:DataGridRow}">
<Setter Property="Background" Value="{Binding MyImage, Converter={x:Static my:StatusColorConverter.instance}}" />
</Style>
</dg:DataGrid.RowStyle>
<dg:DataGrid.Columns>
<dg:DataGridTemplateColumn Width="69*">
<dg:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Margin="12,16,0,17"
FontSize="18"
Foreground="#0891F1"
Text="{Binding Path=Number}"
TextWrapping="Wrap"/>
</DataTemplate>
</dg:DataGridTemplateColumn.CellTemplate>
</dg:DataGridTemplateColumn>
<dg:DataGridTemplateColumn Width="601*">
<dg:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock FontSize="16" Foreground="#666666"
Text="{Binding Path=Desc}"
TextWrapping="Wrap"
TextAlignment="Justify"
Margin="0,16,0,17" />
</DataTemplate>
</dg:DataGridTemplateColumn.CellTemplate>
</dg:DataGridTemplateColumn>
<dg:DataGridTemplateColumn Width="117*">
<dg:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Image Source="{Binding Path=Imgs}"
Stretch="None"
VerticalAlignment="Top"
HorizontalAlignment="Right"
Margin="0,16,18,17" />
</DataTemplate>
</dg:DataGridTemplateColumn.CellTemplate>
</dg:DataGridTemplateColumn>
</dg:DataGrid.Columns>
</dg:DataGrid>
</StackPanel>

The easiest way to do this is to simply use gradient brushes with absolute mapping modes:
<DataGrid ItemsSource="{Binding People}">
<DataGrid.HorizontalGridLinesBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="3,0" MappingMode="Absolute" SpreadMethod="Repeat">
<GradientStop Offset="0" Color="Black"/>
<GradientStop Offset="0.5" Color="Black"/>
<GradientStop Offset="0.5" Color="Transparent"/>
<GradientStop Offset="1" Color="Transparent"/>
</LinearGradientBrush>
</DataGrid.HorizontalGridLinesBrush>
<DataGrid.VerticalGridLinesBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,3" MappingMode="Absolute" SpreadMethod="Repeat">
<GradientStop Offset="0" Color="Black"/>
<GradientStop Offset="0.5" Color="Black"/>
<GradientStop Offset="0.5" Color="Transparent"/>
<GradientStop Offset="1" Color="Transparent"/>
</LinearGradientBrush>
</DataGrid.VerticalGridLinesBrush>
<DataGrid.Columns>
<DataGridTextColumn Header="First Name" Binding="{Binding FirstName}"/>
<DataGridTextColumn Header="Last Name" Binding="{Binding LastName}" />
</DataGrid.Columns>
</DataGrid>
Result:

You can disable the Horizontal Grid Lines which are drawn in code by specifying GridLinesVisibility="Vertical" in the DataGrid. You could then re-template DataGridRow and add the dashed line at the end of each row
Looks like this:
<DataGrid GridLinesVisibility="Vertical">
<DataGrid.RowStyle>
<Style TargetType="DataGridRow">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridRow}">
<Border x:Name="DGR_Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<SelectiveScrollingGrid>
<SelectiveScrollingGrid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</SelectiveScrollingGrid.ColumnDefinitions>
<SelectiveScrollingGrid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</SelectiveScrollingGrid.RowDefinitions>
<DataGridCellsPresenter Grid.Column="1" ItemsPanel="{TemplateBinding ItemsPanel}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<DataGridDetailsPresenter Grid.Column="1" Grid.Row="1" SelectiveScrollingGrid.SelectiveScrollingOrientation="{Binding AreRowDetailsFrozen, ConverterParameter={x:Static SelectiveScrollingOrientation.Vertical}, Converter={x:Static DataGrid.RowDetailsScrollingConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" Visibility="{TemplateBinding DetailsVisibility}"/>
<DataGridRowHeader Grid.RowSpan="2" SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.Row}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
<Path Grid.Row="2" Grid.ColumnSpan="2"
Data="M0,0.5 L1,0.5"
Stretch="Fill" Stroke="Black" StrokeThickness="1"
StrokeDashArray="1.0 2.0"/>
</SelectiveScrollingGrid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGrid.RowStyle>
<!-- ... -->
</DataGrid>
Edit: Here is the Template for the 3.5 DataGrid in the toolkit
<Custom:DataGrid GridLinesVisibility="Vertical">
<Custom:DataGrid.RowStyle>
<Style TargetType="Custom:DataGridRow">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Custom:DataGridRow}">
<Border x:Name="DGR_Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<Custom:SelectiveScrollingGrid>
<Custom:SelectiveScrollingGrid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Custom:SelectiveScrollingGrid.ColumnDefinitions>
<Custom:SelectiveScrollingGrid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Custom:SelectiveScrollingGrid.RowDefinitions>
<Custom:DataGridCellsPresenter Grid.Column="1" ItemsPanel="{TemplateBinding ItemsPanel}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<Custom:DataGridDetailsPresenter Grid.Column="1" Grid.Row="1" Visibility="{TemplateBinding DetailsVisibility}">
<Custom:SelectiveScrollingGrid.SelectiveScrollingOrientation>
<Binding Path="AreRowDetailsFrozen" RelativeSource="{RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type Custom:DataGrid}}">
<Binding.ConverterParameter>
<Custom:SelectiveScrollingOrientation>Vertical</Custom:SelectiveScrollingOrientation>
</Binding.ConverterParameter>
</Binding>
</Custom:SelectiveScrollingGrid.SelectiveScrollingOrientation>
</Custom:DataGridDetailsPresenter>
<Custom:DataGridRowHeader Grid.RowSpan="2" Custom:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
<Custom:DataGridRowHeader.Visibility>
<Binding Path="HeadersVisibility" RelativeSource="{RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type Custom:DataGrid}}">
<Binding.ConverterParameter>
<Custom:DataGridHeadersVisibility>Row</Custom:DataGridHeadersVisibility>
</Binding.ConverterParameter>
</Binding>
</Custom:DataGridRowHeader.Visibility>
</Custom:DataGridRowHeader>
<Path Grid.Row="2" Grid.ColumnSpan="2"
Data="M0,0.5 L1,0.5"
Stretch="Fill" Stroke="Black" StrokeThickness="1"
StrokeDashArray="1.0 2.0"/>
</Custom:SelectiveScrollingGrid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Custom:DataGrid.RowStyle>
<!-- ... -->
</Custom:DataGrid>

WPF Linear Fill

I have found some example code that creates a gradient fill in a WPF rectangle control:
<Rectangle Height="{Binding ElementName=txtName}" Width="{Binding ElementName=txtName}">
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color="Silver" Offset="0.0" />
<GradientStop Color="Black" Offset="0.5" />
<GradientStop Color="white" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
I have some written some code that displays a collection of ListBox's that contain details from MyObject:
<UserControl.Resources>
<DataTemplate x:Key="CustomerTemplate">
<Border BorderThickness="2" BorderBrush="Silver" CornerRadius="5" Padding="1" Height="50">
<Grid x:Name="thisGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" >
<Image Source="C:\MyImage.jpg" Height="50" Width="100" ></Image>
</StackPanel>
<Border Grid.Column="1" Margin="0" Padding="0">
<StackPanel Orientation="Vertical">
<TextBlock Name="txtName" Text="{Binding Name}" Background="Silver" Foreground="Black" FontSize="16" FontWeight="Bold" Height="25"/>
</StackPanel>
</Border>
</Grid>
</Border>
</DataTemplate>
</UserControl.Resources>
<ListBox ItemsSource="{Binding}" ItemTemplate="{StaticResource CustomerTemplate}"
Name="grdList" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" >
</ListBox>
I would like to apply the same stlye of fill that i get with the first example, in each of my ListBox's. I can't quite figure out how to do this. Can anyone help?
Thanks

Have you looked at setting the background fill of the item containers using the ItemContainerStyle property of ListBox?

Since you can change ControlTemplate of your ListBox like in the example here http://msdn.microsoft.com/en-us/library/ms754242(VS.85).aspx, you can write something like this
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
<Style x:Key="{x:Type ListBox}" TargetType="ListBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<Border
Name="Border"
BorderThickness="1"
CornerRadius="20" Style="{DynamicResource DynamicGridBrush}">
<ScrollViewer Margin="0" Focusable="false">
<StackPanel Margin="2" IsItemsHost="True" />
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="Border" x:Key="DynamicGridBrush">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="LightBlue" />
<GradientStop Offset="0.65" Color="LightGreen" />
<GradientStop Offset="1" Color="White" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style></Page.Resources>
<Grid>
<ListBox>
<TextBlock>aaa</TextBlock>
<TextBlock>bbb</TextBlock>
<TextBlock>ccc</TextBlock>
</ListBox>
</Grid>
</Page>
If I understood your question and you would like to apply gradient background to your whole listbox.

How to customize and reuse a DataGridColumnHeader style?

I'm trying to customize the column headers of a DataGrid to show sub-column headers as in the following screenshot:
I've made a style for 2 sub-columns as in the following XAML:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
xmlns:primitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data"
xmlns:sl="clr-namespace:UI" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" x:Class="UI.ColumnHeaderGrid"
mc:Ignorable="d">
<UserControl.Resources>
<Style x:Key="SplitColumnHeaderStyle" TargetType="primitives:DataGridColumnHeader">
<Setter Property="Foreground" Value="#FF000000"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<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="primitives:DataGridColumnHeader">
<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>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="1"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.ColumnSpan="3" Text="Headers" TextAlignment="Center"/>
<Rectangle Grid.Row="1" Grid.ColumnSpan="3" Fill="{TemplateBinding SeparatorBrush}" Height="1"/>
<TextBlock Grid.Row="2" Grid.Column="0" Text="Header 1" TextAlignment="Center"/>
<Rectangle Grid.Row="2" Grid.Column="1" Fill="{TemplateBinding SeparatorBrush}" Width="1"/>
<TextBlock Grid.Row="2" Grid.Column="2" Text="Header 2" TextAlignment="Center"/>
<Path x:Name="SortIcon" Grid.Column="2" Fill="#FF444444" Stretch="Uniform" HorizontalAlignment="Left" Margin="4,0,0,0" VerticalAlignment="Center" Width="8" Opacity="0" RenderTransformOrigin=".5,.5" Data="F1 M -5.215,6.099L 5.215,6.099L 0,0L -5.215,6.099 Z "/>
</Grid>
<Rectangle x:Name="VerticalSeparator" Fill="{TemplateBinding SeparatorBrush}" VerticalAlignment="Stretch" Width="1" Visibility="{TemplateBinding SeparatorVisibility}" Grid.Column="1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<data:DataGrid x:Name="LayoutRoot">
<data:DataGrid.Columns>
<data:DataGridTemplateColumn HeaderStyle="{StaticResource SplitColumnHeaderStyle}">
<data:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" BorderBrush="#FFC9CACA" BorderThickness="0,0,0,0">
<TextBlock Grid.Column="0" Text="{Binding GridData.Column1}"/>
</Border>
<Border Grid.Column="1" BorderBrush="#FFC9CACA" BorderThickness="1,0,0,0">
<TextBlock Grid.Column="0" Text="{Binding GridData.Column2}"/>
</Border>
</Grid>
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>
</data:DataGrid.Columns>
</data:DataGrid>
Now I want to reuse & extend this style to support 2->6 sub-column headers but I don't know if there is a way to do this, like ContentPresenter "overriding":
<Style x:Key="SplitColumnHeaderStyle" TargetType="primitives:DataGridColumnHeader">
<Setter property="Template">
<Setter.Value>
...
<ContentPresenter Content="{TemplateBinding Content}".../>
...
</Setter.Value>
</Setter>
</Style>
<Style x:Key="TwoSubColumnHeaderStyle" BasedOn="SplitColumnHeaderStyle">
<Setter property="Content">
<Setter.Value>
<Grid 2x2.../>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ThreeSubColumnHeaderStyle" BasedOn="SplitColumnHeaderStyle">
<Setter property="Content">
<Setter.Value>
<Grid 2x3.../>
</Setter.Value>
</Setter>
</Style>
Anyway, please help me on these issues:
Given the templates above, how to support more sub-column headers without having to create new template for each?
Assuming that the issue above is solved. How could I attach column names outside the styles?
I see that some parts, properties & visualization rules in the XAML are just copies from the original Silverlight component's style, i.e. BackgroundGradient, BackgroundRectangle, VisualStateManager... They must be there in order to support default behaviors or effects but... does anyone know how to remove them, but keep all the default behaviors/effects?
Please be specific because I'm just getting started with C# & Silverlight.

Here is a good example:
http://weblogs.asp.net/dwahlin/archive/2009/06/11/customizing-silverlight-3-datagrid-headers.aspx