Skip to content

Center Alignment gets lost when selecting a segment #71

@bluekuen

Description

@bluekuen

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

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions