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>
Related
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"
>
....
In my App.xaml file, I have the following static resources defined...
<x:String x:Key="StaticString1">static string 1</x:String>
<x:String x:Key="StaticString2">static string 2 using {StaticResource StaticString1}</x:String>
In the content view (on another page), I want to display StaticString2 and have it automatically pull in StaticString1 but it isn't working.
I want it to say "static string 2 using static string 1" but instead it just shows a literal with the curly braces ("static string 2 using {StaticResource StaticString1}").
Is it possible to do this in static resources or do I need to use a <Label.FormattedText> with <Span>s ?
No, I don't think you can combine two strings in the xaml.
You can use <Label.FormattedText> with <Span> as you mentiond to achieve this:
<ContentPage.Content>
<StackLayout>
<Label >
<Label.FormattedText>
<FormattedString>
<Span TextColor="Black" FontSize="18" Text="{StaticResource StaticString2}"/>
<Span TextColor="Black" FontSize="18" Text=" "/>
<Span TextColor="Black" FontSize="18" Text="{StaticResource StaticString1}"/>
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>
</ContentPage.Content>
And in App.xaml:
<x:String x:Key="StaticString1">static string 1</x:String>
<x:String x:Key="StaticString2">static string 2 using </x:String>
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>
Hi I am new to Xamarin Forms and am from native iOS development.
For showing alerts / action sheets I am using this https://github.com/aritchie/userdialogs.
For implementing this I followed this How to use Acr.UserDialogs.
I am getting alert successfully by following this, but now I need to customise the OK / Cancel Button's background color, alignment, frame values, hide and show the buttons..
Thanks in advance.
I need to customise the OK / Cancel Button's background color, alignment, frame values, hide and show the buttons.
As the author said, you could do this by creating a style and apply it in AlertConfig.
For example:
In the style.xml:
<style name="AlertDialogCustom" parent="Theme.AppCompat.Light.Dialog.Alert">
<!-- Used for the buttons -->
<item name="colorAccent">#AAAAAA</item>
<!-- Used for the title and text -->
<item name="android:textColorPrimary">#FFFFFF</item>
<!-- Used for the background -->
<item name="android:background">#DDDDDD</item>
<!-- Used for the Alignment -->
<item name="android:gravity">center_horizontal</item>
</style>
And you could find this style Id in the Resource.Designer.cs.
// aapt resource value: 0x7f0b0189
public const int AlertDialogCustom = 2131427721;
Then in the code create a AlertConfig to config the alertdialog:
AlertConfig alertConfig = new AlertConfig();
alertConfig.OkText = "OKOK";
alertConfig.Message = "Message";
alertConfig.Title = "Title";
alertConfig.AndroidStyleId=2131427721;
UserDialogs.Instance.Alert(alertConfig);
With Rg.Plugins.Popup Nuget you can customize the popup.
Finally I am not using any nugget packages. Now I created my own CustomAlert class. I hope it will helpful for any one.
#Miguel Angel please look at below code
In my CustomAlert.xaml file
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="wwww/2009/xaml" x:Class="MY.UserControls.CustomAlert">
<Grid RowSpacing="0" ColumnSpacing="0">
<Grid BackgroundColor="#656565" Opacity="0.5">
</Grid>
<StackLayout BackgroundColor="{StaticResource WhiteColor}" VerticalOptions="Center" Margin="10" Padding="10" >
<Label Text="Title" FontSize="18" HorizontalTextAlignment="Center" Margin="0,0,0,0" TextColor="Black"></Label>
<Label Text="Descrption." FontSize="14"
HorizontalTextAlignment="Start"
Margin="10,10,5,5"
VerticalOptions="Center" TextColor="Gray"></Label>
<Button Text="OK" TextColor="{StaticResource WhiteColor}"
Command="{Binding DismissCustomAlertCommand}"
HorizontalOptions="Center" VerticalOptions="Center"
BackgroundColor="Red" Margin="30,0,30,0" WidthRequest="400" HeightRequest="40"></Button>
</StackLayout>
</Grid>
</ContentView>
Thank you
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.