How can I change an Image Border color on hover in Xamarin?

I need to change an image's border color on hover and remove the border when the hover is removed. Is there a way to do this in Xamarin?

Best Answer

Answers

  • jonjackson17jonjackson17 Unconfirmed, Member, Xamarin Team Xamurai

    @XamarinBeginner it sounds like you're looking to apply styling or implement a rule. You can try doing a declaration block which consist of a list of declarations for the specific image border you want changed.
    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/styles/css/

  • AdamMeaneyAdamMeaney USMember ✭✭✭✭

    @XamarinBeginner No, definitely don't use CSS styling for anything.

    This is not web dev, this is XAML - MVVM world, do it with XAML styles if you do styling. That fits 99% of the companies you could possibly get a Xamarin job with.

    As to your question, the way I would do it is using an Effect. I have a coworker who has written a mouseover effect before, I just don't have access to show the right code currently.

    It is relatively easy though, not too tough if you know anything about the underlying platform. I assume you are doing this for UWP/Mac, as mouseover really doesn't make sense on the mobile app side.

  • XamarinBeginnerXamarinBeginner Member ✭✭

    @AdamMeaney Yes, I am doing it for Xamarin UWP. Could you please give an idea on how to implement/write the mouseover effect on image?

  • NMackayNMackay GBInsider, University mod

    @XamarinBeginner said:
    @AdamMeaney Yes, I am doing it for Xamarin UWP. Could you please give an idea on how to implement/write the mouseover effect on image?

    https://stackoverflow.com/questions/39895691/xamarin-forms-customize-button-style-on-hover-in-uwp

  • XamarinBeginnerXamarinBeginner Member ✭✭

    @NMackay Sorry I was not clear before. I need mouseover effect on a button as well as standalone image as well.

    I have tried this link before for the button mouseover. When I had tried it, the button had some issues - i.e when we put image inside button, image was not completely filling inside the button, there was space between the border of the button and the image. How do I reduce the space? I tried setting padding="0" but it did not work.

    Do you know any mouse over effect that can be implemented on image element only?

    Thanks

  • NMackayNMackay GBInsider, University mod
    edited January 10

    @XamarinBeginner said:
    @NMackay Sorry I was not clear before. I need mouseover effect on a button as well as standalone image as well.

    I have tried this link before for the button mouseover. When I had tried it, the button had some issues - i.e when we put image inside button, image was not completely filling inside the button, there was space between the border of the button and the image. How do I reduce the space? I tried setting padding="0" but it did not work.

    Do you know any mouse over effect that can be implemented on image element only?

    Thanks

    Oh right, if it's just a plain image that might be tricky. The Xamarin render effectively exposes the same events as the native renderer
    https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.image

    There's no mouse over event.

    https://stackoverflow.com/questions/41541613/enable-effects-on-mouse-hover-in-uwp-gridview-items

    Seen this done before with storyboards in WPF, something similar to this but in this sample the image is wrapped in a parent UIElement

    https://stackoverflow.com/questions/41541613/enable-effects-on-mouse-hover-in-uwp-gridview-items

    Why don't you wrap you image in a parent control using a custom control and then get the parent renderer to take care of the mouseover events? that's the approach I would be taking.

  • XamarinBeginnerXamarinBeginner Member ✭✭

    But there is no gridview in Xamarin :( . We have only Grid in Xamarin. We cannot implement mouse over effect like in this link https://stackoverflow.com/questions/41541613/enable-effects-on-mouse-hover-in-uwp-gridview-items in xamarin right?

  • NMackayNMackay GBInsider, University mod

    @XamarinBeginner said:
    But there is no gridview in Xamarin :( . We have only Grid in Xamarin. We cannot implement mouse over effect like in this link https://stackoverflow.com/questions/41541613/enable-effects-on-mouse-hover-in-uwp-gridview-items in xamarin right?

    Well I was thinking you'd have to completely override the layout renderer and write your own control which seems a lot of grief.

    I think you need to investigate the button render further as these hooks are there, and use styling to achieve your hover effect.

    https://stackoverflow.com/questions/38778715/uwp-button-changes-colors-when-mouse-hovers-over

    Really, I hate UWP with a passion as it's the platform that restricts our cross platform app the most and i wish we didn't have to support it. I don't have time to look further into this.

    @ColeX @jezh Any ideas?

  • NMackayNMackay GBInsider, University mod

    @AdamMeaney

    Thanks for sharing.

  • XamarinBeginnerXamarinBeginner Member ✭✭

    @NMackay @AdamMeaney Thanks for sharing the code.

  • NMackayNMackay GBInsider, University mod
    edited January 11

    @XamarinBeginner said:
    @NMackay @AdamMeaney Thanks for sharing the code.

    Make sure you mark Adam's post as an answer (which it is) if it helps you.

  • XamarinBeginnerXamarinBeginner Member ✭✭

    @AdamMeaney I have tried the code you shared. It is possible to access the control in which effect is added on PointerEntered event. Is there a way to access other objects in the page as well on the same PointerEntered event?
    For example, I am adding effect to a button in a page. If we need to access a label or grid in the same page on the pointer entered event of button, is there a way to do that?

  • AdamMeaneyAdamMeaney USMember ✭✭✭✭

    I mean its possible by looking at the parent of the Element in the Effect and working your way up, but I don't recommend it.

    If you need to do some other processing in Forms when the pointer events happen, you can expose Events on the Forms Effect that you fire from this effect.

    This lets your page subscribe to those events and react in Forms code.

Sign In or Register to comment.