The appearance of the SfExpander can be customized using the following two VisualStates
:
- Expanded
- Collapsed
<syncfusion:SfExpander x:Name="expander">
<syncfusion:SfExpander.Header>
<Label Text="Veg Pizza" VerticalTextAlignment="Center"/>
</syncfusion:SfExpander.Header>
<syncfusion:SfExpander.Content>
<Label HeightRequest="50" Text="Veg pizza is prepared with the items that meet vegetarian standards by not including any meat or animal tissue products." VerticalTextAlignment="Center"/>
</syncfusion:SfExpander.Content>
<VisualStateManager.VisualStateGroups>
<VisualStateGroupList>
<VisualStateGroup>
<VisualState Name="Expanded">
<VisualState.Setters>
<Setter Property="HeaderBackgroundColor" Value="Red"/>
</VisualState.Setters>
</VisualState>
<VisualState Name="Collapsed">
<VisualState.Setters>
<Setter Property="HeaderBackgroundColor" Value="Green"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</VisualStateManager.VisualStateGroups>
</syncfusion:SfExpander>
{% endhighlight %}
You can also refer our UG documentation to know more about VSM.