I am trying to build Xaml for Xamarin , I am able to get the UI But the label is not getting binded. (Android Platform)
Also tried Text="{Binding Name}" for label. But not getting any labels rendered. Do i need to write up any additional code ?
<ContentPage.Content>
<ListView SelectedItem="{Binding SelectedResult}" x:Name="listview1" ItemsSource="{Binding QueryResults}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame Padding="0,0,0,10">
<Frame.Content>
<Frame Padding="15,15,15,15" HeightRequest="36" OutlineColor="Aqua" BackgroundColor="Blue">
<Frame.Content>
<StackLayout Padding="20,0,0,0" Orientation="Horizontal" HorizontalOptions="StartAndExpand">
<Label Text="label text for test" TextColor="Yellow">
</Label>
</StackLayout>
</Frame.Content>
</Frame>
</Frame.Content>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
It worked for me.
Here is the code:
`
<Frame Padding="15,15,15,15" HeightRequest="36" OutlineColor="Aqua" BackgroundColor="Blue">
<Frame.Content>
<StackLayout Padding="20,0,0,0" Orientation="Horizontal" HorizontalOptions="StartAndExpand">
<Label Text="{Binding Name}" TextColor="Yellow">
</Label>
</StackLayout>
</Frame.Content>
</Frame>
`
There was frame inside frame so it was overlapping.
Hope this helps!
Even though very late reply after 3 months :p
Related
collectionview contains a label and StackLayout and its contents. The label is showing but StackLayout contents not showing and only if maximizes the windows it appears in UWP.this strange behaviour only occurring in uwp, not happening with ios or android. used xamarin.forms 5.0.0.2337
<CollectionView
ItemsSource="{Binding Details}"
SelectionMode="None"
>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="20,0"
RowDefinitions="auto,auto">
<Label Text="DateTime" IsVisible="{Binding IsDateVisible}" />
<StackLayout Orientation="Horizontal"
Grid.Row="1"
IsVisible="{Binding IsDateVisible}">
<DatePicker Date="{Binding DateValue, Mode=TwoWay}"
Format="MMMM dd, yy"
HorizontalOptions="Start"
MaximumDate="{x:Static sys:DateTime.Now}"
/>
<TimePicker Time="{Binding TimeValue, Mode=TwoWay}"
IsVisible="{Binding IsDateVisible}"
HorizontalOptions="Start"
/>
</StackLayout>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
StackLayout and its contents not showing inside a collectionview if maximizes the windows it appears in UWP with Xamarin.Forms
It looks know issue for CollectionView, please vote up this report and Keep an eye on the following update, currently the workaround is use listview to replace.
<ListView SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="20,0" RowDefinitions="auto,auto">
<Label IsVisible="true" Text="DateTime" />
<StackLayout
Grid.Row="1"
IsVisible="true"
Orientation="Horizontal">
<DatePicker
Format="MMMM dd, yy"
HorizontalOptions="Start"
MaximumDate="{x:Static sys:DateTime.Now}" />
<TimePicker HorizontalOptions="Start" IsVisible="true" />
</StackLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
PFB the code for my list view,
<ListView HasUnevenRows="true" ItemsSource="{Binding UserEmailList}" IsGroupingEnabled="true">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout Orientation="Vertical" Spacing="0" Margin="0" Padding="0">
<BoxView Style="{StaticResource separator}"></BoxView>
<Label Text="{Binding Heading}" Style="{StaticResource labelHeaderTitle}" />
<BoxView Style="{StaticResource separator}"></BoxView>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout Orientation="Horizontal" Spacing="0" >
<StackLayout IsVisible="{Binding UserEmailDetails.HasEmailAddress}" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label Text="{Binding UserEmailDetails.EmailAddress}" Style="{StaticResource labelListItem}" HorizontalOptions="FillAndExpand">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="SelectEmailAddress_Tapped" CommandParameter="{Binding UserEmailDetails}" />
</Label.GestureRecognizers>
</Label>
<Image HeightRequest="16" HorizontalOptions="End" VerticalOptions="Center" Source="arrow.png" Margin="0,0,15,0">
</Image>
</StackLayout>
<StackLayout IsVisible="{Binding UserEmailDetails.HasEmailAddress, Converter={StaticResource NotConverter}}" Padding="15,0,0,0">
<Label Text="Add email" Style="{StaticResource labelLink}">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="SelectEmailAddress_Tapped" CommandParameter="{Binding UserEmailDetails}" />
</Label.GestureRecognizers>
</Label>
</StackLayout>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Even if there are only two rows, on IOS multiple empty rows are getting populated as in the below snapshot.
Please let me know how to avoid this and hav things working in both Android and IOS
I would hide the Separator by setting SeparatorVisibility="None" on ListView Property. If you still need the Separator I would define in the ViewCell.
<ListView HasUnevenRows="true" SeparatorVisibility="None">
The other way is to put Empty Footer on List View:
<ListView>
<ListView.Footer>
<Label />
</ListView.Footer>
</ListView>
I hope one of these helps you. Let me know if anything.
In my Xamarin.Forms app, I have a ListView:
<ListView ItemsSource="{Binding MyItems}"
Grid.Row="1"
Margin="0,20,0,0">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Label Text="ABC" FontSize="Large" TextColor="Black" BackgroundColor="Red" Margin="20" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Where the "ABC" should appear, is only a thin red line for the background of the label. I don't see the actually letters. I've made many ListView before with no problem, I don't know what I'm doing wrong here?
ViewCell needs to contain a layout control, otherwise it will not render correctly.
For simplicity, you could implement a StackLayout:
<ListView
ItemsSource="{Binding MyItems}"
Grid.Row="1"
Margin="0,20,0,0>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout
HorizontalOptions="FillAndExpand"
Margin="0"
Padding="0"
Spacing="0"
VerticalOptions="Fill">
<Label
BackgroundColor="Red"
FontSize="Large"
HorizontalOptions="FillAndExpand"
HorizontalTextAlignment="Center"
Margin="20"
Text="ABC"
TextColor="Black"
VerticalOptions="FillAndExpand"
VerticalTextAlignment="Center"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I'm looking for a way to dynamically generate card-like controls that look like these:
I have been doing some search and have found this article that shows you how to implement CardView on a Xamarin.Android project. But I'm using Xamarin.Forms so I can compile for iOS as well.
I also tried to use a ListView with ViewCells and a couple StackLayout tags, but wasn't able to even get close to that, here is the code:
<ListView x:Name="listView">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Height="300">
<StackLayout>
<StackLayout Orientation="Horizontal">
<Image Source="{Binding UserAvatar}" />
<Label Text="{Binding UserName}" />
</StackLayout>
<Image Source="{Binding BittImage}" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I'm pretty new to Xamarin, so if I'm missing something basic, please let me know guys.
You are on the right track. Use a ListView, with a Frame as the root element and a margin, and set the background color of the ListView as appropriate. This should give you the card look. Then you fill in the card as you require.
<ListView x:Name="listView" BackgroundColor="Gray">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Height="300">
<Frame HasShadow="true" Margin="5">
<StackLayout>
<StackLayout Orientation="Horizontal">
<Image Source="{Binding UserAvatar}" />
<Label Text="{Binding UserName}" />
</StackLayout>
<Image Source="{Binding BittImage}" />
</StackLayout>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
In this StackLayout content for ViewCell if I put FontSize="Large" attribute for first label it is rendered on top of label two.
Looks like it's changed height is not taken into account when sizing whole ViewCell.
Problem exists on Android, layout works OK on Windows Phone Emulator, or when used without ListView.
<ListView x:Name="listView" BackgroundColor="Red">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<Label Text="LABEL ONE" FontSize="Large" BackgroundColor="Green" />
<Label Text="LABEL TWO" BackgroundColor="Yellow" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Am I missing something or is it a bug in layouting of Xamarin.Forms generated content?
Try with this. You forgot the ViewCell.View mark.
<ListView x:Name="listView" BackgroundColor="Red">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout>
<Label Text="LABEL ONE" FontSize="Large" BackgroundColor="Green" />
<Label Text="LABEL TWO" BackgroundColor="Yellow" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>