How to Sticky StackLayout in Scrollview Xamarin - xamarin.forms

Question

I'm trying to Sticky x:Name="_menucate" when scrolling like the example on Twitter
[![enter image description here][1]][1]
[![enter image description here][2]][2]
<ScrollView x:Name="scrollmain" Scrolled="scrollmain_Scrolled" VerticalScrollBarVisibility="Never" HorizontalScrollBarVisibility="Never" Margin="0,0,0,0">
<StackLayout>
<StackLayout>
<Frame/>
<Frame/>
<Frame/>
<Frame/>
</StackLayout>
<StackLayout>
<ScrollView x:Name="_menucate" Orientation="Horizontal" VerticalScrollBarVisibility="Never" HorizontalScrollBarVisibility="Never">
<Grid Margin="0" Padding="5,0" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" ColumnSpacing="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="0" HorizontalOptions="FillAndExpand">
<Label Text="Menu 1" />
</Grid>
<Grid Grid.Row="0" Grid.Column="1" HorizontalOptions="FillAndExpand">
<Label Text="Menu 2" />
</Grid>
</Grid>
</ScrollView>
<StackLayout>
<Frame/>
<Frame/>
</StackLayout>
</StackLayout>
</StackLayout>
</ScrollView>
Page1.xaml.cs
public Page1()
{
scrollmain.PropertyChanged += Scrollmain_PropertyChanged;
_menucate.SizeChanged += _menucate_SizeChanged;
}
double _titleTextTop;
private void _menucate_SizeChanged(object sender, EventArgs e)
{
_menucate.SizeChanged -= _menucate_SizeChanged;
_titleTextTop = _menucate.Y;
}
private void Scrollmain_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
if (e.PropertyName.Equals(Xamarin.Forms.ScrollView.ScrollYProperty.PropertyName))
{
var scrolled = ((Xamarin.Forms.ScrollView)sender).ScrollY;
if (scrolled < _titleTextTop)
_menucate.TranslationY = (0 - scrolled);
else
_menucate.TranslationY = (0 - _titleTextTop);
}
}
private void scrollmain_Scrolled(object sender, ScrolledEventArgs e)
{
//Load more other
}
I have tried to do as the code above. However it doesn't work. Maybe I misunderstood the problem. Looking forward to everyone's help. Thank you
Update 1 .xaml
I removed 1 ScrollView inside ScrollView x:Name="scrollmain"
<ScrollView x:Name="scrollmain" Scrolled="scrollmain_Scrolled">
<StackLayout>
<StackLayout>
<Frame/>
...... //more
</StackLayout>
<StackLayout>
<Grid x:Name="_menucate" Margin="0" Padding="5,0" ColumnSpacing="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="0">
<Label Text="Menu 1" />
</Grid>
<Grid Grid.Row="0" Grid.Column="1">
<Label Text="Menu 2" />
</Grid>
</Grid>
<StackLayout>
.... //More
</StackLayout>
</StackLayout>
</StackLayout>
</ScrollView>
Update 2
<Grid RowSpacing="0" ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="ContentGrid" RowSpacing="0" ColumnSpacing="0" Grid.Row="0">
<Label Text="FIXED HEADER DEMO" Margin="12" FontSize="14" />
<ScrollView x:Name="TheScroll">
<StackLayout>
<StackLayout x:Name="BearImage">
<Image Source="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"
Aspect="AspectFill"/>
<Image Source="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"
Aspect="AspectFill"/>
<Image Source="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"
Aspect="AspectFill"/>
<Image Source="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"
Aspect="AspectFill"/>
<Image Source="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"
Aspect="AspectFill"/>
<Image Source="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"
Aspect="AspectFill"/>
</StackLayout>
<Label LineBreakMode="WordWrap"
Margin="12,5,12,5"
Grid.Row="1">
<Label.FormattedText>
<FormattedString>
<Span Text="Never heard before, but a bear was found in the wild!" FontAttributes="Bold" FontSize="18" />
<Span Text="
Bears are mammals of the family Ursidae. Bears are classified as caniforms, or doglike carnivorans, with the pinnipeds being their closest living relatives. Although only eight species of bears are extant, they are widespread, appearing in a wide variety of habitats throughout the Northern Hemisphere and partially in the Southern Hemisphere. Bears are found on the continents of North America, Central America, South America, Europe, and Asia.
Common characteristics of modern bears include large bodies with stocky legs, long snouts, shaggy hair, plantigrade paws with five nonretractile claws, and short tails. While the polar bear is mostly carnivorous and the giant panda feeds almost entirely on bamboo, the remaining six species are omnivorous, with varied diets.
With the exceptions of courting individuals and mothers with their young, bears are typically solitary animals. They are generally diurnal, but may be active during the night (nocturnal) or twilight (crepuscular), particularly around humans. Bears are aided by an excellent sense of smell, and despite their heavy build and awkward gait, they can run quickly and are adept climbers and swimmers. In autumn, some bear species forage large amounts of fermented fruits, which affects their behaviour.[1] Bears use shelters, such as caves and burrows, as their dens; most species occupy their dens during the winter for a long period (up to 100 days) of sleep similar to hibernation.[2]
FontSize="14" />
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>
</ScrollView>
<ScrollView x:Name="_menucate" Orientation="Horizontal" HeightRequest="40" VerticalOptions="Start">
<StackLayout Orientation="Horizontal" Spacing="-6" Padding="1">
<Button Text="Menu1" />
<Button Text="Menu2" />
<Button Text="Menu3" />
<Button Text="Menu4" />
<Button Text="Menu5" />
<Button Text="Menu6" />
<Button Text="Menu7" />
<Button Text="Menu8" />
</StackLayout>
</ScrollView>
</Grid>
</Grid>
.xaml.cs
double _titleTextTop;
public Page1()
{
InitializeComponent();
TheScroll.PropertyChanged += OnScrollViewPropertyChanged;
BearImage.SizeChanged += OnBearImageSizeChanged;
_menucate.SizeChanged += OnTitleTextSizeChanged;
}
private void OnTitleTextSizeChanged(object sender, System.EventArgs e)
{
_menucate.SizeChanged -= OnTitleTextSizeChanged;
//As soon as the news header has been repositioned, we can grab the actual screen top position
_titleTextTop = _menucate.Y;
//Remark: GetScreenCoordinates will get the actual position on screen instead of the actual position inside the parent
//_titleTextTop = GetScreenCoordinates(TitleText).Y;
}
private void OnBearImageSizeChanged(object sender, System.EventArgs e)
{
BearImage.SizeChanged -= OnBearImageSizeChanged;
//When the bear image has been loaded, reposition the news header to the bottom of this image
_menucate.Margin = new Thickness(0, BearImage.Height - 40, 0, 0);
}
private void OnScrollViewPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
if (e.PropertyName.Equals(ScrollView.ScrollYProperty.PropertyName))
{
var scrolled = ((ScrollView)sender).ScrollY;
System.Diagnostics.Debug.WriteLine($"Y position: {scrolled.ToString()}");
if (scrolled < _titleTextTop)
_menucate.TranslationY = (0 - scrolled);
else
_menucate.TranslationY = (0 - _titleTextTop);
}
}
public (double X, double Y) GetScreenCoordinates(VisualElement view)
{
// A view's default X- and Y-coordinates are LOCAL with respect to the boundaries of its parent,
// and NOT with respect to the screen. This method calculates the SCREEN coordinates of a view.
// The coordinates returned refer to the top left corner of the view.
// Initialize with the view's "local" coordinates with respect to its parent
double screenCoordinateX = view.X;
double screenCoordinateY = view.Y;
// Get the view's parent (if it has one...)
if (view.Parent.GetType() != typeof(App))
{
VisualElement parent = (VisualElement)view.Parent;
// Loop through all parents
while (parent != null)
{
// Add in the coordinates of the parent with respect to ITS parent
screenCoordinateX += parent.X;
screenCoordinateY += parent.Y;
// If the parent of this parent isn't the app itself, get the parent's parent.
if (parent.Parent.GetType() == typeof(App))
parent = null;
else
parent = (VisualElement)parent.Parent;
}
}
// Return the final coordinates...which are the global SCREEN coordinates of the view
return (screenCoordinateX, screenCoordinateY);
}
It seems that when the data inside the <StackLayout x:Name="BearImage"> exceeds the current screen, the x:Name="_menucate" is no longer visible. As in the example above I leave 5 images -> do not exceed the screen, then it displays x:Name="_menucate", if the number of images is greater than 5 -> passes the current screen, then x:Name="_menucate" won't show up?

Answer 1

All you have to do is to update the _menucate's TranslationY while scrolling the page!
Here's the code sample for your reference:
Code in Xaml:
<Grid RowSpacing="0" ColumnSpacing="0">
<Grid.Margin>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="iOS" Value="0,20,0,0" />
</OnPlatform>
</Grid.Margin>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Text="FIXED HEADER DEMO" Margin="12" Grid.Row="0" FontSize="14" />
<Grid x:Name="ContentGrid" RowSpacing="0" ColumnSpacing="0" Grid.Row="1">
<ScrollView x:Name="TheScroll">
<Grid RowSpacing="0" ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition x:Name="ImageRow" Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image x:Name="BearImage" Source="XamarinLogo.png"
Aspect="AspectFill"
Grid.Row="0" />
<Label LineBreakMode="WordWrap"
Margin="12,5,12,5"
Grid.Row="1">
<Label.FormattedText>
<FormattedString>
<Span Text="Never heard before, but a bear was found in the wild!" FontAttributes="Bold" FontSize="18" />
<Span Text="
Bears are mammals of the family Ursidae. Bears are classified as caniforms, or doglike carnivorans, with the pinnipeds being their closest living relatives. Although only eight species of bears are extant, they are widespread, appearing in a wide variety of habitats throughout the Northern Hemisphere and partially in the Southern Hemisphere. Bears are found on the continents of North America, Central America, South America, Europe, and Asia.
Common characteristics of modern bears include large bodies with stocky legs, long snouts, shaggy hair, plantigrade paws with five nonretractile claws, and short tails. While the polar bear is mostly carnivorous and the giant panda feeds almost entirely on bamboo, the remaining six species are omnivorous, with varied diets.
With the exceptions of courting individuals and mothers with their young, bears are typically solitary animals. They are generally diurnal, but may be active during the night (nocturnal) or twilight (crepuscular), particularly around humans. Bears are aided by an excellent sense of smell, and despite their heavy build and awkward gait, they can run quickly and are adept climbers and swimmers. In autumn, some bear species forage large amounts of fermented fruits, which affects their behaviour.[1] Bears use shelters, such as caves and burrows, as their dens; most species occupy their dens during the winter for a long period (up to 100 days) of sleep similar to hibernation.[2]
Bears have been hunted since prehistoric times for their meat and fur. With their tremendous physical presence and charisma, they play a prominent role in the arts, mythology, and other cultural aspects of various human societies. In modern times, the bears' existence has been pressured through the encroachment on their habitats and the illegal trade of bears and bear parts, including the Asian bile bear market. The IUCN lists six bear species as vulnerable or endangered, and even least concern species, such as the brown bear, are at risk of extirpation in certain countries. The poaching and international trade of these most threatened populations are prohibited, but still ongoing."
FontSize="14" />
</FormattedString>
</Label.FormattedText>
</Label>
</Grid>
</ScrollView>
<ScrollView x:Name="_menucate" Orientation="Horizontal" HeightRequest="40" VerticalOptions="Start">
<StackLayout Orientation="Horizontal" Spacing="-6" Padding="1">
<Button Text="Menu1" />
<Button Text="Menu2" />
<Button Text="Menu3" />
<Button Text="Menu4" />
<Button Text="Menu5" />
<Button Text="Menu6" />
<Button Text="Menu7" />
<Button Text="Menu8" />
</StackLayout>
</ScrollView>
</Grid>
</Grid>
Code behind:
public partial class Page1 : ContentPage
{
double _titleTextTop;
public Page1()
{
InitializeComponent();
TheScroll.PropertyChanged += OnScrollViewPropertyChanged;
BearImage.SizeChanged += OnBearImageSizeChanged;
_menucate.SizeChanged += OnTitleTextSizeChanged;
}
private void OnTitleTextSizeChanged(object sender, System.EventArgs e)
{
_menucate.SizeChanged -= OnTitleTextSizeChanged;
//As soon as the news header has been repositioned, we can grab the actual screen top position
_titleTextTop = _menucate.Y;
//Remark: GetScreenCoordinates will get the actual position on screen instead of the actual position inside the parent
//_titleTextTop = GetScreenCoordinates(TitleText).Y;
}
private void OnBearImageSizeChanged(object sender, System.EventArgs e)
{
BearImage.SizeChanged -= OnBearImageSizeChanged;
//When the bear image has been loaded, reposition the news header to the bottom of this image
_menucate.Margin = new Thickness(0, BearImage.Height - 40, 0, 0);
}
private void OnScrollViewPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
if (e.PropertyName.Equals(ScrollView.ScrollYProperty.PropertyName))
{
var scrolled = ((ScrollView)sender).ScrollY;
System.Diagnostics.Debug.WriteLine($"Y position: {scrolled.ToString()}");
if (scrolled < _titleTextTop)
//you can set the position by setting below
_menucate.TranslationY = (0 - scrolled);
else
_menucate.TranslationY = (0 - _titleTextTop);
}
}
}