How to make a stacklayout fixed to the bottom of the screen in a scrollview

AustyAusty Member ✭✭✭

l have code that has views in a scrolleview.. l want to be able to make the last stacklayout to be fixed in the scrollview such that all other elements can scroll but the stacklayout is fixed. Much like fixed footer in a web page

<?xml version="1.0" encoding="utf-8"?>

<NavigationPage.TitleView >



</NavigationPage.TitleView>  






<CollectionView.ItemsLayout>


Horizontal


</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>


<Grid.RowDefinitions >


</Grid.RowDefinitions>
<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

     </StackLayout>   



Any Ideas..

Best Answer

Answers

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭
    > @Austy said:
    > l have code that has views in a scrolleview.. l want to be able to make the last stacklayout to be fixed in the scrollview such that all other elements can scroll but the stacklayout is fixed. Much like fixed footer in a web page
    >
    > <?xml version="1.0" encoding="utf-8"?>
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    > Horizontal
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    > Horizontal
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    > Any Ideas..

    Can you format better your code?
  • AustyAusty Member ✭✭✭

    @AlessandroCaliaro apologies. see formatted code below

    <?xml version="1.0" encoding="utf-8"?>
    <ContentPage 
        xmlns="http://xamarin.com/schemas/2014/forms" 
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
        xmlns:d="http://xamarin.com/schemas/2014/forms/design" 
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
        mc:Ignorable="d" 
        x:Class="comicAppFinal.MainPage">
        <NavigationPage.TitleView  >  
            <StackLayout Orientation="Horizontal" >
                 <Image Source="logo.png"  HorizontalOptions="CenterAndExpand"/>
              <Image Source="search.png"  HorizontalOptions="End" Margin="0,0,20,0"/>   
            </StackLayout>
    
        </NavigationPage.TitleView>  
     <ScrollView >   
     <StackLayout >       
     <Image Source="boxer_woman.jpg" />
       <StackLayout BackgroundColor="#282626" HeightRequest="450" Margin="0,-160,0,-30">           
     <Label Text="New &amp; Trending"        
            HorizontalTextAlignment="Center" 
            TextColor="White"
            FontAttributes="Bold" 
            Margin="0,0,0,0"/> 
    
    <CollectionView ItemsSource="{Binding sliders}" 
                    HorizontalOptions="CenterAndExpand" >
        <CollectionView.ItemsLayout>
            <ListItemsLayout>
                <x:Arguments>
                    <ItemsLayoutOrientation>Horizontal</ItemsLayoutOrientation>    
                </x:Arguments>
            </ListItemsLayout>             
         </CollectionView.ItemsLayout>        
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid Padding="0,10,0,0" >
                    <Grid.RowDefinitions >
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Image Source="{Binding Url}"
                           Aspect="AspectFill"
                           HeightRequest="190"
                           WidthRequest="180" 
                           Grid.Row="0"
                           VerticalOptions="CenterAndExpand"
                           HorizontalOptions="CenterAndExpand"/>
                     <Label Text="{Binding Name}" TextColor="white" 
                            FontSize="Small"
                            HorizontalTextAlignment="Center"
                            VerticalTextAlignment="End"
                            Margin="-30"/>       
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
    </StackLayout>         
    <StackLayout BackgroundColor="#282626" HeightRequest="280" Margin="0,-174,0,-30"> 
      <Label Text="Popular"   VerticalTextAlignment="Center" TextColor="White" 
                   HorizontalTextAlignment="Center" FontAttributes="Bold"
             Margin="0,25,0,0"/>
      <CollectionView ItemsSource="{Binding sliders}" >
        <CollectionView.ItemsLayout>
            <ListItemsLayout>
                <x:Arguments>
                    <ItemsLayoutOrientation>Horizontal</ItemsLayoutOrientation>    
                </x:Arguments>
            </ListItemsLayout>           
         </CollectionView.ItemsLayout>        
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid Padding="0,10,0,0"  VerticalOptions="EndAndExpand" >
                    <Grid.RowDefinitions >
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Image Source="{Binding Url}"
                           Aspect="AspectFill"
                           HeightRequest="190"
                           WidthRequest="180" 
                           Grid.Row="0"
                           VerticalOptions="CenterAndExpand"
                           HorizontalOptions="CenterAndExpand"/>
                     <Label Text="{Binding Name}" TextColor="White" 
                            HorizontalTextAlignment="Center"
                            VerticalTextAlignment="End"
                            Margin="-30"/>       
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>                         
      </StackLayout>  
            <StackLayout BackgroundColor="Black" VerticalOptions="EndAndExpand" 
                         HorizontalOptions="FillAndExpand" Orientation="Horizontal"
                         Margin="0">
                <StackLayout Orientation="Vertical" WidthRequest="130" >
                    <Image Source="home.png" WidthRequest="35" 
                           HorizontalOptions="Center" />
                    <Label Text="Home" FontSize="Micro" HorizontalOptions="Center" 
                           TextColor="White"/>
                </StackLayout>
                  <StackLayout Orientation="Vertical" WidthRequest="70" >
                    <Image Source="character.png" WidthRequest="29" 
                           HorizontalOptions="Center" />
                    <Label Text="Character" FontSize="Micro" HorizontalOptions="Center" 
                           TextColor="White"/>
                </StackLayout>
                  <StackLayout Orientation="Vertical" WidthRequest="100" >
                    <Image Source="download.png" WidthRequest="35" 
                           HorizontalOptions="Center" />
                    <Label Text="Download" FontSize="Micro" HorizontalOptions="Center" 
                           TextColor="White"/>
                </StackLayout>
                  <StackLayout Orientation="Vertical" WidthRequest="50" >
                    <Image Source="profile.png" WidthRequest="35" 
                           HorizontalOptions="Center" />
                    <Label Text="Profile" FontSize="Micro" HorizontalOptions="Center" 
                           TextColor="White"/>
                </StackLayout>
    
             </StackLayout>   
       </StackLayout >    
      </ScrollView>      
    </ContentPage>
    
  • AustyAusty Member ✭✭✭

    l have solved this..l simply placed a scrollview in a stacklayout and added another stacklayout underneath as described below




    </stacklayout

    Thanks everyone..More questions coming though as xamarin is becoming more interesting

Sign In or Register to comment.