Center Alignment gets lost when selecting a segment

[bluekuen]

I set the width to fit the App.ScreenWidth. When selecting a segment the text gets aligned to the start : first: then:

This is the control xaml code:

 <control:SegmentedControl 
                            x:Name="SegmentedControl" 
                             WidthRequest="{Binding SegmentedControlWidth, Mode=TwoWay}"
                            HorizontalOptions="StartAndExpand"
                            VerticalOptions="StartAndExpand"  
                            SelectedSegment="{Binding SelectedSegment, Mode=TwoWay}" 
                            TintColor="{StaticResource ZAblue}"
                            SelectedTextColor="White"
                            DisabledColor="Gray"
                            FontSize="12"
                            HeightRequest="35">
                            <control:SegmentedControl.Behaviors>
                                <behaviors:EventToCommandBehavior
                                    EventName="OnSegmentSelected"
                                    Command="{Binding OnSegmentSelectedCommand}"
                                    CommandParameter="{Binding .}"/>
                            </control:SegmentedControl.Behaviors>
</control:SegmentedControl>

And this is in my ViewModel:

[Reactive]
public ObservableCollection<SegmentedControlOption> SegmentedControlChildren { get; set; } = new ObservableCollection<SegmentedControlOption>();
public void SetupSegmentedControl()
        {
            var guidConverter = new GuidToStringConverter();
            calculateVisibleSegments(_menuMainItem.Menus.Count);
            var segmentControlItems = new ObservableCollection<SegmentedControlOption>();
            foreach (DeviceMenuItem menu in _menuMainItem.Menus)
            {
                string menuNametext = (string)guidConverter.Convert(menu.Name, typeof(Guid), null, null);
                
                if (!ParameterAndSubMenusEmpty(menu, _deviceService.GetDevice().AccessLevel))
                {
                    SegmentedControlOption segControl = new SegmentedControlOption();
                    segControl.Text = menuNametext;
                    //segControl.Id = menu.ID;
                    if (segmentControlItems.FirstOrDefault(seg => seg.Text == menuNametext) == null)
                    {
                        segmentControlItems.Add(segControl);
                    }
                }                
            }

            SegmentedControlChildren = segmentControlItems;
            calculateVisibleSegments(SegmentedControlChildren.Count);            
            //SelectedSegment = selectedSegment;
        }
        public void calculateVisibleSegments(int segments)
        {
            int min = 360;
            int visibleSegments = 3;

            while (App.ScreenWidth > min)
            {
                min += 150;
                visibleSegments++;
            }

            if (segments <= visibleSegments)
            {
                SegmentedControlWidth = App.ScreenWidth - 10;
            }
            else
            {
                SegmentedControlWidth = (App.ScreenWidth / visibleSegments) * segments + 150;
            }

        }

I already tried:

• removing scrollview
• move it out of stacklayout
• remove the TwoWay Bindings
• change the selectedCommand from Behavior to property

[1iveowl]

What device(s) do you see behavior on? iOS, Android, UWP, Mac?

Also please check if this issue have been solved with v4.2.0.

[bluekuen]

It's just on Android, tested with Samsung Galaxy S7.

[1iveowl]

Is the issue still there after I updated the package to 4.2.0 earlier today?

[bluekuen]

I will test it

[Firice]

I have the same issue when loading on TabbedPage.

[bluekuen]

yeah sorry for delay, problem still exists with 4.2.0.

[1iveowl]

Thank you @bluekuen.

For the moment, I don't know what causes this nor how to fix it, but I will look closer at it to see if I can fix it.

My understanding is that this is an Android issue, only.

[bluekuen]

No problem, yes it's only on Android. Thank you for this great Plugin!

[e-vw]

Hello, I have the same issue. But only when returning from another page (activity). So I have the segmented buttons below a listview. When I click on an item in the listview the application opens a detail page. Click on back to return to the page with the segmented buttons. Now click on a segmented button and the text aligns left and it's width changes to half of what is was before.

[trnacctKR]

I am experiencing the same behavior as @e-vw. Any updates or suggestions of a possible work around for Android?

[robfrancis]

@bluekuen @e-vw @skraymo Did anyone find a work around for this?

[mjrichards91]

I am also experiencing this issue when hiding/showing a layout that contains a segmented control and also only on Android. Currently on version 5.4.5.

For me, the issue resolves itself and the text alignment is correct once I tap on the segment.