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

Inherit style from SfSegmentedControl

Hi,

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}"
               TargetType="buttons: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>

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

1 Reply

HM Hemalatha Marikumar Syncfusion Team 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 
<Application.Resources> 
    <ResourceDictionary>        
        <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> 
  
        <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> 
  
        <Style x:Key="SegmentedControlSecondaryStyle" BasedOn="{StaticResource baseSegmentedStyle}" TargetType="sfButtons:SfSegmentedControl"> 
            <Setter Property="SelectionTextColor" Value="DeepPink" /> 
            <Setter Property="BackgroundColor" Value="LightPink"/> 
        </Style> 
    </ResourceDictionary> 
</Application.Resources> 
plication> 
  
Code snippet [XAML]: MainPage.xaml 
<ContentPage.Resources> 
    <ResourceDictionary> 
        <Style x:Key="SegmentedControlDerivedStyle" BasedOn="{StaticResource SegmentedControlSecondaryStyle}" TargetType="sfButtons:SfSegmentedControl"> 
            <Setter Property="SelectionTextColor" Value="Blue" /> 
        </Style> 
        
    </ResourceDictionary> 
</ContentPage.Resources> 
  
.  .  . 
  
<sfButtons:SfSegmentedControl Style="{DynamicResource SegmentedControlPrimaryStyle}" > 
  .  .  . 
</sfButtons:SfSegmentedControl> 
  
<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. 
  
Regards, 
Hemalatha M. 


Loader.
Live Chat Icon For mobile
Up arrow icon