This is a migrated thread and some comments may be shown as answers.

Set PointMark fill to stroke color in XAML

3 Answers 47 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Sam
Top achievements
Rank 1
Sam asked on 04 Jan 2012, 03:42 AM
Hi,

I've got a chart that has a number of different line series on it. The point marks are drawn as circles (the default shape) with a transparent fill (also the default).

We want the circles to be filled with whatever the stroke color of the line series is, but I don't know of a way to do this in XAML (can't use code-behind here). We can't hardcode the fill value as it will be determined by the order of the series.

Here is the XAML we are currently using:

<UserControl
    x:Class="VisualRisk.Ux.Risk.Analysis.Charts.ScenarioChart"
    xmlns:local="clr-namespace:VisualRisk.Ux.Risk.Analysis"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400"
    d:DataContext="{d:DesignInstance local:AnalysisViewModel, IsDesignTimeCreatable=False}">
 
    <UserControl.Resources>
        <Style x:Key="CustomLineStyle" TargetType="telerik:Line">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerik:Line">
                        <Canvas x:Name="PART_MainContainer">
                            <Line x:Name="PART_LineGeometry" Fill="Transparent" Stroke="Transparent" StrokeThickness="5"
                                X1="{TemplateBinding StartPointX}"
                                Y1="{TemplateBinding StartPointY}"
                                X2="{TemplateBinding EndPointX}"
                                Y2="{TemplateBinding EndPointY}"
                                Style="{TemplateBinding ItemStyle}" />
 
                            <telerik:PointMark x:Name="PART_PointMark"
                                Canvas.Top="{TemplateBinding StartPointY}"
                                Canvas.Left="{TemplateBinding StartPointX}"
                                PointMarkCanvasLeft="{TemplateBinding PointMarkCanvasLeft}"
                                PointMarkCanvasTop="{TemplateBinding PointMarkCanvasTop}"
                                Visibility="{TemplateBinding PointMarkVisibility}"
                                ShapeStyle="{TemplateBinding PointMarkShapeStyle}"
                                Style="{TemplateBinding PointMarkItemStyle}"
                                MouseLeftButtonDown="PointMark_MouseLeftButtonDown"
                                MouseLeftButtonUp="PointMark_MouseLeftButtonUp"
                                MouseEnter="PointMark_MouseEnter" />
                        </Canvas>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
 
    <telerik:RadChart
        x:Name="scenarioChart"
        ItemsSource="{Binding ScenariosViewModel.ActiveScenarios}"
        Background="White"
        BorderThickness="0"
        PaletteBrushes="{Binding ScenariosViewModel.ScenarioPalette}">
 
        <telerik:RadChart.DefaultSeriesDefinition>
            <telerik:LineSeriesDefinition ShowItemLabels="False" ItemStyle="{StaticResource CustomLineStyle}" />
        </telerik:RadChart.DefaultSeriesDefinition>
         
        <telerik:RadChart.SamplingSettings>
            <telerik:SamplingSettings SamplingThreshold="0" />
        </telerik:RadChart.SamplingSettings>
 
        <telerik:RadChart.SeriesMappings>
            <telerik:SeriesMapping CollectionIndex="0">
                <telerik:SeriesMapping.ItemMappings>
                    <telerik:ItemMapping DataPointMember="XCategory" FieldName="Category" />
                    <telerik:ItemMapping DataPointMember="YValue" FieldName="Value" />
                </telerik:SeriesMapping.ItemMappings>
            </telerik:SeriesMapping>
 
            <telerik:SeriesMapping CollectionIndex="1">
                <telerik:SeriesMapping.ItemMappings>
                    <telerik:ItemMapping DataPointMember="XCategory" FieldName="Category" />
                    <telerik:ItemMapping DataPointMember="YValue" FieldName="Value" />
                </telerik:SeriesMapping.ItemMappings>
            </telerik:SeriesMapping>
 
            <telerik:SeriesMapping CollectionIndex="2">
                <telerik:SeriesMapping.ItemMappings>
                    <telerik:ItemMapping DataPointMember="XCategory" FieldName="Category" />
                    <telerik:ItemMapping DataPointMember="YValue" FieldName="Value" />
                </telerik:SeriesMapping.ItemMappings>
            </telerik:SeriesMapping>
 
            <telerik:SeriesMapping CollectionIndex="3">
                <telerik:SeriesMapping.ItemMappings>
                    <telerik:ItemMapping DataPointMember="XCategory" FieldName="Category" />
                    <telerik:ItemMapping DataPointMember="YValue" FieldName="Value" />
                </telerik:SeriesMapping.ItemMappings>
            </telerik:SeriesMapping>
 
            <telerik:SeriesMapping CollectionIndex="4">
                <telerik:SeriesMapping.ItemMappings>
                    <telerik:ItemMapping DataPointMember="XCategory" FieldName="Category" />
                    <telerik:ItemMapping DataPointMember="YValue" FieldName="Value" />
                </telerik:SeriesMapping.ItemMappings>
            </telerik:SeriesMapping>
 
            <telerik:SeriesMapping CollectionIndex="5">
                <telerik:SeriesMapping.ItemMappings>
                    <telerik:ItemMapping DataPointMember="XCategory" FieldName="Category" />
                    <telerik:ItemMapping DataPointMember="YValue" FieldName="Value" />
                </telerik:SeriesMapping.ItemMappings>
            </telerik:SeriesMapping>
        </telerik:RadChart.SeriesMappings>
 
        <telerik:RadChart.DefaultView>
            <telerik:ChartDefaultView ChartLegendPosition="Bottom">
                <telerik:ChartDefaultView.ChartTitle>
                    <telerik:ChartTitle
                        Content="{Binding ScenarioChartTitle}"
                        HorizontalAlignment="Center"
                        Foreground="Black"
                        FontSize="15"
                        Background="White"
                        BorderThickness="0"
                        OuterBorderThickness="0" />
                </telerik:ChartDefaultView.ChartTitle>
 
                <telerik:ChartDefaultView.ChartLegend>
                    <telerik:ChartLegend
                        x:Name="legend"
                        ItemsSource="{Binding ScenariosViewModel.ScenarioLegendItems}"
                        Background="White"
                        BorderThickness="0"
                        LegendItemMarkerShape="SquareRounded"
                        Header=""
                        HorizontalContentAlignment="Center"
                        UseAutoGeneratedItems="False" />
                </telerik:ChartDefaultView.ChartLegend>
 
                <telerik:ChartDefaultView.ChartArea>
                    <telerik:ChartArea LegendName="legend" Padding="30">
                        <telerik:ChartArea.AnimationSettings>
                            <telerik:AnimationSettings ItemDelay="00:00:00.100" DefaultSeriesDelay="0" />
                        </telerik:ChartArea.AnimationSettings>
 
                        <telerik:ChartArea.PlotAreaStyle>
                            <Style TargetType="telerik:ClipPanel">
                                <Setter Property="Background" Value="White" />
                            </Style>
                        </telerik:ChartArea.PlotAreaStyle>
 
                        <telerik:ChartArea.AxisX>
                            <telerik:AxisX
                                MajorGridLinesVisibility="Visible"
                                MajorTicksVisibility="Collapsed"
                                MinorTicksVisibility="Collapsed" />
                        </telerik:ChartArea.AxisX>
 
                        <telerik:ChartArea.AxisY>
                            <telerik:AxisY
                                DefaultLabelFormat="P2"
                                MajorGridLinesVisibility="Visible"
                                MajorTicksVisibility="Collapsed"
                                MinorTicksVisibility="Collapsed"
                                StripLinesVisibility="Collapsed" />
                        </telerik:ChartArea.AxisY>
                    </telerik:ChartArea>
                </telerik:ChartDefaultView.ChartArea>
            </telerik:ChartDefaultView>
        </telerik:RadChart.DefaultView>
    </telerik:RadChart>
</UserControl>

Basically I just want to set the Fill property on the PointMark control, using a TemplateBinding to whatever the stroke color is but I can't see where this value is coming from on the re-templated Line.

What is the correct way to do this in XAML?

Thanks,

Sam

3 Answers, 1 is accepted

Sort by
0
Rahul
Top achievements
Rank 2
answered on 04 Jan 2012, 04:01 PM
Hi Sam,
     
            Once try this code.
<Style x:Name="PointMarkCustomStyle" TargetType="telerik:PointMark">
                    <Setter Property="Size" Value="6" />
                    <Setter Property="Fill" Value="DodgerBlue"/>
</Style>

And Apply this style as Static Resource to the Series Definition.

Regards,
Rahul
0
Sam
Top achievements
Rank 1
answered on 04 Jan 2012, 11:37 PM
Thanks Rahul, but that's not going to work for me - I can't hardcode the style values as they will be different based on the series order. I need a solution that binds the Fill color to the 'current' series color, as determined by the current series index in the palette.
0
Sia
Telerik team
answered on 06 Jan 2012, 02:15 PM
Hello Sam,

Unfortunately our current RadChart infrastructure limits setting the point mark fill through the Appearance API which also can be set through XAML. Please let me know whether this is possible in your scenario.

Regards,
Sia
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Tags
Chart
Asked by
Sam
Top achievements
Rank 1
Answers by
Rahul
Top achievements
Rank 2
Sam
Top achievements
Rank 1
Sia
Telerik team
Share this question
or