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
Related
I have a StackLayout containing some ImageButtons, the buttons have a BorderWidth of 5.
On UWP, the border appears with the image scaled to fit inside. On Android, the border doesn't appear at all, and the image flows into it space.
UWP (correct):
Android (no border):
My XAML looks like this
<StackLayout
x:Name="titlebar"
Orientation="Horizontal"
BackgroundColor="{x:DynamicResource TitleBarColor}">
...
<ImageButton
x:Name="menu"
HeightRequest="25" WidthRequest="25"
HorizontalOptions="End"
BorderWidth="5"
BackgroundColor="{x:DynamicResource TitleBarColor}"
Source="{local:ImageResource CloudTest.Assets.icons.more_menu_white.png}"
Clicked="OnMenuClicked" />
</StackLayout>
In Android, I've found that it only works if you set both BorderWidth and BorderColor(could not Transparent).
and you also could set the Padding or Marginto the ImageButton to achieve to the effect.
<ImageButton
x:Name="menu"
HeightRequest="25" WidthRequest="25"
HorizontalOptions="End"
Padding ="5" //or Margin ="5"
BackgroundColor="{x:DynamicResource TitleBarColor}"
Source="{local:ImageResource CloudTest.Assets.icons.more_menu_white.png}"
Clicked="OnMenuClicked" />
Update (The yellow area is your ImageButton):
When using Margin,refers to the distance between the control and a sibling control :
Padding ,refers to the internal content of the control, such as the margin of the text/image distance from the control
so when you use the padding,you will see the space inside the image and when you use the margin,the space outside the image .
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
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'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.
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...