I have a listview in a stacklayout. If the listview is shorter than the height of the stacklayout's container, stacklayout's height should wrap its content. If it is longer, stacklayout will have its max. height and the listview will scroll.
In short, I want to assign a non-static max height to the stacklayout but the following gives it its max. height even though the list is short:
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="Center" BackgroundColor="White">
<Label Text="Hello" FontAttributes="Bold"></Label>
<ListView HasUnevenRows="True" ItemsSource="{Binding options}" VerticalOptions="Start">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding title}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
Is there a way to accomplish this?
Related
I'm trying to implement a CarouselView to display a set of images on my app. Apparently, I can't remove the Whitespace at the Bottom of the CarouselView no matter what combinations I tried.
I've placed BackgroundColor property for CarouselView [Red], Grid[Green] (inside DataTemplate), and IndicatorView [Blue] to see which of them is consuming the rest of the screen despite the lack of StackLayout and it seems that either CarouselView or Grid is causing the unwanted behaviour.
Here's my XAML Code with roughly nothing on the ViewModel but a Mock Database for the Image Collection:
<ContentPage.Content>
<Grid ColumnDefinitions="*"
RowDefinitions="Auto,Auto,Auto,1*">
<Label Grid.Row="0" Grid.Column="0"
Text="CarouselView Test"
TextColor="Black"
FontAttributes="Bold"
FontSize="20"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
Padding="10" />
<CarouselView Grid.Row="1" Grid.Column="0" BackgroundColor="Red" HeightRequest="{Binding ScreenWidth}"
x:Name="TheCarousel"
ItemsSource="{Binding ImageSourceCollection}"
IndicatorView="indicatorView">
<CarouselView.ItemTemplate>
<DataTemplate>
<Grid RowDefinitions="Auto" ColumnDefinitions="Auto" BackgroundColor="Green" HorizontalOptions="Center" VerticalOptions="Center">
<Image Grid.Row="0" Grid.Column="0" Source="{Binding .}" />
</Grid>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView Grid.Row="2" Grid.Column="0" BackgroundColor="Blue"
x:Name="indicatorView"
IndicatorColor="LightGray"
IndicatorSize="10"
SelectedIndicatorColor="Black" />
</Grid>
</ContentPage.Content>
And here's a screenshot of my current build with the CarouselView/Grid consuming most of the Screen Space:
CarouselView has some weird behaviors on size calculating,in your scenario the only way is get the height it(template) needs in code(viewmodel), and bind it to the HeightRequest on CarouselView .
Xaml
<CarouselView HeightRequest="{Binding xxx}"
View model
public double xxx {
get
{
// calculate the height according to the width by ratio
return height;
}
}
I think you need to set Space between rows and columns to Zero if you want to make your indicatorView stick to your CarouselView
So what actually worked for me.
I set Grid Row Definition to ex.(300) and then Carousel Height Request to 350.
I'm setting Image Width based on Screen Width, but I tried it Manually ex (400) and still worked, don't get confused.
<Grid RowDefinitions="300">
<CarouselView x:Name="carouselView"
Grid.Row="0"
ItemsSource="{Binding HomeCarousel}">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Frame HasShadow="False"
CornerRadius="0"
Margin="0"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
HeightRequest="350">
<SwipeView>
<Image Source="{Binding ImageSource}"
Aspect="AspectFill"
WidthRequest="{DynamicResource FullScreenWidth}"
HorizontalOptions="Center" />
</SwipeView>
</Frame>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
</Grid>
<ListView ItemsSource="{Binding SaleProperties}" CachingStrategy="RecycleElement">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Image Source="{Binding ImageUrl}"
HeightRequest="500"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
i'm trying to change the size of my image but it can't exceed this size
Can somebody help me please?
I would like to develop my calendar view as in image. Is it possible with customizing datepicker?
Try some code like it
<ScrollView Orientation = "Horizontal">
<ListView x:Name="datePicker" ItemSelected="OnSelection" IsPullToRefreshEnabled="True" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation = "Vertical" VerticalOptions="Center Padding="5,0,5,0">
<Label Text="{Binding Date}"/>
<Label Text="{Binding month}"/>
<Label Text="{Binding week}" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollView>
You can use th item selection to change the color and inotifypropertychanged to set new values for your grid vector.
Regards
Guilherme Marques
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>
Now that ScrollView ContentSize property is readonly how do I SET
the size of the ScrollView content?
That very same property that is settable in UIScrollView
(but not in xamarin forms)
I have this:
<ScrollView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" HorizontalOptions="FillAndExpand"
x:Name="attachmentScroller"
>
<StackLayout x:Name="AttachmentsView" Orientation="Horizontal" VerticalOptions="Fill"/>
</ScrollView>
what I've tried is setting AttachmentsView.MinimumWidthRequest to the desired contentWidth;
But that does not seem to expand the parent's scrollview content width
to the desired value.
You can set the set of the content size, by setting the property of the content, instead of the the ScrollView.
Here's it in xaml
<ScrollView>
<StackLayout HeightRequest="100" />
</ScrollView>
To stop the scroll view restricting the size of the contained content to its own size, ensure you set
ScrollView Orientation="Horizontal" or "Both" or "Vertical" respectively.
i.e. for your example -
<ScrollView Orientation="Horizontal" Grid.Row="1"
Grid.Column="0" Grid.ColumnSpan="3"
HorizontalOptions="FillAndExpand"
x:Name="attachmentScroller">
<StackLayout WidthRequest="1000" x:Name="AttachmentsView"
Orientation="Horizontal" VerticalOptions="Fill"/>
</ScrollView>