I created a Frame with a Grid inside with a Boxview and an Image, but the Frame is still too big even though I entered HeightRequest: "1".
How is it possible?
<Frame
RelativeLayout.YConstraint="{ConstraintExpression
Type=Constant,
Constant=11}"
RelativeLayout.XConstraint="{ConstraintExpression
Type=Constant,
Constant=310}"
CornerRadius="100"
HeightRequest="1"
BackgroundColor="Transparent"
xct:TouchEffect.NativeAnimation="True">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="Graph_Clicked"/>
</Frame.GestureRecognizers>
<Grid>
<BoxView
Color="#404040"
CornerRadius="100"
Opacity="0.6"
Margin="-20"/>
<Image
Margin="-10"
Source="Chart.png"/>
</Grid>
</Frame>
I created a Frame with a Grid inside with a Boxview and an Image, but the Frame is still too big even though I entered HeightRequest: "1"
According to Jason's opinion, the Frame is expanding to fit its contents. If you want to make frame smaller, you just change set image HeightRequest and WidthRequest samller, then Frame will become smaller.
<Frame
BackgroundColor="Transparent"
CornerRadius="100"
RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,
Constant=100}"
RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,
Constant=0}">
<Grid>
<BoxView
CornerRadius="100"
Opacity="0.6"
Color="#404040" />
<Image
HeightRequest="50"
Source="c11.png"
WidthRequest="50" />
</Grid>
</Frame>
Remove margin - (negative). And height and width are requested in Xamarin.Forms and not set actually. Set vertical and horizontal options for controls. Then set the HeightRequest and WidthRequest. Should solve your issue.
<Frame
RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=11}"
RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=310}"
CornerRadius="100"
HeightRequest="100"
BackgroundColor="Transparent">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="Graph_Clicked"/>
</Frame.GestureRecognizers>
<Grid HorizontalOptions="Center" VerticalOptions="Center">
<BoxView
Color="#404040"
CornerRadius="10"
Opacity="0.6"/>
<Image
Source="Chart.png"/>
</Grid>
</Frame>
Related
I am trying to figure out how to center the image and text and push the text "Cache 3" directly below the image without the bottom red space. This stacklayout is in a collection so the images are of different heights hence I can't set a HeightRequest per se.
This is my XAML:
<StackLayout>
<Frame
Margin="10"
Padding="0"
BorderColor="{StaticResource Gray-500}"
CornerRadius="5"
HasShadow="False"
HorizontalOptions="Center"
VerticalOptions="FillAndExpand">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="3*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image
Grid.Row="0"
Margin="15"
Aspect="AspectFit"
BackgroundColor="Red"
Source="{Binding Image, Converter={StaticResource BytesToImageSource}}" />
<Label
Grid.Row="1"
Padding="15,0,15,15"
FontSize="18"
HorizontalTextAlignment="Center"
Text="{Binding Data}"
TextColor="{StaticResource Gray-900}"
VerticalTextAlignment="Center" />
</Grid>
</Frame>
</StackLayout>
Using Xamarin.Forms and XAML, I need to define a layout for screen sizes of various heights.
Here's the results I'm getting, and the code below it:
(Just for convenience the example code uses Boxes where an Image and StackLayout should go)
<Grid
BackgroundColor="Blue"
Padding="10">
<Grid.RowDefinitions>
<RowDefinition
Height="1*" />
<RowDefinition
Height="8*" />
<RowDefinition
Height="1*" />
</Grid.RowDefinitions>
<RelativeLayout
Grid.Row="1"
BackgroundColor="Yellow">
<BoxView
x:Name="whereImageGoes"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.5}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.5}"
BackgroundColor="Orange" />
<BoxView
x:Name="whereStackLayoutGoesButShouldFillAllYellowAreaUnderIt"
VerticalOptions="FillAndExpand"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.5}"
BackgroundColor="Green" />
</RelativeLayout>
</Grid>
Here's what's going on, and the problem I'm having:
The blue area is the Grid, the bottommost element.
The yellow area is the RelativeLayout, filling the Grid Row it's in.
The orange area is where an image has to be placed, and the size it
has to be--a square that's exactly half the width of the layout it's in.
The green area is where a StackLayout should go, except it should
extend downward to cover all the yellow area below it, and this is
the key thing: that height will be different on different devices,
so it can't be defined using a Factor. [btw I don't know why it has any height at all in this example, but it does]
So... how do I dynamically stretch the StackLayout to fill that lower yellow area while still making sure the image has a consistent ratio of size to the layout's width?
Try this code
<Grid
BackgroundColor="Blue"
Padding="10">
<Grid.RowDefinitions>
<RowDefinition
Height="1*" />
<RowDefinition
Height="8*" />
<RowDefinition
Height="1*" />
</Grid.RowDefinitions>
<StackLayout Spacing="0" Padding="0" Margin="0" Grid.Row="1">
<RelativeLayout Margin="0" Padding="0" VerticalOptions="Start"
BackgroundColor="Yellow">
<BoxView
x:Name="whereImageGoes"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.5}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.5}"
BackgroundColor="Orange" />
</RelativeLayout>
<BoxView
x:Name="whereStackLayoutGoesButShouldFillAllYellowAreaUnderIt"
VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
BackgroundColor="Green" />
</StackLayout>
</Grid>
So basically I have an annoying thing when I'm trying to adjust my frame inside an AbsoluteLayout such:
<AbsoluteLayout Grid.Column="4">
<Frame CornerRadius="20"
Padding="0"
BorderColor="#9f6b34"
Background="Transparent">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="fourthButton_Clicked"/>
</Frame.GestureRecognizers>
<Label Text="Classic and traditional"
Padding="35"
FontSize="40"
FontFamily="font2"
HorizontalTextAlignment="Center"
TextColor="#211717">
</Label>
</Frame>
When the code is like this it's fine but when I try to adjust the frames' position with .LayoutBounds it just won't click. I've tried changing it to a StackLayout and click event fires sometimes in various different positions inside the frame. I've put ImageButton, regular button and also tried using my label's GestureRecognizer but it just won't click when I made adjustments.
here is a gif of the situtation. the top frame isn't adjusted the bottom one is
When the code is like this it's fine but when I try to adjust the frames' position with .LayoutBounds it just won't click.
I try your code, and it works fine, having no problem, please take a look the following code:
<StackLayout>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<AbsoluteLayout>
<Frame
Padding="0"
AbsoluteLayout.LayoutBounds="0, 10, 300, 200"
BorderColor="#9f6b34"
CornerRadius="20">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="fourthButton_Clicked" />
</Frame.GestureRecognizers>
<Label
Padding="35"
FontFamily="font2"
FontSize="40"
HorizontalTextAlignment="Center"
Text="Classic and traditional"
TextColor="#211717" />
</Frame>
</AbsoluteLayout>
<StackLayout Grid.Row="1">
<Frame
Padding="0"
BorderColor="#9f6b34"
CornerRadius="20">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="fourthButton_Clicked" />
</Frame.GestureRecognizers>
<Label
Padding="35"
FontFamily="font2"
FontSize="40"
HorizontalTextAlignment="Center"
Text="Classic and traditional"
TextColor="#211717" />
</Frame>
</StackLayout>
</Grid>
</StackLayout>
I put Frame in AbsoluteLayout and also use AbsoluteLayout.LayoutBounds to adjust Frame poaition, I also put frame in StackLayout, it also works fine.
I have 3 frames, each one containing 1 image/icon and 1 text label.
I have this code :
<StackLayout Spacing="0" Padding="0">
<Frame CornerRadius="3" BackgroundColor="#4167b2" HeightRequest="45" Margin="35" Padding="0" HasShadow="false">
<StackLayout Orientation="Horizontal" Padding="0" Spacing="0">
<Image HeightRequest="80" Aspect="AspectFill" Source="https://img.icons8.com/color/120/000000/facebook.png" />
<Label Text="Login com facebook" VerticalOptions="CenterAndExpand" FontSize="20" FontAttributes="Bold" TextColor="White" />
<StackLayout.GestureRecognizers>
<TapGestureRecognizer x:Name="FacebookButton" AutomationId="FacebookButton" Command="{Binding FacebookButtonCommand}" />
</StackLayout.GestureRecognizers>
</StackLayout>
</Frame>
<Frame CornerRadius="3" BackgroundColor="#D44638" HeightRequest="45" Margin="35" Padding="0" HasShadow="false" >
<StackLayout Orientation="Horizontal" Padding="0" Spacing="0">
<Image HeightRequest="80" Aspect="AspectFill" Source="https://img.icons8.com/color/120/000000/gmail.png" />
<Label Text="Login com g-mail" VerticalOptions="CenterAndExpand" FontSize="20" FontAttributes="Bold" TextColor="White" />
<StackLayout.GestureRecognizers>
<TapGestureRecognizer x:Name="GmailButton" AutomationId="GmailButton" Command="{Binding GmailButtonCommand}" />
</StackLayout.GestureRecognizers>
</StackLayout>
</Frame>
<Frame CornerRadius="3" BackgroundColor="#1dcaff" HeightRequest="45" Margin="35" Padding="0" HasShadow="false" >
<StackLayout Orientation="Horizontal" Padding="0" Spacing="0">
<Image HeightRequest="80" Aspect="AspectFill" Source="https://img.icons8.com/color/120/000000/twitter-squared.png" />
<Label Text="Login com twitter" VerticalOptions="CenterAndExpand" FontSize="20" FontAttributes="Bold" TextColor="White" />
<StackLayout.GestureRecognizers>
<TapGestureRecognizer x:Name="TwitterButton" AutomationId="TwitterButton" Command="{Binding TwitterButtonCommand}" />
</StackLayout.GestureRecognizers>
</StackLayout>
</Frame>
</StackLayout>
But it puts the buttons very away from each other. I would like them to be close to each other and in same column. Can anybody help ?
You are using a very large Margin value (35) on each frame. The Margin is applicable to each element it is specified on - hence you are getting 70pixel spacing between frames (35 + 35 top & bottom).
Rather than specific a a single value which applies all around the element, the Left,Top,Right, Bottom margin/padding can be specified separately as comma separated values (you can have 2 comma separated values for matching left/right & to/bottom spacing too).
Maybe try Margin="35,0,35,0" to retain the left-right spacing & minimise the top-bottom spacing. Note this could be simplified to Margin="35,0" - with this format the 35 applies to left & right, the zero to top & bottom.
There is no reason for top/bottom & left/right to be identical - you can adjust each to get the best effect.
See this link : https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/margin-and-padding
I'm trying to add a floating action button to my page, to do so I wrapped my stack layout with a relative layout and add the FAB in the relative layout.
<ContentPage.Content>
<RelativeLayout BackgroundColor="Transparent">
<fab:FloatingActionButton
x:Name="fabBtn"
Source="plus.png"
Size="Normal"
Clicked="Handle_FabClicked"
NormalColor="Green"
RippleColor="Blue"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=-75}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1, Constant=-75}" />
<StackLayout
Spacing="10"
Padding="5"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}">
<Label Text="Latest news/activities" FontSize="Medium" VerticalOptions="Start"/>
<ScrollView VerticalOptions="CenterAndExpand">
<ListView
x:Name="lsvActivities"
HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" Padding="3">
<StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
<Label Text="{Binding title}" VerticalOptions="StartAndExpand"/>
<Label Text="{Binding date}" VerticalOptions="End"/>
</StackLayout>
<StackLayout HorizontalOptions="End" WidthRequest="100" HeightRequest="100" BackgroundColor="Blue">
<Label Text="image here"/>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollView>
<Label Text="Good Mording" FontSize="Large" VerticalOptions="End" HorizontalOptions="Center"/>
</StackLayout>
</RelativeLayout>
</ContentPage.Content>
But it locks like the StackLayout is out of the boundary of the layout or something.
What is problem? and how I can display both the FAB and the StackLayout, where the floating action button should always be on top of the StackLayout elements
Are you trying to have the StackLayout occupy the entire screen (with the button on top)? If so, this part isn't going to do that:
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}">
That is placing the top left corner of the StackLayout at the bottom right of the screen.
Per the Xamarin docs:
Unlike AbsoluteLayout, RelativeLayout does not have the concept of the
moving anchor and does not have facilities for positioning elements
relative to the bottom or right edges of the layout.
In other words, AbsoluteLayout will try to adjust for you if you place something at the bottom right corner. RelativeLayout won't.
You probably want the constraints noted above on the StackLayout to be WidthConstraint and HeightConstraint, and set the XConstraint and YConstraint to 0.
And as Sven-Michael says, drop the ScrollView.
EDIT
The XAML should look like:
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,Constant=0}"
RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,Constant=0}"