Hello I have this layout where I have a picture of a body and by its side I have some buttons with some of the parts of the body(e.g, Head,arms,legs) but I'm having trouble fixing the buttons on the same row as the picture. The buttons stay as the same size as the picture what I wanna do is have the buttons on the side of the pic, like in the example.
I don't know if another kind of layout is more appropriate for this situtation.
here is my code:
<ContentPage.Content>
<StackLayout>
<Grid VerticalOptions="StartAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40*"/> <!--coluna 0-->
<ColumnDefinition Width="20*"/> <!--coluna 1-->
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50*"/> <!--linha 1-->
<RowDefinition Height="20*"/> <!--linha 2-->
<RowDefinition Height="20*"/> <!--linha 3-->
</Grid.RowDefinitions>
<Image Grid.Row="0" Grid.Column="0" Source="corpo_cortado.png"/>
<Button Text="Cabeça" Grid.Row="0" Grid.Column="1" />
<Button Text="Torso" Grid.Row="2" Grid.Column="1" />
</Grid>
</StackLayout>
</ContentPage.Content>
Thank you!
correct result:
From the comments I managed to make it work. What I did was. I created two stack Layout with vertical orientation and put each one in one column.Here some sample:
<StackLayout>
<Grid VerticalOptions="StartAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40*"/> <!--coluna 0-->
<ColumnDefinition Width="20*"/> <!--coluna 1-->
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50*"/> <!--linha 1-->
<RowDefinition Height="20*"/> <!--linha 2-->
<RowDefinition Height="20*"/> <!--linha 3-->
</Grid.RowDefinitions>
<StackLayout Orientation="Vertical" Grid.Row="0" Grid.Column="0">
<Image Grid.Row="0" Grid.Column="0" Source="corpo_cortado.png"/>
</StackLayout>
<StackLayout Orientation="Vertical" Grid.Row="0" Grid.Column="1">
<Button Text="Cabeça" Grid.Row="0" Grid.Column="1" Clicked="Button_Clicked"/>
</StackLayout>
</Grid>
</StackLayout>
For Grid Row-0, Column-1, take a Stack Layout with vertical orientation, and place two buttons inside that Stack Layout, that will place image for Row-0, Column-0 and buttons for Row-0, Column-1.
Still you need code for sample let me know.
Hope this may solve your issue.
Related
I create Xamarin Forms applications with the possibility of chat and i have problem with my chatPage. My code looks like this:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.Chat.ChatRoomPage">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid>
<Grid.RowDefinitions>
<RowDefinition
Height="*" />
</Grid.RowDefinitions>
<RefreshView
IsRefreshing="{Binding IsRefreshing, Mode=OneWay}"
Command="{Binding RefreshCommand}"
Grid.Row="0">
<CollectionView
x:Name="CollectionViewMessages"
ItemsSource="{Binding MessagesList}"
BackgroundColor="{ DynamicResource BasePageColor }">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid RowDefinitions="auto, auto">
<Grid IsVisible="{Binding IsOwnerMessage}">
<template:ChatRightMessageItemTemplate />
</Grid>
<Grid
Grid.Row="1"
IsVisible="{Binding IsOwnerMessage, Converter={converters:BooleanConverter}}">
<template:ChatLeftMessageItemTemplate />
</Grid>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</RefreshView>
<!-- Loading gif -->
<ActivityIndicator
Grid.Row="0"
IsRunning="{Binding IsBusy}"
HorizontalOptions="Center"
VerticalOptions="Start"
TranslationY="40"
InputTransparent="True"/>
</Grid>
<!--- Message Writing -->
<Grid
Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid
Grid.Row="0"
Margin="20,10,20,10"
ColumnSpacing="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<!-- Comment -->
<Editor
Grid.Column="0"
x:Name="entry"
AutoSize="TextChanges"
Margin="0,0,5,2"
FontSize="14"
Text="{Binding Message}"
HorizontalOptions="FillAndExpand"
VerticalOptions="End"/>
<!-- Send button -->
<Image
Grid.Column="2"
Source="SendMessageButton.png"
HorizontalOptions="End"
VerticalOptions="End"
WidthRequest="23"
HeightRequest="20"
Margin="0,0,0,10">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding SendMessageCommand}"/>
</Image.GestureRecognizers>
</Image>
</Grid>
</Grid>
</Grid>
</ContentPage>
the effect of this is this:
This work well on Android but on iOS nope. After clicking something on the keyboard, the field for typing escapes below it and we cannot see what we are typing. In addition, when you switch the keyboard to emoji, its size changes and you cannot see what you are typing. The input field problem is solved if you use scrollview, but then the collectionview fills the entire screen and the input field is outside of it. How to solve this problem so that autosize and emoji work properly on iOS?
How can I stop this Grid from expanding vertically and adding all this extra space between the rows?
<ContentPage.Content>
<StackLayout>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image Source="testsquare" />
<Image Source="testsquare" Grid.Column="1"/>
<Image Source="testsquare" Grid.Row="1"/>
<Image Source="testsquare" Grid.Column="1" Grid.Row="1"/>
</Grid>
</StackLayout>
</ContentPage.Content>
This is what it should look like (ignore the background color change)
Use "Auto" instead of "*"
<RowDefinition Height="Auto"/>
It appears to be a bug, where the grid height is being treated as if the image is being displayed at its full height.
<Grid BackgroundColor="CornflowerBlue">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Image Source="testsquare" />
<Image Source="testsquare" Grid.Column="1" />
</Grid>
There is a spacing property in Grid .
Grid has properties to control spacing between rows and columns. The following properties are available for customizing the Grid:
ColumnSpacing – the amount of space between columns. The default value of this property is 6.
RowSpacing – the amount of space between rows. The default value of this property is 6.
You can set RowSpacing or ColumnSpacing to check whether can solve it .
<StackLayout Padding="5">
<Grid RowSpacing="5" ColumnSpacing="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image Source="icon.png" BackgroundColor="Accent"/>
<Image Source="icon.png"
BackgroundColor="Accent"
Grid.Column="1" />
<Image Source="icon.png"
BackgroundColor="Accent"
Grid.Row="1" />
<Image Source="icon.png"
BackgroundColor="Accent"
Grid.Column="1"
Grid.Row="1" />
</Grid>
</StackLayout>
About Image , The Aspect property determines how the image will be scaled to fit the display area, with Fill or AspectFill .(Default is AspectFit)
I need to display a small image inside a Frame or Button but the Image that im using its bigger than my Button/Frameand when I try to do it with Frame it wont display the Image only with the Button the problem being that the Image is way too big. How can I fix this.
Using Button:
<Frame BackgroundColor="#40000000" BorderColor="#FFFFFF" CornerRadius="6" Padding="0" Grid.Row="1" Grid.Column="1">
<Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.01*"/>
<RowDefinition Height="0.15*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.01*"/>
<ColumnDefinition Width="0.15*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Image="sobremesa.png" BackgroundColor="Black" Grid.Row="1" Grid.Column="1" x:Name="Ingredient"/>
</Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.2*"/>
<RowDefinition Height="2.8*"/>
<RowDefinition Height="0.7*"/>
<RowDefinition Height="0.7*"/>
<RowDefinition Height="0.2*"/>
</Grid.RowDefinitions>
<Image Source="https://i.imgur.com/066Iazn.png" Grid.Row="1" x:Name="CategoryImage"/>
<Label Text="Melão c/ Presunto" VerticalTextAlignment="Start" TextColor="White" HorizontalTextAlignment="Center" Grid.Row="2"/>
<Label Text="6.90€" VerticalTextAlignment="Start" TextColor="White" HorizontalTextAlignment="Center" Grid.Row="3"/>
</Grid>
</Grid>
<Frame.GestureRecognizers>
<TapGestureRecognizer
Tapped="TapGestureRecognizer_Tapped"
NumberOfTapsRequired="1"/>
</Frame.GestureRecognizers>
</Frame>
Using Frame:
<Frame BackgroundColor="#40000000" BorderColor="#FFFFFF" CornerRadius="6" Padding="0" Grid.Row="1" Grid.Column="1">
<Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.01*"/>
<RowDefinition Height="0.15*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.01*"/>
<ColumnDefinition Width="0.15*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Frame Grid.Row="1" Grid.Column="1" BackgroundColor="Black" x:Name="Ingredient">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.1*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="0.1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.1*" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="0.1*"/>
</Grid.ColumnDefinitions>
<Image Source="sobremesa.png" Grid.Row="1" Grid.Column="1"/>
</Grid>
</Frame>
</Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.2*"/>
<RowDefinition Height="2.8*"/>
<RowDefinition Height="0.7*"/>
<RowDefinition Height="0.7*"/>
<RowDefinition Height="0.2*"/>
</Grid.RowDefinitions>
<Image Source="https://i.imgur.com/066Iazn.png" Grid.Row="1" x:Name="CategoryImage"/>
<Label Text="Melão c/ Presunto" VerticalTextAlignment="Start" TextColor="White" HorizontalTextAlignment="Center" Grid.Row="2"/>
<Label Text="6.90€" VerticalTextAlignment="Start" TextColor="White" HorizontalTextAlignment="Center" Grid.Row="3"/>
</Grid>
</Grid>
<Frame.GestureRecognizers>
<TapGestureRecognizer
Tapped="TapGestureRecognizer_Tapped"
NumberOfTapsRequired="1"/>
</Frame.GestureRecognizers>
</Frame>
The Image that im trying to display in the Frame is in the child Frame.
Remember that when I try to display with Frame it wont display the Image.
how come I can not call the object image and the object image backClickArrow nextClickArrow from codebehind? They can not because these are inside a control?
how can I call from codebehind, they need to start an event? thank you so much.
<control:CarouselView x:Name="carouselView">
<control:CarouselView.ItemTemplate>
<DataTemplate>
<Grid Padding="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40*"></RowDefinition>
<RowDefinition Height="0.2*"></RowDefinition>
<RowDefinition Height="59.8*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"></ColumnDefinition>
<ColumnDefinition Width="40*"></ColumnDefinition>
<ColumnDefinition Width="50*"></ColumnDefinition>
<ColumnDefinition Width="5*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Image Source="backBlueArrow.png" x:Name="backClickArrow" Aspect="AspectFit" Grid.Column="0"></Image>
<StackLayout Margin="0,0,10,0" VerticalOptions="Center" HorizontalOptions="End" Grid.Column="1">
<Image HeightRequest="70" Source="clock.png" Aspect="AspectFit"></Image>
</StackLayout>
<Grid Grid.Row="0" Grid.Column="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40*"></RowDefinition>
<RowDefinition Height="60*"></RowDefinition>
</Grid.RowDefinitions>
<Label Text="Superficie totale" TextColor="#fff" FontSize="Small" VerticalTextAlignment="End" HorizontalTextAlignment="Start" Grid.Row="0"/>
<Label Text="890000m2" FontSize="Large" TextColor="#fff" VerticalTextAlignment="Start" HorizontalTextAlignment="Start" Grid.Row="1"/>
</Grid>
<Image Source="nextBlueArrow.png" x:Name="nextClickArrow" Aspect="AspectFit" Grid.Column="3"></Image>
</Grid>
<!-- griglia fare la riga bianca -->
<Grid Padding="0" BackgroundColor="White" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
</Grid>
<Grid Padding="10" Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
</Grid>
</Grid>
<!--<Label Text="{Binding Testo}" />-->
</DataTemplate>
</control:CarouselView.ItemTemplate>
</control:CarouselView>
the object that i wish call:
<Image Source="backBlueArrow.png" x:Name="backClickArrow" Aspect="AspectFit" Grid.Column="0"></Image>
and
<Image Source="nextBlueArrow.png" x:Name="nextClickArrow" Aspect="AspectFit" Grid.Column="3"></Image>
i have solved like this:
<Button Image="nextBlueArrow.png" Clicked="clickme" Grid.Column="3"></Button>
use button and add Image attribute.
I'm trying to develop an ancient form of chess, Chaturaji, as an assignment for school. I've got some very basic xaml setup that should allow me to drag and drop an image element within a grid.
<Page
x:Class="Projectg.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Projectg"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid AllowDrop="True" Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition>
</ColumnDefinition>
<ColumnDefinition Width="900">
</ColumnDefinition>
<ColumnDefinition>
</ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition Height="900"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid Background="Transparent" x:Name="grdGrid" AllowDrop="True" Grid.Column="1" Grid.Row="1" Drop="grdGrid_Drop" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image CanDrag="True" x:Name="Image" Canvas.ZIndex="1" Height="80" Width="80" Grid.Row="0" Grid.Column="0" Source="/images/boat.png" DragStarting="Boat_DragStarting" Drop="Boat_Drop" DragOver="Image_DragOver" ></Image>
<Image CanDrag="True" Canvas.ZIndex="1" Height="80" Width="80" Grid.Row="1" Grid.Column="0" Source="/images/horse.png" ></Image>
<Image Canvas.ZIndex="1" Height="80" Width="80" Grid.Row="2" Grid.Column="0" Source="/images/elephant.png" ></Image>
<Image Canvas.ZIndex="1" Height="80" Width="80" Grid.Row="3" Grid.Column="0" Source="/images/crown.png" ></Image>
<Image Canvas.ZIndex="1" Height="80" Width="80" Grid.Row="0" Grid.Column="1" Source="/images/pawn.png" ></Image>
<Image Canvas.ZIndex="1" Height="80" Width="80" Grid.Row="1" Grid.Column="1" Source="/images/pawn.png" ></Image>
<Image Canvas.ZIndex="1" Height="80" Width="80" Grid.Row="2" Grid.Column="1" Source="/images/pawn.png" ></Image>
<Image Canvas.ZIndex="1" Height="80" Width="80" Grid.Row="3" Grid.Column="1" Source="/images/pawn.png" ></Image>
</Grid>
</Grid>
</Page>
When I try to drag the image over the grid the mouse shows the “Drop Not Allowed” cursor and releasing the image does not fire the Drop event. I asked a teacher about this and she said it was probably because I did not set a background for my grid.
I quickly updated the code, but no luck, the event still did not fire. She didn't really know what was going on and told me to email her if the problem persisted.
I thought I would ask here first.
Thanks in advance for any help.
A quick glance at the MSDN UWP Drag and Drop page suggests that you need to handle the DragOver event, and indicate what drop operations the control will accept (true in any form of XAML and IIRC winforms etc. as well). In UWP, that's the AccepttedOperation property on the event args object (WPF calls that property Effects and it's a different enum type):
private void Grid_DragOver(object sender, DragEventArgs e)
{
e.AcceptedOperation = DataPackageOperation.Copy;
}