CODEWITHSUNDEEP
c#visual-studiochartswpf-controlswpftoolkit
Sowmya
Sowmya

Reputation: 375

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.

Upvotes: 1

Views: 4116

Answers (2)

StevenGodin
StevenGodin

Reputation: 498

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>

Upvotes: 0

punker76
punker76

Reputation: 14621

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...

Upvotes: 1

Related Questions