solution • Xamarin UI - martindubenet/wed-dev-design GitHub Wiki

Official ressources

  1. Style a Cross-Platform Xamarin.Forms Application docs from Microsoft.
  2. xamarin-forms-samples code on GitHub.

Xamarin VS CSS

BIG difference when styling Xamarin XML files (compare to using CSS) is that you can NOT add multiple class for one element. So using, like Bootstrap does, a generic class for the form plus a specific class for the color details like "btn btn-primary btn-large" is not supported in Xamarin.

You are limited to ONLY ONE CLASS like "btn-primary-large" instead.

 

Style codes within a Xamarin Solution

Style example

This would be like having a specific <head> <style /> </head> within your page.

<Style x:Key="ListIconButton" TargetType="buttons:SfButton">
    <Setter Property="BackgroundColor" Value="{DynamicResource Brand}" />
    <Setter Property="TextColor" Value="{DynamicResource White}" />
    <Setter Property="FontFamily" Value="{StaticResource fa-regular-400}"/>
    <Setter Property="FontSize" Value="23" />
    <Setter Property="HeightRequest" Value="50" />
    <Setter Property="WidthRequest" Value="50" />
    <Setter Property="CornerRadius" Value="1000" />
    <Setter Property="VerticalTextAlignment" Value="Center" />
    <Setter Property="Margin" Value="0" />
</Style>

<Style x:Key="BrandIconButton" TargetType="buttons:SfButton" BasedOn="{StaticResource ListIconButton}">
    <Setter Property="BackgroundColor" Value="{DynamicResource Brand}" />
</Style>

<Style x:Key="RedIconButton" TargetType="buttons:SfButton" BasedOn="{StaticResource ListIconButton}">
    <Setter Property="BackgroundColor" Value="{DynamicResource Red}" />
</Style>

 

Global app stylesheet example

This would be the equivalence of a style.css file for the entire site.

<?xml version="1.0" encoding="utf-8" ?>
<ResourceDictionary
x:Class="WebappExemple.Themes.LightTheme"
xmlns="http://WebappExemple.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:buttons="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms">

<!-- BRAND related colors (subject to change if whitelabelling this app) -->
<Color x:Key="Brand">#4ED01A</Color>
<Color x:Key="Primary">#1D8CF5</Color>
<Color x:Key="PrimaryDarkColor">#d0424f</Color>
<Color x:Key="PrimaryDarkenColor">#ab3641</Color>
<Color x:Key="PrimaryLighterColor">#edcacd</Color>
<Color x:Key="PrimaryGradient">#e83f94</Color>
<Color x:Key="PrimaryLight">#ffe8f4</Color>
<Color x:Key="Secondary">#405A75</Color>
<Color x:Key="SecondaryGradient">#7644ad</Color>
<Color x:Key="HyperLink">#567cd7</Color>
<Color x:Key="MainGray">#d3dbe2</Color>

<!-- UI related colors -->
<Color x:Key="Tone-100">#f6f7f8</Color>
<Color x:Key="Tone-200">#ebecef</Color>
<Color x:Key="Tone-300">#ced2d9</Color>
<Color x:Key="Tone-400">#b2b8c2</Color>
<Color x:Key="Tone-500">#959eac</Color>
<Color x:Key="Tone-600">#788396</Color>
<Color x:Key="Tone-700">#606a7b</Color>
<Color x:Key="Tone-800">#4a515e</Color>
<Color x:Key="Tone-900">#333942</Color>
<Color x:Key="Tone-Black">#000000</Color>
<Color x:Key="Tone-White">#ffffff</Color>
<Color x:Key="Transparent">Transparent</Color>

<!-- ALERTS & STATUS related colors -->
<Color x:Key="Green">#7ed321</Color>
<Color x:Key="Red">#ff4a4a</Color>
<Color x:Key="Orange">#ff844a</Color>
<Color x:Key="Blue">#4acaff</Color>


<!-- FONTS -->

<OnPlatform x:Key="FontIcons" x:TypeArguments="x:String">
    <OnPlatform.Platforms>
        <On Platform="Android" Value="UIFontIcons.ttf#UIFontIcons" />
        <On Platform="iOS" Value="UIFontIcons" />
        <On Platform="UWP" Value="Assets/UIFontIcons.ttf#UIFontIcons" />
    </OnPlatform.Platforms>
</OnPlatform>

<OnPlatform x:Key="Montserrat-SemiBold" x:TypeArguments="x:String">
    <OnPlatform.Platforms>
        <On Platform="Android" Value="Montserrat-SemiBold.ttf#Montserrat-SemiBold" />
        <On Platform="iOS" Value="Montserrat-SemiBold" />
        <On Platform="UWP" Value="Assets/Montserrat-SemiBold.ttf#Montserrat-SemiBold" />
    </OnPlatform.Platforms>
</OnPlatform>

<OnPlatform x:Key="Montserrat-Regular" x:TypeArguments="x:String">
    <OnPlatform.Platforms>
        <On Platform="Android" Value="Montserrat-Regular.ttf#Montserrat-Regular" />
        <On Platform="iOS" Value="Montserrat-Regular" />
        <On Platform="UWP" Value="Assets/Montserrat-Regular.ttf#Montserrat-Regular" />
    </OnPlatform.Platforms>
</OnPlatform>

<OnPlatform x:Key="Montserrat-Medium" x:TypeArguments="x:String">
    <OnPlatform.Platforms>
        <On Platform="Android" Value="Montserrat-Medium.ttf#Montserrat-Medium" />
        <On Platform="iOS" Value="Montserrat-Medium" />
        <On Platform="UWP" Value="Assets/Montserrat-Medium.ttf#Montserrat-Medium" />
    </OnPlatform.Platforms>
</OnPlatform>

<OnPlatform x:Key="Montserrat-Bold" x:TypeArguments="x:String">
    <OnPlatform.Platforms>
        <On Platform="Android" Value="Montserrat-Bold.ttf#Montserrat-Bold" />
        <On Platform="iOS" Value="Montserrat-Bold" />
        <On Platform="UWP" Value="Assets/Montserrat-Bold.ttf#Montserrat-Bold" />
    </OnPlatform.Platforms>
</OnPlatform>

<OnPlatform x:Key="fa-brands-400" x:TypeArguments="x:String">
    <OnPlatform.Platforms>
        <On Platform="Android" Value="fa-brands-400.ttf#Font Awesome 5 Brands Regular" />
        <On Platform="iOS" Value="fa-brands-400" />
        <On Platform="UWP" Value="Assets/fa-brands-400.ttf#Font Awesome 5 Brands" />
    </OnPlatform.Platforms>
</OnPlatform>

<OnPlatform x:Key="fa-light-300" x:TypeArguments="x:String">
    <OnPlatform.Platforms>
        <On Platform="Android" Value="fa-light-300.ttf#Font Awesome 5 Pro Light" />
        <On Platform="iOS" Value="fa-light-300" />
        <On Platform="UWP" Value="Assets/fa-light-300.ttf#Font Awesome 5 Pro" />
    </OnPlatform.Platforms>
</OnPlatform>

<OnPlatform x:Key="fa-regular-400" x:TypeArguments="x:String">
    <OnPlatform.Platforms>
        <On Platform="Android" Value="fa-regular-400.ttf#Font Awesome 5 Pro Regular" />
        <On Platform="iOS" Value="fa-regular-400" />
        <On Platform="UWP" Value="Assets/fa-regular-400.ttf#Font Awesome 5 Pro" />
    </OnPlatform.Platforms>
</OnPlatform>

<OnPlatform x:Key="fa-solid-900" x:TypeArguments="x:String">
    <OnPlatform.Platforms>
        <On Platform="Android" Value="fa-solid-900.ttf#Font Awesome 5 Pro Solid" />
        <On Platform="iOS" Value="fa-solid-900" />
        <On Platform="UWP" Value="Assets/fa-solid-900.ttf#Font Awesome 5 Pro" />
    </OnPlatform.Platforms>
</OnPlatform>


<!-- COMPONENTS -->

<Style x:Key="SfDefaultSwitch" TargetType="buttons:SfSwitch">
    <Setter Property="AllowIndeterminateState" Value="False" />
    <Setter Property="HeightRequest" Value="28" />
    <Setter Property="VisualType" Value="Custom" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="On">
                    <VisualState.Setters>
                        <Setter Property="SwitchSettings">
                            <Setter.Value>
                                <buttons:CupertinoSwitchSettings
                                                x:TypeArguments="buttons:OnState"
                                                ThumbBorderColor="{DynamicResource Tone-200}"
                                                ThumbColor="{DynamicResource Tone-White}"
                                                TrackBorderColor="{DynamicResource Tone-200}"
                                                TrackColor="{DynamicResource Brand}" />
                            </Setter.Value>
                        </Setter>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Off">
                    <VisualState.Setters>
                        <Setter Property="SwitchSettings">
                            <Setter.Value>
                                <buttons:CupertinoSwitchSettings
                                                x:TypeArguments="buttons:OffState"
                                                ThumbBorderColor="{DynamicResource Tone-200}"
                                                ThumbColor="{DynamicResource Tone-White}"
                                                TrackBorderColor="{DynamicResource Tone-200}"
                                                TrackColor="{DynamicResource Tone-200}" />
                            </Setter.Value>
                        </Setter>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>
</ResourceDictionary>
My wikis

[ Content edition ][ Web dev & design ][ PHP ][ Wordpress ] md

MartinDube.net

⚠️ **GitHub.com Fallback** ⚠️