My CreateRegisterView function returns the result I expect
Last lines of my function
var content = new StackLayout
{
Margin = 0,
Padding = 0,
BackgroundColor = Color.Gold
};
content.Children.Add(forms);
content.Children.Add(new BoxView
{
Margin = 0,
Color = Color.Red,
VerticalOptions = LayoutOptions.FillAndExpand
});
AbsoluteLayout.SetLayoutFlags(content, AbsoluteLayoutFlags.PositionProportional);
AbsoluteLayout.SetLayoutBounds(content, new Rectangle(0f, 0f, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));
AbsoluteLayout.SetLayoutFlags(_ActivityIndicator, AbsoluteLayoutFlags.PositionProportional);
AbsoluteLayout.SetLayoutBounds(_ActivityIndicator, new Rectangle(0.5, 0.5, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));
var overlay = new AbsoluteLayout();
overlay.Children.Add(content);
overlay.Children.Add(_ActivityIndicator);
return overlay;
But as soon as I add an activity indicator I have this result
I didn't see any definition of _ActivityIndicator. The only explanation for what you're facing would that _ActivityIndicatorrefers to the same instance of content in some code You've omitted.
If it's not the case, try changing your bounds getting rid of the AutoSize to the content view.
Like this:
AbsoluteLayout.SetLayoutBounds(content, new Rectangle(0f, 0f, 1f, 1f));
AbsoluteLayout.SetLayoutFlags(content, AbsoluteLayoutFlags.All);
AbsoluteLayout.SetLayoutBounds(_ActivityIndicator, new Rectangle(0.5, 0.5, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));
AbsoluteLayout.SetLayoutFlags(_ActivityIndicator, AbsoluteLayoutFlags.PositionProportional);
Related
I have a grid with only one row with the height of GridLength.Star.
In the first column I have an svg that fills the cell.
In the second column I have a label.
The svg is a square and should take the place to fill it in vertical and horizontal direction but not more.
The label should take the rest of the width.
I tried to set
column1.Width = GridLength.Auto;
column2.Width = GridLength.Star;
but it will always be devided in the middle.
So I got:
svg..........|label........
instead of (what I want):
svg|label..................
Any ideas?
UPDATE
Label label = new Label();
SvgCachedImage svgImage = new SvgCachedImage();
svgImage.HorizontalOptions = LayoutOptions.CenterAndExpand;
svgImage.VerticalOptions = LayoutOptions.CenterAndExpand;
Grid grid = new Grid();
grid.Children.Add( svgImage );
grid.Children.Add( label );
RowDefinition row = new RowDefinition();
ColumnDefinition column1 = new ColumnDefinition();
ColumnDefinition column2 = new ColumnDefinition();
row.Height = GridLength.Star;
grid.RowDefinitions = new RowDefinitionCollection { row1 };
column1.Width = GridLength.Auto;
column2.Width = GridLength.Star;
grid.ColumnDefinitions = new ColumnDefinitionCollection { column1, column2 };
UPDATE 2
Sorry it is no Fill but a CenterAndExpand
I got the answer. I simply need to set the height of the svg to its widthRequest:
svgImage.WidthRequest = svgImage.Height;
column1.Width = GridLength.Auto;
column2.Width = GridLength.Star;
grid.Children.Add( svgImage, 0, 0 );
grid.Children.Add( label, 1, 0 );
Well, its very simple actually the reason behind it is the GridLength.Auto you have there all you need to do is change the Grid column definitions into something like this:
XAML
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/> // svg
<ColumnDefinition Width="4*"/> // label
</Grid.CoulmnDefinitions>
C#
Grid grid= new Grid
{
ColumnDefinitions =
{
new RowDefinition { Height = new GridLength(1, GridUnitType.Star) },
new RowDefinition { Height = new GridLength(4, GridUnitType.Star) },
}
}
grid.Children.Add(svgImage, 0, 0);
grid.Children.Add(label, 0, 1);
Move:
grid.Children.Add( svgImage );
grid.Children.Add( label );
to after you've set up your row/column definitions, and then change to:
grid.Children.Add(svgImage, 0, 0);
grid.Children.Add(label, 0, 1);
You basically have to tell the grid which row/column to put your elements. By adding them to the grid before initialising the column definitions, the ColumnDefinitions have defaulted to GridLength.Star.
I've tidied up your code. Note that I have changed the Height assignments.
Label label = new Label()
{
Text = "Some text" // Just some placeholder text
};
SvgCachedImage svgImage = new SvgCachedImage()
{
HorizontalOptions = LayoutOptions.CenterAndExpand,
VerticalOptions = LayoutOptions.CenterAndExpand
};
Grid grid = new Grid();
// NOTE: use GridLength class to set the Height/Width of rows/columns
RowDefinition row = new RowDefinition()
{
Height = new GridLength(1, GridUnitType.Star)
}
ColumnDefinition column1 = new ColumnDefinition()
{
Width = new GridLength(1, GridUnitType.Auto)
}
ColumnDefinition column2 = new ColumnDefinition()
{
Width = new GridLength(1, GridUnitType.Star)
}
// Use existing instances of the definitions
grid.RowDefinitions.Add(row1);
grid.ColumnDefinitions.Add(column1);
grid.ColumnDefinitions.Add(column2);
grid.Children.Add(svgImage, 0, 0);
grid.Children.Add(label, 1, 0);
As I was typing this out I noticed that you had simply set the Width property to GridLength.Star/Auto. According to the docs, you should be using the GridLength class, not the Enum.
Help! I'm trying to create and merge two different objects in THREEjs. I have one image and I need it to be stretched over the entire merged object once. Currently it is doing it twice, once on the top and once on the bottom, like they are still two separate objects.
var texture = new THREE.TextureLoader().load('//s1.postimg.org/26dva6d58v/peace.png');
texture.alphaTest = 0.9;
texture.needsUpdate = true;
color = new THREE.MeshStandardMaterial( {
side: THREE.DoubleSide,
color: 0x949494,
map: texture
} );
var size = {'top': 1.395, 'bottom': 1.11, 'height': 3.5};
cylinderGeo1 = new THREE.CylinderGeometry( size.top, size.bottom, size.height, 50, null, true );
cylinderGeo1.applyMatrix( new THREE.Matrix4().makeTranslation(0, size.height/2, 0) );
cylinder1 = new THREE.Mesh(cylinderGeo1);
cylinderGeo2 = new THREE.CylinderGeometry( size.top * 2,size.top, size.height, 50, null, true );
cylinderGeo2.applyMatrix( new THREE.Matrix4().makeTranslation(0, (size.height/2) + size.height, 0) );
cylinder2 = new THREE.Mesh(cylinderGeo2);
cupGeo = new THREE.Geometry();;
cylinder1.updateMatrix();
cupGeo.merge(cylinderGeo1, cylinder1.matrix);
cylinder2.updateMatrix();
cupGeo.merge(cylinderGeo2, cylinder2.matrix);
cup = new THREE.Mesh(cupGeo, color);
cup.updateMatrix();
scene.add(cup);
https://jsfiddle.net/dj2k6y8t/16/
[edit] You may need to zoom on the canvas to get it render.
I am trying to show an Activity Indicator in my App for which I have written the following code but the indicator is not getting rendered on the screen.
Can somebody please suggest what has gone wrong?
private ActivityIndicator indicator = new ActivityIndicator
{
HorizontalOptions = LayoutOptions.CenterAndExpand,
Color = Color.Black,
IsVisible = false
};
StackLayout stack = new StackLayout
{
VerticalOptions=LayoutOptions.FillAndExpand,
HorizontalOptions=LayoutOptions.FillAndExpand,
Padding=0,
Spacing=0,
};
AbsoluteLayout absolute = new AbsoluteLayout
{
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand,
};
stack.Children.Add(map);
stack.Children.Add(browser);
AbsoluteLayout.SetLayoutFlags(stack, AbsoluteLayoutFlags.PositionProportional);
AbsoluteLayout.SetLayoutBounds(stack, new Rectangle(0f, 0f, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));
AbsoluteLayout.SetLayoutFlags(indicator, AbsoluteLayoutFlags.PositionProportional);
AbsoluteLayout.SetLayoutBounds(indicator, new Rectangle(0.5f, 0.5f, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));
absolute.Children.Add(indicator);
absolute.Children.Add(stack);
*//When Some activity occurs.....Indicator is shown like this*
indicator.SetBinding(ActivityIndicator.IsVisibleProperty, "IsBusy", BindingMode.OneWay);
indicator.SetBinding(ActivityIndicator.IsRunningProperty, "IsBusy", BindingMode.OneWay);
indicator.IsRunning = true;
indicator.IsVisible = true;
Try this
AbsoluteLayout.SetLayoutBounds(stack, new Rectangle(0f, 0f, 1f, 1f));
AbsoluteLayout.SetLayoutBounds(indicator, new Rectangle(0.5f, 0.5f, -1f, -1f));
AbsoluteLayout.SetLayoutFlags(stack, AbsoluteLayoutFlags.All);
Add the indicator after the stack. absolute.Children.Add(indicator) after absolute.Children.Add(stack);
Check If your IsVisible is true.
The layout i want is like this: http://imgur.com/etb9ZKZ
I want the image (illustrated with the color green) to fill the entire layoutcontol. On top of image positioned at the bottom with full width i want a textbox/label to put a title. The title view should have a black semi-transparent background.
This is the best i've got (the code below), but it has a few issues:
#1 - The text doesnt wrap like it is suppose to. It just cuts the sentence, like the rest is going off screen.
#2 - The image doesnt scale to the width of the container.
Label lblTitle = new Label()
{
BackgroundColor = new Color(0, 0, 0, 0.8),
LineBreakMode = LineBreakMode.WordWrap,
FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label))
};
lblTitle.SetBinding(Label.TextProperty, "headline");
Image imgBanner = new Image()
{
/*
HorizontalOptions = LayoutOptions.Fill,
VerticalOptions = LayoutOptions.End,
Aspect = Aspect.Fill
*/
};
imgBanner.SetBinding(Image.SourceProperty, "ImageUrlSource");
AbsoluteLayout.SetLayoutFlags(lblTitle, AbsoluteLayoutFlags.PositionProportional | AbsoluteLayoutFlags.WidthProportional);
AbsoluteLayout.SetLayoutBounds(lblTitle, new Rectangle(0, 1, 1, AbsoluteLayout.AutoSize));
AbsoluteLayout.SetLayoutFlags(imgBanner, AbsoluteLayoutFlags.SizeProportional);
AbsoluteLayout.SetLayoutBounds(imgBanner, new Rectangle(0, 0, 1, 1));
AbsoluteLayout layout = new AbsoluteLayout()
{
HorizontalOptions = LayoutOptions.Fill,
Children =
{
imgBanner,
lblTitle
}
};
View = layout;
You should use Grid instead.
Label lblTitle = new Label()
{
BackgroundColor = new Color(0, 0, 0, 0.8),
LineBreakMode = LineBreakMode.WordWrap,
FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label))
};
lblTitle.SetBinding(Label.TextProperty, "headline");
Image imgBanner = new Image()
{
/*
HorizontalOptions = LayoutOptions.Fill,
VerticalOptions = LayoutOptions.End,
Aspect = Aspect.Fill
*/
};
imgBanner.SetBinding(Image.SourceProperty, "ImageUrlSource");
//=========== Addition Start Here ============//
Grid grid = new Grid();
grid.RowDefinitions =
{
new RowDefinition{ Height=new GridLength(200,GridUnitType.Absolute) },
new RowDefinition{ Height=new GridLength(30,GridUnitType.Absolute},
}
grid.Children.Add(imgBanner,0,1,0,2); //two rowspan
// == .Add(imgBanner,column,column+columnspan,row,row+rowspan)
grid.Children.Add(lblTitle,0,1,1,2); //one rowspan
View = grid;
I have a StackLayout coded like this:
StackLayout mainStackLayOut = new StackLayout{
BackgroundColor = Color.Blue,
//VerticalOptions = LayoutOptions.FillAndExpand,
//WidthRequest = width,
HorizontalOptions = LayoutOptions.FillAndExpand,
Orientation = StackOrientation.Vertical
};
But I want the StackLayout to fill all the screen width and height, also I have tree buttons added like this:
StackLayout buttonsStackLayOut = new StackLayout
{
BackgroundColor = Color.White,
//VerticalOptions = LayoutOptions.Fill,
HorizontalOptions = LayoutOptions.Fill,
Orientation = StackOrientation.Horizontal,
Spacing = 0
};
mainStackLayOut.Children.Add(buttonsStackLayOut);
Image doctorImage = new Image
{
WidthRequest = width / 3,
HeightRequest = 50,
BackgroundColor = Color.Gray,
Source = ImageSource.FromFile ("about.png")
};
buttonsStackLayOut.Children.Add(doctorImage);
How can I fill all the screensize?
In the most simple form I have managed to achieve what you require.
I set the content of the screen to the main stack layout.
var mainStackLayout = new StackLayout { BackgroundColor = Color.Blue};
var buttonsStackLayout = new StackLayout { BackgroundColor = Color.White, Orientation = StackOrientation.Horizontal , Spacing = 0 };
Image about = new Image { HeightRequest = 50, Source = ImageSource.FromFile("about.jpg") };
Image twitter = new Image { HeightRequest = 50, Source = ImageSource.FromFile("twitter.jpg") };
Image refresh = new Image { HeightRequest = 50, Source = ImageSource.FromFile("refresh.jpg") };
buttonsStackLayout.Children.Add(about);
buttonsStackLayout.Children.Add(twitter);
buttonsStackLayout.Children.Add(refresh);
mainStackLayout.Children.Add(buttonsStackLayout);
this.Content = mainStackLayout;