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
Related
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.
So I have an odd thing happening with last Xamarin update and I am not sure what to do about it.
I have a view
<ContentView.Content>
<AbsoluteLayout WidthRequest="100" HeightRequest="100">
<Button x:Name="BackgroundButton" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" />
<Image x:Name="Icon" InputTransparent="True" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" Margin="20,15,20,25"/>
<Label x:Name="CountLabel" Style="{StaticResource HubButtonLabel}" HorizontalTextAlignment="End" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" />
<Label x:Name="ButtonLabel" Style="{StaticResource HubButtonLabel}" HorizontalTextAlignment="Center" VerticalTextAlignment="End" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" />
</AbsoluteLayout>
</ContentView.Content>
</ContentView>
Is basically just a button wrapper, with some extra icons, and text. I have a few of these in the project of different layouts and styles. Until the last update they worked fine. Now the button renders overtop of everything else. I can confirm that by setting the button color to something semi transparent.
This only happens on Android, it still works as expected on ios
Anyone have a fix for that? or do I need to rework all these views?
Update - So while this isn't really a fix, but also kind of is. If I swap out the Button for an ImageButton - they work again as expected on both platforms.
Bug perhaps with button on Android?
Got an answer on another forum. - Apparently it is a known bug with an easy fix, https://forums.xamarin.com/discussion/comment/394729
Put
global::Xamarin.Forms.Forms.SetFlags("UseLegacyRenderers");
Before the xamarin init in Main Activity Oncreate.
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.
I'm using the list View in XAML, and using below codw to draw a rectangular box, I want to place a 2 letter alphabets inside the box like windows phone contacts they palce alphabets inside the rectangle box. Is there any way to place a text inside rectangle box
<BoxView Color="Green" WidthRequest="50" HeightRequest="20" HorizontalOptions="Start">
You want to replicate what it looks like on WinPhone.
(Sorry no code, I don't have my computer with me)
Use a flattened Frame (HasShadows=false, CornerRadius=0)
Set the Padding=10, Margin=3 (breathing room),
BackgroundColor=Green
Put a Label inside the Frame
Set FontSize=25, TextColor=White, Center it (Horizontal and
Vertical Alignment), FontAttributes=Bold
Hope this helps.
You can use like this
<StackLayout Padding="1" BackgroundColor="Black" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout BackgroundColor="White" HorizontalOptions="FillAndExpand" >
<Label Text="Sample" TextColor="Black" HorizontalTextAlignment="Start"/>
</StackLayout>
</StackLayout>
May this will solve the problem.
Hi I am working in shoping app and design like, I have already used tint image:
How I can do that, I I can create a circel like this image
I am not sure why you are not using icons from the resources or get the images from rest api.
This is only needed if you want to create dynamic icons.
If that is the case, use a Frame and put the image on it.
<Frame CornerRadius="15" AbsoluteLayout.LayoutBounds="120, 10, 30, 30" Padding="5" VerticalOptions = "FillAndExpand" HasShadow= "false" BackgroundColor="red" >
<StackLayout Orientation="Vertical" Spacing="0" HorizontalOptions="Center" VerticalOptions="Center">
<Label Text="1" VerticalTextAlignment="Center" HorizontalOptions="Center" />
</StackLayout>
</Frame>
the important thing to note is that , "cornerRadius" should be help the size of "AbsoluteLayout.LayoutBounds" width and size.
to learn more about AbsoluteLayout go here
Use FFImageLoading NuGet Library in your Solution, you can download using link FFImageLoading
Paste Below Code
<ffimageloading:CachedImage HorizontalOptions="Center" VerticalOptions="Center"
WidthRequest="300" HeightRequest="300"
DownsampleToViewSize="true"
Source = "http://loremflickr.com/600/600/nature?filename=simple.jpg">
<ffimageloading:CachedImage.Transformations>
<fftransformations:RoundedTransformation Radius="50"/>
</ffimageloading:CachedImage.Transformations>
</ffimageloading:CachedImage>