What's the difference between XConstraint and WidthConstraint or YConstraint and HeightConstraint when using Relative layout in Xamarin.Forms?
It seems like they both serve the same purpose and they can be used interchangeably. Here's an example from Microsoft's documentation.
<RelativeLayout>
<BoxView Color="Red" x:Name="redBox"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,Factor=.15,Constant=0}"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Width,Factor=1,Constant=0}"
RelativeLayout.HeightConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Height,Factor=.8,Constant=0}" />
<BoxView Color="Blue"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=redBox,Property=Y,Factor=1,Constant=20}"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=redBox,Property=X,Factor=1,Constant=20}"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Width,Factor=.5,Constant=0}"
RelativeLayout.HeightConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Height,Factor=.5,Constant=0}" />
</RelativeLayout>
No, they are different.
XConstraint – decide the x (horizontal) position of the view's anchor
YConstraint – decide the y (vertical) position of the view's anchor
WidthConstraint – decide the width of the view
HeightConstraint – decide the height of the view
Each of those values are set as a proportional value in RelativeLayout.
Related
I need to create a button by placing the image as a separate control because I have a nuget extension that allows me to change its color. But I would like to create the classic animation of the button when pressing on it, but I would like the button not to have a background color, is that possible?
<abstractions:TintedImage
x:Name="profile"
RelativeLayout.YConstraint="{ConstraintExpression
Type=Constant,
Constant=20}"
RelativeLayout.XConstraint="{ConstraintExpression
Type=Constant,
Constant=300}"
WidthRequest="20"
Source="User"
TintColor="{x:DynamicResource TextColor}"/>
<Button
RelativeLayout.YConstraint="{ConstraintExpression
Type=Constant,
Constant=10}"
RelativeLayout.XConstraint="{ConstraintExpression
Type=Constant,
Constant=295}"
HeightRequest="50"
WidthRequest="50"
Clicked="ButtonSettings_Clicked"
BackgroundColor="Transparent"/>
Video demo
It is called RippleEffect on Android, you can use TouchEffect from Xamarin.CommunityToolkit package
<Button xct:TouchEffect.NativeAnimation="True"
RelativeLayout.YConstraint="{ConstraintExpression
Type=Constant,
Constant=10}"
RelativeLayout.XConstraint="{ConstraintExpression
Type=Constant,
Constant=295}"
HeightRequest="50"
WidthRequest="50"
Clicked="ButtonSettings_Clicked"
BackgroundColor="Transparent"/>
You can also specify:
The effect color thru: NativeAnimationColor
The effect radius thru: NativeAnimationRadius
The effect shadow radius thru: NativeAnimationShadowRadius
and a lot more for that effect, a non-exhausted sample could be found in the official repo TouchEffectPage.xaml
I have a problem. I used the following code to create a Floating Action Button Menu: https://github.com/Polarts/CrossFAB
Now, I added it to my code like this:
<ContentPage.Content>
<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<ScrollView Orientation="Vertical" AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All">
<StackLayout Orientation="Vertical">
<Label Text="Undone" TextColor="Black" FontSize="26" FontAttributes="Bold" Margin="10" />
</StackLayout>
</ScrollView>
<c:FloatingMenu Margin="0, 0, 10, 10" BGColor="Gray" OpenIcon="Share.png" CloseIcon="X.png"
AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
<c:FloatingButton x:Name="FB" BGColor="Blue" IconSrc="Facebook.png"/>
<c:FloatingButton x:Name="TW" BGColor="White" IconSrc="Twitter.png"/>
<c:FloatingButton x:Name="TB" BGColor="Navy" IconSrc="Tumblr.png"/>
</c:FloatingMenu>
</AbsoluteLayout>
</ContentPage.Content>
I used an AbsoluteLayout, because the FloatingMenu needs to be in the bottom right corner, but the problem is that right now, I can use the Floating Action Button, but the scroll of the ScrollView isn't working. When I put the FloatingMenu code above the ScrollView, the FloatingMenu stops working and I can only scroll.
How can I use both items for clicks?
When you set the AbsoluteLayout.LayoutBounds="0,0,1,1" and AbsoluteLayout.LayoutFlags="All" on a view, you're saying that you want you want the view to start in the top left corner and you want it to take up the full width and height of the view.
Since you set the LayoutBounds on both your views to this, you essentially have two views that take up the entire screen stacked on top of each other. You can test this out by adding a background color to either of the views and see what happens. Because of this, whichever view you put second is getting the touches, because it's the one on top.
If you want your FloatingMenu to be in the bottom right hand corner, you need to fix the layout bounds on that view to reflect that.
Something like this might get you started:
<c:FloatingMenu
Margin="0, 0, 10, 10"
BGColor="Gray"
OpenIcon="Share.png"
CloseIcon="X.png"
AbsoluteLayout.LayoutBounds=".95,.95,50,50"
AbsoluteLayout.LayoutFlags="PositionProportional">
This says that we want to put the view 95% over and 95% down the screen with a set width and height of 50. We say PositionProportional because we want the position, the first 2 numbers to be read as a proportion, not as absolute values.
You may also need to adjust the layout of the Floating Menu view. I suspect you're doing something like EndAndExpand for your Vertical and Horiztonal options that may not work like you expect when you fix the absolute layout.
Make sure to also take a look at the documentation on AbsoluteLayout.
PositionProportional, indicates that the x and y values will be
interpreted as proportional, while the size values are interpreted as
absolute.
A position of (0,0) puts the child in the upper-left corner, while a position of (1,1) puts the child in the lower-right corner, and a position of (0.5,0.5) centers the child within the AbsoluteLayout.
So you could try to change like below:
<ContentPage.Content>
<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<ScrollView Orientation="Vertical" AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All">
<StackLayout Orientation="Vertical">
<Label Text="Undone" TextColor="Black" FontSize="26" FontAttributes="Bold" Margin="10" />
</StackLayout>
</ScrollView>
<c:FloatingMenu Margin="0, 0, 10, 10" BGColor="Gray" OpenIcon="Share.png" CloseIcon="X.png"
AbsoluteLayout.LayoutBounds="1,1" AbsoluteLayout.LayoutFlags="PositionProportional">
<c:FloatingButton x:Name="FB" BGColor="Blue" IconSrc="Facebook.png"/>
<c:FloatingButton x:Name="TW" BGColor="White" IconSrc="Twitter.png"/>
<c:FloatingButton x:Name="TB" BGColor="Navy" IconSrc="Tumblr.png"/>
</c:FloatingMenu>
</AbsoluteLayout>
</ContentPage.Content>
How to make paddings for the source image inside image button?
UPDATE:
<ImageButton Source="cell_arrow_right.png" IsVisible="{Binding IsNotLeaf}"
VerticalOptions="Center" HorizontalOptions="Center"
WidthRequest="40" HeightRequest="40" Aspect="Fill"
Clicked="ImageButton_Clicked" Margin="0, 0, 15, 0"
BackgroundColor="Transparent" BorderColor="Accent"
BorderWidth="1" Scale="0.9" CornerRadius="5" />
I tried to use Padding, not working.. It just moves the source image. Also I tried to edit margin - still no result.
Now I've just edited the image itself, made it with paddings. But that's bad decision..(
I suspect the problem is actually HorizontalOptions and VerticalOptions, both are set to Center, which will position the ImageButton in the center of it's containing element.
Try removing them completely (they default to HorizontalOptions=Fill, same for vertical). Or you could try:
<ImageButton VerticalOptions="Start" HorizontalOptions="Start" Margin="10" />
This will give a margin of 10 around the ImageButton and position the image at the start of its containing element (horizontally and vertically, ie Top and Left).
Padding represents the distance between an element and it's child elements.
Margin represents the distance between an element and adjacent elements.
There is a good guide here.
I am working on RelativeLayout, I have three BoxView. boxview3 I want to get after boxview2 using Type=RelativeToView.
boxview3's XConstraint I am setting .5 still boxview3 displaying at top left why? How can I get boxview3 just after boxview2?
<RelativeLayout>
<BoxView x:Name="boxview1" BackgroundColor="#b87333"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Width,Factor=.5 }"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height, Factor=1}">
</BoxView>
<BoxView BackgroundColor="Red" x:Name="boxview2"
RelativeLayout.HeightConstraint="{ConstraintExpression ElementName=boxview1,
Type=RelativeToView,Property=Height,Factor=.1}"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=boxview1,Factor=1,Property=Width}"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Width, Factor=0.1,Constant=-10}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=boxview1,Property=Height,Factor=.4}">
</BoxView>
<BoxView BackgroundColor="Blue" x:Name="boxview3"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=boxview2, Property=Width,Factor=.5}">
</BoxView>
</RelativeLayout>
Note: If giving XConstraint as .5 I am expecting view on middle of screen be it Horizontal.
Output screenshot:
The short answer is that you can't specify the X constraint you're looking for in Xaml, you'd have to use C#. All elements in a RelativeLayout are positioned with respect to the entire RelativeLayout.
The Xaml you have right now specifies that boxview2's width is 0.1*RelativeLayout.Width - 10, and boxview3's X coordinate is half of that, so it will be positioned at 0.05*RelativeLayout.width - 5 from the top left, which is what you're seeing.
For RelativeLayout constraints in Xaml, you get to use exactly 1 of the X or Y of the top left of a view, or its width or height. To achieve what you want, you need the top right of boxview2 (or boxview2.X + boxview2.Width). You'll have to create boxview3 in the C# code behind, like:
reelativeLayout.Children.Add (boxview3, Constraint.RelativeToView (boxview2, (parent, view) => {
return view.X + view.Width;
}),
… // other constraints
));
Depending on your needs, you might find a different container easier to work with.
We are working with ListView in Xamarin.From and showing it as a dropdown, but we are not able to get drop down specific position, tried absolute layout also to achieve it?
I think you can use two way.
First way is to use RelativeLayout
RelativeLayout is used to position and size views relative to properties of the layout or sibling views. 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. RelativeLayout does support positioning elements outside of its own bounds.
For example
<RelativeLayout>
<BoxView Color="Red" x:Name="redBox"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,Factor=.15,Constant=0}"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Width,Factor=1,Constant=0}"
RelativeLayout.HeightConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Height,Factor=.8,Constant=0}" />
<BoxView Color="Blue"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=redBox,Property=Y,Factor=1,Constant=20}"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=redBox,Property=X,Factor=1,Constant=20}"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Width,Factor=.5,Constant=0}"
RelativeLayout.HeightConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Height,Factor=.5,Constant=0}" />
</RelativeLayout>
Another way is to use a Grid. If you have to add a ListView near an Entry (for example) you can add Entry and ListView in two "row" one under the other, and set the height of ListView using Grid.Span. I don't know it this works well... but you can try. Otherwise add a RelativeLayout inside a Grid's Cell then add your Entry and ListView to this RelativeLayout.
You have some exercises to do now ;)