image button element animate help!!!

[Faheem Nadeem]

Hi!!!
First of all i would like to thank you guys for this excellent looking product.
i have just started making some test apps and i am in a bit of a problem.
Problem...
I have made a elliptical carousel and added some rad image button element. i have been trying to animate these buttons when ever a mouse enters the button element or leaves and if a person double clicks it. The animation includes changing picture to another (to a  bigger resolution one), moving the image etc. But strangely i haven't been able too. i know its something very easy, but i couldn't find how to..
Can u please help me quickly with this i would be really thankful.

[Nikolay]

Hello Faheem Nadeem,

Thank you for the feedback.

Currently, the images for the ImageClicked and ImageHovered properties are not shown in RadImageButtonElement in RadCarousel. This issue will be addressed in one of our next releases.

For the time being, you can use RadButtonElement to show your images. The advantage of using RadButtonElement instead of RadImageButtonElement is that you have more control on the place of the images, since RadButtonElement can be styled in Visual Style Builder. So, you should make a theme for RadButton and load it in your project. Then, set the RadCarousel.ThemeName to the ThemeName of the RadButton theme and you will notice that the images set by the theme are applied to the RadButtonElements in the RadCarousel. I am attaching a sample project to demonstrate the approach. Please note that the images should be set in the Visual Style Builder at the RadButtonElement level while their Position Offset should be set at the ImagePrimitive level.

I hope this helps. If you have any additional questions, feel free to contact me.

Greetings,
Nikolay
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.

[Faheem Nadeem]

Thank you for your quick Reply!!!
Most Appreciated...
Your sample application did answer some of my questions though, but some still remains...

 First of all i didn't understand if a theme is applied to the whole carousel, and cant be applied to each individual button separately by the theme option in the menu, so how can i  give individual image to each button without doing it in the theme builder.
Secondly i wish to created perfect circular buttons rather then elliptical.
and thirdly my clicking animation on carousel items involve increasing image size on the button,  some position offset and some shades at bottom.
can you please guide me the properties which will enable me too do these three things.

P.S. As i wanted only pictures in carousel not buttons so in order to make button element look like pictures i made the boundaries of button transparent, so there is only image left with no text, but if i have to increase the size of image on mouse enter event, i have to increase size of button so that the image wont be cropped, so how i can do that..

Thank you for all of your cooperation so far...

Yours Thanks fully,
Faheem Nadeem

[Faheem Nadeem]

And Secondly is it possible to make the carousel path visible at run time, i.e if i want to show the carousel path as a sold line is that possible?

[Faheem Nadeem]

Sorry for yet another question!!!
I have a elliptical carousel added at the center of my form with some buttons. when a user clicks a button the carousel changes its shape to Bezier Path and moves to the bottom of the form in a straight line. this effect is almost the same as your book store example online. the problem is i cannot achieve the light and steady movement of the controls towards the bottom of the form, which in my case snaps to the bottom at once ofcourse because i have given the four points related to Bezier at the bottom of the screen.
Is there any way, ofcourse there is, that i can implemet the steady movement for the path from the middle of the screen to the bottom of the screen as in your example rather than snapping down at once.

[Nikolay]

Hi Faheem Nadeem,

Actually, you can apply a theme to a single RadElement in a RadControl, but this should be done programmatically. I am attaching a sample project which demonstrates this approach.

In addition, it is possible to set images without the help of themes when handling the mouse events of the RadButtonElement. This approach is demonstrated in the sample project as well.

You can create a perfect circular RadButton if the button has equal Width and Height and you apply a RoundRectShape with radius equal to the Width/Height of the RadButton.

Please find the answers of the questions asked in this forum thread below:
Q.1- It's a straight vertical Path
A. You should set equal values to the X coordinates of all CarouselPath's points (refer to the sample project)
Q. 2- Having Buttons with image on left and corresponding text on the right for each button.
A. Should use RadButton's TextImageRelation (refer to the sample project) and set ButtonElement's  text

Q. 3- When a user performs a mouse hover operation on a button, the button is supposed to grow in size with the image increasing in size (i.e image replaced by a higher resolution image)
A. Yes - you should prepare and use larger images (refer to the sample project how to change images  on handling the mouse events of the RadButtonElement)

Q. 4-Can I display the path of RadCarousel at run time, like a solid line.
A. Yes, this is possible. You should add this code snippet to the RadCarousel Paint event handler:

void radCarousel1_Paint(object sender, PaintEventArgs e)
        {
            using (Pen defaultPathColor = new Pen(Color.Blue))
            {
                CarouselBezierPath path = this.radCarousel1.CarouselPath as CarouselBezierPath;
                if (path == null)
                {
                    return;
                }
                GraphicsPath graphicsPath = new GraphicsPath(FillMode.Winding);
                graphicsPath.AddBezier(
                    TransformPoint(path.FirstPoint),
                    TransformPoint(path.CtrlPoint1),
                    TransformPoint(path.CtrlPoint2),
                    TransformPoint(path.LastPoint));
                e.Graphics.DrawPath(defaultPathColor, graphicsPath);
            }
        }

As to the last question, you cannot manipulate the RadCarousel path at runtime and this scenario is not supported.

Please, refer to this Code Library article - RadCarousel HiRes Image Gallery - this article demonstrates how you can quickly and smoothly show larger images.

Kind regards,
Nikolay
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.