Monday, December 3, 2012

Silverlight Tookit chart makup in xaml fails

Silverlight Tookit chart makup in xaml fails

While "designing" a chart, I faced a couple of problems which I have yet been unable to solve. The chart as it is now: http://imgbin.org/index.php?page=image&id=10595

1) I want the line of the "AreaSeries" to have the same style as the "LineSeries". As you can see in the image, it has no style at all :|. Most likely it has something to do with:

<ControlTemplate TargetType="toolkit:AreaDataPoint"> 

being incorrect, though I cannot find the correct way to do it... Is it possible at all to give the line and datapoints of a "AreaSerie" another layout, or is the only way to do so by creating another lineseries with the same datapoints as the AreaSeries?

2) When I set a minimum for the Y-axis, via script:

(this.chart1.Axes[0] as LinearAxis).Minimum = UsersMin; (this.chart1.Axes[1] as LinearAxis).Minimum = CumulativeMin; 

It will cause the lines to not showup at all :| (even if I set it to "1", and the lines are above 1). How can i set a minimum and keep my graphic?

3) Is it possible to put a text in front of a dynamic value in the ContentControl?

<ContentControl Content="Users: {TemplateBinding DependentValue}" /> 

Above code does not work, for it thinks {TemplateBinding DependentValue} is just a text, and not a code to be replaced with the data… Is it possible to place a text in front of a databinding? and ifso, how?

The XAML code is attached below.

Thank you!

JB

        <toolkit:Chart.LegendStyle>             <Style TargetType="FrameworkElement">                 <Setter Property="Width" Value="0" />             </Style>         </toolkit:Chart.LegendStyle>          <toolkit:Chart.TitleStyle>             <Style TargetType="ContentControl">                 <Setter Property="Foreground" Value="White" />                 <Setter Property="HorizontalAlignment" Value="Center" />                 <Setter Property="FontSize" Value="18" />                 <Setter Property="Margin" Value="0,0,0,0" />                 <Setter Property="Padding" Value="0,0,0,0"/>             </Style>         </toolkit:Chart.TitleStyle>          <toolkit:Chart.PlotAreaStyle>             <Style TargetType="Grid">                 <Setter Property="Background" Value="#AAFFFFFF" />                 <Setter Property="Margin" Value="0,0,0,0"/>             </Style>         </toolkit:Chart.PlotAreaStyle>          <toolkit:Chart.Axes>             <!-- Y-Axis custom range -->             <toolkit:LinearAxis x:Name="Yusers"                 Orientation="Y"                 Title="Users"                 ShowGridLines="True"                 Foreground="#FF000088"                 FontSize="15" />             <toolkit:LinearAxis x:Name="YCumulative"                 Orientation="Y"                 Title="Cumulative"                 Foreground="white"                 FontSize="15" />         </toolkit:Chart.Axes>          <!-- Daily data -->         <toolkit:AreaSeries             x:Name="Daily"             ItemsSource="{Binding}"             IndependentValueBinding="{Binding Date}"             DependentValueBinding="{Binding Daily_User}"             DependentRangeAxis="{Binding ElementName=Yusers}">             <toolkit:AreaSeries.DataPointStyle>                 <Style TargetType="toolkit:AreaDataPoint">                     <Setter Property="Background" Value="#FF001188" />                     <Setter Property="IsTabStop" Value="False" />                      <Setter Property="Template">                         <Setter.Value>                             <ControlTemplate TargetType="toolkit:AreaDataPoint">                                     <ToolTipService.ToolTip>                                         <StackPanel Margin="2,2,2,2">                                             <ContentControl Content="Users:" />                                             <ContentControl Content="{TemplateBinding DependentValue}" />                                             <ContentControl Content="{TemplateBinding IndependentValue}" />                                         </StackPanel>                                     </ToolTipService.ToolTip>                                     <Ellipse StrokeThickness="2" Height="20" Width="20" Stroke="#7F0011BF" Fill="Azure"/>                                 </Grid>                             </ControlTemplate>                         </Setter.Value>                     </Setter>                 </Style>             </toolkit:AreaSeries.DataPointStyle>         </toolkit:AreaSeries>          <!-- Cumulative data -->         <toolkit:LineSeries             x:Name="Cumulative"             ItemsSource="{Binding}"             IndependentValueBinding="{Binding Date}"             DependentValueBinding="{Binding Cumulative_User}"             DependentRangeAxis="{Binding ElementName=YCumulative}">             <toolkit:LineSeries.DataPointStyle>                 <Style TargetType="toolkit:LineDataPoint">                     <Setter Property="Background" Value="Black" />                     <Setter Property="BorderBrush" Value="black" />                     <Setter Property="BorderThickness" Value="2" />                     <Setter Property="IsTabStop" Value="False" />                      <Setter Property="Template">                         <Setter.Value>                             <ControlTemplate TargetType="toolkit:LineDataPoint">                                 <Grid x:Name="Root" Opacity="1">                                     <ToolTipService.ToolTip>                                         <StackPanel Margin="2,2,2,2">                                             <ContentControl Content="Cumulative Users:" />                                             <ContentControl Content="{TemplateBinding DependentValue}" />                                             <ContentControl Content="{TemplateBinding IndependentValue}" />                                         </StackPanel>                                     </ToolTipService.ToolTip>                                     <Ellipse StrokeThickness="2" Stroke="Black" Fill="Azure"/>                                 </Grid>                             </ControlTemplate>                         </Setter.Value>                     </Setter>                 </Style>             </toolkit:LineSeries.DataPointStyle>         </toolkit:LineSeries>     </toolkit:Chart> 

Answers & Comments...




No comments:

Post a Comment

Send us your comment related to the topic mentioned on the blog