I have a Settings table with multiple TableSection under TableRoot:
<TableView HasUnevenRows="True" Intent="Settings">
<TableRoot>
<TableSection Title="Sec1">
<ViewCell>
<StackLayout>
<!-- Items to show, based on value SHow/Hide Sec2-->
</StackLayout>
</ViewCell>
</TableSection>
<TableSection Title="Sec2">
<ViewCell>
<StackLayout x:Name="hideLayout">
<!-- Items to hide -->
</StackLayout>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
I'm not able to dynamically show or hide the TableSection as
TableSection and ViewCell doesn't contain IsVisible property
If hideLayout.IsVisible = false; is set, then there is empty space left in this place
Please provide any suggestion to implement.
Related
I have a slight problem with XamarinForms, which I am fairly new with.
I do have a grid with several Items in it (ListView, Label, Stacklayout, Listview).
I thought setting RowDefinitions = "Auto" for each row, would make the whole Page scrollable.
But instead I have a scrollbar on each individual listView.
I have added a snippet of my code with one of the listViews inside.
How do I get the listViews shown in their full size and the scrollbar be for the whole page?
I have already tried a scrollview instead of the grid, but it did not work.
Picture of Content in Emulator
Picture of Whole Page
Xamarin Forms:
<Grid
Padding="10"
RowDefinitions="Auto,Auto,Auto,Auto"
ColumnDefinitions="*"
>
<Label Padding="20" FontAttributes="Bold" FontSize="40" Text="{Binding DisplayName}" Grid.Row="0"/>
<ListView ItemsSource="{Binding News}"
HasUnevenRows="True"
IsPullToRefreshEnabled="False"
Grid.Row="1">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="10">
<Label Text="{Binding DateTimeString}"/>
<Label Text="{Binding Text}" MaxLines="4"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Header>
<Grid ColumnDefinitions="*,Auto"
Padding="10"
VerticalOptions="Center">
<Label Text="News"
Grid.Column="0"
FontAttributes="Bold"
FontSize="32"/>
<Label Text="mehr Anzeigen"
Grid.Column="1"
HorizontalTextAlignment="End"/>
</Grid>
</ListView.Header>
</ListView>
You can put the items in ScrollView which is capable of scrolling its content.
refer to: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/scrollview
Iam using Carousel view control available in Xamarin form(Version 5).
In my case i used Listviews inside carousel view. It works fine if scroll by swiping to left or right, but if i programmatically set the ScrollTo or Position property for the carousel view using button click then it is scrolling multiple times though i'm setting single incremental value.
I added SnapPointsType="MandatorySingle" as mentioned here
One more issue is if my current carousel position is zero and moving to last position or more then one is not working.
<AbsoluteLayout Margin="2" BackgroundColor="Transparent">
<CarouselView
x:Name="MyCarousalView"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"
Scrolled="CarouselViewScrolled">
<CarouselView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal" ItemSpacing="0" SnapPointsType="MandatorySingle" />
</CarouselView.ItemsLayout>
<CarouselView.ItemTemplate>
<DataTemplate>
<ListView
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
ItemsSource="{Binding .}"
x:FieldModifier="public">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Tapped="ViewCellTapped">
<StackLayout Padding="0">
<StackLayout Padding="20,1" VerticalOptions="StartAndExpand" Spacing="0" >
<Label
FontSize="16"
Text="{Binding Description}"
FontAttributes="Bold"/>
<Label
FontSize="14"
Text="{Binding CreatedDate}" />
</StackLayout>
<Label HorizontalOptions="FillAndExpand" Padding="0" HeightRequest="1" BackgroundColor="#D4D4D4"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
</AbsoluteLayout>
Next button click event
private void NextClicked(object sender, EventArgs e)
{
MyCarousalView.ScrollTo((MyCarousalView.Position + 1) < _weekDaysList.Count ? MyCarousalView.Position + 1 : 0);
}
Carousel view binding:
List<List<Note>> _myList;
_myList=getData(); //based on service response
MyCarousalView.ItemsSource = null;
MyCarousalView.ItemsSource = _myList;
Screen recording with issue image
Screen video
Please letme know if any solution/workaround. Thanks
I have a business requirement to build a flyout menu with multiple columns. The menu will have all the basic flyout behaviors bit it has to have a narrow static column on the left side with 3 buttons in it and then have the regular scrollable flyout menu next to it. Is it possible at this time to do a completely custom layout within xamarin forms shell for the flyout?
You could use the FlyoutContentTemplate to do that.
<Shell.FlyoutContentTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal">
<StackLayout BackgroundColor="Purple">
<Button Text="home" />
<Button Text="dash" />
<Button Text="chat" />
</StackLayout>
<CollectionView
BindingContext="{x:Reference shell}"
IsGrouped="True"
ItemsSource="{Binding FlyoutItems}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Label
FontSize="Large"
Text="{Binding Title}"
TextColor="Black" />
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</DataTemplate>
</Shell.FlyoutContentTemplate>
I have a listview in Xamarin Forms and I have a requirement to maintain aspect ratio but also this:
When an image is taller than it is wide, show the image flush to the left and right with no margins, have the height be auto
When an image is wider than it is tall, the requirement is the same, but this works. In the screenshot it shows how images currently render when they're taller than wide. Changing the aspect property breaks the condition when it is wider than tall. When I copy this template into a blank page, the image displays fine. I think the issue is being able to set the height of each row in the listview to auto. It may not be the issue though. I'm using a SyncFusion listview for Xamarin
Here is the code for the item template of the listview:
<DataTemplate>
<ViewCell>
<StackLayout Margin="0,10,0,10" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<!-- Card Header -->
<!-- Truncated for brevity -->
</Grid>
<StackLayout Grid.Row="1">
<!-- Card title -->
<!-- Truncated for brevity -->
</StackLayout>
<!-- Card Body -->
<StackLayout BindingContextChanged="PostImageStackLayout_BindingContextChanged">
<Grid Grid.Row="2" x:Name="postImageStackLayout" Margin="0,15,0,10">
<!-- Card article image -->
<ffimageloading:CachedImage Grid.Row="0" x:Name="postImage" CacheDuration="1" HeightRequest="300"
Source="{Binding MainIMageURL}" BindingContextChanged="PostImage_BindingContextChanged"
VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
Margin="0,10,0,10" FadeAnimationEnabled="True" Aspect="AspectFit" >
<ffimageloading:CachedImage.GestureRecognizers>
<TapGestureRecognizer Tapped="PostImageTapped" CommandParameter="{Binding }"/>
</ffimageloading:CachedImage.GestureRecognizers>
</ffimageloading:CachedImage>
</Grid>
</StackLayout>
<!--Likes and comment count-->
<!-- Truncated for brevity -->
Don't put fix height on Grid Row where it have the image element. You can use the "auto" value.
<RowDefinition Height="auto"/>
and change the Aspect to
AspectFill
I use the collectionview from the latest Xamarin.Forms 4.3. Here is my sample code
xaml
<ContentView.Content>
<StackLayout>
<CollectionView x:Name="ImagesCollectionView">
<CollectionView.ItemsLayout>
<ListItemsLayout ItemSpacing="20">
<x:Arguments>
<ItemsLayoutOrientation>Vertical</ItemsLayoutOrientation>
</x:Arguments>
</ListItemsLayout>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout>
<ffimageloading:CachedImage
HorizontalOptions="FillAndExpand"
Source="{Binding .}"
Aspect="AspectFill"
LoadingPlaceholder="noimg.png"/>
<Label Text="label"
TextColor="Gray"
Opacity="0.8"
Margin="12,0,0,0"
HorizontalOptions="Start"
FontSize="Small"/>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</ContentView.Content>
c#
public MySecondView()
{
InitializeComponent();
ImagesCollectionView.ItemsSource = new List<string>()
{
"http://insidetema.com/wp-content/uploads/2018/05/170717100550_1_900x600.jpg"
,"https://informationng.com/wp-content/uploads/2014/03/bigstock_Happy_Business_People_With_Han_4049346.jpg"
,"http://www.blt.co.uk/wp-content/uploads/2018/03/Happy-Places.jpg"
};
}
Output
You can set the HeightRequest and WidthRequest of your image to -1 (then it'll fit all the space available)
Im working on styling up my ListView. In my ItemTemplate are only two Labels in a Stacklayout with Vertical Orientation. As you can see in the Picture there are some spacing between the two Labels. I dont want this space and have the Labels direct under each other. Has someone an advice?
ListView with Label-Background
<ListView x:Name="ItemList"
ItemSelected="ItemList_ItemSelected"
HasUnevenRows="True"
IsGroupingEnabled="true"
GroupDisplayBinding="{Binding LongName}"
GroupShortNameBinding="{Binding ShortName}"
SeparatorVisibility="None">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout Orientation="Horizontal"
BackgroundColor="{StaticResource LightGreyColor}"
Padding="20,10,0,10">
<Label Text="{Binding LongName}"
Style="{DynamicResource DateLabel}"/>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout Orientation="Vertical"
Padding="20,10,0,10">
<Label Text="{Binding Name}"
Style="{DynamicResource ItemTitleLabel}"
BackgroundColor="Bisque"/>
<Label Text="{Binding Description}"
Style="{DynamicResource SubTitleLabel}"
BackgroundColor="Bisque"/>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I remember that default spacing between items in StackLayout (and between rows in a Grid) is more than 0. If you want no space between items you can simply add Spacing="0" attribute in your StackLayout.
StackLayout has a default Spacing of 10, you need to set it to 0 if you don't want the spacing between items.