Skip to main content
Microsoft logo
Power Apps
    • AI Builder
    • Automate processes
    • Azure + Power Apps
    • Build apps
    • Connect data
    • Portals
  • Pricing
    • Overview
    • Become a Partner
    • Find a Partner
    • Find consulting services
    • Blog
    • Customer stories
    • Documentation
    • For IT Leaders
    • Roadmap
    • Self-paced learning
    • Webinars
    • Overview
    • Issues
    • Give feedback
    • Overview
    • Forums
    • Galleries
    • Submit ideas
    • User groups
    • Register
    • ·
    • Sign In
    • ·
    • Help
    Go To
    • Power Apps Community
    • Welcome to the Community!
    • News & Announcements
    • Get Help with Power Apps
    • Building Power Apps
    • Microsoft Dataverse
    • AI Builder
    • Power Apps Governance and Administering
    • Power Apps Pro Dev & ISV
    • Power Apps Portals
    • Power Platform Integration - Better Together!
    • Power Platform Integrations
    • Power Platform and Dynamics 365 Integrations
    • Community Blog
    • Power Apps Community Blog
    • Power Apps Community Demo Extravaganza 2020
    • Galleries
    • Community App Samples
    • Webinars and Video Gallery
    • Canvas Apps Components Samples
    • Kid Zone
    • Business Value Webinars and Video Gallery
    • Emergency Response Gallery
    • 2019 Microsoft Business Applications Summit Recordings (Archived)
    • Microsoft Business Applications Summit 2020 Session Recordings
    • Ideas
    • Power Apps Ideas
    • Community Support
    • Community Accounts & Registration
    • Using the Community
    • Community Feedback
    cancel
    Turn on suggestions
    Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
    Showing results for 
    Search instead for 
    Did you mean: 
    • Power Apps Community
    • Galleries
    • Canvas Apps Components Samples
    • Re: Shadow Box

    Re: Shadow Box

    10-08-2020 12:37 PM

    Super User R3dKap
    Super User
    232 Views
    LinkedIn LinkedIn Facebook Facebook Twitter Twitter
    R3dKap
    Super User R3dKap
    Super User
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    Shadow Box

    ‎12-30-2019 06:02 AM

    Moved from Community App Samples Gallery.

     

    Hello all,

    Here is a PowerApps component that will allow you to add nice good-looking shadow effects in your applications:

    ShadowBox.png

    Other samples with labels and icons controls placed in the foreground:

    ShadowBoxVisualCard1.pngShadowBoxVisualCard2.pngShadowBoxVisualCard3.png

    With a text input box in the foreground:

    TextBoxDropShadow.gif

    This component, called the ShadowBox component, allows you to render a rectangle shadow. The shadow is fully customizable thanks to the following properties of the component:

    • ShadowOffsetX (number)
    • ShadowOffsetY (number)
    • ShadowBlur (number)
    • ShadowColor (string)
    • ShadowOpacity (number)

    Using positive values for the ShadowOffsetX and ShadowOffsetY properties will drop the shadow in the lower-right corner of the box. Using negative values will drop the shadow in the upper-left corner of the box.

    Appart from customizing the shadow, you can also define the box's properties with the following parameters:

    • BoxFill (string)
    • BoxOpacity (number)
    • BoxBorderWidth (number)
    • BoxBorderColor (string)

    And last but not least, you can activate and customize a colouring edge that will be displayed inside the box, thanks to the following properties:

    • ShowEdge (boolean)
    • EdgePosition (text) = values can be top, right, bottom, left
    • EdgeWidth (number)
    • EdgePadding (number)
    • EdgeColor (string)

    I hope you'll like this component and that it will help you create nice applications...

    You can download the component and see more details right here: https://github.com/e-gallis/PowerApps

    See you all,

    Emmanuel

    Preview file
    83 KB
    ShadowBox.zip
    Message 1 of 16
    7,215 Views
    11 Kudos
    Reply
    • All posts
    • Previous Topic
    • Next Topic
    • « Previous
      • 1
      • 2
    • Next »
    R3dKap
    Super User R3dKap
    Super User
    In response to DavesTechTips
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎10-08-2020 12:37 PM

    Thanks @DavesTechTips. Gald you appreciate it... 😊

    I'm working on a new component called the ShapeShadow which will allow to have rounded corners to rectangles as well as make shadows for circles or just vertical/horizontal lines...

    It's almost ready and I should release it soon... Just a little more patience here... 😉

    Message 11 of 16
    232 Views
    1 Kudo
    Reply
    vfdd
    vfdd Helper III
    Helper III
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎01-22-2021 01:22 AM

    Love this component use it a lot thanks so much. But just noticed a little issue I'm having.  On preview mode it looks fine but when I published (checked chrome and Edge) it's completely  off  position wise?  see both screen shots below..  any ideas?

     

    screenshot1.pngscreenshot 3.png

    Message 12 of 16
    131 Views
    0 Kudos
    Reply
    R3dKap
    Super User R3dKap
    Super User
    In response to vfdd
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎01-22-2021 08:36 AM

    Hi @vfdd,

    Have you unabled one of these two options in your app's Screen size + orientation's settings?

     

    R3dKap_0-1611333358126.png

     

    Have you used formulas or fixed values to specify the position and size of the shadow box?

    Message 13 of 16
    127 Views
    0 Kudos
    Reply
    vfdd
    vfdd Helper III
    Helper III
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎01-25-2021 05:29 AM

    @R3dKap   Aspect Ratio is off should I turn that on?    No formula's for position just regular X and Y and placed visually the page..

    Message 14 of 16
    95 Views
    0 Kudos
    Reply
    vfdd
    vfdd Helper III
    Helper III
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎01-25-2021 05:34 AM

    Actually that fixed it !! (turning on aspect ratio)  thanks 🙂  @R3dKap 

    Message 15 of 16
    95 Views
    0 Kudos
    Reply
    R3dKap
    Super User R3dKap
    Super User
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎01-25-2021 12:51 PM

    Glad you fixed it! Wasn't sure the ratio would fix it. Nice job!

    Message 16 of 16
    77 Views
    0 Kudos
    Reply
    Preview Exit Preview

    never-displayed

    You must be signed in to add attachments

    never-displayed

    Additional options
    You do not have permission to remove this product association.
     
    • « Previous
      • 1
      • 2
    • Next »

    Power Platform

    • Overview
    • Power BI
    • Power Apps
    • Power Automate
    • Power Virtual Agents

    Power Apps

    • Sign in
    • Sign up

    Browse

    • Sample apps
    • Services

    Downloads

    • Studio
    • iOS
    • Android

    Learn

    • Documentation
    • Support
    • Community
    • Give feedback
    • Blog
    • Partners

    • © 2021 Microsoft
    • Follow Power Apps
    • Privacy & cookies
    • Manage cookies
    • Terms of use
    • Trademarks