Xamarin Child Frame Overflow On Parent Corner Radius - xaml

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.

Related

Xamarin Forms: ImageButton border ignored on Android

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 .

Xamarin.Forms ImageButton Image Padding

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.

My ImageCircle is resizing itself in xamarin.forms

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...

Change KinectTileButton selected color

I am displaying a clipped image (round shape) inside a KinectTileButton. The problem is that I don't know how to change the Selected behavior. By default, when the button gets clicked, the entire area gets darker and I get to see the corners of the square. I want to change the Selected state to transparent so I don't see the corners of the square (as I have a circle inside).
<k:KinectTileButton Background="Transparent" Width="500" Height="500" Click="ContactClick">
<Grid Height="500" Width="500">
<Image Source="/Namespace;component/Resources/Images/Image.png" Width="450" Height="450" x:Name="ContactStream">
<Image.Clip>
<EllipseGeometry RadiusX="220" RadiusY="220" Center="225,225"/>
</Image.Clip>
</Image>
</Grid>
</k:KinectTileButton>

XAML horizontal alignment

I have a question on Windows Phone 7 XAML programming.
<StackPanel Orientation="Vertical" Width="110">
<Canvas Margin="0">
<TextBlock Text="{Binding Menesis}" Foreground="{Binding MyColor}"></TextBlock>
</Canvas>
<Canvas Margin="0,12,0,0">
<TextBlock Text="{Binding Datums}" Foreground="{Binding MyColor}" FontSize="85" HorizontalAlignment="Center" TextAlignment="Center" />
</Canvas>
<Canvas Margin="0,105,0,0">
<TextBlock Text="{Binding Nedelas_diena}" Foreground="{Binding MyColor}" />
</Canvas>
</StackPanel>
How to make TextBlock (Binding Datums) text centered? Currently it is aligned at right side and
HorizontalAlignment="Center"
or
TextAlignment="Center"
doesn't work.
If you have your TextBlock in a Canvas you will have problems with the alignment as the TextBlack will be placed at 0,0 (top left) inside the canvas control and (unless you set the width explicitly) will be stretched to fit the text contained. This basically means your text will always be left aligned.
The Canvas control should only be used when you need to set the exact position of the contained elements. If this is not the case then use another container such as a Grid, StackPanel or even just a ContentControl.
Remove the Canvas from your xaml and it should work.
To clarify HorizontalAlignment vs. TextAlignment:
If you have a ContentControl that is 400px wide and you add a TextBlock to it that is set to be 200px wide with text content that is 100px wide, then the following is true:
Setting the HorizontalAlignment to Center will align the TextBlock (200px wide) to the middle of the ContentControl but the text will still be left aligned within the TextBlock. This means the text will be offset 100px from the left.
If just the TextAlignment is set to Center then the TextBlock will be left-aligned but the text inside will be centered. This means that the text will be offset 50px from the left.
In my opinion the best practise here is not to set any widths and just set the TextAlignment property. This will mean (for most containers) the TextBlock will be stretched the entire width of the container and the text within aligned appropriately.
Instead of using stack panel and canvas . either u can use Grid. If you are using grid you can point out the exact position where you need to place the control.
for eg,
<----- Height -->
like this. More over there is no need to use canvas. The canvas container is using mainly in case of game design purpose.