Develop Reference

WPF Toolkit Chart - possible to have Legend in tabular format?

Is it possible to have a ListView to display LegendItems?
Looking at this style, I see that LegendItems are displayed in ItemsPresenter here:
<chartingtoolkit:Chart.LegendStyle>
<Style TargetType="visualizationtoolkit:Legend">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="visualizationtoolkit:Legend">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<visualizationtoolkit:Title Grid.Row="0" x:Name="HeaderContent" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" Style="{TemplateBinding TitleStyle}" />
<ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto" BorderThickness="0" Padding="0" IsTabStop="False">
<ItemsPresenter x:Name="Items" Margin="10,0,10,10">
<!-- Displays legend items -->
</ItemsPresenter>
</ScrollViewer>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</chartingtoolkit:Chart.LegendStyle>
Im tryin go modify chart's LegendItems, to bind more fields to them, and I want them displayed in something like ListView or GridView - to have all fields displayed as a nicely formatted table

Simply replace ItemsPresenter with ListView:
<Window
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:WpfApp25"
xmlns:visualizationToolkit="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"
xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
x:Class="WpfApp25.MainWindow"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style x:Key="LegendStyle1" TargetType="{x:Type visualizationToolkit:Legend}">
<Setter Property="Header" Value="My Custom Legend"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Margin" Value="10,0,0,15"/>
<Setter Property="TitleStyle">
<Setter.Value>
<Style TargetType="{x:Type visualizationToolkit:Title}">
<Setter Property="Margin" Value="0,5,0,10"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
</Style>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type visualizationToolkit:Legend}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<visualizationToolkit:Title x:Name="HeaderContent" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Row="0" Style="{TemplateBinding TitleStyle}"/>
<ScrollViewer BorderThickness="0" IsTabStop="False" Padding="0" Grid.Row="1" VerticalScrollBarVisibility="Auto">
<ListView ItemsSource="{Binding}">
<ListView.View>
<GridView>
<GridViewColumn Header="Col X" DisplayMemberBinding="{Binding Path=X}"></GridViewColumn>
<GridViewColumn Header="Col Y" DisplayMemberBinding="{Binding Path=Y}"></GridViewColumn>
</GridView>
</ListView.View>
</ListView>
</ScrollViewer>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<chartingToolkit:Chart Title="Chart Title" LegendStyle="{StaticResource LegendStyle1}">
<chartingToolkit:Chart.DataContext>
<PointCollection>1,10 2,20 3,30 4,40</PointCollection>
</chartingToolkit:Chart.DataContext>
<chartingToolkit:Chart.Series>
<chartingToolkit:ColumnSeries DependentValuePath="Y"
IndependentValuePath="X"
ItemsSource="{Binding}"/>
</chartingToolkit:Chart.Series>
</chartingToolkit:Chart>
</Grid>

How to add an icon on a rectangle's border corner?

I would like to add an image on the upper-right corner of a rectangle (something that I'll use as a kind of toggle button eventually).
How can I do that?
This is the xaml:
<UserControl x:Class="EmulationScreenControl.RectangleSelectionControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:emulationScreenControl="clr-namespace:EmulationScreenControl"
mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300">
<Grid SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased">
<Border BorderBrush="GhostWhite" BorderThickness="0" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased">
<Rectangle Fill="LightSkyBlue" Opacity="0.2" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased"></Rectangle>
</Border>
</Grid>

Just use a Grid to wrap both the Rectangle and the Image.
<Grid SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased">
<Border BorderBrush="GhostWhite" BorderThickness="0" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased">
<Grid>
<Rectangle Fill="LightSkyBlue" Opacity="0.2" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased">
</Rectangle>
<Image HorizontalAlignment="Right" VerticalAlignment="Top" Width="100" Height="100" Source="http://www.citgroup.in/images/icon/wcf.png"/>
</Grid>
</Border>
</Grid>
Here it is:

The solution I found was by Template creation:
<ControlTemplate x:Key="TopRightTemplate" TargetType="{x:Type local:SizeChrome}">
<Grid SnapsToDevicePixels="True" HorizontalAlignment="Right" VerticalAlignment="Top">
<StackPanel
Margin="-50,-50,-20,5"
Background="White"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Orientation="Horizontal">
<Image Cursor="Hand" ToolTip="Bla"
RenderOptions.EdgeMode="Aliased"
SnapsToDevicePixels="True"
RenderOptions.BitmapScalingMode="NearestNeighbor"
Width="16" Height="16"
MouseLeftButtonUp="ToggleIsMultipleScreensSelection"
>
<Image.Style>
<Style TargetType="{x:Type Image}">
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="true">
<Setter Property="Cursor"
Value="Hand" />
</Trigger>
<DataTrigger Binding="{Binding IsMultipleScreens}"
Value="false">
<Setter Property="Source"
Value="C:\\Users\\liorl\\Desktop\\I1.png" />
<Setter Property="ToolTip"
Value="NotMul" />
</DataTrigger>
<DataTrigger Binding="{Binding IsMultipleScreens}"
Value="true">
<Setter Property="Source"
Value="C:\\Users\\liorl\\Desktop\\I1.png" />
<Setter Property="ToolTip"
Value="Mul" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</StackPanel>
</Grid>
</ControlTemplate>

WPF Progressbar with images and fill effect

I'd like to create custom progressbar style that will display image filling up from bottom.
I've created two images, background:
and foreground:
Idea is to create something like this:
Inside Blend I've created this style:
<Style x:Key="ImageFill" TargetType="{x:Type ProgressBar}">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid x:Name="TemplateRoot" SnapsToDevicePixels="true">
<Image x:Name="PART_Track" Source="Play_Background.png" Margin="1" Stretch="Fill"/>
<Rectangle x:Name="PART_Indicator" Margin="1" HorizontalAlignment="Left" Fill="#FFD6931C">
<Rectangle.OpacityMask>
<RadialGradientBrush>
<GradientStop Color="Black" Offset="0.87"/>
<GradientStop Color="Transparent" Offset="0.87"/>
</RadialGradientBrush>
</Rectangle.OpacityMask>
</Rectangle>
<Image Source="Play_Foreground.png" Margin="1" Stretch="Fill"/>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But when setting value to something like 60 I get this:
I can change OpacitMmask to this:
<RadialGradientBrush Center="106,104" GradientOrigin="60,60" MappingMode="Absolute" RadiusY="97" RadiusX="98">
<GradientStop Color="Black" Offset="0.87"/>
<GradientStop Color="Transparent" Offset="0.87"/>
</RadialGradientBrush>
but then when I resize my progress bar I get unwanted behaviour:
How this can be fixed? I need mask to have MappingMode set to RelativeToBoundingBox so I can set different size to progressbar.
Below is full XAML I've generated in Blend:
<Window x:Class="ImageProgressBar.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="389" Width="523">
<Window.Resources>
<Style x:Key="ImageFill" TargetType="{x:Type ProgressBar}">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid x:Name="TemplateRoot" SnapsToDevicePixels="true">
<Image x:Name="PART_Track" Source="Play_Background.png" Margin="1" Stretch="Fill"/>
<Rectangle x:Name="PART_Indicator" Margin="1" HorizontalAlignment="Left" Fill="#FFD6931C">
<Rectangle.OpacityMask>
<RadialGradientBrush Center="106,104" GradientOrigin="60,60" MappingMode="Absolute" RadiusY="97" RadiusX="98">
<GradientStop Color="Black" Offset="0.87"/>
<GradientStop Color="Transparent" Offset="0.87"/>
</RadialGradientBrush>
</Rectangle.OpacityMask>
</Rectangle>
<Image Source="Play_Foreground.png" Margin="1" Stretch="Fill"/>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<ProgressBar
Maximum="{Binding ElementName=MySlider, Path=Maximum, Mode=TwoWay}" Minimum="{Binding ElementName=MySlider, Path=Minimum, Mode=TwoWay}" Value="{Binding ElementName=MySlider, Path=Value, Mode=TwoWay}"
HorizontalAlignment="Left" Height="200" Margin="10,10,0,0" VerticalAlignment="Top" Width="200" Style="{DynamicResource ImageFill}"/>
<ProgressBar
Maximum="{Binding ElementName=MySlider, Path=Maximum, Mode=TwoWay}" Minimum="{Binding ElementName=MySlider, Path=Minimum, Mode=TwoWay}" Value="{Binding ElementName=MySlider, Path=Value, Mode=TwoWay}"
HorizontalAlignment="Left" Height="100" Margin="294,10,0,0" VerticalAlignment="Top" Width="100" Style="{DynamicResource ImageFill}"/>
<Slider Name="MySlider" HorizontalAlignment="Left" Margin="10,215,0,0" VerticalAlignment="Top" Width="200" Minimum="0" Maximum="100" Value="0"/>
</Grid>
</Window>
I've found http://vbcity.com/blogs/xtab/archive/2009/11/24/wpf-controltemplates-creating-a-non-rectangular-progressbar.aspx but can't use this inside my style.

I've managed to create style that has effect I wanted.
Below is how it looks:
and below is working code with style and slider to change value of progressbar:
<?xml version="1.0" encoding="UTF-8"?>
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="ImageProgressBar.MainWindow" Title="ProgressBar Image Fill" Height="284" Width="598" Background="#FFEAE0E0">
<Window.Resources>
<Style x:Key="ImageFill" TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid x:Name="TemplateRoot" SnapsToDevicePixels="true">
<Image x:Name="PART_Track" Source="Play_Background.png" Margin="1" Stretch="Fill" />
<Rectangle x:Name="PART_Indicator" Margin="1" HorizontalAlignment="Left" Fill="{TemplateBinding Foreground}">
<Rectangle.OpacityMask>
<RadialGradientBrush Center="106,104" GradientOrigin="60,60" MappingMode="Absolute" RadiusY="97" RadiusX="98">
<GradientStop Color="Black" Offset="0.87" />
<GradientStop Color="Transparent" Offset="0.87" />
</RadialGradientBrush>
</Rectangle.OpacityMask>
</Rectangle>
<Image Source="Play_Foreground.png" Margin="1" Stretch="Fill" />
</Grid>
<ControlTemplate.Triggers>
<!-- Getting vertical style working using technique described here: http://stackoverflow.com/a/6849237/7532 -->
<Trigger Property="Orientation" Value="Vertical">
<Setter TargetName="PART_Indicator" Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="270" />
</Setter.Value>
</Setter>
<Setter TargetName="PART_Indicator" Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height}" />
<Setter TargetName="PART_Indicator" Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Width}" />
<Setter TargetName="PART_Indicator" Property="VerticalAlignment" Value="Bottom" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SimpleImageFill" TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid x:Name="TemplateRoot" SnapsToDevicePixels="true">
<Image x:Name="PART_Track" Source="Play_Game_Empty.png" />
<Canvas ClipToBounds="True" x:Name="PART_Indicator" HorizontalAlignment="Left">
<Image x:Name="Image_Fill" Source="Play_Game_Fill.png"
Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Width}"
Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height}" />
</Canvas>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Orientation" Value="Vertical">
<Setter TargetName="PART_Indicator" Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="270" />
</Setter.Value>
</Setter>
<Setter TargetName="Image_Fill" Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-270" />
</Setter.Value>
</Setter>
<Setter TargetName="PART_Indicator" Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height}" />
<Setter TargetName="PART_Indicator" Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Width}" />
<Setter TargetName="PART_Indicator" Property="VerticalAlignment" Value="Bottom" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<ProgressBar Foreground="Orange" Orientation="Vertical" Maximum="{Binding ElementName=MySlider, Path=Maximum, Mode=TwoWay}" Minimum="{Binding ElementName=MySlider, Path=Minimum, Mode=TwoWay}" Value="{Binding ElementName=MySlider, Path=Value, Mode=TwoWay}" HorizontalAlignment="Left" Height="200" Margin="10,10,0,0" VerticalAlignment="Top" Width="200" Style="{DynamicResource ImageFill}" />
<ProgressBar Maximum="{Binding ElementName=MySlider, Path=Maximum, Mode=TwoWay}" Minimum="{Binding ElementName=MySlider, Path=Minimum, Mode=TwoWay}" Value="{Binding ElementName=MySlider, Path=Value, Mode=TwoWay}" HorizontalAlignment="Left" Height="200" Margin="227.5,10,0,0" VerticalAlignment="Top" Width="200" Style="{DynamicResource ImageFill}" />
<Slider Name="MySlider" HorizontalAlignment="Left" Margin="10,215,0,0" VerticalAlignment="Top" Width="200" Minimum="0" Maximum="100" Value="0" />
<ProgressBar Orientation="Vertical" Maximum="{Binding ElementName=MySlider, Path=Maximum, Mode=TwoWay}" Minimum="{Binding ElementName=MySlider, Path=Minimum, Mode=TwoWay}" Value="{Binding ElementName=MySlider, Path=Value, Mode=TwoWay}" HorizontalAlignment="Left" Height="150" Margin="432.5,10,0,0" VerticalAlignment="Top" Width="150" Style="{DynamicResource SimpleImageFill}" />
</Grid>
</Window>
I've actually created two styles:
First one is using two images (top two from my question) and circle
between them. Idea was to fill circle from bottom or from left.
Circle is filled with foreground color.
Second is much simpler, it uses only two images (empty and filled). When value changes filled image, that is on top of empty, is shown from left or from bottom. I've used canvas that is filled with image and I change it width or height.
I'm just starting with WPF, so is someone knows a better solution please post answer.
Below I'm adding two images used by second style applied to third progressbar.

Check this out WPF: Anchor points don't work well sometimes The problem is that your sizing and margins are absolutes not relative the the size of your control.

How to get a dynamic ListBox ItemTemplate to stretch horizontally the full width of the ListBox?

I have a normal listbox with a custom template to show the items. What I cannot manage is to stretch the template horizontally over the full widtg of the list box.
My problem is, that all of the elements in the main window are put dynamically, and they resize along with the window size changed method. I've searched through the net and the idea was to put HorizontalAligment="Stretch". This I tried, everywhere possible, with no significant success.
my xaml code goes like this:
<UserControl x:Class="LiveGames.Dealer.UsersList"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
Background="Transparent">
<Border CornerRadius="10" BorderBrush="White" BorderThickness="2" >
<Grid>
<Grid.Resources>
<DataTemplate x:Key="PlayerTemplate">
<WrapPanel>
<Border CornerRadius="10" BorderBrush="White" BorderThickness="2" >
<Border.Background>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Offset="0.0" x:Name="gradientOne_Name" Color="Red" />
<GradientStop Offset="1.0" x:Name="gradientTwo_Name" Color="DarkRed" />
</LinearGradientBrush>
</Border.Background>
<Grid >
<Grid.ColumnDefinitions x:Uid="5">
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Name="RowH" Height="50"/>
</Grid.RowDefinitions>
<!-- <TextBlock VerticalAlignment="Center" Margin="5" Grid.Column="0" Grid.Row="1" Text="Player: " FontSize="18" />-->
<TextBlock VerticalAlignment="Center" Margin="5" Grid.Column="0" Text="{Binding Path=ID}" FontSize="22" FontWeight="Bold"/>
</Grid>
</Border>
</WrapPanel>
</DataTemplate>
</Grid.Resources>
<Canvas>
<ListBox Name="userList" Background="Transparent" BorderBrush="Transparent" BorderThickness="0" ItemsSource="{Binding}" ItemTemplate="{StaticResource PlayerTemplate}" HorizontalContentAlignment="Stretch">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem" >
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
</Canvas>
</Grid>
</Border>
Does anybody have any idea how to do this, maybe even in the code behind?
M

You can try this:
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="Width" Value="{Binding ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ScrollContentPresenter}}}"></Setter>
</Style>

I recently had this problem and solved it with the following Xaml (apply to the ListBox.ItemContainerStyle)
<Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
</Style>
Also, you should be aware that by placing your ListBox inside a canvas, it won't stretch to fit its parent. It will be sized at whatever size you set the ListBox as Canvases' don't perform layout on their children.

How to change the bar background of column series in DVC:Chart to red?

Hi i'm plotting columnseries graph using chart controls by downloading Microsoft wpftoolkit.
I can able to draw the graph using my data but the background color of the bar was not changing.How to change the bar color to red instead of default LightSteelBlue color.
Here is my code
<Window x:Class="net.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:DVC="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
xmlns:DV="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"
Title="Window1" Height="800" Width="800" xmlns:my="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit">
<Grid>
<DVC:Chart Canvas.Top="80" Canvas.Left="10" Name="mcChart"
Width="800" Height="450" FontSize="12"
Background="DarkGray" Foreground="DarkRed">
<DVC:Chart.Series>
<DVC:ColumnSeries x:Name="Barchart" Title="Students"
ItemsSource="{Binding list}"
IndependentValueBinding="{Binding Path=Name}"
DependentValueBinding="{Binding Path=students}" >
</DVC:ColumnSeries>
</DVC:Chart.Series>
</DVC:Chart>
</Grid>
can any one tel me how to do this?.
Thanks in advance.
Please answer this.

In order to solve this problem, you can override the style.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit">
<!-- Resource dictionary entries should be defined here. -->
<Style x:Key="MyColumnDataPointStyle"
TargetType="{x:Type chartingToolkit:ColumnDataPoint}">
<Setter Property="Background"
Value="Red" />
<Setter Property="BorderBrush"
Value="Black" />
<Setter Property="BorderThickness"
Value="1" />
<Setter Property="IsTabStop"
Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type chartingToolkit:ColumnDataPoint}">
<Border x:Name="Root"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Border.ToolTip>
<ContentControl Content="{TemplateBinding FormattedDependentValue}" />
</Border.ToolTip>
<Grid Background="{TemplateBinding Background}">
<Rectangle>
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color="#77FFFFFF"
Offset="0" />
<GradientStop Color="Transparent"
Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Border BorderBrush="#CCFFFFFF"
BorderThickness="1">
<Border BorderBrush="#77FFFFFF"
BorderThickness="1" />
</Border>
<Rectangle x:Name="SelectionHighlight"
Fill="Red"
Opacity="0" />
<Rectangle x:Name="MouseOverHighlight"
Fill="White"
Opacity="0" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
usage
<Grid>
<DVC:Chart Canvas.Top="80"
Canvas.Left="10"
Name="mcChart"
Width="800"
Height="450"
FontSize="12"
Background="DarkGray"
Foreground="DarkRed">
<DVC:Chart.Series>
<DVC:ColumnSeries x:Name="Barchart"
Style="{StaticResource MyColumnDataPointStyle}"
Title="Students"
ItemsSource="{Binding list}"
IndependentValueBinding="{Binding Path=Name}"
DependentValueBinding="{Binding Path=students}">
</DVC:ColumnSeries>
</DVC:Chart.Series>
</DVC:Chart>
</Grid>
hope this helps you...

Setting just the Background property in the DataPointStyle will also work.
Resource:
<Style x:Key="RedColumnDataPointStyle"
TargetType="{x:Type DVC:ColumnDataPoint}">
<Setter Property="Background" Value="Red" />
</Style>
Usage:
<DVC:ColumnSeries x:Name="Barchart"
DataPointStyle="{StaticResource RedColumnDataPointStyle}"
Title="Students"
ItemsSource="{Binding list}"
IndependentValueBinding="{Binding Path=Name}"
DependentValueBinding="{Binding Path=students}">
</DVC:ColumnSeries>