Disable image highlight on mouse over and display text of current item in UI for WinForms Carousel

Timothey Cannon

2 posts

Member since:
Aug 2006

Posted 08 Jun 2009 Link to this post

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

Admin

1157 posts

Posted 08 Jun 2009 Link to this post

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

2 posts

Member since:
Aug 2006

Posted 11 Jun 2009 Link to this post

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

Admin

1157 posts

Posted 12 Jun 2009 Link to this post

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

16 posts

Member since:
Dec 2009

Posted 01 Jan 2010 Link to this post

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

Admin

1157 posts

Posted 05 Jan 2010 Link to this post

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.

carouselselecteditem.zip

mrdcpwns

16 posts

Member since:
Dec 2009

Posted 05 Jan 2010 Link to this post

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

82 posts

Member since:
Jun 2009

Posted 05 Jan 2010 Link to this post

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

16 posts

Member since:
Dec 2009

Posted 06 Jan 2010 Link to this post

Thanks for such a clear explanation.

Your answer definitely helped.