We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Inherit style from SfSegmentedControl

Thread ID:





150334 Jan 2,2020 03:18 PM UTC Jan 3,2020 10:55 AM UTC Xamarin.Forms 1
Tags: SfSegmentedControl
Andreas Reitberger
Asked On January 2, 2020 03:18 PM UTC


I'm trying to build themes for my app and I want to create global styles like shown below.

<!-- SegmentControls -->
        <Style x:Key="SegmentedControlStyle" BasedOn="{DynamicResource SfSegmentedControl}"
            <Setter Property="SelectionTextColor"
                    Value="{DynamicResource SecondaryColor}" />
            <Setter Property="BackgroundColor"
                    Value="{DynamicResource TransparentColor}" />
            <Setter Property="Color"
                    Value="{DynamicResource TransparentColor}" />
            <Setter Property="FontColor"
                    Value="{DynamicResource PrimaryColor}" />
            <Setter Property="BorderColor"
                    Value="{DynamicResource PrimaryColor}" />

However I cannot figure out the accurate key for the BasedOn property.
Any help would be appreciated!

Hemalatha Marikumar [Syncfusion]
Replied On January 3, 2020 10:55 AM UTC

Hi Andreas,

Greetings from Syncfusion. 
You can achieve your requirement by creating a default style for SfSegmentedControl as base style in App.xaml page and set its key for BasedOn property of other derived styles. Please refer the below code. 
Code snippet[XAML] App.xaml 
        <Style x:Key="baseSegmentedStyle" TargetType="sfButtons:SfSegmentedControl"> 
            <Setter Property="VisibleSegmentsCount" Value="2" /> 
            <Setter Property="CornerRadius" Value="20" /> 
            <Setter Property="FontColor" Value="Red" /> 
            <Setter Property="BorderColor" Value="DarkGreen" /> 
        <Style x:Key="SegmentedControlPrimaryStyle" BasedOn="{StaticResource baseSegmentedStyle}" TargetType="sfButtons:SfSegmentedControl"> 
            <Setter Property="SelectionTextColor" 
                Value="{DynamicResource SecondaryColor}" /> 
            <Setter Property="BackgroundColor" 
                Value="{DynamicResource TransparentColor}" /> 
            <Setter Property="Color" 
                Value="{DynamicResource TransparentColor}" /> 
            <Setter Property="FontColor" 
                Value="{DynamicResource PrimaryColor}" /> 
            <Setter Property="BorderColor" 
                Value="{DynamicResource PrimaryColor}" /> 
        <Style x:Key="SegmentedControlSecondaryStyle" BasedOn="{StaticResource baseSegmentedStyle}" TargetType="sfButtons:SfSegmentedControl"> 
            <Setter Property="SelectionTextColor" Value="DeepPink" /> 
            <Setter Property="BackgroundColor" Value="LightPink"/> 
Code snippet [XAML]: MainPage.xaml 
        <Style x:Key="SegmentedControlDerivedStyle" BasedOn="{StaticResource SegmentedControlSecondaryStyle}" TargetType="sfButtons:SfSegmentedControl"> 
            <Setter Property="SelectionTextColor" Value="Blue" /> 
.  .  . 
<sfButtons:SfSegmentedControl Style="{DynamicResource SegmentedControlPrimaryStyle}" > 
  .  .  . 
<sfButtons:SfSegmentedControl Style="{DynamicResource SegmentedControlDerivedStyle}" />        
We have prepared a simple sample based on that and it can be downloaded from the below link. 
Note – DynamicResource is not allowed for BasedOn property of Style. Please refer the below links for more details. 
Please get back to us if you need any further assistance on this. 
Hemalatha M. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon