New to Telerik UI for Xamarin? Download free 30-day trial

Theming and Style

ComboBox Styling

ComboBox control for Xamarin provides the following Style properties for customizing its look:

  • PlaceholderColor(Xamarin.Forms.Color): Defines the color for the placeholder text.
  • TextColor(Xamarin.Forms.Color): Defines the color of the text when the control is editable and color of the selected item when it is not editable and selection mode is single.
  • BackgroundColor(Xamarin.Forms.Color): Defines the background color of the control.
  • BorderColor(Xamarin.Forms.Color): Defines the color of the border.
  • BorderThickness(Xamarin.Forms.Color): Defines the thickness of the border.
  • FocusedBorderColor(Xamarin.Forms.Color): Defines the color of the nborder when the control is focused.
  • ClearButtonStyle(of type Style with target type Xamarin.Forms.Button): Defines the style for the clear button.
  • Font Options(FontAttributes, FontFamily, FontSize): Define the font options to the text of the RadComboBox. It is applied to the Placeholder, Selected Text(for single selection) and when the control is in Editable Mode.

Example for ComboBox Styling

Here is the ComboBox definition in XAML:

<telerikInput:RadComboBox ItemsSource="{Binding Items}" 
                          Placeholder="Select City!"
                          PlaceholderColor="Blue"
                          BackgroundColor="LightGray"
                          FocusedBorderColor="Blue"
                          BorderColor="Black"
                          BorderThickness="2"
                          ClearButtonStyle="{StaticResource ClearButtonStyle}"
                          DisplayMemberPath="Name">
    <telerikInput:RadComboBox.BindingContext>
        <local:ViewModel/>
    </telerikInput:RadComboBox.BindingContext>
</telerikInput:RadComboBox>

in addition you will need to add the following namespace:

xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"

the sample business model

public class City
{
    public string Name { get; set; }
    public int Population { get; set; }
}

and the ViewModel used:

public class ViewModel : NotifyPropertyChangedBase
{
    public ViewModel()
    {
        this.Items = new ObservableCollection<City>
        {
            new City { Name = "Tokyo", Population = 13929286 },
            new City { Name = "New York", Population = 8623000 },
            new City { Name = "London", Population = 8908081 },
            new City { Name = "Madrid", Population = 3223334 },
            new City { Name = "Los Angeles", Population = 4000000},
            new City { Name = "Paris", Population = 2141000 },
            new City { Name = "Beijing", Population = 21540000 },
            new City { Name = "Singapore", Population = 5612000 },
            new City { Name = "New Delhi", Population = 18980000 },
            new City { Name = "Bangkok", Population = 8305218 },
            new City { Name = "Berlin", Population = 3748000 },
        };
    }

    public ObservableCollection<City> Items { get; set; }
}

Here is how the Combobox looks when styling is applied:

ComboBox Edit Mode

Here is how the styling is applied when the control is focused and item is selected:

ComboBox Edit Mode

The ComboBox Styling example can be found in our SDK Browser Application. You can find the applications in the Examples folder of your local Telerik UI for Xamarin installation or in the following GitHub repo.

The following properties styles the ComboBox Drop Down:

  • DropDownBorderColor(Xamarin.Forms.Color): Defines the color of the border around the drop down part of the control.
  • DropDownBorderThickness(Xamarin.Forms.Thickness): Defines the thickness of the border that is around of the drop down part of the control.
  • DropDownBorderCornerRadius(Xamarin.Forms.Thickness): Defines the corner radius of the border that is around the drop down part of the control
  • DropDownBackgroundColor(Xamarin.Forms.Color): Defines the background color of the drop down part of the control.
  • DropDownButtonStyle(of type Style with target type Xamarin.Forms.Button): Defines the style for the drop down button.

Example Drop Down Styling

Here is the ComboBox definition in XAML:

<telerikInput:RadComboBox ItemsSource="{Binding Items}"
                          IsEditable="True" 
                          SearchTextPath="Name"
                          DisplayMemberPath="Name"
                          SelectionMode="Multiple"
                          HighlightTextColor="Black"
                          DropDownBorderColor="Blue"
                          DropDownBorderThickness="2"
                          DropDownCornerRadius="5"
                          DropDownBackgroundColor="LightBlue"
                          DropDownButtonStyle="{StaticResource DropDownButtonStyle}">
    <telerikInput:RadComboBox.BindingContext>
        <local:ViewModel/>
    </telerikInput:RadComboBox.BindingContext>
</telerikInput:RadComboBox>

add the following namespace:

xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"

The DropDown Button Style is defined in the Page's ResourceDictionary:

<Style TargetType="Button" x:Key="DropDownButtonStyle">
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="HorizontalOptions" Value="Center"/>
    <Setter Property="VerticalOptions" Value="Center"/>
    <Setter Property="WidthRequest" Value="24"/>
    <Setter Property="HeightRequest" Value="24"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="BackgroundColor">
        <Setter.Value>
            <OnPlatform x:TypeArguments="Color">
                <On Platform="Android">Transparent</On>
            </OnPlatform>
        </Setter.Value>
    </Setter>
    <Setter Property="TextColor" Value="Blue"/>
    <Setter Property="Margin">
        <Setter.Value>
            <OnPlatform x:TypeArguments="Thickness">
                <On Platform="Android">8, 0, 4, 0</On>
                <On Platform="iOS">8, 6, 4, 7</On>
                <On Platform="UWP">6, 1, 10, 1</On>
            </OnPlatform>
        </Setter.Value>
    </Setter>
</Style>

the sample business model

public class City
{
    public string Name { get; set; }
    public int Population { get; set; }
}

and the ViewModel used:

public class ViewModel : NotifyPropertyChangedBase
{
    public ViewModel()
    {
        this.Items = new ObservableCollection<City>
        {
            new City { Name = "Tokyo", Population = 13929286 },
            new City { Name = "New York", Population = 8623000 },
            new City { Name = "London", Population = 8908081 },
            new City { Name = "Madrid", Population = 3223334 },
            new City { Name = "Los Angeles", Population = 4000000},
            new City { Name = "Paris", Population = 2141000 },
            new City { Name = "Beijing", Population = 21540000 },
            new City { Name = "Singapore", Population = 5612000 },
            new City { Name = "New Delhi", Population = 18980000 },
            new City { Name = "Bangkok", Population = 8305218 },
            new City { Name = "Berlin", Population = 3748000 },
        };
    }

    public ObservableCollection<City> Items { get; set; }
}

Here is how the Drop Down Styling looks:

ComboBox Drop Down Style

The DropDown Styling example can be found in our SDK Browser Application. You can find the applications in the Examples folder of your local Telerik UI for Xamarin installation or in the following GitHub repo.

Theming

See Also

In this article
Not finding the help you need? Improve this article