I'm learning how to use <TableView> in Xamarin Forms and I wrote this:
<TableView Intent="Form">
<TableRoot>
<TableSection Title="Random values">
<EntryCell Label="A beautiful first number" Placeholder="1" Keyboard="Numeric"/>
<EntryCell Label="2nd num" Placeholder="2" Keyboard="Numeric"/>
</TableSection>
</TableRoot>
</TableView>
How can I set the same width to each <entry cell>? I don't want the input parts to start in different horizontal positions.
To my knowledge , Custom Cell would be the good choice to achieve that . Because Entry Cell hasn't a propery to set Width of Label .
Using View Cell can contain Layout to fit your needs as follow :
<TableView Intent="Form" >
<TableRoot>
<TableSection Title="Random values">
<EntryCell Label="A beautiful first number"
Placeholder="1 Entry Cell"
Keyboard="Numeric" />
<EntryCell Label="2nd num"
Placeholder="2 Entry Cell"
Keyboard="Numeric" />
<ViewCell>
<StackLayout Orientation="Horizontal"
Padding="2">
<Label Text="A beautiful first number"
WidthRequest="150"
Margin="5,0,0,0"
VerticalOptions="CenterAndExpand"/>
<Entry Placeholder="1 View Cell" WidthRequest="250"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal" Padding="2" >
<Label Text="2nd num"
WidthRequest="150"
Margin="5,0,0,0"
VerticalOptions="CenterAndExpand" />
<Entry Placeholder="2 View Cell"
WidthRequest="250" />
</StackLayout>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
The effect :
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>
I have a CarouselView with inside a ScrollView .
I've seen it plastered across documentation that it's not advisable to nest a scrollview inside any other scrollable layout, but what else can I do when I need to be able to scroll between items and each item must have scrollable content also.
Now my problem is with iOS (with all version after 10+) and Android (will all version after 6+). Let's assume we have 10 items and during the first display I make a vertical scroll in the middle of the content. When I get to the fifth view it is not displayed as a new element and therefore from the top but in the middle. If I do it to the second, the sixth mirrors the second and so on. In practice it seems that the views are linked by 5 in 5.
Here is my simple code:
<CarouselView ItemsSource="{Binding Monkeys}"
HorizontalScrollBarVisibility="Never" >
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout Orientation="Vertical" Spacing="0">
<ScrollView VerticalScrollBarVisibility="Never" HorizontalScrollBarVisibility="Never" >
<StackLayout>
<Image
Source="{Binding ImageUrl}" HeightRequest="350"
Aspect="AspectFill" />
<Label Text="{Binding Name}"
LineBreakMode="TailTruncation"/>
<Label Text="{Binding Details}" FontSize="35" />
<Label Text="{Binding Details}" FontSize="35" TextColor="Aqua"/>
<Label Text="{Binding Details}" FontSize="35" TextColor="Fuchsia"/>
<Label Text="{Binding Details}" FontSize="35" TextColor="OliveDrab"/>
</StackLayout>
</ScrollView>
<Label Text="Fixed Button" BackgroundColor="Red" TextColor="White" HeightRequest="50" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
GIF dimostration
I am trying to place items in CollectionView horizentally in one row as each item should fill the screen width. However, in the current setup it doesn't fill width of the screen. What I am looking is one item at a time in the horizental direction.
<DataTemplate x:Key="UpdateRecentItemTemplate">
<ContentView BackgroundColor="Yellow" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<yummy:PancakeView Style="{StaticResource Pancake}" VerticalOptions="Center" HeightRequest="80" BackgroundGradientStartPoint="0,0" BackgroundGradientEndPoint="0,1">
<yummy:PancakeView.Shadow>
<yummy:DropShadow Color="{Binding BindingContext.FirstColor, Source={x:Reference MyPage}}" BlurRadius="1"></yummy:DropShadow>
</yummy:PancakeView.Shadow>
<yummy:PancakeView.BackgroundGradientStops>
<yummy:GradientStopCollection>
<yummy:GradientStop Color="{Binding BindingContext.FirstColor, Source={x:Reference MyPage}}" Offset="0" />
<yummy:GradientStop Color="{Binding BindingContext.SecondColor, Source={x:Reference MyPage}}" Offset="1" />
</yummy:GradientStopCollection>
</yummy:PancakeView.BackgroundGradientStops>
<StackLayout VerticalOptions="Center" BackgroundColor="Transparent">
<Label Grid.Row="0">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding ChapterID, StringFormat=' {0} '}" FontSize="Small"/>
<Span Text="{Binding ArabicEnglishName, StringFormat=' {0} '}" FontSize="Medium" FontAttributes="Bold"/>
</FormattedString>
</Label.FormattedText>
</Label>
<Label Grid.Row="1">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding AyaNumber, StringFormat=' Ayat No. {0}'}" FontSize="Medium"/>
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>
</yummy:PancakeView>
</ContentView>
[![<Grid HeightRequest="140" Padding="0" BackgroundColor="Red">
<CollectionView ItemsSource="{Binding Recents}"
VerticalScrollBarVisibility="Never" HorizontalScrollBarVisibility="Never" HorizontalOptions="FillAndExpand"
ItemTemplate="{StaticResource UpdateRecentItemTemplate}" x:Name="RecentView">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Horizontal" HorizontalItemSpacing="5" Span="1" />
</CollectionView.ItemsLayout>
</CollectionView>
</Grid>
The easiest would be to use Carouselview instead of CollectionView. With Carouselview we can manage to show one item at a time horizentally. So changed CollectionView with Carouselview and it worked. Additionally, I had only 4 items to show one at a time, so in this case Carouselview is more approperiate then CollectionView.
```
<pages:PopupPage.Resources>
<local1:ChangeFrameBackgroudColor x:Key="ChangeFrameBackgroudColor" />
</pages:PopupPage.Resources>
<pages:PopupPage.Animation>
<animations:ScaleAnimation DurationIn="400"
DurationOut="300"
EasingIn="SinOut"
EasingOut="SinIn"
HasBackgroundAnimation="True"
PositionIn="Center"
PositionOut="Center"
ScaleIn="1.2"
ScaleOut="0.8" />
</pages:PopupPage.Animation>
<StackLayout Margin="12"
BackgroundColor="WhiteSmoke"
HorizontalOptions="Center"
VerticalOptions="Center"
>
<StackLayout>
<ListView x:Name="list" HasUnevenRows="True" ItemsSource="{Binding Firms}" SelectedItem="{Binding FirmId} " Header="{Binding}" ItemTapped="Choose_firm" SelectionMode="Single" Margin="0" >
<ListView.ItemTemplate >
<DataTemplate>
<local:ExtendedViewCell SelectedBackgroundColor="WhiteSmoke" >
<StackLayout Padding="20, 10" >
<Frame x:Name="frameLabel" BorderColor="#2188ff" BackgroundColor="{Binding IsActive, Converter={StaticResource ChangeFrameBackgroudColor}}" CornerRadius="10">
<Label FontAttributes="Bold" FontSize="18" TextColor="Black" Text="{Binding Name}" ></Label>
</Frame>
</StackLayout>
</local:ExtendedViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.HeaderTemplate>
<DataTemplate>
<ContentView BackgroundColor="#006BE6" >
<Label Margin="10" HorizontalOptions="CenterAndExpand" Text="Choose Firm" TextColor="White" FontSize="20" FontAttributes="Bold"/>
</ContentView>
</DataTemplate>
</ListView.HeaderTemplate>
</ListView>
<StackLayout VerticalOptions="End" Orientation="Horizontal" >
<Label Text="Check Default:" FontSize="18" />
<CheckBox IsChecked="False" Color="#006BE6" ></CheckBox>
</StackLayout>
</StackLayout>
<StackLayout Orientation="Horizontal" VerticalOptions="Center" HorizontalOptions="Center" Margin="0,0,0,10">
<Button Text="CHANGE" BackgroundColor="#006BE6" IsEnabled="{Binding !IsBusy}" TextColor="White" Command="{Binding LoadFirmCommand}" CommandParameter="{Binding FirmId}" CornerRadius="10"></Button>
<Button Text="CANCEL" BackgroundColor="Gray" IsEnabled="{Binding !IsBusy}" TextColor="White" Clicked="ClosePopUp" CornerRadius="10"></Button>
</StackLayout>
</StackLayout>
</pages:PopupPage>
In first StackLayout i got ListView with only 3 elements. After that is lot empty space , and at the bottom of the PopUp are other two StackLayouts. I tried with Margins , Padding but nothing changed. I don't know what is the problem. Why is so much space. The bottom two StackLayouts dont have space between. How to solve this empty space?
I have not ran your code, but, looking at your XAML I can see that for your stack layout in the vertical option we tell it to end
<StackLayout VerticalOptions="End" Orientation="Horizontal" >
<Label Text="Check Default:" FontSize="18" />
<CheckBox IsChecked="False" Color="#006BE6" ></CheckBox>
However, Note how it is wrapped in the parent stack layout. Since it doesn't have a height request, it simply obeys what it was told to do. The parent stacklayout is the one where the list view is defined. So it loads the list view and then it renders the other stack layout at the bottom (End), does causing the massive gap
so in essence:
<StackLayout VerticalOptions="End" Orientation="Horizontal" >
<Label Text="Check Default:" FontSize="18" />
<CheckBox IsChecked="False" Color="#006BE6" ></CheckBox>
</StackLayout>
</StackLayout>
Goes To:
</StackLayout>
<StackLayout VerticalOptions="End" Orientation="Horizontal" >
<Label Text="Check Default:" FontSize="18" />
<CheckBox IsChecked="False" Color="#006BE6" ></CheckBox>
</StackLayout>
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>