New to Telerik UI for .NET MAUI? Start a free 30-day trial
.NET MAUI DropDownButton Visual States
Updated on May 13, 2026
This article describes the visual states the DropDownButton provides. You can use the visual states to change the visual appearance of the control depending on its current state whether the control is disabled, pressed, or has the mouse pointer hovering over it.
The DropDownButton provides the following CommonStates visual states:
| Visual states | Description |
|---|---|
Normal | Applies when the button is in normal state. |
Opened | Applies when the drop-down is opened. |
Pressed | Applies when the button is pressed. |
FocusedPressed | (Desktop-only) Applies when the button is pressed and focused by using the keyboard. |
MouseOver | (Desktop-only) Applies when the mouse pointer hovers over the control. |
FocusedMouseOver | (Desktop-only) Applies when the mouse pointer hovers over the control and the control is focused by using the keyboard. |
Disabled | Applies when the button is disabled. |
Using the Visual States
The following example demonstrates how to use the DropDownButton visual states.
1. Define the DropDownButton in XAML:
XAML
<telerik:RadDropDownButton Content="More Options"
Style="{StaticResource DropDownButtonStyle}"
DropDownIndicatorStyle="{StaticResource DropDownIndicatorStyle}">
<telerik:RadDropDownButton.DropDownContent>
<VerticalStackLayout Padding="12" Spacing="6">
<Label Text="Actions"
FontAttributes="Bold" />
<telerik:RadTemplatedButton Content="New" />
<telerik:RadTemplatedButton Content="Open" />
<telerik:RadTemplatedButton Content="Save" />
</VerticalStackLayout>
</telerik:RadDropDownButton.DropDownContent>
</telerik:RadDropDownButton>2. Define the visual states in the page's resources:
XAML
<Style TargetType="Label" x:Key="DropDownIndicatorStyle">
<Setter Property="FontSize" Value="16" />
<Setter Property="TextColor" Value="#A30111"/>
</Style>
<Style TargetType="telerik:RadDropDownButton" x:Key="DropDownButtonStyle">
<Setter Property="TextColor" Value="#00897B" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="#00897B" />
<Setter Property="BackgroundColor" Value="#FFFFFF" />
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup Name="CommonStates">
<VisualState Name="Normal" />
<VisualState Name="Focused" />
<VisualState Name="Pressed">
<VisualState.Setters>
<Setter Property="TextColor" Value="#9900897B" />
<Setter Property="Background" Value="#E8F5F4" />
</VisualState.Setters>
</VisualState>
<VisualState Name="FocusedPressed">
<VisualState.Setters>
<Setter Property="TextColor" Value="#9900897B" />
<Setter Property="Background" Value="#E8F5F4" />
</VisualState.Setters>
</VisualState>
<VisualState Name="Opened">
<VisualState.Setters>
<Setter Property="telerik:RadDropDownButton.BorderBrush" Value="#00BCA9" />
<Setter Property="telerik:RadDropDownButton.BorderThickness" Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState Name="PointerOver">
<VisualState.Setters>
<Setter Property="telerik:RadDropDownButton.BackgroundColor" Value="#F9F9F9" />
</VisualState.Setters>
</VisualState>
<VisualState Name="FocusedMouseOver">
<VisualState.Setters>
<Setter Property="telerik:RadDropDownButton.BackgroundColor" Value="#F9F9F9" />
</VisualState.Setters>
</VisualState>
<VisualState Name="Disabled">
<VisualState.Setters>
<Setter Property="Opacity" Value="0.6" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>3. Add the telerik namespace:
XAML
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"For a runnable example demonstrating the DropDownButton visual states, see the SDKBrowser Demo Application and go to the DropDownButton > Styling category.