I'm trying to have a button contain both an image text. Ideally have the text left aligned, while the image is as far right as possible.
So i create a Grid, and add an Image and Textblock to it and set its alignment. For the life of me i cant get alignment to act as expected.
var gridPanel = new Grid();
gridPanel.ColumnDefinitions.Add(new ColumnDefinition());
var text = new TextBlock { Text = header, TextAlignment = TextAlignment.Left };
text.HorizontalAlignment = HorizontalAlignment.Left;
text.Margin = new Thickness(0);
text.SetValue(Grid.RowProperty, 0);
text.SetValue(Grid.ColumnProperty, 0);
var image = new Image();
image.Source = new BitmapImage(new Uri("../Images/Common/RedFlag.png", UriKind.Relative));
image.HorizontalAlignment = HorizontalAlignment.Right;
image.Height = 25;
image.Width = 25;
image.SetValue(Grid.RowProperty, 0);
image.SetValue(Grid.ColumnProperty, 1);
gridPanel.Children.Add(text);
gridPanel.Children.Add(image);
button.Content = gridPanel;
Both the Image and Text are center aligned for some reason...Is Grid the wrong way to go? I tried StackPanel and setting its orientation to Horizontal but it was the same thing..
by default the HorizontalContentAlignment of a button is set at "Center"... Just set it to "Stretch" like that :
button.HorizontalContentAlignment = System.Windows.HorizontalAlignment.Stretch;
Change the HorizontalContentAlignment from Centre to Stretch, like-
<Button Name="button" HorizontalContentAlignment="Stretch"/>
Edit-
I was originally doing this in the button style as I didn't know about the HorizontalContentAlignment property
Related
I"m trying out the Xamarin Forms Collection View. It appears to have some extra padding around each item in the list. I can't see how to remove it.
Here is a picture of my view. The view has an aqua background. The 2 column grid in the template has labels set to red.
And here is the XAML/C#
<CollectionView
x:Name="BodyView"
SelectionMode="Single"
HorizontalOptions="FillAndExpand"
BackgroundColor="Aqua"
Grid.Row="2" />
BodyView.ItemTemplate = new DataTemplate(() =>
{
var converter = (IValueConverter) Application.Current.Resources["GridCellConverter"];
Grid grid = new Grid( );
grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
foreach (var col in _gridColumns)
{
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
var content = new Label();
content.Style = (Style)Application.Current.Resources["GridCellLabel"];
content.BackgroundColor = Color.Red;
Binding binding = new Binding("CellData", BindingMode.OneWay, converter, col.PageFieldId);
content.SetBinding(Label.TextProperty, binding);
grid.Children.Add(content, grid.ColumnDefinitions.Count - 1, 0);
}
return grid;
});
I zeroed everything I could find to zero.
I tried setting a negative margin on the grid but it won't move left.
Is there any way to remove the padding?
What you are looking for is the Grid's Row and Column Spacing!
Grid grid = new Grid( ){ ColumnSpacing= "0", RowSpacing="0" };
Also, this needs to be removed:
grid.Margin = new Thickness(-20, 0, 0, 0);
A quick question though are you using it in UWP?
Also since you are using CollectionView why not use a single item in DataTemplate that goes into a GridItemsLayout?
More information here: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/layout#vertical-grid
There is MinimumHeightRequest, but no MaximumHeightRequest for Views in Xamarin Forms. In its absence I'm trying to achieve the following:
I have two controls on my screen: a Signature and some legal-text. I would like the signature to take up much screen as possible, and for the legal-text to take the minimum space for itself but only up to half the parent height - and then to scroll if the text doesn't fit. I've tried StackLayout and Grid but neither quite do what I want in coping with all situations. If it existed simply setting a MaximumHeightRequest on the ScrollingLegal View would sort it out. But it doesn't. Here's what I've tried...
Controls defined as:
var Pad = new SignaturePadView() {
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
MinimumHeightRequest = Application.Current.MainPage.Height / 2,
};
// Put legal text in a scroll view in case it doesn't fit on the screen.
var ScrollingLegal = new ScrollView { VerticalOptions = LayoutOptions.End, Content = new Label { Text = caption } };
Arranged with StackLayout like this it looks great on an iPad - text at the bottom of the screen signature taking up all the other space. On a small iPhone though, the text takes up all the screen and the signature appears to ignore the MinimumHeightRequest (this might be a bug I suppose?).
Stack.Children.Add(Pad);
Stack.Children.Add(ScrollingLegal);
I can add a HeightRequest to the ScrollView but then it always takes up X height. With a small amount of text I don't want that.
I have also tried a Grid:
var GridLayout = new Grid
{
Padding = 1,
RowDefinitions = {
new RowDefinition { Height = new GridLength(1, GridUnitType.Star) },
new RowDefinition { Height = new GridLength(1, GridUnitType.Auto) },
},
ColumnDefinitions = {
new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) },
},
};
GridLayout.Children.Add(Pad, 0, 0);
GridLayout.Children.Add(ScrollingLegal, 0, 1);
But that too always gives too much space to the text.
Is there a way of setting a Max Height?
I tried to text wrap in a button inside a grid, but only the first line appears, the code is:
grid.Children.Add(new Button {
Text = la[0].Floor,
FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
BorderWidth = 1,
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.CenterAndExpand,
} , column, row );
You probably need to change your Grid.RowDefinitions's Height to Auto for what ever row that button is being placed on. Using Auto instead of GridUnitType.Star should give the Button as much height as it needs to show it's content.
That being said, if the text is super long, it still might not work.
If that button is on the first row, then your would change that row's Height to:
Grid grid = new Grid {
RowDefinitions = new RowDefinitions {
new RowDefinition { Height = GridLength.Auto }
}
}
If that does not help, please show your Grid's initialization code.
Recently I started working on HTML5 Canvas, I'm new to it.
I've a problem as follows:
I'm loading a Canvas with Body Chart Image (Predefined Image) and on that User will Draw some lines, shapes, etc.
After that I'll generate an image object as follows
var canvas = document.getElementById("MyCanvas");
var dataURL = canvas.toDataURL();
var image = new Image();
image.src = dataURL;
But, Here it generates only those elements which are drawn by users (lines, shapes) as PNG Image. It won't take that Predefined canvas background Image.
I need to generate a PNG image which should include both the Canvas background Image as well as User entered drawing elements.
How to do this?
Try to actually draw you image onto your canvas, utilizing these functions:
var canvas = document.getElementById("MyCanvas");
var img = new Image();
img.src = 'pathToYourImageHere';
canvas.drawImage(img,0,0); /* 0,0 is x and y from the top left */
When you now try to save it, it should also save your background image.
EDIT:
In response to your comment:
You can circument your layering problem by using two different canvases. One for the image, and one for your drawing. Then layer them on top of each other using absolute positioning.
You can read more here: Save many canvas element as image
EDIT2:
But actually you shouldn't have a layering problem, since the following code will first draw the image and then draw the arc, and the layering will be fine:
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.src = "somePathToAnImage";
context.drawImage(imageObj, 50, 50);
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = "red";
context.stroke();
Even though the layering is fine, you will be better of by using two canvases, in case you would like to only save the drawing, without the background. You can always save both into a new canvas and save that, when you only use one canvas you'll have a hard time separating the drawing from the background.
This is because the image needs time to load, you have to use the onload function.
imgObj.onload = function() { context.drawImage(imageObj, 50, 50); imgLoaded = true;}
if (imgLoaded) { /*you draw shapes here */ }
I am trying to display a bytearray as a resized image. The Image is displaying correctly, but the sizing is off. Let me explain.
First I have the image data encoded so I need to decode the image data
// Instantiate decoder
var decoder:Base64Decoder = new Base64Decoder();
// Decode image data
decoded.decode(picture.data);
// Export data as a byteArray
var byteArray:ByteArray = decoder.toByteArray();
// Display image
var img:Image = new Image();
img.load(byteArray);
This works. The image is displayed correctly. However, if I hardcode the image (img) height the resized image is shown correctly, but within a box with the original image's dimensions.
For example, if the original image has a height of 300px and a width of 200px and the img.height property is set to 75; the resized image with height of 75 is shown correctly. But the resized image is shown in the upper left corner of the img container that is still set to a height of 300px and a width of 200px. Why does it do that? And what is the fix?
The best way to illustrate the problem is by placing the image inside a VBox and show the borders of the VBox. From the code block above, if I change the image height and set the image to maintain aspect ratio (which by default is set to true but I add it here for completeness). the problem becomes clear.
// Display image
var img:Image = new Image();
img.height = 75; // Hardcode image height (thumbnail)
img.maintainAspectRatio = true;
img.load(byteArray);
// Encapsulate the image inside a VBox to illustrate the problem
var vb:VBox = new VBox();
vb.setStyle('borderStyle', 'solid');
vb.setStyle('borderColor', 'red');
vb.setStyle('borderThickness', 2);
vb.addChild(img);
I have been working on this problem for days and cannot come up with a solution. Any ideas? What am I missing?
The workaround I used is as follows:
I created an event listener for the img display object. Then after the img has loaded, I manually set the height and width of the image. I know what I want the height (preHeight) to be so that is hardcoded. I then calculate the width and set that as the image width. For some reason I had to use the explicitHeight and explicitWidth properties to finally get the sizing right.
I hope this helps someone.
img.addEventListener(FlexEvent.CREATION_COMPLETE, onCreationComplete);
private function onCreationComplete(event:FlexEvent) : void
{
img.addEventListener(Event.COMPLETE, onImageLoadComplete);
}
private function onImageLoadComplete(event:Event) : void
{
var image:Image = event.currentTarget as Image;
var preHeight:Number = 0;
var h:uint = Bitmap(image.content).bitmapData.height;
var w:uint = Bitmap(image.content).bitmapData.width;
// Check height
preHeight = h > 170 ? 170 : h;
// Set the width
img.explicitWidth = (preHeight * w)/h;
img.explicitHeight = preHeight;
}