cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Marc314
Level: Powered On

Change background color of gallery card OnHover or OnSelect

Hello everyone,

 

I did a search, but while other posts pointed me in the right direction, I haven't come across anything spot-on yet.

 

I have inputted a gallery with a list of items. Ideally, I'm hoping that I could change the background of the individual "cards" on mouse-over. However, I don't see that property available. So, I have two questions:

 

1. Is OnHover (or a workaround available)?

2. If not, how could I accomplish a background color change OnSelect?

 

Thanks,

5 REPLIES 5
Community Support Team
Community Support Team

Re: Change background color of gallery card OnHover or OnSelect

Hi @Marc314,

 

Firstly, I'd like to explain that cards are the building blocks of the Edit form and Display form controls, not galleries. Galleries contain all kinds of controls. To change background color of these controls, you could use the HoverFill property. But not all controls support this property

 

HoverFill – The background color of a control when the user keeps the mouse pointer on it.

Applies to Add picture, Button, Check box, Drop down, Export, Icon, Image, Import, Label, List Box, Microphone, Radio, Shape, Text input, and Timer controls.

 

For you reference about Color properties in PowerApps:

https://powerapps.microsoft.com/en-us/tutorials/properties-color-border/

 

Regards,

Mona

 

 

 

Community Support Team _ Mona Li
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
Anonymous
Not applicable

Re: Change background color of gallery card OnHover or OnSelect

Hi v-monli-msft- I dont think your answer is what is being requested.  Yes it is true that Cards are only used on forms, but here it is the Gallery that is being discussed and how a hoverFill can be associated with it.

 

Now the color of the selected item is controlled by the Gallery TemplateFill property by using something like the following:

 

If(
    ThisItem.IsSelected,
    White
    Green
)

 

But if you look through the Gallery's properties you will notice that there is no HoverFill property.

 

A workaround if you have only one Label displayed for each item in the gallery is to make the label the same size as the Gallery template and then set the Label's HoverFill property as desired. To do this set the label's Width property should be set to Parent.TemplateWidth and Height to Parent.TemplateHeight.

 

What to do if you have more than one label I'm not sure!  I have tried a few different hacks but nothing works properly. I think what is needed is a Gallery "isHovered property" so that it can be used with the TemplateFill property to fill the template when hovered over.

 

If anyone knows the answer please let me know!

 

 

Anonymous
Not applicable

Re: Change background color of gallery card OnHover or OnSelect

Yay! Just what i was looking for - so simple.

Highlighted

Re: Change background color of gallery card OnHover or OnSelect

You can also set the HoverFill and Fill property for a Rectangle icon.

 

If you add a rectange icon into the gallery along with any other labels / textboxs etc. your require, you can then set some of the key properties on the rectange icon as follows:

X: 0

Y: 0

Width: Parent.Width

Height: MyGalley.TemplateHeight

Fill: If( ThisItem.IsSelected, RGBA( 0, 0, 255, 0.3, RGBA( 0, 0, 0, 0 ) /* blue with opacity if selected else transparent */

HoverFill: RGBA( 0, 255, 0, 0.3 )   /* green with opacity */

OnSelect: Select( Parent )

 

Make sure the to ensure the rectange icon container is the first control in the gallery.

(Reorder -> Bring to Front)

MichelH
Level 8

Re: Change background color of gallery card OnHover or OnSelect

Yes, but,...

 

Any object above the labels, that you give a color, will blur the text of the labels underneath.

When the object is underneath the (transparent) labels, its hover function will no longer work.

 

Catch22, we need on-hover properties for the gallery.

Please vote for it: https://powerusers.microsoft.com/t5/PowerApps-Ideas/HoverColor-and-HoverFill-for-Galleries/idi-p/297...

Helpful resources

Announcements
thirdimage

Power Automate Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

sixthImage

Power Platform World Tour

Find out where you can attend!

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

fifthimage

Microsoft Learn

Learn how to build the business apps that you need.

Top Kudoed Authors
Users Online
Currently online: 101 members 5,330 guests
Please welcome our newest community members: