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
How to use the XamZoombar as a date selector
posted

Hi,

How can I set up the XamZoombar to be used as a date selector? If that's possible, will I then be able to change the "Unittype" in the code behind?

In fact after a bit more digging, I'd like something akin to the finance showcase example but I'd like to be able to select dates, which should be displayed in the zoom bar, instead.

David

  • 17605
    posted

    Hi,

    The Zoombar doesn’t display dates itself. The Zoombar labels come from the Timeline. I prepared a sample that the upper part of the Timeline is hidden and only the Zoombar is visible. Try using this code:

    <UserControl x:Class="Samples.TimelineCompare"

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

        Width="800" Height="300"

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

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

        <Grid x:Name="LayoutRoot">

            <Grid.Resources>

                <Style x:Key="LegendStyle" TargetType="ig:TimelineLegend">

                    <Setter Property="Visibility" Value="Collapsed" />

                </Style>

                <Style x:Key="SceneStyle" TargetType="ig:Scene">

                    <Setter Property="Opacity" Value="0" />

                </Style>

            </Grid.Resources>

            <ig:XamTimeline LegendStyle="{StaticResource LegendStyle}"

                            SceneStyle="{StaticResource SceneStyle}"

                            Background="Transparent"

                            BorderThickness="0"

                            MinHeight="70"

                            Height="90">

                <ig:XamTimeline.Axis>

                    <ig:DateTimeAxis Minimum="01/01/2000"

                                     Maximum="01/01/2001"

                                     AutoRange="False" />

                </ig:XamTimeline.Axis>

            </ig:XamTimeline>

        </Grid>

    </UserControl>

     

    You are able to change the Timeline axis unit type in the code behind.