Good afternoon all,
Having an interesting issue here where by I have 4 buttons within a grid that all work ... kind of ... the top two buttons work without an issue however the bottom two you can only click the top half of the button otherwise it does not register the action.
Below is the Xaml code I am using ... Hope this helps... so far everything I have read doesn't seem to work so I can only assume I am missing something very simple.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="HomemasterMobileApplication.Views.HomePage"
Title=""
BackgroundImageSource = "HousingBackground2">
<ContentView >
<ScrollView>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="100"/>
<RowDefinition Height="15"/>
<RowDefinition Height="260"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="1" />
<StackLayout Grid.Row="1" Orientation="Horizontal" HorizontalOptions="Center" Padding="0,0,0,0" VerticalOptions="Center" Opacity="0.8" BackgroundColor="#002D485D" >
<ContentView>
<ImageButton Source="HomeMasterLogo.png" HeightRequest="100" CornerRadius="25"/>
</ContentView>
</StackLayout>
<StackLayout Grid.Row="3" Orientation="Horizontal" Padding="0,15,0,0" Spacing="5" HorizontalOptions="Center">
<Grid>
<Grid.ColumnDefinitions >
<!--0--><ColumnDefinition Width="10*"/>
<!--1--><ColumnDefinition Width="40*"/>
<!--2--><ColumnDefinition Width="10*"/>
<!--3--><ColumnDefinition Width="40*"/>
<!--4--><ColumnDefinition Width="10*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<!--0--><RowDefinition Height="10"/>
<!--1--><RowDefinition Height="125"/>
<!--2--><RowDefinition Height="40"/>
<!--3--><RowDefinition Height="125"/>
</Grid.RowDefinitions>
<Button ImageSource="homeuser24px"
BackgroundColor="#00AAA9"
BorderColor="White"
Opacity="1"
Text="Your Account"
TextTransform="Default"
BorderWidth="2"
CornerRadius="100"
TextColor="White"
FontSize="14"
Clicked="OnAccountClick"
Grid.Row="1" Grid.Column="1"
/>
<Button ImageSource="toolsadd24px"
BackgroundColor="#00AAA9"
BorderColor="White"
Opacity="1"
Text="Log a Repair"
TextTransform="Default"
BorderWidth="2"
CornerRadius="100"
TextColor="White"
FontSize="14"
Clicked="OnRepairRequestClick"
Grid.Row="1" Grid.Column="3"
/>
<Button ImageSource="toolsinfo24px"
BackgroundColor="#00AAA9"
BorderColor="White"
TextTransform="Default"
Opacity="1"
BorderWidth="2"
CornerRadius="100"
TextColor="White"
Text="Track a Repair"
FontSize="14"
Clicked="OnCheckRepairsClick"
Grid.Row="3" Grid.Column="1"
/>
<Button
Clicked="OnPersonalDetailsClick"
ImageSource="userinfo24px"
BackgroundColor="#00AAA9"
BorderColor="White"
TextTransform="Default"
Opacity="1"
BorderWidth="2"
CornerRadius="100"
TextColor="White"
Text="My Details"
FontSize="14"
Grid.Row="3" Grid.Column="3"
/>
</Grid>
</StackLayout>
</Grid>
</ScrollView>
</ContentView>
You need to use the DN function within the grid to adjust the grid height.
First, you define the grid on the outermost layer. The problem lies in Grid.Row="3".
Then you create another Grid in Grid.Row="3",But the height of Grid.Row="3" you define in the outer Grid is 260.Your internal view height exceeds it. Therefore, the view will be overwritten.
In general, you only need to increase the height of the external Grid.
<ScrollView>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="100"/>
<RowDefinition Height="15"/>
<RowDefinition Height="400"/>
<!--Change the bottom height to 400-->
</Grid.RowDefinitions>
....
</ScrollView>
Related
I am working with a collectionview using GridItemsLayout orientation=“Vertical” Span=“2”.
When I click on a button that expands the lower part of my grid item. Currently only by using ItemSizingStrategy.MeasureAllItems I am able to get the lower part to expand. I was wondering if there is a way of controlling the item positioning on the image so the images always align and only the lower half expands evenly.
I am aware each item has its own layout, but this looks messy. I’ve read the documentation mention this type of sizing.
<ContentPage.Content>
<StackLayout>
<CollectionView x:Name="CollectionList"
VerticalOptions="FillAndExpand"
ItemsSource="{Binding Shares}"
IsGrouped="True"
ItemSizingStrategy="MeasureAllItems">
<!--HEADER-->
<CollectionView.GroupHeaderTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal"
Padding="5"
BackgroundColor="#f7f7fb">
<Label x:Name="labelname"
Text="{Binding GroupKey}"
/>
<Button Text=" More"
FontSize="16"
Clicked="OpenButton_Clicked"/>
</StackLayout>
</DataTemplate>
</CollectionView.GroupHeaderTemplate>
<!--TEMPLATING-->
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" Span="2" />
</CollectionView.ItemsLayout>
<!--BODY-->
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="viewmodels:ShareViewModel">
<Grid Padding="5" Margin="1,0,1,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ImageButton x:Name="image"
Source="{Binding ImageLink}"
WidthRequest="150"
Clicked="FullImageView"
Grid.ColumnSpan="2"
Aspect="AspectFill"
Grid.Row="0"
Grid.Column="0"/>
<Label FontSize="16"
Text="{Binding Name}"
Grid.Row="1"
Grid.Column="0"/>
<Label x:Name="label_more"
Text="More"
Grid.Row="1"
Grid.Column="1"
HorizontalTextAlignment="End"/>
<Label
Text="{Binding CreateDate}"
Grid.Row="2"
Grid.Column="0"/>
<ImageButton IsVisible="{Binding TVNImageSet}"
Command="{Binding BindingContext.ToggleTVNCommand, Source={x:Reference Name=sharepage}}"
CommandParameter="{Binding .}"
Source="addresscard.png"
Grid.Row="2"
Grid.Column="1">
</ImageButton>
<!--Lower Section if the card is tapped (EXPAND)-->
<StackLayout
IsVisible="{Binding TVNVisible}"
Grid.Row="3"
Grid.ColumnSpan="2">
<StackLayout Orientation="Horizontal"
IsVisible="{Binding PhoneVisible}"
ClassId="{Binding Phone}">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"
NumberOfTapsRequired="1"
/>
</StackLayout.GestureRecognizers>
<Image Source="call.png"
WidthRequest="15"/>
<Label
FontSize="12"
Text="{Binding Phone}" />
</StackLayout>
<Label
FontSize="12"
Text="{Binding Address}"
IsVisible="{Binding AddressVisible}">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_1" NumberOfTapsRequired="1"/>
</Label.GestureRecognizers>
</Label>
</StackLayout>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
All BindingContext.ToggleTVNCommand does is set TVNVisible to true which shows the lower half the "expanding potion". I don't need to use collection view if there is an easier way fo displaying this data, but CollectionVView seemed like the best choice for the layout and item source I wanted.
After digging around GitHub forums on bugs and updates for Xamarin, someone mentioned to just work with SyncFusion's sfListview the membership is not that bad and my company is willing to pay for it if it makes working with Xamarin easier.
That wasn't the solution I was hoping for, but it works and their customer support is great.
below is the reference
https://help.syncfusion.com/xamarin/listview/working-with-sflistview
I know I have already asked this question here: How to Center an image in each column inside one row in Xamarin?, but I didnt have access to an actual device that time, so I just run the emulator and it looks like this:
But now that I have a phone to run it, the page now looks like this:
This is my code for this page:
<StackLayout>
<RelativeLayout>
<Grid Margin="0,10,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="5*"/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" HorizontalOptions="CenterAndExpand">
<Image x:Name="ImgSrcMale"
HeightRequest="165"
Source="male"
WidthRequest="200"
Aspect="AspectFit"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand">
<Image.GestureRecognizers>
<TapGestureRecognizer x:Name="MaleClick"
NumberOfTapsRequired="1"
Tapped="MaleClick_Tapped"/>
</Image.GestureRecognizers>
</Image>
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="1" HorizontalOptions="CenterAndExpand">
<Image Source="female1"
WidthRequest ="200"
HeightRequest="165"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
Aspect="AspectFit"
x:Name="ImgSrcFemale">
<Image.GestureRecognizers>
<TapGestureRecognizer x:Name="FemaleClick"
NumberOfTapsRequired="1"
Tapped="FemaleClick_Tapped"/>
</Image.GestureRecognizers>
</Image>
</StackLayout>
</Grid>
<Grid Margin="0,178,0,0">
<ScrollView>
<StackLayout>
<Grid VerticalOptions="CenterAndExpand" Margin="20,0,20,0" RowSpacing="20">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Label Text="Gender"
FontSize="Title"
TextColor="WhiteSmoke"
HorizontalOptions="Center"
FontAttributes = "Bold"
Grid.Row="0"/>
<local:RoundedEntry x:Name="EntryUsername"
Placeholder="Username"
TextColor="WhiteSmoke"
PlaceholderColor="WhiteSmoke"
Grid.Row="1"/>
<local:RoundedEntry x:Name="EntryPassword"
Placeholder="Password"
IsPassword="True"
TextColor="WhiteSmoke"
PlaceholderColor="WhiteSmoke"
Grid.Row="2"/>
<local:RoundedEntry x:Name="EntryEmail"
Placeholder="Email"
Keyboard="Email"
TextColor="WhiteSmoke"
PlaceholderColor="WhiteSmoke"
Grid.Row="3"/>
<Button Text="Sign Up"
HorizontalOptions="CenterAndExpand"
TextColor="WhiteSmoke"
BackgroundColor="Coral"
WidthRequest="150"
Clicked="Button_Clicked"
CornerRadius="25"
FontAttributes = "Bold"
FontSize = "Large"
Grid.Row="4"/>
<Label x:Name="GenderLabel"
Text=""
TextColor="WhiteSmoke"
IsVisible="False"/>
</Grid>
</StackLayout>
</ScrollView>
</Grid>
</RelativeLayout>
</StackLayout>
You could easily create this layout with one grid. Remove the top-level StackLayout and RelativeLayout. You may want to put the whole grid inside a scrollview to allow the screen to move up with the keyboard.
I'd recommend a grid with two columns and six rows (the controls at the bottom will span both columns. Define the columns with width * (not sure why you had 5*). You don't need to wrap the images in anything, just place them in the grid directly.
We've got an simple collection view for horizontal items. See code below.
<CollectionView ItemsSource="{Binding Items}" ItemsLayout="HorizontalList" ItemSizingStrategy="MeasureFirstItem" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Grid.Row="1">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10">
<Grid.GestureRecognizers>
<TapGestureRecognizer Tapped="Item_Tapped" CommandParameter="{Binding .}"></TapGestureRecognizer>
</Grid.GestureRecognizers>
<Grid.RowDefinitions>
<RowDefinition Height="150" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
<Image
Source="{Binding ImageUrl}"
HorizontalOptions="Fill"
VerticalOptions="Fill"
Aspect="AspectFill"
HeightRequest="60"
WidthRequest="60" />
<Label
HorizontalOptions="Center"
Grid.Row="1"
Text="{Binding Title}"
FontAttributes="Bold"
LineBreakMode="TailTruncation" />
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
On android this works great and I've got items stand neatly next to each other. On iOS the items are overlapping each other. Cannot find why this doesn't work on iOS.
I have to fill all the screen with two buttons vertically
I already tried to use fill and expand:
<ContentPage.Content>
<StackLayout>
<Button Text="Histórico"
BackgroundColor="Transparent"
BorderColor="Black"
BorderWidth="1"
Clicked="Timeline"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"/>
<Button Text="Minha Agenda"
BackgroundColor="Transparent"
BorderColor="Black"
BorderWidth="1"
Clicked="MinhaAgenda"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"/>
</StackLayout>
</ContentPage.Content>
It works, but this caused to much lag on the screen, i dont know why
Is there other solution for this?
How about using a Grid, something like:
<ContentPage.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button Text="History"
Grid.Row="0"
HorizontalOptions="Fill"
VerticalOptions="Fill" />
<Button Text="Agenda"
Grid.Row="1"
HorizontalOptions="Fill"
VerticalOptions="Fill" />
</Grid>
</ContentPage.Content>
This will fill the view with two equally sized buttons.
I am making a page where there is a top title, an image in the middle and some text under it and then two buttons at the bottom for yes or no. As you can see the buttons are getting pushed down too much and getting cut off. I can't figure out how to move the text up a little or reduce the spacing between the image and the title and text. I know I probably could do this with absolute layouts but I am not sure how it would work with larger/smaller screens.
Here is my XAML for the image.
<ContentPage BackgroundColor="#FF233D">
<ContentPage.Content>
<StackLayout Padding="10,10,10,10">
<StackLayout VerticalOptions="Start">
<Label TextColor = "White" Text="You're having trouble sleeping." FontSize="Large" HorizontalTextAlignment="Center"></Label>
<Image Scale=".65" Source="bed" >
</Image>
</StackLayout>
<StackLayout VerticalOptions="CenterAndExpand">
<Label TextColor = "White" Text="When the kidneys aren't filtering properly, toxins stay in the blood rather than leaving the body through the urine. This can make it difficult to sleep. There is also a link between obesity and chronic kidney disease, and sleep apnea is more common in those with chronic kidney disease, compared with the general population." HorizontalTextAlignment="Center"></Label>
</StackLayout>
<StackLayout Orientation="Horizontal" VerticalOptions="EndAndExpand" >
<Button Text="Yes" Clicked="YesClicked" ClassId="1Yes" x:Name="Yes1" HorizontalOptions="FillAndExpand" BackgroundColor="#27ae60" TextColor="White" BorderRadius="0">
</Button>
<Button Text="No" Clicked="NoClicked" ClassId="1No" x:Name="No1" HorizontalOptions="FillAndExpand" BackgroundColor="#c0392b" TextColor="White" BorderRadius="0" >
</Button>
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Any help is much appreciated.
It will be easier if you use a Grid with 4 rows and two columns
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label TextColor = "White" Text="You're having trouble sleeping." FontSize="Large" HorizontalTextAlignment="Center" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" />
<Image Scale=".65" Source="bed" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" >
<Label TextColor = "White" Text="When the kidneys aren't filtering properly, toxins stay in the blood rather than leaving the body through the urine. This can make it difficult to sleep. There is also a link between obesity and chronic kidney disease, and sleep apnea is more common in those with chronic kidney disease, compared with the general population." HorizontalTextAlignment="Center" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"/>
<Button Text="Yes" Clicked="YesClicked" ClassId="1Yes" x:Name="Yes1" HorizontalOptions="FillAndExpand" BackgroundColor="#27ae60" TextColor="White" BorderRadius="0" Grid.Row="3" Grid.Column="1" />
<Button Text="No" Clicked="NoClicked" ClassId="1No" x:Name="No1" HorizontalOptions="FillAndExpand" BackgroundColor="#c0392b" TextColor="White" BorderRadius="0" Grid.Row="3" Grid.Column="0" />
Try to adjust rows Hheight and width if the result is different from your needs.
For more information about grids : Microsoft docs