Trying to make a button that will overlay on top of a grid in xaml
<Frame Grid.Row="0" CornerRadius="15" Padding="15">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Text="**************3454" HorizontalOptions="Start" TextColor="Black" VerticalOptions="Center"/>
<Label Grid.Column="1" Text="Verify" HorizontalOptions="End" TextColor="#A1A0E1" VerticalOptions="Center"/>
</Grid>
</Frame>
<Button Grid.Row="0" HorizontalOptions="Fill" VerticalOptions="Fill" BackgroundColor="Red" Command="{Binding VerifyCommand}"/>
However, it ends up looking like this:
underlayed button
Any thoughts on how to make the button go on top?
Place everything inside the Grid and use a Grid.ColumnSpan of 2 on your Frame and Button and of course set your Button's background to Transparent:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Frame Grid.ColumnSpan="2" CornerRadius="15" Padding="15" BorderColor="White"/>
<Label Grid.Column="0" Text="**************3454" HorizontalOptions="Start" TextColor="Black" VerticalOptions="Center"/>
<Label Grid.Column="1" Text="Verify" HorizontalOptions="End" TextColor="#A1A0E1" VerticalOptions="Center"/>
<Button Grid.ColumnSpan="2" HorizontalOptions="Fill" VerticalOptions="Fill" BackgroundColor="Transparent" Command="{Binding VerifyCommand}"/>
</Grid>
Related
I have this grid object:
<!--Legende-->
<Grid Grid.Row="0">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.8*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="0.8*"/>
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="1" HorizontalOptions="Center">
<BoxView BackgroundColor="#faea57" CornerRadius="25"></BoxView>
<Label
Padding="10,0,10,0"
VerticalOptions="Center"
Grid.Column="0"
Text="Geplant"
FontSize="14"
FontFamily="Galvji-01.ttf"
TextColor="#ffffff"/>
</Grid>
<Grid Grid.Column="1" Grid.Row="1" HorizontalOptions="Center">
<BoxView BackgroundColor="#75f056" CornerRadius="25"></BoxView>
<Label
Padding="10,0,10,0"
VerticalOptions="Center"
Text="Aktiv"
FontSize="14"
FontFamily="Galvji-01.ttf"
TextColor="#ffffff"/>
</Grid>
<Grid Grid.Column="2" Grid.Row="1" HorizontalOptions="Center">
<BoxView BackgroundColor="#fa594d" CornerRadius="25"></BoxView>
<Label
Padding="10,0,10,0"
VerticalOptions="Center"
Text="Abgeschlossen"
FontSize="14"
FontFamily="Galvji-01.ttf"
TextColor="#ffffff"/>
</Grid>
</Grid>
The result is this:
The 3 boxviews with the text are bind to the left ob the screen. However, I want those three objets to be rendered in the CENTRE.
I cannot work with padding, since the amount of padding varies from phone to phone so I have to work with attributes like "center", but I cannot seem to figure out how to do that.
Help would be awesome!
Thanks
You could set two extra space column to get the effect like padding.
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*"/> // left
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="0.2*"/> // right
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.8*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="0.8*"/>
</Grid.RowDefinitions>
<Grid Grid.Column="1" Grid.Row="1" HorizontalOptions="Center">
<BoxView BackgroundColor="#faea57" CornerRadius="25"></BoxView>
<Label
Padding="10,0,10,0"
VerticalOptions="Center"
Grid.Column="0"
Text="Geplant"
FontSize="14"
FontFamily="Galvji-01.ttf"
TextColor="#ffffff"/>
</Grid>
<Grid Grid.Column="2" Grid.Row="1" HorizontalOptions="Center">
<BoxView BackgroundColor="#75f056" CornerRadius="25"></BoxView>
<Label
Padding="10,0,10,0"
VerticalOptions="Center"
Text="Aktiv"
FontSize="14"
FontFamily="Galvji-01.ttf"
TextColor="#ffffff"/>
</Grid>
<Grid Grid.Column="3" Grid.Row="1" HorizontalOptions="Center">
<BoxView BackgroundColor="#fa594d" CornerRadius="25"></BoxView>
<Label
Padding="10,0,10,0"
VerticalOptions="Center"
Text="Abgeschlossen"
FontSize="14"
FontFamily="Galvji-01.ttf"
TextColor="#ffffff"/>
</Grid>
</Grid>
I have a problem. I am trying to achieve the following Grid:
To do that, I thought that I should set both the ColumnWidth to Auto and set the HorizontalOptions of the Grid to Center, so the Grid is centred in the middle of the screen creating equal spaces at the left and right side, but no matter what I try, I can't seem to move the columns from the right side. Here is what I have now:
And here is my code:
<Frame BorderColor="#00D8FF" Padding="0" HorizontalOptions="FillAndExpand" BackgroundColor="Transparent">
<StackLayout Orientation="Vertical">
<CarouselView ItemsSource="{Binding coinDataList}" HeightRequest="50">
<CarouselView.ItemTemplate>
<DataTemplate>
<Grid RowSpacing="0" HorizontalOptions="Center">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="1" Text="BTC-USDT" FontAttributes="Bold" TextColor="#00D8FF" FontSize="18"/>
<Label Grid.Row="1" Grid.Column="1" Text="9762.33" TextColor="White" FontSize="18"/>
<Label Grid.RowSpan="2" Grid.Column="2" Text="-$476.22 (-4.77%)" VerticalOptions="CenterAndExpand" FontAttributes="Bold" TextColor="Red" FontSize="18" Margin="15,0,0,0"/>
</Grid>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
</StackLayout>
</Frame>
How can I create my wanted result?
Can you try this?
<Frame BorderColor="#00D8FF" Padding="0" HorizontalOptions="FillAndExpand" BackgroundColor="Transparent">
<StackLayout Orientation="Vertical">
<CarouselView ItemsSource="{Binding coinDataList}" HeightRequest="50">
<CarouselView.ItemTemplate>
<DataTemplate>
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="1" Text="BTC-USDT" FontAttributes="Bold" TextColor="#00D8FF" FontSize="18"/>
<Label Grid.Row="1" Grid.Column="1" Text="9762.33" FontAttributes="Bold" TextColor="#00D8FF" FontSize="18"/>
<Label Grid.Row="0" Grid.Column="2" VerticalTextAlignment="Center" Text="-$476.22 (-4.77%)" FontAttributes="Bold" TextColor="#00D8FF" FontSize="18"/>
</Grid>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
</StackLayout>
</Frame>
In my xaml I'm trying to put padding between my background and my labels/editor and datepicker, but I can't get it right. I've attempted putting the grid inside a grid and put padding or margin on that one. I've tried putting the labels/editors inside a grid/stacklayout, I've even tried negative padding and margin on them.
This is how it looks like without the padding
https://gyazo.com/3809306e3b5a27a5f10058bbc17c295a
But whenever I try to add padding or margin anywhere the editors gets too small and gets clipped on the inside like this:
https://gyazo.com/46f25b9c44e1717bf1fa124eb2b10068
This is how I want it to look like, but I can't get rid of that damn clipping on the editors, why does the editors get clipped but not the label?
I've tried setting margin 0 and padding 0 on the editors specifically, didn't help either.
<!-- Bottom Command Bar -->
<Grid Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="8" BackgroundColor="LightGray" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Padding="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="1.5*"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" BackgroundColor="White" Text="{Binding QuoteNumber}" TextColor="Black" VerticalOptions="Fill" HorizontalOptions="Fill" />
<Editor Grid.Row="0" Grid.Column="1" BackgroundColor="White" Placeholder="PO Number" TextColor="Black" Text="{Binding PoNumber}" VerticalOptions="Fill" HorizontalOptions="Fill" />
<Editor Grid.Row="0" Grid.Column="2" BackgroundColor="White" Placeholder="Drop Date" TextColor="Black" Text="{Binding DropDate}" VerticalOptions="Fill" HorizontalOptions="Fill" />
<DatePicker Grid.Row="0" Grid.Column="2" MinimumDate="{Binding MinimumDate}" MaximumDate="{Binding MaximumDate}" Date="{Binding DropDate}" BackgroundColor="{StaticResource ThemeBkColor}" TextColor="White"/>
<Editor Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" BackgroundColor="White" Placeholder="Comment" TextColor="Black" Text="{Binding Comment}" VerticalOptions="Fill" HorizontalOptions="Fill"/>
<Label Grid.Row="0" Grid.Column="3" VerticalOptions="Center" HorizontalOptions="Center" FontSize="32" Text="{Binding TotalOrderValue, StringFormat='{0:C2}'}"/>
<Button Grid.Row="1" Grid.Column="3" Margin="10,0,10,2" VerticalOptions="Fill" HorizontalOptions="Fill" Text="SUBMIT PART ORDER" Command="{Binding SubmitJourneyCommand}" BackgroundColor="{StaticResource ThemeBkColor}" TextColor="White" />
</Grid>
Within your Change the value from * to AUTO
From there you can use 'padding' or 'margin' on either the main Grid control or the individual Row elements and controls within them.
I need to change the size of a button that is inside a grid ....
when adding the property HightRequest and WidthRequest this does not make any changes in my application ... this why it happens? What should I do to be able to modify the size of the buttons on my grid?
any help for me?
MyView.XAML:
<StackLayout
Padding="5">
<SearchBar
Placeholder="Buscar..."
BackgroundColor="White">
</SearchBar>
<Grid HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label
Grid.Column="0"
Grid.Row="0"
Text="(1537) CLORO, GAS LICUADO"
VerticalOptions="Center">
</Label>
<Button
Grid.Column="1"
Grid.Row="0"
Text="VER"
BackgroundColor="Orange"
TextColor="White"
HeightRequest="5"
WidthRequest="5">
</Button>
<Button
Grid.Column="2"
Grid.Row="0"
Text="HDS"
BackgroundColor="Blue"
TextColor="White">
</Button>
<Label
Grid.Column="0"
Grid.Row="1"
Text="(11) ACTION 707"
VerticalOptions="Center">
</Label>
<Button
Grid.Column="1"
Grid.Row="1"
Text="VER"
BackgroundColor="Orange"
TextColor="White">
</Button>
<Button
Grid.Column="2"
Grid.Row="1"
Text="HDS"
BackgroundColor="Blue"
TextColor="White">
</Button>
</Grid>
</StackLayout>
<StackLayout
Padding="5">
<SearchBar
Placeholder="Buscar..."
BackgroundColor="White">
</SearchBar>
<Grid HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label
Grid.Column="0"
Grid.Row="0"
Text="(1537) CLORO, GAS LICUADO"
VerticalOptions="Center">
</Label>
<Button
Grid.Column="1"
Grid.Row="0"
Text="VER"
BackgroundColor="Orange"
TextColor="White"
HeightRequest="50"
WidthRequest="120">
</Button>
<Button
Grid.Column="2"
Grid.Row="0"
Text="HDS"
BackgroundColor="Blue"
TextColor="White"
HeightRequest="50"
WidthRequest="90">
</Button>
<Label
Grid.Column="0"
Grid.Row="1"
Text="(11) ACTION 707"
VerticalOptions="Center">
</Label>
<Button
Grid.Column="1"
Grid.Row="1"
Text="VER"
BackgroundColor="Orange"
TextColor="White">
</Button>
<Button
Grid.Column="2"
Grid.Row="1"
Text="HDS"
BackgroundColor="Blue"
TextColor="White">
</Button>
</Grid>
</StackLayout>
You can do this by changing ColumnDefinition's widths in your Grid.
Also your second row is out of grid, because you only have one RowDefinition.
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"