Set PointMark fill to stroke color in XAML

4 posts, 0 answers
  1. Sam
    Sam avatar
    67 posts
    Member since:
    Jun 2011

    Posted 03 Jan 2012 Link to this post

    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

  2. Rahul
    Rahul avatar
    116 posts
    Member since:
    Feb 2011

    Posted 04 Jan 2012 Link to this post

    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
  3. DevCraft banner
  4. Sam
    Sam avatar
    67 posts
    Member since:
    Jun 2011

    Posted 04 Jan 2012 Link to this post

    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.
  5. Sia
    Admin
    Sia avatar
    667 posts

    Posted 06 Jan 2012 Link to this post

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

Back to Top