Labels not showing in XAML - xaml

I am a beginner, and trying to learn C#, XAML, VS2017, Xamarin.Forms, SQLite, all at the same time from scratch.
(not in college, just on my own)
on each Navigation Page, I can see some of the Labels displayed.
But when I try to have more than 4 Labels, new Labels bump off an older one.
I know I'm not getting lost in the weeds of fancy Layouts and Formatting.
Just trying to simply display the data collected so far.
Is this some limitation built into XAML?
Or am I missing something else entirely?
Xaml code:
<StackLayout>
<Label x:Name="name"
FontSize="Medium"/>
<Label x:Name="displaySoulNumber"
FontSize="Medium"/>
<Label x:Name="displayPersonalityNumber"
FontSize="Medium"/>
<Label x:Name="displayPowerNameNumber"
FontSize="Medium"/>
<Label x:Name="displayBirthDayNumber"
FontSize="Medium"/>
<Label x:Name="displayAttitudeNumber"
FontSize="Medium"/>
<Label x:Name="displayLifePathNumber"
FontSize="Medium"/>
<Label x:Name="displayDestinyNumber"
FontSize="Medium"/>
</StackLayout>
The c# code:
//pull from db
name.Text = ConnectionClass.stock.Symbol;
displaySoulNumber.Text = ConnectionClass.stock.DisplaySoulNumber;
displayPersonalityNumber.Text = ConnectionClass.stock.DisplayPersonalityNumber;
displayPowerNameNumber.Text = ConnectionClass.stock.DisplayPowerNameNumber;
displayBirthDayNumber.Text = ConnectionClass.stock.DisplayBirthDayNumber;
displayAttitudeNumber.Text = ConnectionClass.stock.DisplayAttitudeNumber;
displayLifePathNumber.Text = ConnectionClass.stock.DisplayLifePathNumber;
displayDestinyNumber.Text = ConnectionClass.stock.DisplayDestinyNumber;

I think it might be some space issues. You can try wrapping you StackLayout on a ScrollView like this :
<ScrollView HorizontalOptions="FillAndExpand">
<StackLayout>
<Label x:Name="name"
FontSize="Medium"/>
<Label x:Name="displaySoulNumber"
FontSize="Medium"/>
<Label x:Name="displayPersonalityNumber"
FontSize="Medium"/>
<Label x:Name="displayPowerNameNumber"
FontSize="Medium"/>
<Label x:Name="displayBirthDayNumber"
FontSize="Medium"/>
<Label x:Name="displayAttitudeNumber"
FontSize="Medium"/>
<Label x:Name="displayLifePathNumber"
FontSize="Medium"/>
<Label x:Name="displayDestinyNumber"
FontSize="Medium"/>
</StackLayout>
</ScrollView>
Let me know if it helps :)

my mistake, of course. i had messed up the naming of the stored items.

Related

Vue warn: Property or method "item" is not defined on the instance but referenced during render

im getting below error while i'm iterate CartItem.
Property or method "item" is
not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property
why this error is showing and how can i solve this.
[Note : this is a nativescript vue project]
<ListView
v-for="(item, index) in cartItems"
:key="index"
height="1000"
class="listCard"
>
<v-template>
<GridLayout
rows="auto"
columns="auto,*3,auto"
backgroundColor="white"
class="innerList"
>
<StackLayout orientation="horizontal" col="0" row="0">
<Button>
<FormattedString>
<Label
class="fa fas"
:text="'fa-trash' | fonticon"
fontSize="30"
></Label>
</FormattedString>
</Button>
<Image :src="item.imageUrl" height="80" width="auto"></Image>
</StackLayout>
<StackLayout col="1" row="0">
<Label
:text="item.title"
textWrap="true"
class="font-weight-bold"
color="#333333"
></Label>
<Label :text="item.color" color="#999999"></Label>
<Label :text="'USD ' + item.price" color="red"></Label>
</StackLayout>
<StackLayout orientation="horizontal" col="2" row="0">
<Button
text="-"
#tap="onDecriment(index)"
class="operatorButton operatorBox"
marginRight="0"
/>
<Label
class="operatorLabel operatorBox"
:text="item.quantity">
</Label>
<Button
text="+"
#tap="onIncrement(index)"
class="operatorButton operatorBox"
marginLeft="0"
/>
</StackLayout>
</GridLayout>
</v-template>
</ListView>
I don't see any error in your code but can you try using for instead of v-for. I see in this example, Listview is being using with for.
As per docs: If a v-for is used on a <ListView> a warning will be printed to the console, and it will be converted to the **for** property. you can read more about Listview with for here
<ListView
for="(item, index) in cartItems"
:key="index"
height="1000"
class="listCard"
>
....

ListView in nativescript-vue slow to scroll

The listview is so slow when scrolling. It hits the bottom and bounces like it has run out of items to display. If you retry, it lets you scroll further. The same thing happens on the way back up the list.
I load in my array of only 40 items using a vuex getter.
computed: {
history () {
return this.$store.getters.allHistory;
}
},
Then the ListView is simply
<ListView ref="listView" for="item in history">
<v-template>
<StackLayout height="60" padding="10">
<Label :text="item.title" textWrap="true"></Label>
</StackLayout>/>
</v-template>
</ListView>
Removing the fixed height and padding seemed to fix. This is working...
<ListView ref="listView" for="item in history">
<v-template>
<GridLayout columns="auto,*" rows="auto, auto" margin="10">
<Image v-show="item.poster_url.length > 0" :src="item.poster_url" marginRight="5"
stretch="aspectFill" height="100" borderRadius="5"></Image>
<StackLayout col="1" row="0" rowSpan="2">
<Label :text="item.title" textWrap="true"></Label>
</StackLayout>
</GridLayout>
</v-template>
</ListView>

How to create circle and set image like screencast, I have used TintImage for this

Hi I am working in shoping app and design like, I have already used tint image:
How I can do that, I I can create a circel like this image
I am not sure why you are not using icons from the resources or get the images from rest api.
This is only needed if you want to create dynamic icons.
If that is the case, use a Frame and put the image on it.
<Frame CornerRadius="15" AbsoluteLayout.LayoutBounds="120, 10, 30, 30" Padding="5" VerticalOptions = "FillAndExpand" HasShadow= "false" BackgroundColor="red" >
<StackLayout Orientation="Vertical" Spacing="0" HorizontalOptions="Center" VerticalOptions="Center">
<Label Text="1" VerticalTextAlignment="Center" HorizontalOptions="Center" />
</StackLayout>
</Frame>
the important thing to note is that , "cornerRadius" should be help the size of "AbsoluteLayout.LayoutBounds" width and size.
to learn more about AbsoluteLayout go here
Use FFImageLoading NuGet Library in your Solution, you can download using link FFImageLoading
Paste Below Code
<ffimageloading:CachedImage HorizontalOptions="Center" VerticalOptions="Center"
WidthRequest="300" HeightRequest="300"
DownsampleToViewSize="true"
Source = "http://loremflickr.com/600/600/nature?filename=simple.jpg">
<ffimageloading:CachedImage.Transformations>
<fftransformations:RoundedTransformation Radius="50"/>
</ffimageloading:CachedImage.Transformations>
</ffimageloading:CachedImage>

Nested TabView in NativeScript Angular2

I'm trying to create a tabView on one of the pages in my application which is reachable by sidebar. I think that I have misunderstood the concept of TabView since I get this message:
Property binding tabItem not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "directives" section. ("<Label text="scanner"></Label>
<TabView class="tab">
[ERROR ->]<StackLayout *tabItem="{title: 'Profile'}">
<Label text="first tab item"></Label>
The html code for creating the TabView is working if I paste it in my root html file (app.component.html).
This is how my sidedrawer html code looks like, where the ng-content is where the page is included when selected:
<RadSideDrawer [transition]="sideDrawerTransition" tkExampleTitle tkToggleNavButton>
<StackLayout tkDrawerContent class="sidedrawer-left">
<StackLayout class="extended-sidedrawer-header">
<Label text="Navigation Menu"></Label>
</StackLayout>
<StackLayout class="sidedrawer-content">
<Label text="Map" class="sidedrawer-list-item" [nsRouterLink]="['/map']" (tap)="closeDrawer()"></Label>
<Label text="Beacon" class="sidedrawer-list-item" [nsRouterLink]="['/beacon']" (tap)="closeDrawer()"></Label>
<Label text="Scanner" class="sidedrawer-list-item" [nsRouterLink]="['/scanner']" (tap)="closeDrawer()"></Label>
<Label text="Camera" class="sidedrawer-list-item" [nsRouterLink]="['/camera']" (tap)="closeDrawer()"></Label>
</StackLayout>
</StackLayout>
<ScrollView tkMainContent>
<StackLayout class="page">
<StackLayout (tap)="openDrawer()" horizontalAlignment="left">
<Label class="menu-icon" ></Label>
<Label class="menu-icon" ></Label>
<Label class="menu-icon" ></Label>
</StackLayout>
<ng-content></ng-content>
</StackLayout>
</ScrollView>
</RadSideDrawer>

XAML Xamarin OnPlatform Binding

I think my code is self explanatory:
<Label Style="{DynamicResource labelStyle}"
HorizontalTextAlignment="End" Text="{Binding message}">
<OnPlatform x:TypeArguments="Color">
<OnPlatform.iOS>
{DynamicResource rightBubbleFontColor}
</OnPlatform.iOS>
<OnPlatform.Android>
{DynamicResource rightBubbleFontColor}
</OnPlatform.Android>
<OnPlatform.Android>
{StaticResource rightBubbleFontColor}
</OnPlatform.Android>
</OnPlatform>
</Label>
I'm trying to dynamically bind a color to the label. Depending on the current platform, it has to be another type of resource (DynamicResource or StaticResource).
I get this exception when trying to build the solution:
System.ArgumentException: An item with the same key has already been added.
UPDATE
I now have this code:
<Label Style="{DynamicResource labelStyle}"
HorizontalTextAlignment="End" Text="{Binding message}">
<Label.TextColor>
<OnPlatform
x:Key="RightBubbleFontColor"
x:TypeArguments="Color"
iOS="{DynamicResource rightBubbleFontColor}"
Android="{DynamicResource rightBubbleFontColor}"
WinPhone="{StaticResource rightBubbleFontColor}">
</OnPlatform>
</Label.TextColor>
</Label>
And I get the following error message:
Object reference not set to an instance of an object.
When I replace the binding to a color it works.
Working example:
<Label Style="{DynamicResource labelStyle}"
HorizontalTextAlignment="End" Text="{Binding message}">
<Label.TextColor>
<OnPlatform
x:Key="RightBubbleFontColor"
x:TypeArguments="Color"
iOS="Red"
Android="Green"
WinPhone="Blue">
</OnPlatform>
</Label.TextColor>
</Label>
So it has to be an issue with the way I'm trying to bind this I guess.
EDIT
Asked a new question to describe the problem better: https://stackoverflow.com/questions/39852888/xamarin-forms-use-dynamicresource-or-staticresource-depending-on-os
You have two <OnPlatform.Android> elements. I'm assuming the last would be <OnPlatform.WinPhone>.
EDITED
Now that you have that fixed, maybe try this for it to actually work?
<OnPlatform
x:Key="BubbleTextColor"
x:TypedArguments="Color"
iOS="{DynamicResource rightBubbleFontColor}"
Android="{DynamicResource rightBubbleFontColor}"
WinPhone="{StaticResource rightBubbleFontColor}" />
Then bind it where necessary.
Not sure if it will work any differently than what you already have, but I guess it's worth a shot.