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.
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"
<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>
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">
<GradientStop Color="#FFffffff" Offset="0"/>
<GradientStop Color="#f9ffffff" Offset="0.3700000047683716"/>
<GradientStop Color="#e4ffffff" Offset="0.6299999952316284"/>
<GradientStop Color="#c6ffffff" Offset="1"/>
<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}"/>
<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>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<ig:XamTimeline Margin="28,44,97,73">
<ig:NumericTimeAxis ThumbStyle="{StaticResource AxisThumbStyle1}"/>
</UserControl>
You can use it to make a custom one.