I have an image in my app with a frame around it to make the image a circle. I want a custom shape for the Frame, but can't figure out how to get this exact shape.
(Please ignore the house inside the drawing, it is simply there to represent an Image in Xamarin, I only need the outline to be the shape).
I also don't require the Frame to have a colored border, only the shape.
Any help will be appreciated!
Here is my code right now for the Frame + Image:
<Frame x:Name="PictureFrame" Padding="0" Margin="0" HorizontalOptions="Center" BorderColor="Transparent" WidthRequest="80" HeightRequest="80" HasShadow="False">
<Image x:Name="Picture" Source="picture" Margin="0,0,0,0" Aspect="AspectFill"/>
</Frame>
You probably have to create a custom renderer to achieve what you're looking for. For example, on Android the Frame mask is actually implemented with a bezier path that you could control to your liking if you dive a bit deeper into the code.
Take a look at the FreshEssentials AdvancedFrame view which almost has what you need. The modification they've made is that you can have a sharp 90 degree angle on either both corners on the left or on the right. You'd simply have to modify this code a little bit to have a rounded corner on all except the top left corner.
What you need to modify are the following:
AdvancedFrame (In case you want the corner radiuses to be configurable separately or something else. This is the base that inherits from the original Frame control in Xamarin.Forms)
AdvancedFrameRendererDroid
AdvancedFrameRendereriOS
AdvancedFrameRendererUWP (Only if you require UWP support)
Tips:
On Android, the background mask for the frame is defined with the Path class.
On iOS, UIBezierPath class from the UIKit framework is used.
Now with Xamarin.Forms you can use Shapes. The Path Data is your circle with point.
<AbsoluteLayout
BackgroundColor="AliceBlue"
>
<Path
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"
Margin="8"
Data="M142.798828,0 C221.365114,0.164668482 285,63.9009723 285,142.5 C285,221.200577 221.200577,285 142.5,285 C63.7994232,285 0,221.200577 0,142.5 C0,139.784357 0.0759637392,137.086456 0.225882227,134.408306 L0,133.828125 L0,0 L142.798828,0 Z"
Stroke="LightBlue"
StrokeThickness="2"
HorizontalOptions="Center"
VerticalOptions="Center"
/>
<Image
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"
Aspect="AspectFit"
Source="brigadeiro"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="94"
HeightRequest="94"
/>
</AbsoluteLayout>
Related
I want to setup a background image for a page. Right now I am using
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="M.LaunchPage"
Title ="M" BackgroundImage="Mars.jpg">
<ContentPage.Content>
<StackLayout Padding="10,0,10,10" >
<Button VerticalOptions="CenterAndExpand" Text="Sign Up" TextColor="White" Clicked="OnSignUp" BackgroundColor="Maroon" />
<StackLayout Padding="10,0,10,10" Orientation="Horizontal" VerticalOptions="EndAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
This works well but the image is being filled multiple times to fit the screen. Cn anyone suggest better code so that I can fit the image on the page perfectly?
Thanks.
This is platform dependent, for example on iOS the following is used in the Form's iOS's PageRender:
View.BackgroundColor = UIColor.FromPatternImage(UIImage.FromBundle(bgImage));
The View.BackgroundColor will end up tiling your image when it is smaller the UIController's View dimensions as FromPatternImage is designed to be used with a small repeating pattern (for memory and draw performance reasons) and not full screen/page images.
In order for this auto-tiling not to happen, you would be to assign the background image in code based upon the device's screen resolution and page size at runtime and not statically assign it in XAML.
Note: You could bind the BackgroundImage property in a ViewModel where the calculations of which image to use could be done.
You should use each platform specifications, for example in iOS you need to have Mars#2x.jpg and Mars#3x.jpg,in our platform project in Forms you can specify from "Mars" it will pick the correct one.
On Android set the image in the correct dpi folder.
am developing a WP8.1 app using xaml and C#.
i want to have a button or ellipse filled with multi colors like the below picture. How can i achieve this except using pie chart control?
I just need it in max height of 80 and width of 80
Can someone please help me out?
Thanks in advance
You use Arc shaped control to create this shape.
xmlns:es="clr-namespace:Microsoft.Expression.Shapes;assembly=Microsoft.Expression.Drawing"
<Grid>
<es:Arc ArcThickness="1" ArcThicknessUnit="Percent" EndAngle="360" Fill="#FF82ECDD" HorizontalAlignment="Left" Height="293" Margin="0,0,0,-100" Stretch="None" StartAngle="61" UseLayoutRounding="False" VerticalAlignment="Top" Width="294"/>
<es:Arc ArcThickness="1" ArcThicknessUnit="Percent" EndAngle="360" Fill="#FF38B5E4" HorizontalAlignment="Left" Height="293" Margin="0,0,0,-100" Stretch="None" StartAngle="298" UseLayoutRounding="False" VerticalAlignment="Top" Width="294" RenderTransformOrigin="0.5,0.5">
<es:Arc.RenderTransform>
<CompositeTransform Rotation="61.609"/>
</es:Arc.RenderTransform>
</es:Arc>
<es:Arc ArcThickness="1" ArcThicknessUnit="Percent" EndAngle="360" Fill="#FF349AD4" HorizontalAlignment="Left" Height="293" Margin="0,0,0,-100" Stretch="None" StartAngle="179" UseLayoutRounding="False" VerticalAlignment="Top" Width="294" RenderTransformOrigin="0.5,0.5">
<es:Arc.RenderTransform>
<CompositeTransform Rotation="-119.36"/>
</es:Arc.RenderTransform>
</es:Arc>
</Grid>
You can convert a single ellipse into path and then remove one point in the path to make it a semicircle.
Have three semicircle rotated at proper angle to achieve something similar to the image above.
Background
I'm trying to put a textBlock control at the bottom of the screen (with a small margin below it), and I also wish to set a background for it, so that no matter what is shown behind the textBlock, it will be easy to read.
On Android, you could simply set the background to it, and tell it to have the width and height to be WRAP_CONTENT, so that it will take only the space it needs, but I can't find a similar thing on WP8.
Current status
This is the xaml I've created:
...
<Grid >
<Image x:Name="fullScreenImage" Stretch="Fill"
Visibility="Collapsed" />
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Bottom"
Margin="0,0,0,200" FontSize="40" x:Name="pictureLabel" TextWrapping="Wrap"
Foreground="#ff000000" />
</Grid>
The problem
Since the textBlock doesn't have a background property, I had to use something that wraps it. However, since its content changes dynamically, I can't simply set a size for it.
The question
For now, I would like to simply set its background color.
I would also very appreciate if it would be possible to use a rounded corners rectangle for the background, or a 9-patch image.
How can I achieve setting a background for the textBlock?
The solution is very simple. Just set the HirizontalAlignment to Left. Hope this will work in your case.
<StackPanel HorizontalAlignment="Left">
<Border Background="#66FFFFFF">
<TextBlock/>
</Border>
</StackPanel>
According to this question (which is for Silverlight - but is xaml nonetheless), there is no way to explicitly set a background color for a TextBlock. Your best bet is to wrap your TextBlock in a Grid or Border.
If a Grid does not work, this article suggests a Border will do the trick:
A simple border will do, and by not setting its width and height
properties, it will shrink/grow based on the size of the TextBlock.
I've come up with the next solution , which works quite fine , but what i really would like to also have is a way to set a min font and max font size , so that if there is a single word , the font might need to be of some size, and if the text is too long , the font will be of a smaller size , all in a dynamic way.
code:
label.Text = label;
label.Measure(new Size(RenderSize.Width, RenderSize.Height));
border.Width = label.DesiredSize.Width + border.Padding.Left + border.Padding.Right + border.BorderThickness.Left + border.BorderThickness.Right;
border.Height = label.DesiredSize.Height + border.Padding.Top + border.Padding.Bottom + border.BorderThickness.Bottom + border.BorderThickness.Top;
and the xaml:
<Border BorderBrush="#ff000000" BorderThickness="2" CornerRadius="8" Visibility="Collapsed" Padding="5" Background="#bfff0000" Margin="10,0,10,200" VerticalAlignment="Bottom" x:Name="border">
<StackPanel>
<TextBlock FontSize="40" x:Name="pictureLabel" TextWrapping="Wrap" Foreground="#ff000000" />
</StackPanel>
</Border>
I'm using a ListBox with its DataTemplate containing a Canvas. I then bind the Left/Top of the Grid containing that Canvas to move it to a certain point.
I want to then have the child Grid centred at the X,Y coordinates I've specified, where the size of the child Grid is variable based on its content. I was planning on achieving this by using a TranslateTransform to move the Grid by half of its width.
I can't see how I can set that TranslateTransform however as ElementName binding doesn't work within a DataTemplate. Any ideas how I can achieve this?
<ItemsControl ItemsSource="{TemplateBinding SomeCollection}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Canvas>
<Grid x:Name="Container"
Canvas.Left="{Binding X}"
Canvas.Top="{Binding Y}"
Background="#88000000">
<Grid.RenderTransform>
<TranslateTransform X="{Binding ActualWidth, ElementName=Container, Converter={StaticResource NegativeHalfConverter}}"
Y="{Binding ActualHeight, ElementName=Container, Converter={StaticResource NegativeHalfConverter}}" />
</Grid.RenderTransform>
<TextBlock Text="{Binding SomeValue}" FontSize="36" Foreground="White" />
</Grid>
</Canvas>
</DataTemplate>
</ItemsControl.ItemTemplate>
`
I think ElementName binding should work in the name scope of a DataTemplate, but I have seen people complaining about bindings not updating correctly when binding to ActualWidth/Height properties. Perhaps instead of doing the complicated setup you have you could just implement an attached behavior that takes a Point parameter and updates the Canvas.Left/Top properties whenever the parameter or size of the associated object (your grid) changes.
Looks like the fault wasn't with the binding itself, but with a feature that means the ActualWidth/ActualHeight properties aren't bindable. Thanks Filip.
To fix this I created a derived Grid with a couple of new dependency properties that I update in the SizeChanged events to have the ActualWidth/Height. I then use my DataTemplate as above, binding to these new DPs to translate and centre my Grid on a point. Seems to work a treat.
To move an object by half of its size you can use 2 rotations or scales: first is over 0.25,0.25 relative point, second is over the enter point 0.5,0.5. If you use rotations then angels are 180 degrees and -180 degrees. If you use scales then scale factors are -1,-1 and -1,-1.
Do not forget about RenderTransformOrigin property. And to apply two transforms you can apply them to two nested elements.
I am doing one project on kinect with windows SDK. I am trying to display the image on skeleton shoulder with the following code.
**
Xaml code
<Canvas Margin="250,0,0,0" Visibility="{Binding Path=Showcamera, Converter={StaticResource BVC}}" Background="Green" HorizontalAlignment="Stretch" VerticalAlignment="Top" Grid.Column="1" Grid.Row="1">
<Image MaxHeight="600" MaxWidth="950" x:Name="PART_KinectVideo" Visibility="{Binding Path=Showcamera, Converter={StaticResource BVC}}" />
<Canvas>
<Image RenderOptions.BitmapScalingMode="HighQuality" Visibility="{Binding Path=Showcamera, Converter={StaticResource BVC}}"
RenderOptions.EdgeMode="Aliased" Canvas.Top="60" Canvas.Left="350" Stretch="Uniform" x:Name="Jewel"/>
</Canvas>
Code Behind
var j1p = nui.MapSkeletonPointToDepth(closestSkeleton.Joints[JointType.ShoulderLeft].Position,DepthImageFormat.Resolution640x480Fps30);
Canvas.SetLeft(Jewel, j1p.X+90);
Canvas.SetTop(Jewel, j1p.Y-280);
by getting the j1p values i am trying to set the left and top position of the canvas for the Jewel image object.
Problem with the code is :
This is not correctly placing the image. When the user moves in the screen the image also moves out of body with left and right direction as user moves.
I need the image should be set to the position even when the user moves right or left.
How should I alter the code or is there any sample available to set the image in particular position of the kinect joints?
Maybe try this:
var left = (double)image.GetValue(Canvas.LeftProperty)
left += 90;
image.SetValue(Canvas.LeftProperty, left);
I wrote an app using that code and everything worked fine to me:)