Skip to content

Commit

Permalink
docs(elevatedview): applied suggested corerctions to documentation
Browse files Browse the repository at this point in the history
Co-authored-by: David Oliver <david.oliver@nventive.com>
  • Loading branch information
carldebilly and davidjohnoliver authored Jul 20, 2020
1 parent ec25f36 commit 373842b
Showing 1 changed file with 9 additions and 10 deletions.
19 changes: 9 additions & 10 deletions doc/articles/features/ElevatedView.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
# ElevatedView
On many design languages like _Material Design_, there's a notion of elevation where a portion of the UI should be presented has been _elevated_ over the rest of the content.
In many design languages (like [_Material Design_](https://material.io/design)), there's a notion of 'elevation' where a portion of the UI should be presented as being _elevated_ over the rest of the content.

In this case, the UWP proposed solution can't work on all platforms because of technical limitations. To address this problem, Uno provides a control called `ElevatedView`, able to produce a similar result on all platforms, providing an elevated result.
In this case, UWP's native elevation API can't work on all platforms because of technical limitations. To address this problem, Uno provides a control called `ElevatedView`, able to produce a similar elevated effect on all platforms (UWP, Android, iOS, WebAssembly, and macOS).

This control is very useful to create cards with both rounded corners and elevated effect - which could be challenging to produce on some platforms.
This control is very useful to create cards with both rounded corners and an elevated effect - which could otherwise be challenging to produce on some platforms.

## How to use the `ElevatedView`

Expand All @@ -30,20 +30,19 @@ Will produce the following result:

![ElevatedView sample](../Assets/features/elevatedview/elevatedview-sample.png)

> **ATTENTION FOR UWP**: When there is an error seeing the `<toolkit:ElevatedView>` on UWP, the common mistake is to forget to include the `Uno.UI` package for all platforms, including UWP. On this platform, the only available component is the Toolkit.
> **ATTENTION FOR UWP**: When there is an error seeing the `<toolkit:ElevatedView>` on UWP, the common mistake is to forget to include the `Uno.UI` package for all platforms, including UWP. On UWP, the only component that the `Uno.UI` package adds is the Toolkit.
## Settings

You can set the following properties:

* `Elevation`: numeric number representing the level of the elevation effect. Typical values are between 5 and 30. Default to `0` - no elevation.
* `ShadowColor`: By default the casted shadow will be `Black`, but you can set any other value. You can reduce the shadow effect by using the alpha channel [except Android]. On Android, the shadow color can only be changed since Android Pie (API 28+). Default to `Black` with alpha channel at 25%.
* `Background`: Default to `Transparent`. Setting `null` will remove the shadow effect.
* `CornerRadius`: Use it to create rounded corner effects. The shadow should follow them.
* `Elevation`: numeric number representing the level of the elevation effect. Typical values are between 5 and 30. The default is `0` - no elevation.
* `ShadowColor`: By default the shadow will be `Black`, but you can set any other value. You can reduce the shadow effect by using the alpha channel [except Android]. On Android, the shadow color can only be changed since Android Pie (API 28+). The default is `Black` with alpha channel at 25%.
* `Background`: The default is `Transparent`. Setting `null` will remove the shadow effect.
* `CornerRadius`: Use it to create rounded corner effects. The shadow will follow them.

## Particularities

* Make sure to _give room_ for the shadow in the layout. Some platforms like macOS could easily clip the shadow. For the same reason, avoid wrapping the `<toolkit:ElevatedView>` directly in a `<ScrollViewer> ` because it's designed to clip its content.

* Make sure to _give room_ for the shadow in the layout (eg by setting a `Margin` on the `ElevatedView`). Some platforms like macOS may clip the shadow otherwise. For the same reason, avoid wrapping the `<toolkit:ElevatedView>` directly in a `<ScrollViewer> ` because it's designed to clip its content.


0 comments on commit 373842b

Please sign in to comment.