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

9 posts, 0 answers
  1. Timothey Cannon
    Timothey Cannon avatar
    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?


  2. Peter
    Admin
    Peter avatar
    1148 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.
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Timothey Cannon
    Timothey Cannon avatar
    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?
  5. Peter
    Admin
    Peter avatar
    1148 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.
  6. mrdcpwns
    mrdcpwns avatar
    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

  7. Peter
    Admin
    Peter avatar
    1148 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.
  8. mrdcpwns
    mrdcpwns avatar
    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.


  9. Robert
    Robert avatar
    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:

    - Robert
  10. mrdcpwns
    mrdcpwns avatar
    16 posts
    Member since:
    Dec 2009

    Posted 06 Jan 2010 Link to this post

    Thanks for such a clear explanation.

    Your answer definitely helped.
Back to Top
UI for WinForms is Visual Studio 2017 Ready