Unable to center Segment Items in Navigation Title

[Tarun Singh]

Hi,

In our Xamarin app, in our Xamarin.Forms project, we use SfSegmentedControl in Navigation TitleView to display two segment items, but the text is not centered properly, as seen below:

Following is how we render it:

    <NavigationPage.TitleView>
        <buttons:SfSegmentedControl
                Style="{StaticResource toggle-view-control}"
                HorizontalOptions="Start" VerticalOptions="Center"
                HeightRequest="40" Margin="10,2,0,0"
                VisibleSegmentsCount="2"
                x:Name="routeToggleControl"
                SelectedIndex="0">
            <buttons:SfSegmentedControl.SelectionIndicatorSettings>
                <buttons:SelectionIndicatorSettings Position="Fill"
                                                    Color="#44a1ad"/>
            </buttons:SfSegmentedControl.SelectionIndicatorSettings>
        </buttons:SfSegmentedControl>
    </NavigationPage.TitleView>

Code-behind:

            var list = new List<SfSegmentItem>(new[]
            {
                new SfSegmentItem { Text = "Segment One" },
                new SfSegmentItem { Text = "Segment Two" }
            });
            this.routeToggleControl.ItemsSource = list;

We tried changing Margin, Height, and some Layout options but still couldn't center the text. This issue does not exist when rendered outside Navigation Bar.

Could you please let us know how to center align text inside a Segment Item when rendered inside a NavigationPage TitleView?

Thanks,

Tarun Singh

[Suyamburaja Jayakumar]

Hi Tarun Singh, 

 

Greetings from Syncfusion.  

  

We have analyzed the reported query and tested the provided code snippet, segmented control text is displaying at the center. please refer the below screenshot. 

 

 

 

Please find the tested sample below,  

Sample: https://www.syncfusion.com/downloads/support/forum/155310/ze/GettingStarted124439323.zip  

 

Please let us know if you have any concerns about this. 

 

Regards, 

Suyamburaja J. 

[Sai Chandan Masipeddi]

Hi,

We din't face the issue on andriod, how ever we still have the problem with how it's displayed in the Windows Platform.

[Suyamburaja Jayakumar]

Hi Sai Chandan Masipeddi,  

 

We would like to let you know that we have ensured that same in UWP platform. Itself has been rendered properly. And we have suspected with that and checked by increasing the height request, in that got the cropping issue, even also with Framework button control. Hence could you please ensure that whether the same has been worked by limiting the height request as per in below 

 

XAML: 

<NavigationPage.TitleView> 

        <StackLayout> 

            <buttons:SfSegmentedControl  

                ItemsSource="{Binding List}" 

                HorizontalOptions="Start"  

                VerticalOptions="Center" 

                SegmentHeight="30" 

                VisibleSegmentsCount="2" 

                x:Name="routeToggleControl" 

                SelectedIndex="0"> 

                <buttons:SfSegmentedControl.SelectionIndicatorSettings> 

                    <buttons:SelectionIndicatorSettings Position="Fill" 

                                                    Color="#44a1ad"/> 

                </buttons:SfSegmentedControl.SelectionIndicatorSettings> 

            </buttons:SfSegmentedControl> 

        </StackLayout> 

    </NavigationPage.TitleView> 

 

Regards, 

Suyamburaja J. 

[Sai Chandan Masipeddi]

This helps, thanks!

[Suyamburaja Jayakumar]

Hi Sai Chandan Masipeddi, 

 

We glad to know the given solution works, 

 

Please let us know if you need any further assistance. 

 

Regards, 

Suyamburaja J.