How to

31 Oct 201924 minutes to read

Show busy indicator to perform async action

The busy indicator indicates users that something is on progress in the background. For instance, some data is being fetched from the back end. Here, when users about to switch the state, the StateChanging event occurs, and users can set the IsBusy property to true to show busy indicator and perform fetching the data from the server. After fetching the data, the IsOn property will be set to true or false based on validation. After validation, the IsBusy property is set to false.

<syncfusion:SfSwitch x:Name="sfSwitch" StateChanging="State_StateChanging"/>
SfSwitch sfSwitch = new SfSwitch();

 sfSwitch.StateChanged += State_StateChanging;
  • c#
  • private async void State_StateChanging(object sender, SwitchStateChangingEventArgs e)
            {
                this.sfSwitch.IsBusy = true;
                await Task.Delay(2500);
                this.sfSwitch.IsOn = ValidateInternetConnection();
                this.sfSwitch.IsBusy = false;
            }
    
            private bool ValidateInternetConnection()
            {
                Random randomValue = new Random();
                if (randomValue.Next() % 2 == 0)
                {
                    return false;
                }
                return true;
            }

    switch control with busy indicator

    Change thumb color alone based on its state and devices

    You can customize the thumb color using the ThumbColor property based on its visual state and devices.

    <syncfusion:SfSwitch  VisualType="Custom">
    
            <VisualStateManager.VisualStateGroups>
    
                <VisualStateGroup x:Name="CommonStates">
    
                    <VisualState x:Name="On">
    
                        <VisualState.Setters>
    
                            <Setter Property="SwitchSettings">
    
                                <Setter.Value>
    
                                    <syncfusion:FluentSwitchSettings x:TypeArguments="syncfusion:OnState"
    
                                     ThumbColor="Green"/>
    
                                </Setter.Value>
    
                            </Setter>
    
                        </VisualState.Setters>
    
                    </VisualState>
    
                    <VisualState x:Name="Off">
    
                        <VisualState.Setters>
    
                            <Setter Property="SwitchSettings">
    
                                <Setter.Value>
    
                                    <syncfusion:FluentSwitchSettings x:TypeArguments="syncfusion:OffState"
    
                                     ThumbColor="Green"/>
    
                                </Setter.Value>
    
                            </Setter>
    
                        </VisualState.Setters>
    
                    </VisualState>
    
                </VisualStateGroup>
    
            </VisualStateManager.VisualStateGroups>
    
        </syncfusion:SfSwitch>
    SfSwitch sfSwitch = new SfSwitch();
                sfSwitch.VisualType = VisualType.Custom;
    
                DefaultSwitchSettings<OnState> defaultSwitch = new DefaultSwitchSettings<OnState>();
                defaultSwitch.ThumbColor = Color.Green;
               
                DefaultSwitchSettings<OffState> defaultSwitch1 = new DefaultSwitchSettings<OffState>();
                defaultSwitch1.ThumbColor = Color.Green;
    
                VisualStateGroupList visualStateGroupList = new VisualStateGroupList();
    
                VisualStateGroup commonStateGroup = new VisualStateGroup();
                VisualState onState = new VisualState
                {
                    Name = "On"
                };
                onState.Setters.Add(new Setter { Property = SfSwitch.SwitchSettingsProperty, Value = defaultSwitch });
    
                VisualState offState = new VisualState
                {
                    Name = "Off"
                };
    
                offState.Setters.Add(new Setter { Property = SfSwitch.SwitchSettingsProperty, Value = defaultSwitch1 });
    
                commonStateGroup.States.Add(onState);
                commonStateGroup.States.Add(offState);
                visualStateGroupList.Add(commonStateGroup);
    
                VisualStateManager.SetVisualStateGroups(sfSwitch, visualStateGroupList);
    
                this.Content = sfSwitch;

    switch control with busy indicator

    Change thumb color alone based on its state with Material theme for all devices

    By using the MaterialSwitchSettings, CupertinoSwitchSettings, and FluentSwitchSettings properties, you can change the thumb color based on its state for all devices.

    <syncfusion:SfSwitch  VisualType="Custom">
    
            <VisualStateManager.VisualStateGroups>
    
                <VisualStateGroup x:Name="CommonStates">
    
                    <VisualState x:Name="On">
    
                        <VisualState.Setters>
    
                            <Setter Property="SwitchSettings">
    
                                <Setter.Value>
    
                                    <syncfusion:MaterialSwitchSettings x:TypeArguments="syncfusion:OnState"
    
                                     ThumbColor="Brown"/>
    
                                </Setter.Value>
    
                            </Setter>
    
                        </VisualState.Setters>
    
                    </VisualState>
    
                    <VisualState x:Name="Off">
    
                        <VisualState.Setters>
    
                            <Setter Property="SwitchSettings">
    
                                <Setter.Value>
    
                                    <syncfusion:MaterialSwitchSettings x:TypeArguments="syncfusion:OffState"
    
                                     ThumbColor="Brown"/>
    
                                </Setter.Value>
    
                            </Setter>
    
                        </VisualState.Setters>
    
                    </VisualState>
    
                </VisualStateGroup>
    
            </VisualStateManager.VisualStateGroups>
    
        </syncfusion:SfSwitch>
    SfSwitch sfSwitch = new SfSwitch();
                sfSwitch.VisualType = VisualType.Custom;
    
                MaterialSwitchSettings<OnState> defaultSwitch = new MaterialSwitchSettings<OnState>();
                defaultSwitch.ThumbColor = Color.Brown;
    
                MaterialSwitchSettings<OffState> defaultSwitch1 = new MaterialSwitchSettings<OffState>();
                defaultSwitch1.ThumbColor = Color.Brown;
    
                VisualStateGroupList visualStateGroupList = new VisualStateGroupList();
    
                VisualStateGroup commonStateGroup = new VisualStateGroup();
                VisualState onState = new VisualState
                {
                    Name = "On"
                };
                onState.Setters.Add(new Setter { Property = SfSwitch.SwitchSettingsProperty, Value = defaultSwitch });
    
                VisualState offState = new VisualState
                {
                    Name = "Off"
                };
    
                offState.Setters.Add(new Setter { Property = SfSwitch.SwitchSettingsProperty, Value = defaultSwitch1 });
    
                commonStateGroup.States.Add(onState);
                commonStateGroup.States.Add(offState);
                visualStateGroupList.Add(commonStateGroup);
    
                VisualStateManager.SetVisualStateGroups(sfSwitch, visualStateGroupList);
    
                this.Content = sfSwitch;

    switch conrol with thumb color

    Set color for disabled state

    The Switch control provides options to customize the color based on the disabled states. The below code example illustrates this customization.

    <syncfusion:SfSwitch  VisualType="Custom" IsEnabled="False"  IsOn="True">
    
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup  x:Name="CommonStates">
                    <VisualState x:Name="DisabledOn">
                        <VisualState.Setters>
                            <Setter Property="SwitchSettings">
                                <Setter.Value>
                                    <syncfusion:DefaultSwitchSettings  x:TypeArguments="syncfusion:DisabledOnState" 
                                    ThumbBorderColor="Red" ThumbColor="Green" 
                                     TrackBorderColor="LightGreen" TrackColor="OrangeRed" 
                                     BusyIndicatorColor="Pink">
                                    </syncfusion:DefaultSwitchSettings>
                                </Setter.Value>
                            </Setter>
                        </VisualState.Setters>
                    </VisualState>
    
                    <VisualState x:Name="DisabledOff">
                        <VisualState.Setters>
                            <Setter Property="SwitchSettings">
                                <Setter.Value>
                                    <syncfusion:DefaultSwitchSettings x:TypeArguments="syncfusion:DisabledOffState" 
                                       ThumbBorderColor="Red" ThumbColor="Green" 
                                     TrackBorderColor="LightGreen" TrackColor="OrangeRed" 
                                     />
                                </Setter.Value>
                            </Setter>
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
    
            </VisualStateManager.VisualStateGroups>
        </syncfusion:SfSwitch>
    SfSwitch sfSwitch = new SfSwitch();
    sfSwitch.VisualType = VisualType.Custom;
    sfSwitch.IsOn = true;
    sfSwitch.IsEnabled = false;
    
    DefaultSwitchSettings<DisabledOnState> defaultSwitch = new DefaultSwitchSettings<DisabledOnState>();
    defaultSwitch.ThumbBorderColor = Color.Red;
    defaultSwitch.ThumbColor = Color.Green;
    defaultSwitch.TrackBorderColor = Color.LightGreen;
    defaultSwitch.TrackColor = Color.OrangeRed;
    defaultSwitch.BusyIndicatorColor = Color.Pink;
    
    DefaultSwitchSettings<DisabledOffState> defaultSwitch1 = new DefaultSwitchSettings<DisabledOffState>();
    defaultSwitch1.ThumbBorderColor = Color.Red;
    defaultSwitch1.ThumbColor = Color.Green;
    defaultSwitch1.TrackBorderColor = Color.LightGreen;
    defaultSwitch1.TrackColor = Color.OrangeRed;
    
    VisualStateGroupList visualStateGroupList = new VisualStateGroupList();
    
    VisualStateGroup commonStateGroup = new VisualStateGroup();
    VisualState onState = new VisualState
    {
    Name = "DisabledOn"
    };
    onState.Setters.Add(new Setter { Property = SfSwitch.SwitchSettingsProperty, Value = defaultSwitch });
    
    VisualState offState = new VisualState
    {
    Name = "DisabledOff"
    };
    
    offState.Setters.Add(new Setter { Property = SfSwitch.SwitchSettingsProperty, Value = defaultSwitch1 });
    
    commonStateGroup.States.Add(onState);
    
    commonStateGroup.States.Add(offState);
    
    visualStateGroupList.Add(commonStateGroup);
    
    VisualStateManager.SetVisualStateGroups(sfSwitch, visualStateGroupList);
    
    this.Content = sfSwitch;

    switch conrol with image

    Change busy indicator color

    You can customize the busy indicator color using the BusyIndicatorColor property based on its visual state and devices.

    <syncfusion:SfSwitch  VisualType="Custom"  IsBusy="True">
    
            <VisualStateManager.VisualStateGroups>
    
                <VisualStateGroup  x:Name="CommonStates">
    
                    <VisualState x:Name="On">
    
                        <VisualState.Setters>
    
                            <Setter Property="SwitchSettings">
    
                                <Setter.Value>
    
                                    <syncfusion:DefaultSwitchSettings  x:TypeArguments="syncfusion:OnState"  BusyIndicatorColor="Red" >
    
                                    </syncfusion:DefaultSwitchSettings>
    
                                </Setter.Value>
    
                            </Setter>
    
                        </VisualState.Setters>
    
                    </VisualState>
    
                    <VisualState x:Name="Off">
    
                        <VisualState.Setters>
    
                            <Setter Property="SwitchSettings">
    
                                <Setter.Value>
    
                                    <syncfusion:DefaultSwitchSettings x:TypeArguments="syncfusion:OffState" BusyIndicatorColor="Red" />
    
                                </Setter.Value>
    
                            </Setter>
    
                        </VisualState.Setters>
    
                    </VisualState>
    
                </VisualStateGroup>
    
            </VisualStateManager.VisualStateGroups>
    
        </syncfusion:SfSwitch>
    SfSwitch sfSwitch = new SfSwitch();
    sfSwitch.VisualType = VisualType.Custom;
    sfSwitch.IsBusy = true;
    DefaultSwitchSettings<OnState> defaultSwitch = new DefaultSwitchSettings<OnState>();
    defaultSwitch.BusyIndicatorColor = Color.Red;
    DefaultSwitchSettings<OffState> defaultSwitch1 = new DefaultSwitchSettings<OffState>();
    defaultSwitch1.BusyIndicatorColor = Color.Red;
    
    VisualStateGroupList visualStateGroupList = new VisualStateGroupList();
    
    VisualStateGroup commonStateGroup = new VisualStateGroup();
    VisualState onState = new VisualState
    {
    Name = "On"
    };
    onState.Setters.Add(new Setter { Property = SfSwitch.SwitchSettingsProperty, Value = defaultSwitch });
    
    VisualState offState = new VisualState
    {
    Name = "Off"
    };
    
    offState.Setters.Add(new Setter { Property = SfSwitch.SwitchSettingsProperty, Value = defaultSwitch1 });
    
    commonStateGroup.States.Add(onState);
    commonStateGroup.States.Add(offState);
    visualStateGroupList.Add(commonStateGroup);
    
    VisualStateManager.SetVisualStateGroups(sfSwitch, visualStateGroupList);
    
    this.Content = sfSwitch;

    switch control with busy indicator color

    Set all state in same look

    All state can be customized in same look by setting the same state for all switch settings.

    <syncfusion:SfSwitch  VisualType="Custom" >
    
            <VisualStateManager.VisualStateGroups>
    
                <VisualStateGroup  x:Name="CommonStates">
    
                    <VisualState x:Name="On">
    
                        <VisualState.Setters>
    
                            <Setter Property="SwitchSettings">
    
                                <Setter.Value>
    
                                    <syncfusion:DefaultSwitchSettings  x:TypeArguments="syncfusion:OnState" />
    
                                </Setter.Value>
    
                            </Setter>
    
                        </VisualState.Setters>
    
                    </VisualState>
    
                    <VisualState x:Name="Off">
    
                        <VisualState.Setters>
    
                            <Setter Property="SwitchSettings">
    
                                <Setter.Value>
    
                                    <syncfusion:DefaultSwitchSettings x:TypeArguments="syncfusion:OnState" />
    
                                </Setter.Value>
    
                            </Setter>
    
                        </VisualState.Setters>
    
                    </VisualState>
    
                </VisualStateGroup>
    
            </VisualStateManager.VisualStateGroups>
    
        </syncfusion:SfSwitch>
    SfSwitch sfSwitch = new SfSwitch();
    sfSwitch.VisualType = VisualType.Custom;
    
    DefaultSwitchSettings<OnState> defaultSwitch = new DefaultSwitchSettings<OnState>();
    
    DefaultSwitchSettings<OnState> defaultSwitch1 = new DefaultSwitchSettings<OnState>();
    
    VisualStateGroupList visualStateGroupList = new VisualStateGroupList();
    
    VisualStateGroup commonStateGroup = new VisualStateGroup();
    VisualState onState = new VisualState
    {
    Name = "On"
    };
    onState.Setters.Add(new Setter { Property = SfSwitch.SwitchSettingsProperty, Value = defaultSwitch });
    
    VisualState offState = new VisualState
    {
    Name = "Off"
    };
    
    offState.Setters.Add(new Setter { Property = SfSwitch.SwitchSettingsProperty, Value = defaultSwitch1 });
    
    commonStateGroup.States.Add(onState);
    
    commonStateGroup.States.Add(offState);
    
    visualStateGroupList.Add(commonStateGroup);
    
    VisualStateManager.SetVisualStateGroups(sfSwitch, visualStateGroupList);
    
    this.Content = sfSwitch;

    switch control with same look

    Set RTL to switch control

    Switch supports to change the layout direction of the control in the right-to-left direction by setting the FlowDirection to RightToLeft.
    The device direction takes when we set the FlowDirection as MatchParent.

    Setting right to left

    <syncfusion:SfSwitch  FlowDirection="RightToLeft" >
        </syncfusion:SfSwitch>
    SfSwitch sfSwitch = new SfSwitch();
    sfSwitch.FlowDirection = FlowDirection.RightToLeft;
    this.Content = sfSwitch;

    switch control with RTL support

    Setting match parent

    <Grid FlowDirection="RightToLeft">
            <syncfusion:SfSwitch FlowDirection="MatchParent" />
        </Grid>
    Grid grid = new Grid();
    grid.FlowDirection = FlowDirection.RightToLeft;
    SfSwitch sfSwitch = new SfSwitch();
    sfSwitch.FlowDirection = FlowDirection.MatchParent;
    grid.Children.Add(sfSwitch);
    this.Content = grid;

    switch control with RTL support

    Get default color of the switches in all three state.

    The following table illustrate the default color of the switches in all three state.

    Material

    Elements

    State

    Colors

    Thumb Color

    On

    Accent

    Thumb Color

    Off

    #FFFFFFFF

    Thumb Color

    Indeterminate

    Accent

    Thumb Color

    Disabled On

    Accent with 0.4 opacity

    Thumb Color

    Disabled Off

    #FFFFFFFF

    Thumb Color

    Disabled Indeterminate

    Accent with 0.4 opacity

    Thumb Border Color

    On

    Accent

    Thumb Border Color

    Off

    LightGray

    Thumb Border Color

    Indeterminate

    Accent

    Thumb Border Color

    Disabled On

    Accent with 0.4 opacity

    Thumb Border Color

    Disabled Off

    #DADADA

    Thumb Border Color

    Disabled Indeterminate

    Accent with 0.4 opacity

    Track Color

    On

    Accent with 0.2 opacity

    Track Color

    Off

    #949494

    Track Color

    Indeterminate

    #CACACA

    Track Color

    Disabled On

    Accent with 0.2 opacity

    Track Color

    Disabled Off

    #E0E0E0

    Track Color

    Disabled Indeterminate

    #E0E0E0

    Track Border Color

    On

    Transparent

    Track Border Color

    Off

    Transparent

    Track Border Color

    Indeterminate

    Transparent

    Track Border Color

    Disabled On

    Transparent

    Track Border Color

    Disabled Off

    Transparent

    Track Border Color

    Disabled Indeterminate

    Transparent

    Busy Indicator Color

    On

    #00BFFF

    Busy Indicator Color

    Off

    #00BFFF

    Busy Indicator Color

    Indeterminate

    #00BFFF

    Busy Indicator Color

    Disabled On

    #00BFFF

    Busy Indicator Color

    Disabled Off

    #00BFFF

    Busy Indicator Color

    Disabled Indeterminate

    #00BFFF

    Cupertino

    Elements

    State

    Colors

    Thumb Color

    On

    #FFFFFF

    Thumb Color

    Off

    #FFFFFF

    Thumb Color

    Indeterminate

    Accent

    Thumb Color

    Disabled On

    #FFFFFFFF

    Thumb Color

    Disabled Off

    #FFFFFFFF

    Thumb Color

    Disabled Indeterminate

    Accent with 0.5 opacity

    Thumb Border Color

    On

    0.1 Opacity

    Thumb Border Color

    Off

    0.3 Opacity

    Thumb Border Color

    Indeterminate

    0.1 Opacity

    Thumb Border Color

    Disabled On

    0.5 Opacity

    Thumb Border Color

    Disabled Off

    0.3 Opacity

    Thumb Border Color

    Disabled Indeterminate

    0.5 Opacity

    Track Color

    On

    Accent

    Track Color

    Off

    Transparent

    Track Color

    Indeterminate

    Transparent

    Track Color

    Disabled On

    Accent with 0.5 opacity

    Track Color

    Disabled Off

    Transparent

    Track Color

    Disabled Indeterminate

    Transparent

    Track Border Color

    On

    Transparent

    Track Border Color

    Off

    #E5E5E5

    Track Border Color

    Indeterminate

    Accent

    Track Border Color

    Disabled On

    Accent with 0.5 opacity

    Track Border Color

    Disabled Off

    #F2F2F2

    Track Border Color

    Disabled Indeterminate

    Accent with 0.5 opacity

    Busy Indicator Color

    On

    #00BFFF

    Busy Indicator Color

    Off

    #00BFFF

    Busy Indicator Color

    Indeterminate

    #00BFFF

    Busy Indicator Color

    Disabled On

    #00BFFF

    Busy Indicator Color

    Disabled Off

    #00BFFF

    Busy Indicator Color

    Disabled Indeterminate

    #00BFFF

    Fluent

    Elements

    State

    Colors

    Thumb Color

    On

    #FFFFFFFF

    Thumb Color

    Off

    #000000

    Thumb Color

    Indeterminate

    Accent

    Thumb Color

    Disabled On

    0.2 Opacity

    Thumb Color

    Disabled Off

    0.2 Opacity

    Thumb Color

    Disabled Indeterminate

    0.2 Opacity

    Thumb Border Color

    On

    Transparent

    Thumb Border Color

    Off

    Transparent

    Thumb Border Color

    Indeterminate

    Transparent

    Thumb Border Color

    Disabled On

    Transparent

    Thumb Border Color

    Disabled Off

    Transparent

    Thumb Border Color

    Disabled Indeterminate

    Transparent

    Track Color

    On

    Accent

    Track Color

    Off

    Transparent

    Track Color

    Indeterminate

    Transparent

    Track Color

    Disabled On

    0.2 opacity

    Track Color

    Disabled Off

    0.2 opacity

    Track Color

    Disabled Indeterminate

    0.2 opacity

    Track Border Color

    On

    Accent

    Track Border Color

    Off

    #000000

    Track Border Color

    Indeterminate

    Accent

    Track Border Color

    Disabled On

    0.2 Opacity

    Track Border Color

    Disabled Off

    0.2 Opacity

    Track Border Color

    Disabled Indeterminate

    0.2 Opacity

    Busy Indicator Color

    On

    #00BFFF

    Busy Indicator Color

    Off

    #00BFFF

    Busy Indicator Color

    Indeterminate

    #00BFFF

    Busy Indicator Color

    DisabledOn

    #00BFFF

    Busy Indicator Color

    DisabledOff

    #00BFFF

    Busy Indicator Color

    DisabledIndeterminate

    #00BFFF