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
180
Is it possible to customize the axis thumb by remplacing it with a custom icon?
posted

Hello,

My client wants to customize the axis thumb of the timeline by remplacing it with a custom icon.

Is it possible to develop this?

If yes, how can I do please?

Thanks.

  • 895
    Suggested Answer
    posted

    Hello Sofiane!

    Replasing the axis thumb with an icon is possible. Here is how to achieve this:

    <ig:XamTimeline>

               

      <ig:XamTimeline.Axis>

        <ig:NumericTimeAxis>

          <ig:NumericTimeAxis.ThumbStyle>

            <Style TargetType="ig:AxisThumb">

              <Setter Property="Width"

                      Value="32" />

              <Setter Property="Height"

                      Value="32" />

              <Setter Property="Template">

                <Setter.Value>

                  <ControlTemplate TargetType="ig:AxisThumb">

                    <Image Source="star.png"

                           Width="32"

                           Height="32" />

                  </ControlTemplate>

                </Setter.Value>

              </Setter>

            </Style>

          </ig:NumericTimeAxis.ThumbStyle>

        </ig:NumericTimeAxis>

      </ig:XamTimeline.Axis>

               

    </ig:XamTimeline>

     

     

     

  • 17605
    posted

    You can re-style the axis thumb with: timeline.Axis.ThumbStyle property. Here is a sample with the default style of the axis thumb.

    <UserControl

           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

           xmlns:ig="http://schemas.infragistics.com/xaml"

           x:Class="SilverlightApplication11.MainPage"

           Width="640" Height="480">

        <UserControl.Resources>

            <SolidColorBrush x:Key="BaseColorBrush" Color="#FF1F3B53"/>

            <LinearGradientBrush x:Key="BaseBorderBrush" EndPoint="0,1" StartPoint="0,0">

                <LinearGradientBrush.GradientStops>

                    <GradientStopCollection>

                        <GradientStop Color="#FFa3aeb9" Offset="0"/>

                        <GradientStop Color="#FF8399a9" Offset="0.3700000047683716"/>

                        <GradientStop Color="#FF718597" Offset="0.3709999918937683"/>

                        <GradientStop Color="#FF617584" Offset="1"/>

                    </GradientStopCollection>

                </LinearGradientBrush.GradientStops>

            </LinearGradientBrush>

            <LinearGradientBrush x:Key="BaseOverlayBrush" EndPoint="0.5,1" StartPoint="0.5,0">

                <LinearGradientBrush.GradientStops>

                    <GradientStopCollection>

                        <GradientStop Color="#FFffffff" Offset="0"/>

                        <GradientStop Color="#f9ffffff" Offset="0.3700000047683716"/>

                        <GradientStop Color="#e4ffffff" Offset="0.6299999952316284"/>

                        <GradientStop Color="#c6ffffff" Offset="1"/>

                    </GradientStopCollection>

                </LinearGradientBrush.GradientStops>

            </LinearGradientBrush>

            <Style x:Key="AxisThumbStyle1" TargetType="ig:AxisThumb">

                <Setter Property="Width" Value="12"/>

                <Setter Property="Height" Value="22"/>

                <Setter Property="Canvas.ZIndex" Value="1"/>

                <Setter Property="Cursor" Value="Hand"/>

                <Setter Property="IsTabStop" Value="False"/>

                <Setter Property="Background" Value="{StaticResource BaseColorBrush}"/>

                <Setter Property="BorderBrush" Value="{StaticResource BaseBorderBrush}"/>

                <Setter Property="Template">

                    <Setter.Value>

                        <ControlTemplate TargetType="ig:AxisThumb">

                            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,1" Background="{TemplateBinding Background}" CornerRadius="2,2,2,2">

                                <Grid>

                                    <Rectangle Fill="{StaticResource BaseOverlayBrush}" RadiusY="1" RadiusX="1"/>

                                    <Rectangle RadiusY="1" RadiusX="1" Stroke="#FFFFFFFF"/>

                                    <Border BorderBrush="#FFFFFFFF" BorderThickness="0,0,0,1" Background="#FF99A6B2" HorizontalAlignment="Center" Margin="0,5,3,5" Width="1"/>

                                    <Border BorderBrush="#FFFFFFFF" BorderThickness="0,0,0,1" Background="#FF99A6B2" HorizontalAlignment="Center" Margin="2,5,0,5" VerticalAlignment="Stretch" Width="1"/>

                                </Grid>

                            </Border>

                        </ControlTemplate>

                    </Setter.Value>

                </Setter>

            </Style>

        </UserControl.Resources>

     

        <Grid x:Name="LayoutRoot" Background="White">

            <ig:XamTimeline Margin="28,44,97,73">

                <ig:XamTimeline.Axis>

                    <ig:NumericTimeAxis ThumbStyle="{StaticResource AxisThumbStyle1}"/>

                </ig:XamTimeline.Axis>

            </ig:XamTimeline>

        </Grid>

    </UserControl>

     

    You can use it to make a custom one.