Disable image highlight on mouse over and display text of current item

[Timothey Cannon]

Hi, how do I show the text of the front item on the carousel and how do I disable the glow that occurs on mouseover on the item?

[Peter]

Hello Timothey,

The glow effect is controlled by RadButton theme and to turn it off on mouse over you should edit the RadButton theme. I attached the XML files that contains the modified themes for RadButton and RadCarousel so that you can used it in your project. Please, read the following articles how to load custom theme from file or load custom theme from a resource. The name of the new theme is D1.

You can use the RadCarousel.SelectedIndexChanged event to handle the change of items and show the text of the front item. Please, refer to the attached project.

I hope this helps.

Sincerely yours,
Peter
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.

[Timothey Cannon]

Hi, I added a RadThemeManager and I loaded both of the provided XML files.

I then set the ThemeName property of the RadCarousel to D1 from the list (as per your instructions).

The glow is still there. Any ideas?

[Peter]

Hello Timothey Cannon,

I saw from your other ticket that you are actually using DataBinding to fill RadCarousel with data.
In this case RadCarousel rotates CarouselGenericItems (that inherit from RadButtonElement), but not RadButtonElements.

However, the theme that I previously attached was for RadButtonElement, but not for CarouselGenericItem. Now, I am sending the same theme modified for CarouselGenericItem. I simply replaced

<RadStylesheetRelation RegistrationType="ElementTypeDefault" ElementType="Telerik.WinControls.UI.RadButtonElement" />

with

<RadStylesheetRelation RegistrationType="ElementTypeDefault" ElementType="Telerik.WinControls.UI.CarouselGenericItem" />

in the XML theme file.

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

All the best,
Peter
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.

[mrdcpwns]

How can I display the text of the currently selected image and also the one where the mouse is being hovered, similar to the one shown at the demo of this control, in VB.net?

My current solution sucks in many different ways since what I did was assign the text in each of the image item's Click Event on a label XD

[Peter]

Hi mrdcpwns,

Thank you for writing. You should use MouseOver and SelectedIndexChanged events. I demonstrated this in my sample project. I hope this helps.

Greetings,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[mrdcpwns]

Thank you but the sample project didn't run because of errors.

Type 'Telerik.WinControls.UI.CarouselEllipsePath' is not defined.

Type 'Telerik.WinControls.UI.RadCarousel' is not defined.

Type 'Telerik.WinControls.UI.Point3D' is not defined.

Type 'Telerik.WinControls.UI.RadCarousel' is not defined.

Type 'Telerik.WinControls.UI.CarouselGenericItem' is not defined.

Warning sub 'OnMouseMove' shadows an overridable method in the base class 'Control'. To override the base method, this method must be declared 'Overrides'.

I understood and finally got it working on the selectedindexchanged, although not the text above the image when the mouse is hovered on it.

[Robert]

Hello mrdcpwns,

In the demo application, the effect you are seeing of text being hovered over each item on a mouse over is actually achieved through the use of a custom theme. You can access the source code to the demo application locally on your machine at:

C:\Program Files\Telerik\RadControls for WinForms Q3 2009 SP1\Examples\ExamplesVBVS2008.sln

In the project, the demo application you are referring to is located, under the solution explorer, at:

Examples -> Carousel -> MusicLibrary

In form1.vb the ItemDataBound event looks as follows:

        Private Sub radCarousel1_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.WinControls.UI.ItemDataBoundEventArgs) Handles radCarouselAlbums.ItemDataBound
            Dim carouselItem As RadButtonElement = CType(e.DataBoundItem, RadButtonElement)
            carouselItem.TextImageRelation = TextImageRelation.TextAboveImage
            carouselItem.Font = New Font("Verdana", 10f)
            carouselItem.ForeColor = Color.WhiteSmoke
            'Store data to use later
            carouselItem.Tag = e.DataItem

            Dim image As Image = Me.GetImageFromBytes(EvaluatePropertyValue(e.DataItem, "Image"))

            If image IsNot Nothing Then
                carouselItem.Image = New Bitmap(image, 165, 165)
            End If

            carouselItem.Text = CStr(EvaluatePropertyValue(e.DataItem, "AlbumName"))
        End Sub

This event is creating RadButtonElements to be used as carousel items. The TextImageRelation is set to TextAboveImage so the text gets displayed above each button.

In the designer for form1.vb:

Here there is a RadThemeManager that is set up to load ButtonMusicLibrary.xml as the theme for this project. The ButtonMusicLibrary theme contains a specially themed button that gets applied at all buttons added to the RadCarousel.

In looking at ButtonMusicLibrary.xml in Visual Style Builder:

If you select "Text: RadButton" in the Control Structure, at the very bottom of Visual Style builder, you will notice that there are several events set up for this particular style. The one that is most specific to this case is (IsMouseOver and !IsMouseDown). A few animations have been set up for this particular property. In the Expert Mode property window to the right there are animations set up for PositionOffset and Shadow. When (IsMouseOver and !IsMouseDown) occurs on any button that has this theme applied these animations are triggered and this is how, in the demo, floating text is achieved above each item in the carousel.

The other events in Visual Style builder are important to take a look at as well. They may be doing similar/related things depending on the current state of the button.

I hope this information helps. If you are interested in learning more about themes and Visual Style Builder, please check out the following:

http://www.telerik.com/help/winforms/themes_overview.html

- Robert

[mrdcpwns]

Thanks for such a clear explanation.

Your answer definitely helped.