We Keep Coding

C#/XAML/WPF Simple node editor

I am working on a simple node editor, something like this (for me it is a model program). I have two windows in XAML with different solutions. In the first case (still not completed, but for demonstration), I am using templates inside grid:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Grafika"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="Grafika.MainWindow"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<DataTemplate DataType="{x:Type local:Node}">
<Thumb Width="{Binding Width}" Height="{Binding Height}" DragDelta="Thumb_DragDelta">
<Thumb.Template>
<ControlTemplate>
<Border Background="CadetBlue"/>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</DataTemplate>
<DataTemplate DataType="{x:Type local:Connector}">
<Line Name="Connection" Stroke="Red" StrokeThickness="3" X1="{Binding StartX}" Y1="{Binding StartY}" X2="{Binding StopX}" Y2="{Binding StopY}"/>
</DataTemplate>
</Window.Resources>
<Window.DataContext>
<local:ViewModel/>
</Window.DataContext>
<Grid x:Name="mrizka">
<Border x:Name="obrys" Width="200" Height="150" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Aqua" BorderBrush="Red" d:IsHidden="True"/>
<Path Data="M 25,25 H 250 V 250" Stroke="Black" d:IsHidden="True"/>
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
<Border>
<Border.Background>
<VisualBrush TileMode="Tile" Viewport="0,0,50,50" ViewportUnits="Absolute" Viewbox="0,0,50,50" ViewboxUnits="Absolute">
<VisualBrush.Visual>
<Rectangle Stroke="Black" StrokeThickness="1" Height="50" Width="50"/>
</VisualBrush.Visual>
</VisualBrush>
</Border.Background>
</Border>
</ScrollViewer>
<ItemsControl ItemsSource="{Binding NodeList}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Canvas.Left" Value="{Binding X}"/>
<Setter Property="Canvas.Top" Value="{Binding Y}"/>
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
<ItemsControl ItemsSource="{Binding Connections}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>
</Window>
with output
In second case, I am taking templates into ListBox (with combination of CompositeCollection) and I thought it would work since the previous case worked correctly. However, when I launch the program nothing shows.
Code:
<Window x:Class="Grafika.Test1"
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:Grafika"
mc:Ignorable="d"
Title="Test1" Height="600" Width="800" x:Name="view" >
<Window.Resources>
<Style TargetType="Control" x:Key="EmptyStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Window.DataContext>
<local:ViewModel/>
</Window.DataContext>
<Grid Margin="10">
<Grid.Resources>
<CompositeCollection x:Key="Col">
<CollectionContainer Collection="{Binding DataContext.NodeList, Source={x:Reference view}}"/>
<CollectionContainer Collection="{Binding DataContext.Connections, Source={x:Reference view}}"/>
</CompositeCollection>
<!-- -->
<DataTemplate DataType="{x:Type local:Node}">
<Thumb DragDelta="Thumb_DragDelta">
<Thumb.Template>
<ControlTemplate TargetType="Thumb">
<Canvas Margin="-10,-10,10,10">
<Border Height="{Binding Height}" Width="{Binding Width}" x:Name="rect" Background="Red" />
</Canvas>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</DataTemplate>
<!-- -->
<!-- -->
<DataTemplate DataType="{x:Type local:Connector}">
<Line Stroke="Blue" StrokeThickness="3" X1="{Binding Start.X}" Y1="{Binding Start.Y}" X2="{Binding Stop.X}" Y2="{Binding Stop.Y}" x:Name="Con"/>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Stop}" Value="{x:Null}">
<Setter TargetName="Con" Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
<!-- -->
</Grid.Resources>
<ListBox>
<ListBox.Template>
<ControlTemplate>
<Border>
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1" Opacity=".3">
<GradientStop Color="Azure" Offset="0"/>
<GradientStop Color="Yellow" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<ScrollViewer VerticalScrollBarVisibility ="Auto" HorizontalScrollBarVisibility="Auto">
<Border>
<Border.Background>
<VisualBrush TileMode="Tile" Viewbox="0,0,50,50" Viewport="0,0,50,50" ViewboxUnits="Absolute" ViewportUnits="Absolute">
<VisualBrush.Visual>
<Rectangle Stroke="DarkGray" StrokeThickness="0.5" Height="50" Width="50"/>
</VisualBrush.Visual>
</VisualBrush>
</Border.Background>
</Border>
</ScrollViewer>
</Border>
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemsSource>
<StaticResource ResourceKey="Col"/>
</ListBox.ItemsSource>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<Canvas IsItemsHost="True" Background="Cornsilk" Height="{Binding AreaHeight}" Width="{Binding AreaWidth}"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Canvas.Left" Value="{Binding X}"/>
<Setter Property="Canvas.Top" Value="{Binding Y}"/>
<Setter Property="FocusVisualStyle" Value="{StaticResource EmptyStyle}"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
</Grid>
</Window>
My question is simple: Why is nothing displayed in the second case? Is there anything wrong in XAML or potentionally some binding missing? I don't think that code behind is at fault, since the first case is working.

You are setting a new Template for the ListBox without a panel for the items.
If you change the its Template and you don't add a panel that will contain the items, setting ListBox.ItemsPanel won't have any effect.
I've modified the ListBox Template according to your specification, adding a Canvas as container for the items.
<ListBox ItemsSource="{StaticResource Col}">
<ListBox.Template>
<ControlTemplate>
<Border>
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1" Opacity=".3">
<GradientStop Color="Azure" Offset="0"/>
<GradientStop Color="Yellow" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<ScrollViewer VerticalScrollBarVisibility ="Auto" HorizontalScrollBarVisibility="Auto">
<Border>
<Border.Background>
<VisualBrush TileMode="Tile" Viewbox="0,0,50,50" Viewport="0,0,50,50" ViewboxUnits="Absolute" ViewportUnits="Absolute">
<VisualBrush.Visual>
<Rectangle Stroke="DarkGray" StrokeThickness="0.5" Height="50" Width="50"/>
</VisualBrush.Visual>
</VisualBrush>
</Border.Background>
<Canvas IsItemsHost="True" Background="Cornsilk" Height="{Binding AreaHeight}" Width="{Binding AreaWidth}" />
</Border>
</ScrollViewer>
</Border>
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Canvas.Left" Value="{Binding X}"/>
<Setter Property="Canvas.Top" Value="{Binding Y}"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>

Datepicker style dont work

I've written the following style
<Window x:Class="Wpf_ViewModelbased1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
DataContext="{Binding Source={StaticResource ViewModelLocator}, Path=MainVm}"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<!--Datepicker-->
<Style TargetType="{x:Type DatePicker}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DatePicker}">
<Border BorderBrush="Black" BorderThickness="1">
<Grid x:Name="PART_Root" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<DatePickerTextBox x:Name="PART_TextBox" HorizontalContentAlignment="Center" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="Center" IsReadOnly="True" Grid.Row="1"/>
<Button x:Name="PART_Button" Grid.Row="0">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Image x:Name="buttonImage" Height="35" Width="35" HorizontalAlignment="center" Source="C:\Users\00027887\Documents\Visual Studio 2015\Projects\RelWA\RelWA\Resources\datepickerincon.png"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
<Popup x:Name="PART_Popup" StaysOpen="False" AllowsTransparency="True">
<CalendarItem x:Name="PART_CalendarItem">
<CalendarItem.Style>
<Style TargetType="{x:Type CalendarItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CalendarItem}">
<Calendar SelectedDate="{x:Static sys:DateTime.Today}">
<Calendar.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Turquoise" Offset="0.7"/>
<GradientStop Color="White"/>
<GradientStop Color="green" Offset="1"/>
</LinearGradientBrush>
</Calendar.Background>
</Calendar>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</CalendarItem.Style>
</CalendarItem>
</Popup>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<DatePicker Width="100" Height="75"/>
</Grid>
</Window>
In desinger window everything looks like expected:
But when i debug the application:
I don't have a clue why.

When a DatePicker is visualized, its OnApplyTemplate method is called. If you spy that method you will find this piece of code:
this._popUp = (base.GetTemplateChild("PART_Popup") as Popup);
if (this._popUp != null)
{
this._popUp.AddHandler(UIElement.PreviewMouseLeftButtonDownEvent, new MouseButtonEventHandler(this.PopUp_PreviewMouseLeftButtonDown));
this._popUp.Opened += new EventHandler(this.PopUp_Opened);
this._popUp.Closed += new EventHandler(this.PopUp_Closed);
this._popUp.Child = this._calendar;
if (this.IsDropDownOpen)
{
this._popUp.IsOpen = true;
}
}
As you can see, the Child property of your "PART_Popup" is always overwritten with a calendar control which is a private field of the DatePicker itself. So it is unuseful to specify a child for the Popup in your ControlTemplate. Just leave it empty, i.e. with no child.
For setting a calender style, instead, just use the CalendarStyle property:
<DatePicker Width="100" Height="75">
<DatePicker.CalendarStyle>
<Style TargetType="{x:Type Calendar}">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Turquoise" Offset="0.7"/>
<GradientStop Color="White"/>
<GradientStop Color="green" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
</DatePicker.CalendarStyle>
</DatePicker>
I hope it can help you with your issue.

WPFToolkit Override ColumnDataPoint Template

I'm using the WPF Tookit (http://wpf.codeplex.com/) and am using the chart controls to make a column chart using ColumnSeries. I'm trying to override the default ColumnDataPoint style however when ever I run the application the columns no longer render and I see a "System.NotSupportedException" and "System.Xaml.XamlObjectWriterException" in the debug output log. Am I doing something wrong or is the issue with the outdated WPF Toolkit? Thanks.
Includes:
xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
The Chart:
<chartingToolkit:Chart Name="columnChart" Title="Results" >
<chartingToolkit:ColumnSeries DataPointStyle="{DynamicResource ModernColumnStyle}" DependentValuePath="Count" IndependentValuePath="Method" ItemsSource="{Binding Results}" />
</chartingToolkit:Chart>
Resource with Style:
Only change I made from the original source was that I removed the VisualStateManager stuff
<Grid.Resources>
<Style TargetType="chartingToolkit:ColumnDataPoint" x:Key="ModernColumnStyle" BasedOn="{StaticResource {x:Type chartingToolkit:ColumnDataPoint}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="chartingToolkit:ColumnDataPoint">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Opacity="0" x:Name="Root">
<Grid Background="{TemplateBinding Background}">
<Rectangle>
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color="#77ffffff" Offset="0" />
<GradientStop Color="#00ffffff" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Border BorderBrush="#ccffffff" BorderThickness="1">
<Border BorderBrush="#77ffffff" BorderThickness="1" />
</Border>
</Grid>
<ToolTipService.ToolTip>
<ContentControl Content="{TemplateBinding FormattedDependentValue}" />
</ToolTipService.ToolTip>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>

Maybe you should change "DynamicResource" to "StaticResource" like this:
<chartingToolkit:ColumnSeries DataPointStyle="{StaticResource ModernColumnStyle}" DependentValuePath="Count" IndependentValuePath="Method" ItemsSource="{Binding Results}" />

Treeview Item Background overriding Highlight Brush

I'm trying to setup a treeview control with a rounded border and a background for every treeview item. However while I have also overridden the x:Static SystemColors.HighlightBrushKey with a linear gradient.
However while doing this I noticed that if I set a background to the treeview item, my highlightbrushkey does not get applied anymore. Can you please tell me how to achieve this?
Below is my code:
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
<LinearGradientBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFEF" Offset="0"/>
<GradientStop Color="#FFF7D3" Offset="0.2580"/>
<GradientStop Color="#FFEFB2" Offset="0.3870"/>
<GradientStop Color="#FFEFB2" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" x:Key="TreeViewItemBackground">
<GradientStop Color="#FFFAFFFF" Offset="0"/>
<GradientStop Color="#FFFAFAFA" Offset="0.2580"/>
<GradientStop Color="#FFF7F7F7" Offset="0.3870"/>
<GradientStop Color="#FFF4F4F4" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="{x:Static SystemColors.ControlBrushKey}" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF8F8F8" Offset="0"/>
<GradientStop Color="#FFE5E5E5" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlTextBrushKey}" Color="Black" />
<TreeView x:Name="GroupView" ItemsSource="{Binding}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" MinWidth="150" Margin="3">
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type GridSplitterTextTrim:Group}" ItemsSource="{Binding Items}">
<Border BorderBrush="#FFEAEEE8" BorderThickness="1" CornerRadius="3" Margin="-1" Background="{StaticResource TreeViewItemBackground}" >
<StackPanel Orientation="Horizontal" Background="Transparent" Margin="1">
<TextBlock Text="{Binding Path=Name}" TextTrimming="WordEllipsis" Margin="3" MaxWidth="150" Width="{Binding ActualWidth, ElementName=GroupView, Converter={StaticResource TreeViewWidthConverter}}" ToolTip="{Binding Name}" />
</StackPanel>
</Border>
</HierarchicalDataTemplate>
<DataTemplate DataType="{x:Type GridSplitterTextTrim:Entry}" >
<Border BorderBrush="#C0C0C0" BorderThickness="1" CornerRadius="3" Margin="-1">
<StackPanel Orientation="Horizontal" Background="Transparent" Margin="1">
<TextBlock Text="{Binding Path=Name}" TextTrimming="WordEllipsis" Margin="3" MaxWidth="132" Width="{Binding ActualWidth, ElementName=GroupView, Converter={StaticResource TreeViewWidthConverter}}" ToolTip="{Binding Name}" />
</StackPanel>
</Border>
</DataTemplate>
</TreeView.Resources>
<TreeView.ItemContainerStyle>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Margin" Value="2"/>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<!-- <Setter Property="BorderBrush" Value="#adc6e5"/>-->
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True"/>
<Condition Property="IsSelectionActive" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="BorderBrush" Value="LightGray"/>
</MultiTrigger>
</Style.Triggers>
<Style.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="3"/>
</Style>
</Style.Resources>
</Style>
</TreeView.ItemContainerStyle>
</TreeView>
</Page.Resources>
</Page>
Couple of things to note:
I use a converter to set the width of the textblock. This is to achieve the text trimming.
For the sake of this post, I have set one of my data templates without a background color and it just works fine with the highlighting, where in when I set the backgound in the first template it does't highlight with the highlight brush.
Thanks in advance,
-Mike

You're DataTemplate's background is drawing on top of the container's selection. This is why it is hiding the selection color. You could add a DataTrigger to your DataTemplate to clear the background when the item is selected:
<DataTemplate>
<Border x:Name="bg" Background="Red">
...
</Border>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType={x:Type TreeViewItem}}}"
Value="True">
<Setter TargetName="bg" Property="Background" Value="{x:Null}" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>

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.