You can see from the image below, the chart lines don't go all the way to the edge of the StackLayout container. I've tried adding negative margins on the StackLayout but they're inconsistent depending on how much data I have in the chart and the margins can fluctuate. And between Android & iOS, the margins are always different.
Nativescript Playground sample:
play.nativescript.org/?template=play-ng&id=I8lOBP
This is the bad version:
In the image, you'll notice on the right and left edges, there's dark strips of the emulator window. I'm looking for a way for the red area line to touch those edges. It's hard to see in the image but the bottom also needs to touch the bottom of the StackLayout container.
<StackLayout>
<RadCartesianChart
height="100%"
width="100%"
class="default-background">
<CategoricalAxis
lineColor="#f5f5f5"
hidden="true"
lineHidden="true"
lineThickness="1"
labelLayoutMode="Inner"
tkCartesianHorizontalAxis>
</CategoricalAxis>
<LinearAxis
lineColor="#f5f5f5"
hidden="true"
lineHidden="true"
lineThickness="1"
labelLayoutMode="Inner"
[maximum]="max"
[minimum]="min"
tkCartesianVerticalAxis>
</LinearAxis>
<AreaSeries
tkCartesianSeries
seriesName="Area"
showLabels="false"
categoryProperty="Date"
[items]="areaSource$ | async"
valueProperty="Amount"
selectionMode="None">
</AreaSeries>
<RadCartesianChartGrid
tkCartesianGrid
horizontalLinesVisible="false"
verticalLinesVisible="false"
verticalStripLinesVisible="false"
horizontalStripLinesVisible="false"
horizontalStrokeColor="#181818">
</RadCartesianChartGrid>
<Palette tkCartesianPalette seriesName="Area">
<PaletteEntry
tkCartesianPaletteEntry
opacity="1"
[fillColor]="fillColor"
[strokeColor]="lineColor"
android:strokeWidth="4"
ios:strokeWidth="2">
</PaletteEntry>
<PaletteEntry
tkCartesianPaletteEntry
[fillColor]="fillColor"
strokeColor="#181818"
strokeWidth="0">
</PaletteEntry>
</Palette>
</RadCartesianChart>
</StackLayout>
Here's what I want it to look like (credit: photoshop).
You should be setting the horizontalZoom property, probably upping its current value by about 30%.
const screen = require("tns-core-modules/platform").screen;
let widthDIPs = screen.mainScreen.widthDIPs;
<StackLayout>
<RadCartesianChart
height="100%"
[width]="widthDIPs"
class="default-background">
<CategoricalAxis
(...)
src: https://docs.nativescript.org/angular/ui/styling#supported-measurement-units
Related
Hi i have spend some days searching for the answer how to solve this
This is what i want, just made a image how it should look like
What is the best solution to use to solve this?
I tryed to do this with a Frame but it just allowed be to use 1 content .
Can i use more then one content in some way
( Content can just have one setup of fontcolor and fontsize and so on. )
I just get to this part
Here i try to put a label with margin with - so it go above.
But this is really bad to to. because i need to have the implementation under the frams. like this.
_stack.Children.Add(frame);
_stack.Children.Add(bordertext);
and when i fill the frame with content the lable apear in another position because how it relate to the margin when the Frame get higher.
But if i put the lable implementation above the Frame then it appear in the background of the frame
_stack.Children.Add(bordertext);
_stack.Children.Add(frame);
And the label get weard with the shadow that i cant figure out how to get rid of.
C#
Frame frame = new Frame
{
BorderColor = Color.Brown,
CornerRadius = 10,
HasShadow = false,
Margin = 10,
BackgroundColor = Color.White,
};
Label bordertext = new Label( );
bordertext.Text = "BorderText";
bordertext.Margin = new Thickness(40, -65,0 , 0);
bordertext.BackgroundColor = Color.White;
_stack.Children.Add(frame);
_stack.Children.Add(bordertext);
PART OF THE SOLUTION
#Jason 's solution to put
the Content in a Stacklayout and then put it in a Frame Solves the problem with having more then one text with different font,sizes and stuff.
But i put a text outside the Stacklayout so i can have the Text on the border. But because i put the Bordertext first and then the Frame. Then the Border text gets in the background.
If i put it after the Frame then i gets in the front. But then i have a big problem with dynamic text that the BorderText will appear very strange depending on how much text.
How i cant put the BorderText in front even if i implement in before so i cant move it down a little bit.
_stack.Children.Add(new Label { Text = "Bordertext", Margin = new Thickness(0, 0, 0, -25) });
_stack.Children.Add(_frame);
To compose a layout, first determine what boxes (rectangles) you need inside other boxes. Each "box" is some container (layout) type.
I see one box "A", the size of the parent-container, containing the border lines "B", overlaid by a box "C" that blocks part of one line, and contains a text "D".
I see a second box "E", inset slightly from the parent-container, which contains additional content "F".
To overlay multiple items, use a one-cell Grid, with children at (row,column) of 0,0 - which can be omitted because is default:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="FormsApp1.MainPage">
<Grid BackgroundColor="Violet">
<!-- Border lines formed by one box visually "inside" another, via margins.
Instead use "Rectangle" if need rounded corners. -->
<BoxView BackgroundColor="Red" Margin="10"/>
<BoxView BackgroundColor="LightCoral" Margin="16"/>
<!-- Text "box" given size by putting inside a StackLayout. -->
<!-- Some of these dimensions may not be needed. -->
<StackLayout WidthRequest="300" HeightRequest="30">
<Label Text="Header Text" TextColor="Black" BackgroundColor="White" FontSize="18"
HorizontalOptions="Start"
WidthRequest="150" HeightRequest="30" Margin="20,0" Padding="20,0,0,0"/>
</StackLayout>
<!-- this contains your contents. -->
<StackLayout BackgroundColor="#2196F3" Padding="10" Margin="40">
<Label Text="Content line 1" HorizontalTextAlignment="Center" TextColor="White"/>
<Label Text="Content line 2" HorizontalTextAlignment="Center" TextColor="White"/>
</StackLayout>
</Grid>
</ContentPage>
"Positioning" is done via "Margin" and "Padding" properties.
I've used various colors, so you can see the parts of this layout. "ContentPage" wrapper might not be needed; use whatever your app expects as topmost container.
layout of group' frame' with header text:
I'm writing an app with NativeScript 6.4.1 and Angular 8.
On the home page of my app, I need to have a list of buttons with a label underneath the button.
I want the container that holds the button and the text to be the same width for all. If the text is too long it will go onto the next line rather than expand the size of the parent container.
I have tried to use FlexboxLayout for this purpose but I notice that the parent containers just expand:
https://play.nativescript.org/?template=play-ng&id=jbpqMk&v=5
I guess I need some flexiblity in the layout as well; maybe have the ability to configure if its 2 or 3 columns.
Would I be better off using GridLayout?
Here is a code snippet:
home.html
<FlexboxLayout backgroundColor="pink" flexWrap="wrap" justifyContent="center">
<ns-home-button *ngFor="let n of list" name="{{ n.name }}"></ns-home-button>
</FlexboxLayout>
Desired Result:
Current Result:
Interestingly, the cells you've shown in your demo are properly aligned as per your flow specifications. Using a GridLayout would be possible, but not really ideal. The GridLayout would need all of its rows counted and specified, which is annoying, and it would also force its children to fit within it, rather than expand based on children (like FlexboxLayout or StackLayout).
Instead, just put a width on each item. The easiest two ways to do this are by wrapping each element:
<FlexboxLayout backgroundColor="pink" flexWrap="wrap" justifyContent="center">
<StackLayout width="33%" *ngFor="let n of list">
<ns-home-button name="{{ n.name }}"></ns-home-button>
</StackLayout>
</FlexboxLayout>
or by modifying the component spec:
<FlexboxLayout backgroundColor="pink" flexWrap="wrap" justifyContent="center">
<ns-home-button width="33%" *ngFor="let n of list" name="{{ n.name }}"></ns-home-button>
</FlexboxLayout>
#Input() width: string;
<FlexboxLayout [width]="width" ...>
...
</FlexboxLayout>
In a ContentPage I have a ListView inside a StackLayout inside a ScrollView. The ListView is populated (ItemSource is set) in the ContentPage when OnAppearing gets called and I can see that the list is populated in the emulator. The StackLayouts orientation is Vertical and below the ListView I have a Button.
My problem is that no matter how many elements the ListView has, it gets the height of 53.33. I would like the height of the ListView to match the total height of the items in it. By setting HeightRequest I can set the height of the ListView to anything I want, but since I do not know the height of the items inside the ListView the result is most often that the distance to the button below it is incorrect and therefore looks ugly. I have tried to set VerticalOptions on both the ListView and the StackLayout to Startand other settings, but this does not change the height from 53.33 (and if I try to combine using HeightRequest and Start it turns out that HeightRequest wins out).
How can I solve this?
(please excuse the cross posting from Xamarin forum)
With the new BindableLayout feature in Xamarin Forms 3.5 you can easily use the ItemsSource on StackPanel.
So, basically you can write something like this:
<StackLayout BindableLayout.ItemsSource="{Binding list}">
<BindableLayout.ItemTemplate>
<DataTemplate>
...
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
You can read more about it here: https://blog.xamarin.com/xamarin-forms-3-5-a-little-bindable-love/
The solution in my case was to put the ListView inside a StackLayout and then put that StackLayout inside the main StackLayout. Then I could set the VerticalOptions = LayoutOptions.FillAndExpand on the inner StackLayout (the one containing the ListView) with the result that the ListView got the space it needed (which of course varies depending on the data).
Here is the main code:
listView.ItemsSource = alternativeCells;
listView.ItemSelected += ListViewOnItemSelected;
var listStackLayout = new StackLayout
{
VerticalOptions = LayoutOptions.FillAndExpand,
Orientation = StackOrientation.Vertical
};
listStackLayout.Children.Add(listView);
_stackLayout.Children.Add(listStackLayout);
As you see, I added a new StackLayout with the only purpose of putting the ListView inside it. Then I put that listStackLayout inside the main _stackLayout.
See the post on this Xamarin forum post for more information
I ran into the same problem, and for me this worked like a charm:
listView.HasUnevenRows = true;
(http://developer.xamarin.com/guides/cross-platform/xamarin-forms/working-with/listview/#Display_Rows_with_Variable_Heights)
I had the same problem, and this was the only thing I did that solved for me (in XAML):
<StackLayout Orientation="Vertical"
VerticalOptions="Fill"
HorizontalOptions="StartAndExpand">
<ListView VerticalOptions="FillAndExpand"
RowHeight="<some row height>">
</ListView>
</StackLayout>
Hope it works!
Below code worked for me,
protected override void OnAppearing()
{
base.OnAppearing();
listViewOrderCloths.HeightRequest = model.ListOrderedCloths.Count*100)/2 ;
}
I had a similar struggle, with a slightly different solution. First, setting a RowHeight on the ListView seemed to be pivotal. Second, I was running into a binding + timing issue. If the ListView was displayed and had no contents, it was set to a default height (showing the empty space). If I moved away from this page and came back, the size was fine.
So my approach was to bind the ListView's visibility to the presence (or lack of) something being bound to. Then when data came back, the ListView became visible and had the proper size.
<ListView x:Name="lvSettlements" ItemsSource="{Binding RecentSettlements}" VerticalOptions="FillAndExpand" RowHeight="25" IsVisible="{Binding RecentSettlements, Converter={StaticResource nullConverter}}">
...SNIP...
</ListView>
On Android, my table created in code was leaving gaps above and below it.
This fixed it...
HeightRequest="1000000"
I think I have the hackiest solution.
The accepted answer wasn't applicable to my situation, where my ListView might be longer then the length of the display, hence it needs be placed within a ScrollView, which brings back the empty space.
They way I solved this, was to have top level StackLayout and then place the ListView in an immediate ScrollView, like the following XAML:
<?xml version="1.0" encoding="utf-8" ?>
<local:ContentPage>
<StackLayout x:Name="entirePage">
<ScrollView VerticalOptions="FillAndExpand"
Orientation="Vertical">
<ListView x:Name="listView" ItemsSource="{Binding Items}"
Margin="0">
<!-- ListView Stuff -->
</ListView>
</ScrollView>
</StackLayout><!--entirePage-->
</local:ContentPage >
<s:Button id="btn1" label="1" width="18" includeInLayout="true" visible="true" click="onSmallBtnClick();" />
<s:Button id ="btn2" label="2" width="18" includeInLayout="true" visible="true" click="onSmallBtnClick();" />
<s:Button id ="btn3" label="3" width="18" includeInLayout="true" visible="true" click="onSmallBtnClick();" />
<s:Button id="bigButton" label="bigButton" width="72" includeInLayout="false" visible="false" />
private function onSmallBtnClick():void {
hideBtn(btn1);
hideBtn(btn2);
hideBtn(btn3);
showBtn(bigButton);
}
private function showBtn(button:Button):void {
button.visible = true;
button.includeInLayout = true;
}
private function hideBtn(button:Button):void {
button.visible = false;
button.includeInLayout = false;
}
Hi all, in the Flex code above, I have 4 four buttons on my interface. The interface should begin with small buttons 1,2,3 visible and the bigButton invisible. When either of the small buttons are clicked, the bigButton appears in place of the 3 small buttons. The widths of the small buttons are set at 18, while the bigButton width is set at 72.
My question is, shouldn't the width of the bigButton be 54, as 18x3 = 54? Or is there some padding within the buttons that I should know of? In this live docs page, it says..
By default, Flex stretches the Button control width to fit the size of
its label, any icon, plus 6 pixels of padding around the icon. You can
override this default width by explicitly setting the width property
of the Button control to a specific value or to a percentage of its
parent container. If you specify a percentage value, the button
resizes between its minimum and maximum widths as the size of its
parent container changes.
Could this be the problem? Since I have 3 buttons and the padding around the icons take up 6x3 = 18 pixels. The buttons don't seem to have any gap between them. So I am curious to know where does the extra 18 pixels come from.
Thanks.
As soon as I don't see any x or left things set for buttons, I guess you use something like HGroup or any other container with HorizontalLayout.
It has a property named gap, and this property is 6 by default.
But it will not add 18px, it will add 12px...
Try to set minWidth to 0 for all buttons.
I'm using Flex 3, SDK 3.2.
I'm having problems determining the height of a UITextField. (Unfortunately, I have to use the UITextField because I'm using FlashEff 2.0. Otherwise, I'd use a different component).
I've got a UITextfield that is multiline and has wordWrap. The text is pulled from a database, so the length varies. I've got a radioButtonGroup underneath the UITextField.
My goals are:
To keep the UITextField from
crashing into the radioButtonGroup's
VBox.
To change the y
position of the radioButtonGroup
based on the height of the
UITextField.
To make the TitleWindow's
height variable. The
UITextField and the radioButtonGroup
are in a TitleWindow. I'd like to
change the height of the TitleWindow
based on the contents inside.
At the moment, I've set y of the radioButtonGroup way down on the TitleWindow, so that the UITextField's content doesn't overlap. But, when there isn't too much text in the UITextField, I get a huge gap between the radioButtonGroup's VBox and it.
If I don't give the TitleWindow a height, then the UITextField will stretch itself to something like 2000 px.
I've Googled and from what I can tell, the UITextField's height behaves weirdly.
Does anyone know how to solve this problem?
I create the UITextField like this:
public var tf:UITextField = new UITextField;
tf.autoSize = TextFieldAutoSize.LEFT;
tf.embedFonts = true;
tf.multiline = true;
tf.text = myText;
tf.width = 440;
tf.wordWrap = true;
var myFormat:TextFormat = new TextFormat;
myFormat.size = 25;
myFormat.blockIndent=53;
this.addChild(tf);
tf.validateNow();
tf.setTextFormat(myFormat);
My VBox looks like this:
<mx:VBox id="radioVBox" x="180" y="220">
<mx:RadioButtonGroup id="myRadioButtonGroup" itemClick="goClickHandler(event);"/>
<mx:RadioButton groupName="myRadioButtonGroup" label="A" fontSize="17" />
<mx:RadioButton groupName="myRadioButtonGroup" label="B" fontSize="17" />
<mx:RadioButton groupName="myRadioButtonGroup" label="C" fontSize="17" />
<mx:RadioButton groupName="myRadioButtonGroup" label="D" fontSize="17" />
<mx:RadioButton groupName="myRadioButtonGroup" label="E" fontSize="17" />
And it's all wrapped in a TitleWindow that looks like this:
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="520"
height="450"
verticalScrollPolicy="off"
horizontalScrollPolicy="off"
>
Any suggestions?
Thank you.
-Laxmidi
rtalton helped me out.
I figured out that the radioVBox was shifting up and overlapping the MainBox, because the UITextField is dynamic and has a FlashEff2 effect on it. Basically, the height of the MainBox is 0 when radioVBox's layout is calculated.
So, I add the UITextField to one VBox. Below that I've got the radioVBox. I set the radioVBox's visibility to false. Then I added an eventListener for when the FlashEff2 effect ended, which called a function that turned on the radioVBox's visibility. Also, in the function I set: radioVBox.y = (tf.y + tf.height + 40);. Lastly, I set the TitleWindow's height as follows: height="{radioVBox.y + 270}"
Thank you.
-Laxmidi