My label text is overflowing beyond Grid, why?
<AbsoluteLayout x:Name="alIFirst" AbsoluteLayout.LayoutBounds="1,1,1,.50" AbsoluteLayout.LayoutFlags="All" BackgroundColor="#90000000">
<StackLayout>
<StackLayout>
<Label Style="{StaticResource beNewsSnapLabel}" Text="{Binding News_Item_Title_1}"/>
</StackLayout>
<StackLayout>
<Label Style="{StaticResource beNewsSnapLabelContent}" Text="{Binding News_Item_Description_1}"/>
</StackLayout>
</StackLayout>
</AbsoluteLayout>
Related
I have one list and i don't want to use listview inside it as how can i make it scrollable, data is binding but i am not able to scroll it.
<Grid Grid.Row="0" IsVisible="{Binding SearchListLayout}" Margin="0" Padding="0" BackgroundColor="White">
<ScrollView>
<StackLayout BindableLayout.ItemsSource="{Binding ProductsList}" x:Name="SearchLayoutItemList" HeightRequest="255">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Grid RowDefinitions="37,Auto">
<Image Grid.Row="0" Source="searchingicon.png" Style="{DynamicResource icons}"/>
<Label Grid.Row="0" Text="{Binding name}" FontSize="14" TextColor="Black" Margin="50,0,0,0" HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand"/>
<Image Grid.Row="0" Source="reload.png" Style="{DynamicResource icons}" HorizontalOptions="EndAndExpand" Margin="0,0,15,0"/>
<BoxView Grid.Row="1" Style="{DynamicResource DarkSeparator}" />
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</ScrollView>
</Grid>
Although the BindableLayout technically can display your list of items via the StackLayout, and the StackLayout height is being restraint to your height request; the encompassing ScrollViewer has nothing to scroll since it fully contains your StackLayout.
To achieve what you probably want (a fixed 255 pixel StackLayout that scrolls your items) the ScrollViewer should be inside the StackLayout as the rendered ItemsPanel for you Items. Again, you could achieve this with custom BindableLayouts, but this is exactly what Xamarin Forms ListView does by default.
You probably simply want to change your BindableLayout implementation to a ListView:
<Grid Grid.Row="0" IsVisible="{Binding SearchListLayout}" Margin="0" Padding="0" BackgroundColor="White">
<ListView ItemsSource="{Binding ProductsList}" x:Name="SearchLayoutItemList" HeightRequest="255">
<ListView.ItemTemplate>
<DataTemplate>
<Grid RowDefinitions="37,Auto">
<Image Grid.Row="0" Source="searchingicon.png" Style="{DynamicResource icons}"/>
<Label Grid.Row="0" Text="{Binding name}" FontSize="14" TextColor="Black" Margin="50,0,0,0" HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand"/>
<Image Grid.Row="0" Source="reload.png" Style="{DynamicResource icons}" HorizontalOptions="EndAndExpand" Margin="0,0,15,0"/>
<BoxView Grid.Row="1" Style="{DynamicResource DarkSeparator}" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
The scrollview could not scroll as you set the HeightRequest="255" for the stacklayout in the scrollview. That because the display content's height is equal with the Scrollview, left content was covered.
Then I remove the HeightRequest
in StackLayout, the ScrollView could scroll. But the scrollview will fill the whole page which I thought is not what you want. So you could add parent layout Stacklayout outside the scrollview which set the size of scrollview equal to 255 and let it scroll at the same time. I just made an example :
<StackLayout>
<ScrollView HeightRequest="255">
<StackLayout BindableLayout.ItemsSource="{Binding ItemCollection}" x:Name="SearchLayoutItemList" >
<BindableLayout.ItemTemplate>
<DataTemplate>
<Grid RowDefinitions="37,Auto">
<Image Grid.Row="0" Source=""searchingicon.png"" />
<Label Grid.Row="0" Text="{Binding name}" FontSize="14" TextColor="Black" Margin="50,0,0,0" HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand"/>
<Image Grid.Row="0" Source="reload.png" HorizontalOptions="EndAndExpand" Margin="0,0,15,0"/>
<BoxView Grid.Row="1" BackgroundColor="Yellow"/>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</ScrollView>
</StackLayout>
For more info, you could refer to Xamarin.Forms ScrollView.
Hope it works for you.
I am trying to disable scrolling in my collection view. The reason why I want to do that is there is a scroll view already in my XAML code. When I try to scroll all page elements on the page, collection view elements are also scrolled themselves but I don't want that.
<ScrollView>
<StackLayout Padding="20" Spacing="20" >
<Frame CornerRadius="15"
BackgroundColor="#A6EDB3"
VerticalOptions="StartAndExpand"
HeightRequest="200"
IsClippedToBounds="True"
Padding="0" >
<StackLayout Padding="10,5,10,5"
Orientation="Horizontal" >
<Image Source="settingsIcon"
HeightRequest="25"
WidthRequest="25"
Aspect="Fill" />
<Label Text="Filter"
FontSize="Medium"
VerticalTextAlignment="Center"
VerticalOptions="Center"/>
</StackLayout>
</Frame>
<Label Text="Vocabulary topics" TextColor="black" FontSize="20" FontAttributes="Bold" ></Label>
<CollectionView x:Name="topics" Scrolled="topics_Scrolled" VerticalScrollBarVisibility="Never" >
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="0,10,0,10">
<Frame HasShadow="False"
HeightRequest="60"
CornerRadius="15"
BackgroundColor="{Binding BackgroundColor}"
HorizontalOptions="Fill" >
<StackLayout Orientation="Horizontal">
<Frame BackgroundColor="{Binding BoxColor}" WidthRequest="40" ></Frame>
<StackLayout>
<Label Text="{Binding Name}"></Label>
</StackLayout>
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</ScrollView>
Having two scrolls on the same page is not the correct way.
Also if you just want to place items above/below your collectionView use the Header/Footer properties then!!
For instance, for the current design, your CollectionView could look something like below and work as you want it to.
<CollectionView Padding="20" x:Name="topics" Scrolled="topics_Scrolled" VerticalScrollBarVisibility="Never" >
<CollectionView.Header>
<StackLayout Spacing="20" >
<Frame CornerRadius="15"
BackgroundColor="#A6EDB3"
VerticalOptions="StartAndExpand"
HeightRequest="200"
IsClippedToBounds="True"
Padding="0" >
<StackLayout Padding="10,5,10,5"
Orientation="Horizontal" >
<Image Source="settingsIcon"
HeightRequest="25"
WidthRequest="25"
Aspect="Fill" />
<Label Text="Filter"
FontSize="Medium"
VerticalTextAlignment="Center"
VerticalOptions="Center"/>
</StackLayout>
</Frame>
<Label Text="Vocabulary topics" TextColor="black" FontSize="20" FontAttributes="Bold" ></Label>
</StackLayout>
</CollectionView.Header>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="0,10,0,10">
<Frame HasShadow="False"
HeightRequest="60"
CornerRadius="15"
BackgroundColor="{Binding BackgroundColor}"
HorizontalOptions="Fill" >
<StackLayout Orientation="Horizontal">
<Frame BackgroundColor="{Binding BoxColor}" WidthRequest="40" ></Frame>
<StackLayout>
<Label Text="{Binding Name}"></Label>
</StackLayout>
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Note: you might have to adjust the margin and padding properties for it to look the exact same. My code is just an example.
For more information on CollectionView check: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/
You can use InputTransparent.
In your case what I would do would be to wrap the CollectionView in a <ContentView> as:
<ContentView InputTransparent="True"
x:Name="content">
<CollectionView ItemsSource="{Binding Items}"...>
...
</CollectionView>
</ContentView>
Create a scroll event to your scroll view:
<ScrollView Scrolled="ScrollView_Scrolled">
...
</ScrollView>
Then, with this event, make sure that the InputTransparent switches depending on the scroll position:
private void ScrollView_Scrolled(object sender, ScrolledEventArgs e)
{
var scrollView = sender as ScrollView;
// Get the height of your scroll view
var contentSize = scrollView.ContentSize.Height;
// Get the max position of the scrollview
var maxPos = contentSize - scrollView.Height;
// Compare it to the current position
if (Convert.ToInt16(e.ScrollY) >= Convert.ToInt16(maxPos))
{
// Switch input transparent value
content.InputTransparent = false;
}
else if (Convert.ToInt16(e.ScrollY) == 0)
{
content.InputTransparent = true;
}
}
This is perfectly fine to use two scrollable controls on the same page for what you want to do. And I don't think <CollectionView.Header> would give you the result you want.
I hope it was helpful! 🙂
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.
I'm having problem with not being able to stack two labels in a StackLayout and fit the content without a margin.
Expected result:
Current output:
I have tried and set the VerticalOptions, Margin and Padding properties but it still contains the margin (the red background) as well as the second content is not touching the "ceiling" of it's StackLayout parent.
Current code:
<ViewCell>
<StackLayout Orientation="Horizontal" VerticalOptions="Start">
<StackLayout HorizontalOptions="Center" VerticalOptions="Center">
<Image Source="summary.png"/>
</StackLayout>
<StackLayout Orientation="Vertical" VerticalOptions="Start" BackgroundColor="Red" Margin="0" Padding="0">
<StackLayout BindingContext="{Binding Date}" VerticalOptions="Start" BackgroundColor="Beige" Margin="0" Padding="0">
<Label Text="{Binding Text}" TextColor="{Binding Color}" VerticalOptions="Start"/>
</StackLayout>
<StackLayout BindingContext="{Binding Result}" VerticalOptions="Start" BackgroundColor="Blue" Margin="0" Padding="0">
<Label Text="{Binding Text}" TextColor="{Binding Color}" FontSize="{Binding FontSize}" VerticalOptions="Start"/>
</StackLayout>
</StackLayout>
</StackLayout>
</ViewCell>
It seems that there is a confirmed Bug in Xamarin.Forms in iOS, when you have a content/label with a text too large that needs 2 lines to display it in a StackLayout (lets say layoutA), the others siblings and parent elements takes the width of the layoutA.
Kent Boogaart filled a Bug with the following example to reproduce the error.
<StackLayout Margin="0,20,0,0">
<!-- works (by virtue of no wrapping) -->
<StackLayout Orientation="Horizontal">
<Switch/>
<Label Text="Some text"/>
<Button Text="A Button" HorizontalOptions="EndAndExpand"/>
</StackLayout>
<!-- works (by virtue of no switch) -->
<StackLayout Orientation="Horizontal">
<Label Text="Some longer text that wraps over two lines"/>
<Button Text="A Button" HorizontalOptions="EndAndExpand"/>
</StackLayout>
<!-- does not work -->
<StackLayout Orientation="Horizontal">
<Switch/>
<Label Text="Some longer text that wraps over two lines"/>
<Button Text="A Button" HorizontalOptions="EndAndExpand"/>
</StackLayout>
</StackLayout>
Is there a solution/fix/workaround for this problem?
EDIT
Here is the code used:
<ListView HasUnevenRows="True" SeparatorVisibility="None" HorizontalOptions="StartAndExpand" CachingStrategy="RecycleElement">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="#eee" Padding="5" Margin="5" >
<ffimageloading:CachedImage HorizontalOptions="Start" VerticalOptions="Start" HeightRequest="75" Source="{Binding ID, StringFormat='https://example/api/{0}'}" CacheDuration="15">
<ffimageloading:CachedImage.Transformations>
<fftransformations:CircleTransformation/>
</ffimageloading:CachedImage.Transformations>
</ffimageloading:CachedImage>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
<Label Text="{Binding Name}" TextColor="#f35e20" HorizontalOptions="FillAndExpand"/>
<Label Text="{Binding Description}" HorizontalOptions="FillAndExpand" TextColor="#503026" />
<Label Text="{Binding ID}" x:Name="ID" IsVisible="False"></Label>
<Button Text="Ver productos" TextColor="#FF5F6D" HorizontalOptions="End" BackgroundColor="Transparent"></Button>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
These are actual screenshots of the app in iOS, in Android it just work great.
As you can see, in the Image1 the first card is OK, the button ("Agregar al carrito" or "Ver Productos") is at the end.
But in the second card as the text is too large, the button gets down out of the card.
And in the second image, the text in the middle needs 2 lines, and the StackLayout that wraps the content (the 2 labels and the button) gets just as wide as the label with the large text.
I draw a red square in the large text, and a red line so you can see that because of that large text, the StackLayout gets narrow.
This is a known issue that when setting the padding on stacklayout inside Cell , the row height displays incorrectly.
Solution: Use StackLayout to wrap the content under the Cell.
<ViewCell>
<StackLayout > //add this
<StackLayout Orientation="Horizontal" Padding="5" Margin="5" >
</ffimageloading:CachedImage>
<StackLayout BackgroundColor="Brown" Orientation="Vertical">
<Label TextColor="#f35e20" HorizontalOptions="FillAndExpand"/>
<Label/>
<Label Text="fff" x:Name="ID" IsVisible="False"></Label>
<Button Text="Ver productos" TextColor="#FF5F6D" BackgroundColor="Yellow"></Button>
</StackLayout>
</StackLayout>
</StackLayout>
</ViewCell>