<ContentView>
<Grid InputTransparent="True">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackLayout Spacing="0"
Grid.Row="0"
VerticalOptions="Center">
<Label Text="Algebra"/>
<Label Text="number 1" />
</StackLayout>
<Switch IsToggled="True"
VerticalOptions="Center"
Grid.Row="1"
Grid.Column="1"
/>
<StackLayout Spacing="0"
Grid.Row="1"
VerticalOptions="Center">
<Label Text="Arithmetics" />
<Label Text="number 2" />
</StackLayout>
<Switch IsToggled="True"
VerticalOptions="Center"
Grid.Column="1"
/>
</Grid>
</ContentView>
I have two rows with each having 2 labels and a switch. How can I invoke two different Tap events, for each row. Something like this:
<ROW1?.GestureRecognizers>
<TapGestureRecognizer Tapped="OnTapped1" />
</ROW?.GestureRecognizers>
<ROW2?.GestureRecognizers>
<TapGestureRecognizer Tapped="OnTapped2" />
</ROW?.GestureRecognizers>
I'm new, but it seems Switch toggle doesn't work while in grid, which is strange.
UI image:
Since you can't simply apply a gesture to an entire grid row,
I decided to just use Switch built-in functionality for my UI.
And all I did was add two different methods for each Switch:
<Grid InputTransparent="True">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackLayout Spacing="0"
Grid.Row="0"
VerticalOptions="Center">
<Label Text="Algebra"/>
<Label Text="number 1" />
</StackLayout>
<Switch IsToggled="True"
Toggled="method2"
VerticalOptions="Center"
Grid.Row="1"
Grid.Column="1"
/>
<StackLayout Spacing="0"
Grid.Row="1"
VerticalOptions="Center">
<Label Text="Arithmetics" />
<Label Text="number 2" />
</StackLayout>
<Switch IsToggled="True"
Toggled="method2"
VerticalOptions="Center"
Grid.Column="1"
/>
</Grid>
Related
I am developing one android application using xamarin android. I am designing one page using xaml. in my screen i have 5 images. it is basically a login screen. but here entry(textbox) is not focused and also button press is not working. if i remove some images and stacklayouts then it is working fine.
below is my xaml
<StackLayout>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="745"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackLayout Orientation="Horizontal" HorizontalOptions="Center" Spacing="10" Grid.Column="0" >
<Grid Grid.Column="0" ColumnSpacing="80" RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="100"/>
<RowDefinition Height="250"/>
</Grid.RowDefinitions>
<Image Source="image1.png" Margin="0" Grid.Row="0" Grid.Column="0" HorizontalOptions="StartAndExpand" HeightRequest="100" WidthRequest="200" />
<Image Source="image3.png" Margin="0" Grid.Row="0" Grid.Column="1" HorizontalOptions="StartAndExpand" HeightRequest="100" WidthRequest="200" />
<Label x:Name="lblTitle" FontSize="22" TextColor="Blue" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
FontAttributes="Bold" VerticalOptions="Center"
HorizontalTextAlignment="Center" Text="Title goes here"/>
<Image Source="image3.png" Grid.Row="2" Grid.Column="0" HorizontalOptions="StartAndExpand" HeightRequest="500" WidthRequest="500" />
<StackLayout Grid.Row="2" Grid.Column="1" InputTransparent="False" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="40"/>
<RowDefinition Height="30"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Label FontSize="15" TextColor="Blue" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2"
FontAttributes="Bold" VerticalOptions="Center"
HorizontalTextAlignment="Start" Text="User Name"/>
<Frame BorderColor="DodgerBlue" CornerRadius="0" Padding="0" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2">
<Entry x:Name="txtUsername" FontFamily="{StaticResource UbuntuRegularFontFamily}" Placeholder="Enter Username" HorizontalOptions="FillAndExpand" Text="" FontSize="15"/>
</Frame>
<Label FontSize="15" TextColor="Blue" Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2"
FontAttributes="Bold" VerticalOptions="Center"
HorizontalTextAlignment="Start" Text="Password"/>
<Frame BorderColor="DodgerBlue" CornerRadius="0" Padding="0" Grid.Column="0" Grid.Row="3" Grid.ColumnSpan="2">
<Entry x:Name="txtPassword" FontFamily="{StaticResource UbuntuRegularFontFamily}" Placeholder="Enter Password" IsPassword="True" HorizontalOptions="FillAndExpand" Text="" FontSize="15"/>
</Frame>
<Button x:Name="btnlogin" Grid.Row="4" Grid.Column="0" Text="LOGIN" WidthRequest="100" HeightRequest="40" ></Button>
<Button x:Name="btnCancel" Grid.Row="4" Grid.Column="1" Text="CANCEL" WidthRequest="100" HeightRequest="40" ></Button>
</Grid>
</StackLayout>
</Grid>
</StackLayout>
<StackLayout Grid.Row="3" InputTransparent="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image Source="image4.png" Margin="0" Grid.Row="1" Grid.Column="0" HorizontalOptions="StartAndExpand" HeightRequest="400" WidthRequest="250" />
<Label FontSize="25" TextColor="Black" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"
FontAttributes="Bold" VerticalOptions="Center"
HorizontalTextAlignment="Center" Text="year "/>
<Label FontSize="25" TextColor="Black" Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="2"
FontAttributes="Bold" VerticalOptions="Center"
HorizontalTextAlignment="Center" Text="company name goes here"/>
</Grid>
</StackLayout>
<StackLayout Grid.RowSpan="1" Grid.Column="1" InputTransparent="True">
<Image Source="image5.png" Margin="0"
/>
</StackLayout>
</Grid >
</StackLayout>
but here entry(textbox) is not focused and also button press is not working. if i remove some images and stacklayouts then it is working fine.
I test you code, and find you put the following code in wrong place.
<StackLayout Grid.Row="3">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Image
Grid.Row="1"
Grid.Column="0"
Margin="0"
HeightRequest="400"
HorizontalOptions="StartAndExpand"
Source="check.png"
WidthRequest="250" />
<Label
Grid.Row="1"
Grid.Column="1"
FontAttributes="Bold"
FontSize="25"
HorizontalTextAlignment="Center"
Text="year "
TextColor="Black"
VerticalOptions="Center" />
<Label
Grid.Row="1"
Grid.Column="2"
FontAttributes="Bold"
FontSize="25"
HorizontalTextAlignment="Center"
Text="company name goes here"
TextColor="Black"
VerticalOptions="Center" />
</Grid>
</StackLayout>
You just define 3 RowDefinitions, but you use Grid.Row="3" above code.
<StackLayout
Grid.Column="0"
HorizontalOptions="Center"
Orientation="Horizontal"
Spacing="10">
<Grid
Grid.Column="0"
ColumnSpacing="80"
RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="100" />
<RowDefinition Height="250" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
please take a look the following code, I use my image source.
<StackLayout>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout
Grid.Column="0"
HorizontalOptions="Center"
Orientation="Horizontal"
Spacing="10">
<Grid
Grid.Column="0"
ColumnSpacing="80"
RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="100" />
<RowDefinition Height="250" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<Image
Grid.Row="0"
Grid.Column="0"
Margin="0"
HeightRequest="100"
HorizontalOptions="StartAndExpand"
Source="c1.png"
WidthRequest="200" />
<Image
Grid.Row="0"
Grid.Column="1"
Margin="0"
HeightRequest="100"
HorizontalOptions="StartAndExpand"
Source="c10.png"
WidthRequest="200" />
<Label
x:Name="lblTitle"
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2"
FontAttributes="Bold"
FontSize="22"
HorizontalTextAlignment="Center"
Text="Title goes here"
TextColor="Blue"
VerticalOptions="Center" />
<Image
Grid.Row="2"
Grid.Column="0"
HeightRequest="500"
HorizontalOptions="StartAndExpand"
Source="c11.png"
WidthRequest="500" />
<StackLayout
Grid.Row="2"
Grid.Column="1"
InputTransparent="False">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="40" />
<RowDefinition Height="30" />
<RowDefinition Height="40" />
<RowDefinition Height="40" />
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Label
Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="2"
FontAttributes="Bold"
FontSize="15"
HorizontalTextAlignment="Start"
Text="User Name"
TextColor="Blue"
VerticalOptions="Center" />
<Frame
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2"
Padding="0"
BorderColor="DodgerBlue"
CornerRadius="0">
<Entry
x:Name="txtUsername"
FontSize="15"
HorizontalOptions="FillAndExpand"
Placeholder="Enter Username"
Text="" />
</Frame>
<Label
Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="2"
FontAttributes="Bold"
FontSize="15"
HorizontalTextAlignment="Start"
Text="Password"
TextColor="Blue"
VerticalOptions="Center" />
<Frame
Grid.Row="3"
Grid.Column="0"
Grid.ColumnSpan="2"
Padding="0"
BorderColor="DodgerBlue"
CornerRadius="0">
<Entry
x:Name="txtPassword"
FontSize="15"
HorizontalOptions="FillAndExpand"
IsPassword="True"
Placeholder="Enter Password"
Text="" />
</Frame>
<Button
x:Name="btnlogin"
Grid.Row="4"
Grid.Column="0"
HeightRequest="40"
Text="LOGIN"
WidthRequest="100" />
<Button
x:Name="btnCancel"
Grid.Row="4"
Grid.Column="1"
HeightRequest="40"
Text="CANCEL"
WidthRequest="100" />
</Grid>
</StackLayout>
<StackLayout Grid.Row="3" InputTransparent="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image
Grid.Row="1"
Grid.Column="0"
Margin="0"
HeightRequest="400"
HorizontalOptions="StartAndExpand"
Source="check.png"
WidthRequest="250" />
<Label
Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="2"
FontAttributes="Bold"
FontSize="25"
HorizontalTextAlignment="Center"
Text="year "
TextColor="Black"
VerticalOptions="Center" />
<Label
Grid.Row="1"
Grid.Column="2"
Grid.ColumnSpan="2"
FontAttributes="Bold"
FontSize="25"
HorizontalTextAlignment="Center"
Text="company name goes here"
TextColor="Black"
VerticalOptions="Center" />
</Grid>
</StackLayout>
</Grid>
</StackLayout>
<StackLayout
Grid.RowSpan="1"
Grid.Column="1"
InputTransparent="True">
<Image Margin="0" Source="image5.png" />
</StackLayout>
</Grid>
</StackLayout>
I have a grid view and I want to add a button in bottom of my screen
I have used following code:
[![enter image description here][1]][1]
<Grid>[![enter image description here][2]][2]
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="88*"/>
<RowDefinition Height="12*"/>
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="0" BackgroundColor="White">
<Grid Grid.Column="1" Grid.Row="0" BackgroundColor="White">
<Grid Grid.Row="1" BackgroundColor="#f24245" HorizontalOptions="FillAndExpand">
<Button Text="Lookupjshgkdfjghkdjfghdkjfhgdlfkjghfk" HorizontalOptions="FillAndExpand" TextColor="White" FontSize="Large" BackgroundColor="#f24245"/>
</Grid>
</Grid>
[1]: https://i.stack.imgur.com/vsEn9.png
[2]: https://i.stack.imgur.com/TazCg.png
Please Add Grid.ColumnSpan="2" Like,
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="88*"/>
<RowDefinition Height="12*"/>
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="0" BackgroundColor="White">
<!--Place you code Here-->
</Grid>
<Grid Grid.Column="1" Grid.Row="0" BackgroundColor="White">
<!--Place you code Here-->
</Grid>
<Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="#f24245" HorizontalOptions="FillAndExpand">
<Button Text="Lookupjshgkdfjghkdjfghdkjfhgdlfkjghfk" HorizontalOptions="FillAndExpand" TextColor="White" FontSize="Large" BackgroundColor="#f24245"/>
</Grid>
</Grid>
Use VerticalOptions="End"
Example:
<Grid Padding="20" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="0.7*" />
<RowDefinition Height="0.3*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- row 0 -->
<Image Grid.Row="0" Source="icon-76.png" WidthRequest="150" HeightRequest="150" />
<!-- row 1 -->
<StackLayout Grid.Row="2" VerticalOptions="End">
<Button Margin="0,5,0,5" Text="Button at the bottom" BackgroundColor="#4a4acd" TextColor="White" FontAttributes="Bold" />
</StackLayout>
</Grid>
This will give you the following view:
I am facing problem to add Entry inside Grid View Control. I have a list view which will have data with checkbox and entry. If user selects certain item, he can also add quantity of the item in entry. I am facing issue adding entry in grid view. Entry is only displayed half. Text is not displayed correctly. I am adding Entry in xaml as.
<StackLayout>
<Label Text="Items"></Label>
<ListView x:Name="ItemsListView" RowHeight="60">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid Padding="5,0" RowSpacing="1" ColumnSpacing="1" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="{Binding Title}" Grid.ColumnSpan="2" Grid.Row="1" Margin="2" BackgroundColor="Green"></Label>
<common:CheckBox Grid.Column="3" Grid.Row="1" HeightRequest="20" WidthRequest="20"
VerticalOptions="Center" Checked="{Binding isChecked ,Mode=TwoWay}"
CheckedImage="checkbox_checked" UnCheckedImage="checkbox_unchecked"
CommandParameter="{Binding .}" BackgroundColor="Brown"/>
<Entry Grid.Column="3" Grid.Row="1" IsEnabled="False" Text="CountStr" FontSize="Small" VerticalOptions="End" BackgroundColor="Purple" />
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Button Text="Done" HorizontalOptions="CenterAndExpand"
CommandParameter="{Binding .}" Clicked="Button_Clicked"/>
</StackLayout>
I am getting following output.
Control with purple background is my Entry. Text is not displayed correctly. Any help will be appreciated. Thanks in advance.
I have already posted question in Xamarin Forums here.
<Grid Padding="5,0" RowSpacing="1" ColumnSpacing="1">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Label Text="Apple" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Margin="2" VerticalTextAlignment="Center" BackgroundColor="Green" />
<Switch Grid.Row="0" Grid.Column="2" VerticalOptions="Center" HorizontalOptions="Center" BackgroundColor="Brown" />
<Entry Text="CountStr" Grid.Row="0" Grid.Column="3" IsEnabled="false" HorizontalOptions="Center" FontSize="Small" BackgroundColor="Purple"/>
</Grid>
Note: I sub'd in a Switch vs. your 3rd-party Checkbox
use StackLayout like this
<StackLayout Padding="5,0" Orientation="Horizontal">
<Label Text="{Binding Title}" WidthRequest="120" Margin="2" BackgroundColor="Green"/>
<common:CheckBox HeightRequest="20" WidthRequest="20" Checked="{Binding isChecked, Mode=TwoWay}" CheckedImage="checkbox_checked" UnCheckedImage="checkbox_unchecked" CommandParameter="{Binding .}" BackgroundColor="Brown"/>
<Entry WidthRequest="120" IsEnabled="False" Text="CountStr" FontSize="Small" VerticalOptions="End" BackgroundColor="Purple" />
</StackLayout>
you can change the Size using the WidthRequest property and HorizontalOption="FillAndExpand"
I want in my content to have a 'StackLayout' fixed and floating where it will contain 4 'Button's.
My layout is assikm at the moment
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
Title="teste">
<Grid>
<ScrollView BackgroundColor="#ffffff" Padding="15" Grid.Row="0">
<StackLayout HorizontalOptions="Fill" VerticalOptions="FillAndExpand">
<Label Text="{Binding Titulo}" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" TextColor="#38B6AB" FontSize="22" FontAttributes="Bold"/>
<Label Text="{Binding Data}" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" TextColor="#5a5a5a" FontSize="18" FontAttributes="Bold"/>
<Image x:Name="imagen1" Source="{Binding ImageSource}" Aspect="AspectFit">
<Image.GestureRecognizers>
<TapGestureRecognizer
Tapped="OnTapped" />
</Image.GestureRecognizers>
</Image>
</StackLayout>
</ScrollView>
</Grid>
//-----Floating button----- //
The Grid can float things on top of other things by placing the item in the same row and column, like the following. I will note that, depending on how you place the Buttons, it might be a usability issue to place Buttons where the user is suppose to be scrolling.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions> <!-- Multiple columns will allow even Button spacing, just set Grid.ColumnSpan on your ScrollView -->
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ScrollView BackgroundColor="#ffffff"
Padding="15"
Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="4">
<StackLayout HorizontalOptions="Fill"
VerticalOptions="FillAndExpand">
....
</StackLayout>
</ScrollView>
<Button Text="One"
Grid.Row="0"
Grid.Column="0"/>
<Button Text="Two"
Grid.Row="0"
Grid.Column="1"/>
<Button Text="Three"
Grid.Row="0"
Grid.Column="2"/>
<Button Text="Four"
Grid.Row="0"
Grid.Column="3"/>
</Grid>
Video showing the simulator: https://youtu.be/3ajany0iaCw
The codes:
<Grid HorizontalOptions="Center" VerticalOptions="Center">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Switch Grid.Column="0"
HorizontalOptions="Center"
IsToggled="{Binding SwitchToggled}"/>
<Label Grid.Column="1"
HorizontalOptions="Center"
Text="{Binding SwitchToggled,
Converter={StaticResource Key=boolToStrConv}}"/>
<Switch Grid.Column="0" Grid.Row="1"
HorizontalOptions="Center"
x:Name="switch2"/>
<Label Grid.Column="1" Grid.Row="1"
HorizontalOptions="Center"
Text="{Binding Source={x:Reference switch2},
Path=IsToggled,
Converter={StaticResource Key=boolToStrConv}}"/>
</Grid>
My expectation is that no matter how the Label's text length is changed, it would both be centered - considering that both of them has a HorizontalOptions Center.
Why did this happened and how do I fix this?
You need to look at the container that is grid is within and the fact that you are centering (floating) your grid within that container.
Assign a background color to your grid and a different one to its container and you will see that its size depends upon what it is contains since you are * (star) its size and the grid itself is "floating" in the center of its container, change the contents of the grid, the size of the grid changes:
<Grid VerticalOptions="Center" HorizontalOptions="Center" BackgroundColor="Gray">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Switch Grid.Column="0" HorizontalOptions="Center" BackgroundColor="Red" x:Name="switch1" />
<Label Grid.Column="1" HorizontalOptions="Center" BackgroundColor="Red" Text="False" x:Name="label1" />
<Switch Grid.Column="0" Grid.Row="1" HorizontalOptions="Center" BackgroundColor="Green" x:Name="switch2" />
<Label Grid.Column="1" Grid.Row="1" HorizontalOptions="Center" BackgroundColor="Green" Text="False" x:Name="label2" />
</Grid>
Lock the grid to fill its parent's width (via StartAndExpand in my example) and changing your label's text content will not cause your toggle's start position to move...
<Grid VerticalOptions="StartAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="Gray">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Switch Grid.Column="0" HorizontalOptions="Center" BackgroundColor="Red" x:Name="switch1" />
<Label Grid.Column="1" HorizontalOptions="Center" BackgroundColor="Red" Text="False" x:Name="label1" />
<Switch Grid.Column="0" Grid.Row="1" HorizontalOptions="Center" BackgroundColor="Green" x:Name="switch2" />
<Label Grid.Column="1" Grid.Row="1" HorizontalOptions="Center" BackgroundColor="Green" Text="False" x:Name="label2" />
</Grid>