CONTROLS LISTED IN THE DEMO

[Dave Navarro]

Hello,

I'm looking through the online demo for Silverlight and love all the new controls. What I can't figure out is the name of the control that's on the left hand side of the page(http://demos.telerik.com/silverlight/#Home). It's used like a sliding / moving menu / tree control.

It's pretty cool but for the life of me I can't seem to find the name of it or which one of your controls in the radControls for Silverlight is used.

Please let me know and thanks!

Dave

[Ben Hayat]

Hi Dave;

That is RadTreeView which is customized to look this way. You can actually see it as part of the demo source code. But don't get too attached to it, since Telerik might be making some tweaks to it ;-)

..Ben

[matt]

Where is the source code to that part ?

All I could figure is it was part of Quickstart.dll and I could not find the source code to how you do that automatic scrolling

[Ben Hayat]

Hi Matt;

I personally had not looked at the source code, neither did I looked for it, but in another thread ("Silverlight online demo"), I believe Valentin pointed out that you can check the source code. I'll let Telerik guys to point out where you can find it. Sorry if I confused you!

..Ben

[Kaloyan]

Hi Ben,

Thanks for your feedback.

For the auto-scrolling treeview we created a custom control, in which we put the RadTreeView. The panel main function is to change the transformation (in this scenario 'Y') of the inside content (RadTreeView) using animaiton. Please refer to the code snippet below

<Style TargetType="local:AutoScrollPanel">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:AutoScrollPanel">
                    <ScrollViewer x:Name="ScrollViewer" HorizontalScrollBarVisibility="Hidden"
                            VerticalScrollBarVisibility="Hidden" BorderBrush="Transparent">
                        <ContentPresenter />
                    </ScrollViewer>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;

namespace Telerik.Windows.QuickStart
{
    [TemplatePart(Name = "ScrollViewer", Type = typeof(ScrollViewer))]
    public class AutoScrollPanel : ContentControl
    {
        #region - private fields -
        private FrameworkElement content { get; set; }
        private string PROPERTY_NAME = "(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)";
        private Point currentMousePosition = new Point();
        private ScrollViewer scrollViewer;
        private double CurrentTransformY
        {
            get
            {
                return ((content.RenderTransform as TransformGroup).Children[0] as TranslateTransform).Y;
            }
            set
            {
                ((content.RenderTransform as TransformGroup).Children[0] as TranslateTransform).Y = value;
            }
        }
        #endregion

        public AutoScrollPanel()
        {
            this.DefaultStyleKey = typeof(AutoScrollPanel);
            Loaded += (sender, e) => { InitializeComponent(); };
        }

        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            scrollViewer = this.GetTemplateChild("ScrollViewer") as ScrollViewer;
        }

        private void InitializeComponent()
        {
            content = this.Content as FrameworkElement;

            content.RenderTransform = CreateTransformGroup();
        }

        private static TransformGroup CreateTransformGroup()
        {
            var transformGroup = new TransformGroup();
            transformGroup.Children.Add(new TranslateTransform());
            return transformGroup;
        }


        protected override void OnMouseMove(MouseEventArgs e)
        {
            base.OnMouseMove(e);

            currentMousePosition = e.GetPosition(scrollViewer);

            double newIndex = CreateNewTransformY();

            var storyBoard = new CustomStoryboard(content);
            SetStoryBoard(this, storyBoard);

            EasingValues easingValues = CreateEasingValues(newIndex);

            var doubleAnimation = new DoubleAnimationUsingKeyFrames();
            var k1 = new LinearDoubleKeyFrame
            {
                KeyTime = TimeSpan.FromMilliseconds(200),
                Value = easingValues.EasingOne
            };

            var k2 = new LinearDoubleKeyFrame
            {
                KeyTime = TimeSpan.FromMilliseconds(500),
                Value = easingValues.EasingTwo
            };

            var k3 = new LinearDoubleKeyFrame
            {
                KeyTime = TimeSpan.FromMilliseconds(1000),
                Value = -newIndex
            };

            doubleAnimation.KeyFrames.Add(k1);
            doubleAnimation.KeyFrames.Add(k2);
            doubleAnimation.KeyFrames.Add(k3);

            storyBoard.AddAnimationTimeline(PROPERTY_NAME, doubleAnimation);
            storyBoard.StartAnimation(this);
        }


        private int CreateNewTransformY()
        {
            // invisible size of the content in the scrollviewer
            double scrollableHeight = scrollViewer.ScrollableHeight;

            // visible height of the content in scrollviewer
            double viewPortHeight = scrollViewer.ViewportHeight;

            double index = currentMousePosition.Y / viewPortHeight;

            return (int)Math.Round(index * scrollableHeight);
        }

        private EasingValues CreateEasingValues(double destinationPoint_Y)
        {
            EasingValues values = new EasingValues();

            // Calculate the middle values from beggining and and of the animaiton
            double v1 = (CurrentTransformY + destinationPoint_Y) / 3;

            values.EasingOne = CurrentTransformY - v1;
            values.EasingTwo = CurrentTransformY - (v1 * 2);

            return values;
        }

        protected override void OnMouseLeave(MouseEventArgs e)
        {
            base.OnMouseLeave(e);

            //StopAnimation();
        }

        internal void UpdatePosition()
        {
            StopAnimation();

            double newIndex = CreateNewTransformY();

            CurrentTransformY = -newIndex;
        }

        public void StopAnimation()
        {
            var storyBoard = GetStoryBoard(this);
            if (null != storyBoard && !storyBoard.IsFinished)
            {
                storyBoard.Pause();
            }
        }

        #region - Attached properties -

        public static CustomStoryboard GetStoryBoard(DependencyObject obj)
        {
            return (CustomStoryboard)obj.GetValue(StoryBoardProperty);
        }

        public static void SetStoryBoard(DependencyObject obj, CustomStoryboard value)
        {
            obj.SetValue(StoryBoardProperty, value);
        }

        public static readonly DependencyProperty StoryBoardProperty =
            DependencyProperty.RegisterAttached("StoryBoard", typeof(CustomStoryboard), typeof(AutoScrollPanel), null);

        #endregion
    }

    internal class EasingValues
    {
        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Performance", "CA1811:AvoidUncalledPrivateCode")]
        public double EasingOne { get; set; }
        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Performance", "CA1811:AvoidUncalledPrivateCode")]
        public double EasingTwo { get; set; }
    }
}

Hope this helps.

Best wishes,

Kaloyan Manev

the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[matt]

maybe this sort of functionality you could put in the panel or yourcontrols somehow..

like it would be nice if the scrollviewer had this built in... i guess someone will evenutlaly make a modified scrollviewer to do this someday.

[rb]

Hi,

Is it possible to share the source code for the QuickStart project? it would help a lot to customize my demo using this framework.

thanks
ramu.

[MarkBr]

Hi Telerik Team,

Is it possible to share the whole code?

Regards,
Mark.

[Valeri Hristov]

Hello Mark,

Unfortunately the QuickStart Framework is not ready for sharing, yet. I hope that we will be able to prepare it by Q3 2009.

Best wishes,
Valeri Hristov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.