Skip to main content

Component Styling

VertiGIS Studio Mobile Components are styled using XAML styles. However, by using VertiGIS Studio Mobile Views, you can take advantage of styled, well tested, UI components that already participate in the application theme.

Using VertiGIS Studio Mobile Views​

VertiGIS Studio Mobile Views, like the EnhancedButton or EnhancedSwitch, can ease the development of custom components with the SDK. Check out the relevant SDK sample for an end to end example of their use.

EnhancedActivityIndicator​

EnhancedActivityIndicator is an extension of Xamarin Forms' ActivityIndicator. ActivityIndicator appears as a progress ring on iOS and Android, and an indeterminate progress bar on UWP; EnhancedActivityIndicator is rendered as a progress ring on UWP as well for a more uniform experience.

<toolkit:EnhancedActivityIndicator IndicatorHeightRequest="40" IndicatorWidthRequest="40" IsRunning="True"/>

EnhancedButton​

EnhancedButton is an extension of the Xamarin Forms Button, with some additional properties and functionality. These include Entered and Exited events for the cursor on UWP, additional color properties, and the ability to underline the button text.

<StackLayout>
    <toolkit:EnhancedButton ImageSource="cog" ImageTintColor="MediumPurple" HandCursorOnHover="True"/>
    <toolkit:EnhancedButton Text="Hyperlink style button" BorderWidth="0" TextUnderline="True"/>
</StackLayout>

EnhancedEntry​

EnhancedEntry is an extension of Xamarin Forms' Entry, with some additional theming on Android.

EnhancedSwitch​

EnhancedSwitch is an extension of the Xamarin Forms Switch, with some additional color properties.

<toolkit:EnhancedSwitch BorderColor="Purple" AndroidColor="Purple" ThumbColor="HotPink" OnColor="LightPink" />

EnhancedTableView​

EnhancedTableView is an extension of the Xamarin Forms TableView, with some additional color properties.

ShadowFrame​

ShadowFrame is an extension of Xamarin Forms' Frame which allows for a drop shadow on UWP.

<toolkit:ShadowFrame Padding="0" HorizontalOptions="Center">
    <toolkit:EnhancedButton Text="My button" Margin="0" BorderWidth="0"/>
</toolkit:ShadowFrame>

TintedImage​

TintedImage is an extension of Xamarin Forms' Image which supports image tinting. Currently only supports FileImageSource sources.

<StackLayout Orientation="Horizontal">
    <toolkit:TintedImage TintColor="DarkGoldenrod" Source="{Binding CogIcon, Converter={StaticResource IconConverter}, ConverterParameter='cog'}"/>
    <toolkit:TintedImage TintColor="MediumPurple" Source="{Binding CogIcon, Converter={StaticResource IconConverter}, ConverterParameter='cog'}"/>
</StackLayout>

Using Theme Colors in Custom Components​

If you need to use plain Views when building your component, the various theming colors can be used in XAML styling.

<Style x:Key="InnerDetailsFrameStyle" TargetType="Frame">
  ...
  <Setter Property="BackgroundColor" Value="{DynamicResource SecondaryBackgroundColor}"></Setter>
  ...
</Style>

Using Built-in Icons​

The following example demonstrates a component that uses VertiGIS Studio Mobile UI components and an icon from the VertiGIS Studio Icons library.

class CustomComponent : ComponentBase
{
    public CustomComponent()
    {
    }

    protected override VisualElement Create(XNode node)
    {
        return new EnhancedButton()
        {
            Text = "Pause Icon",
            ImageSource = "playback_pause",
            Margin = new Thickness(2)
        };
    }
}

Relevant SDK Samples​

Check out the relevant VertiGIS Studio Mobile SDK Samples: