I have a rectangle for a photo and I am trying to crop a circle out of it
<Frame x:Name="circleFrame"
Grid.Column="0"
BackgroundColor="#00000000"
WidthRequest="50"
HeightRequest="50"
CornerRadius="25"
IsClippedToBounds="True"
HasShadow="False"
Padding="0"
Margin="0,10,10,10"
VerticalOptions="Center"
HorizontalOptions="Center" >
<Image
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
WidthRequest="1000"
HeightRequest="1000"
Source="{Binding thumbnailSource}"/>
</Frame>
While this does clip the image ever so slightly, the image is still centered. I tried to just increase the size of the image by a lot to get the image to clip fully, but this is the result:
Please see the picture with the "n k" next to it. Youll see that the thumbnail is clipped on the sides but not fully on the top and bottom.
How can I
a.) increase the size of the image
OR
b.) use a different technique to crop a circle out of the center of the image?
Thank you
Please Use -
Aspect="AspectFill"
In your ImageView
also when you give fillandexpand you dont have to specify height and width,
height and width willl be applicable when you will use center
Related
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 have a Xamarin Forms project with a card based interface where each card has a Corner Radius of 1 and padding 0. Within the card, the top element is a Heading control, with margin of 0, consisting of a frame with a background colour and a label within that.
The problem is since the Heading control does not have rounded corners, the corners which meet the corners of the Card will overrun and render outside of the Card which doesn't look right.
Is there any way to tell the Xamarin XAML renderer to appropriately cut off the corners of a child when the parent has rounded corners?
Here's a picture to show what I mean. The green pointed corners are rendered outside of the parent card.
To get the same result with Xamarin.Forms version 3.1.583944 for the background and rounded corners on Android, iOS, and UWP, try this XAML:
<OnPlatform x:TypeArguments="View">
<On Platform="UWP">
<Frame CornerRadius="20" OutlineColor="Black" Padding="0" Margin="12,0" HeightRequest="40">
<StackLayout BackgroundColor="Green">
<Label Text="BackgroundColor in StackLayout" Margin="20,0" />
</StackLayout>
</Frame>
</On>
<On Platform="Android, iOS">
<Frame CornerRadius="20" OutlineColor="Black" BackgroundColor="Green" Padding="0" Margin="12,0" HeightRequest="40">
<StackLayout>
<Label Text="BackgroundColor in Frame" Margin="20,0" />
</StackLayout>
</Frame>
</On>
</OnPlatform>
It seems that neither platform seems to produce the same result, possibly by native platform design (i.e. Android produce background inside the rounded corners in both cases above, iOS produce background inside rounded corners when BackgroundColor is set in Frame, UWP produce background inside rounded corners when BackgroundColor is set in StackLayout).
Please note that there are reported some issues with UWP on Frame CornerRadius.
How I can change size icon? I want to enlarge because the icon is too small. In the original the icon has a correct size but in the application is too small
<StackLayout>
<local:AnimatedButton BackgroundColor="#ffffff"
BorderColor="#ffffff"
BorderRadius="25"
WidthRequest="50"
HeightRequest="50"
Command="{Binding CenterMyLocationCommand}">
<Button.Image>
<FileImageSource File="googlemap_view_center_button.png" />
</Button.Image>
</local:AnimatedButton>
</StackLayout>
Try to add/change WidthRequest and HeightRequest (also check: Width and Height) attributes
I am using ImageCircle plugin for xamarin forms
and it works well sometimes, when the picture is a kind of square...
But, when it's a rectangle, my image is resized and it's not that I planned
what Can I do to the image stop resize?
my code
<controls:CircleImage WidthRequest="75" HeightRequest="75" Grid.Row ="0" Grid.Column="1" Source="cadastrarPhoto.png" x:Name="cadastrar_foto_perfil">
I seted a fix height and width as you can see, but it didn't solve my problem, maybe because this circle image is a child of a grid and its grandfather (lol) is a relative layout but I really don't know if WidthRequest can change because of that...
How it always should be
How it is when the image is a rectangle:
EDIT---------------------------------------------
I put it in a Stach layout and I defined Aspect as fit...it helped but didnt solve...
<StackLayout Orientation="Horizontal" HorizontalOptions="Center" WidthRequest="75" HeightRequest="75" Grid.Row="0" Grid.Column="1">
<controls:CircleImage Aspect="AspectFit" VerticalOptions="EndAndExpand" HorizontalOptions="EndAndExpand" Source="cadastrarPhoto.png" x:Name="cadastrar_foto_perfil">
<controls:CircleImage.GestureRecognizers>
<TapGestureRecognizer Tapped="ChamaPickerImage"/>
</controls:CircleImage.GestureRecognizers>
</controls:CircleImage>
</StackLayout>
I changed the api that I was using.
Now I use ffimage
Setting your HorizontalOptions="EndAndExpand" is what is causing you issues.
Instead, try setting both HorizontalOptions and VerticalOptions to a vaule that doesn't expand (Start, Center, End)
Note: I've noticed that you actually have to explicitly set HorizontalOptions to something that doesn't expand in order to get iOS to avoid stretching your CircleImage. Simply leaving it blank will default to stretching the image.
In the image, instead of HorizontalOptions="EndAndExpand" or VerticalOptions="EndAndExpand", just set it as "Start", "Center" or "End".
By default if you set it as "xxExpand" or do not set it at all, Xamarin iOS expands the image...