SegmentedControl IsEnabled not works.

1 Answer 174 Views
SegmentedControl
ward
Top achievements
Rank 1
ward asked on 21 Apr 2022, 09:12 AM | edited on 21 Apr 2022, 09:55 AM

I have try to set IsEnabled property for SegmentedControl,but not works.

And I want to disabled SegmentedControl without SetSegmentEnabled. 

Can I work this?

Thanks.

 


            <VerticalStackLayout>
                <!--  >> segmentcontrol-gettingstarted-xaml  -->
                <telerikInput:RadSegmentedControl x:Name="segmentControlText" 
                                              BackgroundColor="AliceBlue"
                                              IsEnabled="False"
                                              VerticalOptions="Start"/>
                <!--  << segmentcontrol-gettingstarted-xaml  -->
            </VerticalStackLayout>

 

1 Answer, 1 is accepted

Sort by
0
Lance | Senior Manager Technical Support
Telerik team
answered on 21 Apr 2022, 02:34 PM

Hello Ward,

The top level "IsEnabled" property disables the entire control, not any individual segments. That is why you must use SetSegmentEnabled to toggle the enabled/disabled state of any given segment, see the Disabled Segments documentation.

Bug Report

That being said, the entire SegmentedControl should be disabled when IsEnabled is false and that is not happening. I have opened a Bug Report for this => IsEnabled Does Not Work (telerik.com).

Alternative Options

Option 1 - Behavior

You could use a Behavior to access the SetSegmentEnabled method.

Important: If you are not familiar with writing behaviors, please visit this documentation first so that you know how to set the BehaviorBase class => Behaviors - .NET MAUI | Microsoft Docs

public class EnabledSegmentsBehavior : BehaviorBase<View>
{
    public static readonly BindableProperty DisabledSegmentsProperty =
        BindableProperty.Create("DisabledSegments", typeof(IList<int>), typeof(EnabledSegmentsBehavior), null, propertyChanged: OnDisabledSegmentsChanged);

    public IList<int> DisabledSegments
    {
        get => (IList<int>)GetValue(DisabledSegmentsProperty);
        set => SetValue(DisabledSegmentsProperty, value);
    }

    public static readonly BindableProperty EnabledSegmentsProperty =
        BindableProperty.Create("EnabledSegments", typeof(IList<int>), typeof(EnabledSegmentsBehavior), null, propertyChanged: OnEnabledSegmentsChanged);

    public IList<int> EnabledSegments
    {
        get => (IList<int>)GetValue(EnabledSegmentsProperty);
        set => SetValue(EnabledSegmentsProperty, value);
    }

    private static void OnDisabledSegmentsChanged(BindableObject bindable, object oldvalue, object newvalue)
    {
        if (bindable is EnabledSegmentsBehavior self && newvalue is IReadOnlyList<int> disabledSegments)
        {
            foreach (var index in disabledSegments)
            {
                ((RadSegmentedControl)self.AssociatedObject).SetSegmentEnabled(index, false);
            }
        }
    }

    private static void OnEnabledSegmentsChanged(BindableObject bindable, object oldvalue, object newvalue)
    {
        if (bindable is EnabledSegmentsBehavior self && newvalue is IReadOnlyList<int> disabledSegments)
        {
            foreach (var index in disabledSegments)
            {
                ((RadSegmentedControl)self.AssociatedObject).SetSegmentEnabled(index, true);
            }
        }
    }
}

Then, you can explicitly set which segment to enable or disable by using its index:

<telerikInput:RadSegmentedControl x:Name="segmentControl"
                                  DisabledSegmentTextColor="#CA5100"
                                  HeightRequest="60"
                                  VerticalOptions="Start">
    <telerikInput:RadSegmentedControl.ItemsSource>
        <s:List x:TypeArguments="x:String">
            <x:String>One</x:String>
            <x:String>Two</x:String>
            <x:String>Three</x:String>
            <x:String>Four</x:String>
        </s:List>
    </telerikInput:RadSegmentedControl.ItemsSource>
    <telerikInput:RadSegmentedControl.Behaviors>
        <behaviors:EnabledSegmentsBehavior>
            <behaviors:EnabledSegmentsBehavior.EnabledSegments>
                <s:List x:TypeArguments="x:Int32">
                    <x:Int32>0</x:Int32>
                    <x:Int32>1</x:Int32>
                </s:List>
            </behaviors:EnabledSegmentsBehavior.EnabledSegments>
            <behaviors:EnabledSegmentsBehavior.DisabledSegments>
                <s:List x:TypeArguments="x:Int32">
                    <x:Int32>2</x:Int32>
                    <x:Int32>3</x:Int32>
                </s:List>
            </behaviors:EnabledSegmentsBehavior.DisabledSegments>
        </behaviors:EnabledSegmentsBehavior>
    </telerikInput:RadSegmentedControl.Behaviors>
</telerikInput:RadSegmentedControl>


Option 2 - Custom Control

If you would like more control over the individual segments, you can create a custom control with RadButton and RadBorder that lets you access each segment individually.

This isn't something we can provide officially, but I can give you a head start with a control I have previously developed for a similar circumstance => CustomSegmentedControlDemo

I have adapted it for MAUI and added an extra property to set which segments to disable using a DisabledSegments property:

<customControls:ButtonSegments x:Name="ButtonSegments1"
                               CornerRadius="4"
                               HeightRequest="40"
                               Margin="5"
                               Grid.Row="0">
    <customControls:ButtonSegments.ItemsSource>
        <s:List x:TypeArguments="x:String">
            <x:String>One</x:String>
            <x:String>Two</x:String>
            <x:String>Three</x:String>
            <x:String>Four</x:String>
        </s:List>
    </customControls:ButtonSegments.ItemsSource>
    <!-- Disables the middle two buttons -->
    <customControls:ButtonSegments.DisabledSegments>
        <s:List x:TypeArguments="x:Int32">
            <x:Int32>2</x:Int32>
            <x:Int32>1</x:Int32>
        </s:List>
    </customControls:ButtonSegments.DisabledSegments>
</customControls:ButtonSegments>

If you run the demo, you'll see that segments "Two" and "Three" are disabled and cannot be clicked.

If you click the "Change IsEnabled" button, the following logic is executed and only the last segment is now disabled:

public void Button_Clicked(object sender, EventArgs e)
{
    // Disables only the last button
    ButtonSegments1.DisabledSegments = new List<int> { 3 };
}

Any future development efforts on that custom control are your responsibility as it isn't an official UI for MAUI component, but I hope this is a good head start and helps you achieve what you're looking for.

Regards,
Lance | Manager Technical Support
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

ward
Top achievements
Rank 1
commented on 22 Apr 2022, 01:35 AM | edited

Hello Lance,

I'm pleasure to receive your answer,and I tend to try  behavior.

Thank u so much.

 

Tags
SegmentedControl
Asked by
ward
Top achievements
Rank 1
Answers by
Lance | Senior Manager Technical Support
Telerik team
Share this question
or