Component Styling

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

Using Geocortex Mobile XAML Elements

Geocortex Mobile XAML Elements, 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.

Using Theme Colors in Custom Components

If you need to use plain XAML elements 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 Geocortex Mobile UI components and an icon from the Geocortex 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 Sample

Check out the relevant Geocortex Mobile SDK Samples:

Edit this page