Rock Mobile Docs
App Factory
  • Welcome 👋
  • 📱Getting Started
    • Building Your First App
      • Creating An App
      • App Configuration
      • Adding Content
      • Deploying Your App
    • Lexicon
  • 🧱Essentials
    • Animations
    • Blocks
      • CMS
        • Content
        • Content Channel Item View
        • Content Collection View
        • Daily Challenge Entry
        • Hero
        • Lava Item List
        • Login
          • Using Auth0
          • Using Entra
        • Profile Details
        • Register
        • Structured Content View
        • Workflow Entry
      • Check-in
        • Check-in
      • Communication
        • Communication Entry
        • Communication List Subscribe
        • Communication View
        • SMS Conversation List
        • SMS Conversation
      • Connection
        • Add Connection Request
        • Connection Type List
        • Connection Opportunity List
        • Connection Request List
        • Connection Request Detail
      • Core
        • Attribute Values
        • Notes
        • Search
        • Smart Search
        • Quick Note
        • My Notes
      • CRM
        • Group Members
        • Person Profile
      • Events
        • Live Experience Occurrences
        • Live Experience
        • Calendar Event Item Occurrence View
        • Calendar Event List
        • Calendar View
        • Event Item Occurrence List By Audience Lava
      • Finance
        • Giving
        • Scheduled Transaction List
        • Transaction Detail
        • Transaction List
      • Groups
        • Group Attendance Entry
        • Group Edit
        • Group Finder
        • Group Member Edit
        • Group Member List
        • Group Member View
        • Group Registration
        • Group View
        • Schedule Preference
        • Schedule Sign Up
        • Schedule Toolbox
        • Schedule Unavailability
      • Prayer
        • Answer To Prayer
        • My Prayer Requests
        • Prayer Card View
        • Prayer Request Details
        • Prayer Session
        • Prayer Session Setup
      • Reminders
        • Reminder Edit
        • Reminder List
        • Reminder Dashboard
      • Security
        • Onboard Person
    • Codex
      • Application Strategy
      • XAML Styling
      • Resources
      • Documentation
    • Commands
      • Communication Commands
      • Navigation Commands
      • Media Commands
      • Utility Commands
    • Controls
      • Behaviors
        • Event To Command Behavior
        • Touch Behavior
      • Content Controls
        • Activity Indicator
        • Application Info
        • Avatar
        • Bible Audio
        • Bible Browser
        • Bible Reader
        • Campus Context Picker
          • Camera Code Reader
        • Cards
          • Block Card
          • Contained Card
          • Inline Card
          • Elements of a Card
          • Masks
          • Styling Cards With CSS
        • Context Menu
        • Countdown
        • Cover Sheet
        • Divider
        • Expander
        • Field Container
        • Flip View
        • Following Icon
        • Geo Boundary View
        • HTML
        • Icon
        • Icon Button
        • Image
        • Interaction
        • Items Collection
        • Login Status
        • Login Status Photo
        • Lottie View
        • Markdown
        • Media Player
          • Legacy
        • Notification Box
        • Paragraph Text
        • QR Code
        • Ratio View
        • Redirect
        • Responsive Column
        • Responsive Layout
        • Scroll View
        • Segment Picker
        • Styled Border
        • Styled View
        • Tag
        • Toggle Button
        • Web View
      • Developer Controls
        • Execute Command
        • Bible Book And Chapter Picker
        • Command Reference
        • Field Stack
        • Media Cast Button
        • Media Progress Bar
        • Parameter
        • Scan Code
        • Validator
        • Volume Control
        • Zone
      • Effects
        • Blur Effect
        • Safe Area Padding Effect
      • Form Fields
        • Attribute Value Editor
        • Address
        • Campus Picker
        • Check Box
        • Check Box List
        • Currency Box
        • Date Picker
        • Email Box
        • Literal
        • Marital Status Picker
        • Multi Picker
        • Number Box
        • Phone Number Box
        • Picker
        • Text Box
        • Text Editor
      • XAML Extensions
        • Boolean Value Converter
        • From Json
        • Inverse Boolean Converter
        • Nullable Guid Converter
        • On Device Platform
        • On Device Type
        • Palette Color
        • Seconds To Time String Converter
    • Field Types
    • Lava
      • Context in Lava
    • Performance
    • Tips and Tricks
      • Custom Site Attributes
      • Migrating to .NET MAUI (V6)
      • Page Anchors
    • Troubleshooting
    • Advanced Topics
      • Dynamic Content
      • Deep Linking
  • 🎨Styling
    • Introduction
    • Style Guide
      • Walkthrough
      • Colors
      • Typography
      • Utilities
      • Shell Components
      • Migrating
    • Legacy
      • Colors
      • Borders
        • Border Color
        • Border Radius
        • Border Width
      • Text
        • Background Color
        • Text Size
        • Alignment
        • Color
        • Line Height
        • Weights & Styles
      • iOS Shadows
      • Styling Components
        • Tags
        • Bible
        • Button
        • Form Fields
        • Modals
      • Custom CSS
  • 👨‍💻Developers
    • Fundamentals
    • Core & Shell Dependencies
    • Custom Blocks
    • OS Version Requirements
  • 🏭App Factory
    • Overview
    • Android Keystore
    • App Store Product Page
    • Developer Accounts
    • Image Resources
    • In-App Giving
    • Publishing Requirements
    • Push Notifications
    • Rock Logins
    • Shell Update Requirements
Powered by GitBook

Resources

  • Release Notes
  • Community Chat
  • Ask Chip

Documentation

  • Rock Manuals
  • Lava

⚙️ Powered by Rock RMS

On this page
  • Properties
  • Gradient Stop
  • Examples
Export as PDF
  1. Essentials
  2. Controls
  3. Content Controls

Styled View

Last updated 4 months ago

Inherits from

This component was introduced with the original Xamarin Forms release of Rock Mobile, offering functionality that exceeded what was achievable at the time. Although it remains functional, you might want to consider using a instead, as it can handle most of the same styling requirements.

Have you ever wished you could make your layouts do... more? A little more pizzazz, a little more wow factor, a little more... style. This view lets you do just that. Most of its functionality centers on borders and what you can do with them. However, it's not just about adding a border. Because you can do that now. The power comes when you apply things like corner radius to individual corners, add gradients to your border color, gradient background colors, and much more.

Properties

Property

Type

Description

BackgroundGradientAngle

int

A value between 0-360 to define the angle of the background gradient.

BackgroundGradientStartColor

The start color of the background gradient.

BackgroundGradientEndColor

The end color of the background gradient.

BackgroundGradientStops

A list of GradientStop objects that define a multi color background gradient.

BorderColor

The color of the border.

BorderGradientAngle

int

A value between 0-360 to define the angle of the border gradient.

BorderGradientStartColor

The start color of the border gradient.

BorderGradientEndColor

The end color of the border gradient.

BorderGradientStops

A list of GradientStop objects that define a multi color border gradient.

BorderIsDashed

boolean

Whether or not the border needs to be dashed.

BorderThickness

float

The thickness of the border.

CornerRadius

CornerRadius

The radius of each of the four corners. Specified as "topLeft,topRight,bottomLeft,bottomRight".

HasShadow

bool

Whether or not to draw a shadow beneath the control. Note: For this to work we need to clip the view. This means that individual corner radii will be lost. In this case the TopLeft value will be used for all corners.

Elevation

int

The Material Design elevation desired. Note: For this to work we need to clip the view. This means that individual corner radii will be lost. In this case the TopLeft value will be used for all corners.

OffsetAngle

double

The rotation of the StyledView when Sides is not its default value of 4.

Sides

int

The number of sides to the shape. Default is 4.

Gradient Stop

Property

Type

Description

Color

The color to use for this segment of the gradient.

Offset

float

Value between 0 and 1 that specifies the stop point offset.

Examples

<Rock:StyledView BackgroundColor="#bc91d7"
    CornerRadius="60,0,0,60"
    IsClippedToBounds="true"
    HorizontalOptions="FillAndExpand"
    HeightRequest="150" />

Gradient Stops

<Rock:StyledView HeightRequest="300">
    <Rock:StyledView.BackgroundGradientStops>
        <Rock:GradientStop Color="Yellow"
            Offset="0.0" />
        <Rock:GradientStop Color="Green"
            Offset="0.5" />
    </Rock:StyledView.BackgroundGradientStops>
</Rock:StyledView>

Linear Gradient Brush

<Rock:StyledView HeightRequest="300">
    <Rock:StyledView.Background>
        <LinearGradientBrush StartPoint="0,0"
            EndPoint="1,1">
            <GradientStop Color="Pink"
                Offset="0.0" />
            <GradientStop Color="Purple"
                Offset="0.5" />
        </LinearGradientBrush>
    </Rock:StyledView.Background>
</Rock:StyledView>

[]

[]

This can be applied to more than StyledViews:

🧱
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/brushes/lineargradient
Color
Color
Color
Color
Color
Color
GradientStop
GradientStop
Border
Border element