Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
20
Change XamSparkLine axes style
posted

Hi Infragistics team,

It's there any way of customizing or redifining the style of the axes of the XamSparkLine? Boths the axes line and text label.

Parents
No Data
Reply
  • 14517
    Suggested Answer
    Offline posted

    Hello Carlos,

    You can modify the visibility and the format of the labels by using the HorizontalAxisVisibility, HorizontalAxisLabel, VerticalAxisVisibility, and VerticalAxisLabel properties of the XamSparkline. To find out more information on using these properties please see http://help.infragistics.com/doc/WPF/2015.2/CLR4.0/?page=xamSparkline_xamSparkline_Property_Reference.html.

    If you would like to further customize the axis and labels you can use a style targeting either the HorizontalAxisView (for the horizontal axis and labels) or the VerticalAxisView (for the vertical axis and labels). These controls are used to draw a one-sided border for the axis which contains a content presenter housing the text blocks for the labels. Here is an example using this approach:

      <ig:XamSparkline ItemsSource="{Binding Data}" DisplayType="Line" ValueMemberPath="Value"

                             LabelMemberPath="Label" Brush="Red" HorizontalAxisLabel="{}{0}"

                             HorizontalAxisVisibility="Visible" VerticalAxisVisibility="Visible" >

                <ig:XamSparkline.Resources>

                    <Style TargetType="{x:Type ig:HorizontalAxisView}">

                        <Setter Property="Template">

                            <Setter.Value>

                                <ControlTemplate TargetType="ig:HorizontalAxisView">

                                    <Border Background="{TemplateBinding Background}" BorderBrush="AliceBlue"                                

                                            BorderThickness="0,4,0,0">

                                        <ContentPresenter x:Name="HorizontalAxisContentArea"

                                                          TextBlock.Foreground="Green" TextBlock.FontSize="40"/>

                                    </Border>

                                </ControlTemplate>

                            </Setter.Value>

                        </Setter>

     

                    </Style>

                    <Style TargetType="ig:VerticalAxisView">

                        <Setter Property="Template">

                            <Setter.Value>

                                <ControlTemplate TargetType="ig:VerticalAxisView">

                                    <Border Background="{TemplateBinding Background}"

                                BorderBrush="Pink"

                                BorderThickness="0,0,1,0">

                                        <ContentPresenter x:Name="VerticalAxisContentArea"

                                                          TextBlock.Foreground="Purple" TextBlock.FontWeight="Bold" />

                                    </Border>

                                </ControlTemplate>

                            </Setter.Value>

                        </Setter>

                    </Style>

                </ig:XamSparkline.Resources>

            </ig:XamSparkline>  

    You can find the actual styles used for the XamSparkline in C:\Program Files (x86)\Infragistics\2015.2\WPF\DefaultStyles\XamSparkline\generic.xaml

    Please let me know if you have any questions.

    Sincerely

    Valerie

    Software Developer

    Infragistics

     

Children
No Data