12-30-2019 06:02 AM - last edited 05-16-2022 12:15 PM
16-may-2022 update: added an application made by @eddiel to generate the code for a shadow (check out explanations below)
Here is version 2.0 for one of my first Power Apps components which will allow you to add nice good-looking shadow effects in your applications:
This component, called the ShadowBox, allows you to render a rectangle shadow. The shadow is fully customizable and the corners of the inner box can be rounded (to the point that it renders a full-circle shadow).
For this new version of the component, properties have been regrouped:
All details about the component and its properties, along with important notes, can be found here: https://github.com/e-gallis/PowerApps/tree/master/Components/ShadowBox
To download the component: https://github.com/e-gallis/PowerApps/blob/master/Components/ShadowBox/ShadowBox.msapp
I hope you'll like this component and that it will help you create nice applications...
EDIT - 16-may-2022 - @eddiel has made a little application with a nice UI to allow you to generate the code for a shadow and just copy/paste it to your image control:
The application is attached to this post and can be downloaded below. Thanks for this @eddiel... 😉
See you all,
Thanks. Yes, adding a radius to the corners has been in my mind for quite a time now. I'll try to do it before the end of february... 😊
Very nice. I'm always a little nervous incorporating something into an app for our whole organization that rely's on a resource from the internet that we don't control (in this case the base images for the shadow box). If that image link ever goes away or changes my app would no longer display correctly. Is it possible to have the image(s) used by the component stored locally within the app? Or at least in a cloud storage we control like SharePoint or OneDrive?
Firstly, once you've imported the component inside your app, it's all yours... Meaning that, as far as you don't change it, it will keep working "for ever" because its "code" is part of your app now.
Secondly, the image inside the component is not really an image you could store somewhere else. In fact it IS a Power Apps image control but the shadow is generated "on-the-fly" by an SVG code which is 100% HTML compatible. The EncodeUrl() function call you see inside the image control's Image property is only used to convert the SVG code special characters (like " \ / : & etc.) to html entities (like %3C %3F %20 etc.). And the http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd url you also see there is not even mandatory: it's a remark to specify what is the format of the code that follows. And further more it point to something that will never go away: it's a World Wide Web standard 😊).
I hope I've relieved you from your nervousness... 😉
Hey @R3dKap ,
I was thinking of extending your ShadowBox Component with round corners! But I wanted to make sure that you are not sitting on it right now and we will do the same work?
Otherwise I would try to implement it and share it with you.
Good idea! I was planning to review the SVG code of the component (which I did not optimize at all in its first version) and use a simple RECT element. It would then be very easy to add round corners to it.
I don't know when I'll find the time to do it, so in the meantime, sure, feel free to extend the component to include rounded corners... Waiting to see how it looks... 😊