What is Segmented Control in Xaml?

Question

I would like to switch many pages between in single xaml page on click on segment control. I want make a page like upper part of page is with segment control and below this control having simple layout that is using for replace or switch a other pages in same that below position change but upper part is still remains for next page switching.

So, i would like to code for switching page with using segment control in xaml in xamarin.forms.

Answer 1

There is a nuget package FreshEssentials. It has cross-platform implementation of segmented control button. Find this Github repository to understand the implementation.

Hope this help !

Answer 2

Refer bellow link to implement custom segment control using XAML code and Cs Code https://github.com/sam-ss/Custom-Segmented-Control-Xamarin-Forms

Hope This Help you!

Answer 3

you can install from nuget this library "Plugin.Segmented.Control" from this tutorial https://www.c-sharpcorner.com/article/segment-control-in-xamarin-forms/

and your xaml:

<?xml version="1.0" encoding="utf-8"?>  
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:control="clr-namespace:Plugin.Segmented.Control;assembly=Plugin.Segmented" xmlns:iOSForms="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core" iOSForms:Page.UseSafeArea="true" xmlns:local="clr-namespace:XFSegmentControlDemo" x:Class="XFSegmentControlDemo.Views.HomePage">  
    <StackLayout VerticalOptions="FillAndExpand" Padding="30" Spacing="20">  
        <Label Text="Segmented Control" FontSize="30" TextColor="White" HorizontalOptions="CenterAndExpand" />  
        <control:SegmentedControl x:Name="SegmentedControl" SelectedSegment="{Binding SegmentSelection}" TintColor="White" SelectedTextColor="BlueViolet" DisabledColor="Gray" Margin="8,8,8,8">  
            <control:SegmentedControl.Children>  
                <control:SegmentedControlOption Text="Item 1" />  
                <control:SegmentedControlOption Text="Item 2" />
            </control:SegmentedControl.Children>  
        </control:SegmentedControl>  
        <Label Text="{Binding SelectedSegment}" FontSize="40" TextColor="White" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />  
    </StackLayout>  
</ContentPage> 

put this code in your viewModel

int _selectedSegement;  
        public int SelectedSegment {  
            get {  
                return _selectedSegement;  
            }  
            set {  
                _selectedSegement = value;  
                switch (SelectedSegment) {  
                    case 0:  
                        break;  
                    case 1:  
                        break;  
                    case 2:  
                        break;  
                    case 3:  
                        break;  
                }  
                OnPropertyChanged("SelectedSegment");  
            }  
        } 

and the last step put this in your appDelegate

global::Xamarin.Forms.Forms.Init();  
            SegementedControlRenderer.Initialize();  
            LoadApplication(new App());