hi everyone im trying to maken shrinkable toobar simular to the one that youtube app has. i have been searching all over the internet for days and this is the closest thing i found to what i am looking for click here
but as you can see its not the same. in youtube the effect happens the moment you start scroling up or down and you can control it unlike here you can't control it.
i attached one sample image of what i am trying to achieve here it is
so is there anyone who can help me to achieve such a thing thanks in advance?
this my xml page
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" x:Class="bashal.Views.chatPage"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:ViewModels="clr-namespace:bashal.ViewModels"
Title="home" >
<ContentPage.BindingContext>
<ViewModels:chatPageViewModel/>
</ContentPage.BindingContext>
<StackLayout Spacing="0">
<Grid Grid.Row="0" BackgroundColor="Navy"
x:Name="DashboardBarGrid"
RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="90" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0"
Margin="10,10,10,0"
Orientation="Horizontal"
VerticalOptions="CenterAndExpand">
<Image HeightRequest="32"
Source="recept.png"
HorizontalOptions="Start" />
<Image HeightRequest="32"
Source="settings.png"
HorizontalOptions="EndAndExpand" />
</StackLayout>
<Grid Grid.Row="1" BackgroundColor="Red"
HorizontalOptions="CenterAndExpand">
<Image x:Name="MainImage"
HeightRequest="90"
Source="user.png" />
</Grid>
<StackLayout Grid.Row="2" BackgroundColor="Black"
Margin="10,0,10,0"
Orientation="Horizontal"
VerticalOptions="CenterAndExpand">
<Label HorizontalOptions="Start"
FontSize="14"
TextColor="White"
Text="Welcome" />
<Label HorizontalOptions="EndAndExpand"
FontSize="14"
TextColor="White"
Text="2009/1/1" />
</StackLayout>
</Grid>
<ScrollView Scrolled="ScrollView_Scrolled">
<CollectionView ItemsSource="{Binding rooms}" >
<CollectionView.ItemTemplate>
<DataTemplate>
<Label Text="{Binding name}"/>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</ScrollView>
</StackLayout>
</ContentPage>
and this is the code behind
public partial class chatPage : ContentPage
{
private readonly double _initialImageScale;
private Animation _firstRowAnimation;
private Animation _middleRowAnimation;
private Animation _lastRowAnimation;
private readonly double _initialFirstRowHeight;
private readonly double _initialMiddleRowHeight;
private readonly double _initialLastRowHeight;
private readonly RowDefinition _firstRowDefinition;
private readonly RowDefinition _middleRowDefinition;
private readonly RowDefinition _lastRowDefinition;
private bool _isScrolled;
public chatPage()
{
InitializeComponent();
_initialImageScale = MainImage.Scale;
_firstRowDefinition = DashboardBarGrid.RowDefinitions[0];
_initialFirstRowHeight = _firstRowDefinition.Height.Value;
_middleRowDefinition = DashboardBarGrid.RowDefinitions[1];
_initialMiddleRowHeight = _firstRowDefinition.Height.Value;
_lastRowDefinition = DashboardBarGrid.RowDefinitions[2];
_initialLastRowHeight = _lastRowDefinition.Height.Value;
}
private void ScrollView_Scrolled(object sender, ScrolledEventArgs e)
{
var scrollView = (ScrollView)sender;
// Move back to original height
if (_isScrolled && (int)scrollView.ScrollY == 0 &&
_firstRowDefinition?.Height.Value < _initialFirstRowHeight &&
_lastRowDefinition?.Height.Value < _initialLastRowHeight)
{
scrollView.IsEnabled = false;
_firstRowAnimation = new Animation((d) => _firstRowDefinition.Height = new
GridLength(d.Clamp(0, double.MaxValue)),
_firstRowDefinition.Height.Value, _initialFirstRowHeight, Easing.Linear, ()
=> _firstRowAnimation = null);
_firstRowAnimation.Commit(this, "first row animation", 16, 500);
MainImage.ScaleTo(_initialImageScale, 500, Easing.Linear);
_middleRowAnimation = new Animation((d) => _middleRowDefinition.Height = new
GridLength(d.Clamp(90, double.MaxValue)),
_middleRowDefinition.Height.Value, _initialMiddleRowHeight, Easing.Linear,
() => _middleRowAnimation = null);
_middleRowAnimation.Commit(this, "middle row animation", 16, 500);
_lastRowAnimation = new Animation((d) => _lastRowDefinition.Height = new
GridLength(d.Clamp(0, double.MaxValue)),
_lastRowDefinition.Height.Value, _initialLastRowHeight, Easing.Linear, ()
=> _lastRowAnimation = null);
_lastRowAnimation.Commit(this, "last row animation", 16, 500,
Easing.Linear, (v, c) =>
{
_isScrolled = false;
scrollView.IsEnabled = true;
});
}
// Hide the rows
else if (!_isScrolled && _firstRowDefinition?.Height.Value >=
_initialFirstRowHeight && _lastRowDefinition?.Height.Value >=
_initialLastRowHeight)
{
scrollView.IsEnabled = false;
_firstRowAnimation = new Animation((d) => _firstRowDefinition.Height = new
GridLength(d.Clamp(0, double.MaxValue)),
_initialFirstRowHeight, 0, Easing.Linear, () => _firstRowAnimation = null);
_firstRowAnimation.Commit(this, "first row animation", 16, 500);
MainImage.ScaleTo(_initialImageScale * 0.7, 500, Easing.Linear);
_middleRowAnimation = new Animation((d) => _middleRowDefinition.Height =
new GridLength(d.Clamp(65, double.MaxValue)),
_middleRowDefinition.Height.Value, _initialMiddleRowHeight, Easing.Linear,
() => _middleRowAnimation = null);
_middleRowAnimation.Commit(this, "middle row animation", 16, 500);
_lastRowAnimation = new Animation((d) => _lastRowDefinition.Height = new
GridLength(d.Clamp(0, double.MaxValue)),
_initialLastRowHeight, 0, Easing.Linear, () => _lastRowAnimation = null);
_lastRowAnimation.Commit(this, "last row animation", 16, 500,
Easing.Linear, (v, c) =>
{
_isScrolled = true;
scrollView.IsEnabled = true;
});
}
}
}