How to create a ScrollView in this layout? - xaml

Question

I need to create a ScrollView in this layout but the problem is that my control occupies the entire screen and I don't know how to make it occupy only the size it has. This is the functionality of the control
I need it not to fill the entire screen and only its own size to be able to add more things to the layout
This is the XAML of my control:
<?xml version="1.0" encoding="UTF-8" ?>
<ContentView
x:Class="ControlProject.CustomControl"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Name="CustomView">
<ContentView.Content>
<AbsoluteLayout>
<!-- ================This is the entry that must be in the bottom================ -->
<StackLayout
x:Name="STACK"
AbsoluteLayout.LayoutBounds="0,1,1,0.07"
AbsoluteLayout.LayoutFlags="All"
Orientation="Horizontal">
<Frame
Margin="0,0,0,2"
Padding="0,0,0,0"
BackgroundColor="{Binding Source={x:Reference CustomView}, Path=FrameColor}"
BorderColor="{Binding Source={x:Reference CustomView}, Path=BorderColor}"
CornerRadius="{Binding Source={x:Reference CustomView}, Path=CornerRadius}"
HasShadow="False"
HorizontalOptions="FillAndExpand">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ImageButton
Grid.Column="0"
Margin="5,0,0,0"
BackgroundColor="Transparent"
Clicked="Open"
HeightRequest="25"
HorizontalOptions="Start"
Source="{Binding Source={x:Reference CustomView}, Path=LeftSideIcon}" />
<Entry
x:Name="EntryControl"
Grid.Column="1"
Margin="0,0,55,0"
HeightRequest="25"
HorizontalOptions="FillAndExpand"
Keyboard="Chat"
Placeholder="{Binding Source={x:Reference CustomView}, Path=Placeholder}"
Text="{Binding EntryText}"
TextColor="{Binding Source={x:Reference CustomView}, Path=EntryTextColor}" />
<ImageButton
Grid.Column="1"
Margin="0,0,40,0"
BackgroundColor="Transparent"
Command="{Binding Source={x:Reference CustomView}, Path=DeleteMsgCommand}"
HeightRequest="25"
HorizontalOptions="End"
Source="{Binding Source={x:Reference CustomView}, Path=DeleteMessageIcon}" />
<ImageButton
Grid.Column="1"
Margin="0,0,10,0"
Padding="1"
BackgroundColor="Transparent"
Command="{Binding Source={x:Reference CustomView}, Path=InsertImgCommand}"
HeightRequest="25"
HorizontalOptions="End"
Source="{Binding Source={x:Reference CustomView}, Path=InsertImgIcon}" />
</Grid>
</Frame>
<ImageButton
Margin="0,0,5,2"
Padding="15,0,10,0"
BackgroundColor="{Binding Source={x:Reference CustomView}, Path=SendBtnColor}"
Command="{Binding Source={x:Reference CustomView}, Path=SendMsgCommand}"
CornerRadius="30"
HeightRequest="45"
HorizontalOptions="End"
Source="{Binding Source={x:Reference CustomView}, Path=RightSideIcon}"
WidthRequest="45" />
</StackLayout>
<!-- ================This is what it moves up================ -->
<StackLayout
x:Name="frameemojis"
AbsoluteLayout.LayoutBounds="0,1,1,0.43"
AbsoluteLayout.LayoutFlags="All"
TranslationY="{Binding Height, Source={x:Reference frameemojis}}">
<Frame>
<CollectionView
Margin="-10,-15,-10,-10"
HeightRequest="270"
ItemsSource="{Binding Source={x:Reference CustomView}, Path=EmojiItemSource}"
VerticalScrollBarVisibility="Never">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Horizontal" Span="5" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<ImageButton
Padding="5"
BackgroundColor="Transparent"
Command="{Binding Source={x:Reference CustomView}, Path=EmojiTappedCommand}"
CommandParameter="{Binding EmojiMethodCommand}"
HeightRequest="44"
Source="{Binding EmojiSource}"
WidthRequest="44" />
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</Frame>
<!-- ============== -->
</StackLayout>
</AbsoluteLayout>
</ContentView.Content>
</ContentView>
MainPage.xaml (this is where I want to add the ScrollView):
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="App24.MainPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:fav="clr-namespace:ControlProject;assembly=ControlProject">
<AbsoluteLayout>
<!-- This is where I want to add the scrollview -->
<StackLayout
AbsoluteLayout.LayoutBounds="0,1,1,1"
AbsoluteLayout.LayoutFlags="All"
BackgroundColor="#4DFF0000">
<fav:CustomControl
x:Name="entrycontrol"
BorderColor="{Binding EntryBorderColor}"
CornerRadius="{Binding EntryRadius}"
DeleteMessageIcon="crossblack.png"
DeleteMsgCommand="{Binding DeleteMsgCommand}"
EmojiItemSource="{Binding EmojiList}"
EmojiTappedCommand="{Binding EmojiTappedCommand}"
EntryTextColor="{Binding TextColor}"
FrameColor="{Binding EntryBGColor}"
InsertImgCommand="{Binding InsertImgCommand}"
InsertImgIcon="insertimage.png"
LeftSideIcon="icon.png"
Placeholder="Escribddame"
RightSideIcon="send.png"
SendBtnColor="{Binding SendBtnColor}"
SendMsgCommand="{Binding SendMsgCommand}" />
</StackLayout>
</AbsoluteLayout>
</ContentPage>
[EDITED]
Method on code behind control:
bool isShow;
const double layoutPropHeightMax = 0.45;
const double layoutPropHeightMin = 0.06;
private void Button_Clicked(object sender, EventArgs e)
{
if (!isShow)
{
//show the keyboard
Device.BeginInvokeOnMainThread(async () =>
{
var height = layoutPropHeightMin;
while (height < layoutPropHeightMax)
{
await Task.Delay(1);
height += 0.04;
AbsoluteLayout.SetLayoutBounds(bottomBar, new Rectangle(0.5, 1.0, 1.0, height));
}
});
}
else
{
// hide the keyboard
Device.BeginInvokeOnMainThread(async () =>
{
var height = layoutPropHeightMax;
while (height > layoutPropHeightMin)
{
await Task.Delay(1);
height -= 0.04;
AbsoluteLayout.SetLayoutBounds(bottomBar, new Rectangle(0.5, 1.0, 1.0, height));
}
});
}
isShow = !isShow;
}
Control XAML:
<?xml version="1.0" encoding="UTF-8" ?>
<ContentView
x:Class="ControlProject.CustomControl"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Name="CustomView">
<AbsoluteLayout AbsoluteLayout.LayoutBounds="0,1,1,1" BackgroundColor="White">
<StackLayout
x:Name="bottomBar"
AbsoluteLayout.LayoutBounds="0.5,1,1.0,0.07"
AbsoluteLayout.LayoutFlags="All"
BackgroundColor="Olive">
<StackLayout
x:Name="STACK"
AbsoluteLayout.LayoutBounds="0,1,1,0.07"
AbsoluteLayout.LayoutFlags="All"
Orientation="Horizontal">
<Frame
Margin="0,0,0,2"
Padding="0,0,0,0"
BackgroundColor="{Binding Source={x:Reference CustomView}, Path=FrameColor}"
BorderColor="{Binding Source={x:Reference CustomView}, Path=BorderColor}"
CornerRadius="{Binding Source={x:Reference CustomView}, Path=CornerRadius}"
HasShadow="False"
HorizontalOptions="FillAndExpand">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ImageButton
Grid.Column="0"
Margin="5,0,0,0"
BackgroundColor="Transparent"
Clicked="Button_Clicked"
HeightRequest="25"
Source="{Binding Source={x:Reference CustomView}, Path=LeftSideIcon}" />
<Entry
x:Name="EntryControl"
Grid.Column="1"
Margin="0,0,55,0"
HeightRequest="25"
HorizontalOptions="FillAndExpand"
Keyboard="Chat"
Placeholder="{Binding Source={x:Reference CustomView}, Path=Placeholder}"
Text="{Binding EntryText}"
TextColor="{Binding Source={x:Reference CustomView}, Path=EntryTextColor}" />
<ImageButton
Grid.Column="1"
Margin="0,0,40,0"
BackgroundColor="Transparent"
Command="{Binding Source={x:Reference CustomView}, Path=DeleteMsgCommand}"
HeightRequest="25"
HorizontalOptions="End"
Source="{Binding Source={x:Reference CustomView}, Path=DeleteMessageIcon}" />
<ImageButton
Grid.Column="1"
Margin="0,0,10,0"
Padding="1"
BackgroundColor="Transparent"
Command="{Binding Source={x:Reference CustomView}, Path=InsertImgCommand}"
HeightRequest="25"
HorizontalOptions="End"
Source="{Binding Source={x:Reference CustomView}, Path=InsertImgIcon}" />
</Grid>
</Frame>
<ImageButton
Margin="0,0,5,2"
Padding="15,0,10,0"
BackgroundColor="{Binding Source={x:Reference CustomView}, Path=SendBtnColor}"
Command="{Binding Source={x:Reference CustomView}, Path=SendMsgCommand}"
CornerRadius="30"
HeightRequest="45"
HorizontalOptions="End"
Source="{Binding Source={x:Reference CustomView}, Path=RightSideIcon}"
WidthRequest="45" />
</StackLayout>
<!-- ================This is what it moves up================ -->
<StackLayout
x:Name="frameemojis"
AbsoluteLayout.LayoutBounds="0,1,1,0.43"
AbsoluteLayout.LayoutFlags="All"
TranslationY="{Binding Height, Source={x:Reference frameemojis}}">
<Frame>
<CollectionView
Margin="-10,-15,-10,-10"
HeightRequest="270"
ItemsSource="{Binding Source={x:Reference CustomView}, Path=EmojiItemSource}"
VerticalScrollBarVisibility="Never">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Horizontal" Span="5" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<ImageButton
Padding="5"
BackgroundColor="Transparent"
Command="{Binding Source={x:Reference CustomView}, Path=EmojiTappedCommand}"
CommandParameter="{Binding EmojiMethodCommand}"
HeightRequest="44"
Source="{Binding EmojiSource}"
WidthRequest="44" />
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</Frame>
<!-- ============== -->
</StackLayout>
</StackLayout>
</AbsoluteLayout>
</ContentView>
This is how I want to make it

Answer 1

In the ContentPage because you set the height of Stacklayout as the whole screen
AbsoluteLayout.LayoutBounds="0,1,1,1"
So it will be an expected result .
Actually , in your case you could implement the effect without using ScrollView .
in ContentPage
<AbsoluteLayout BackgroundColor="White" AbsoluteLayout.LayoutBounds="0,1,1,1">
<!-- -->
<Button Clicked="Button_Clicked" Text="Test" AbsoluteLayout.LayoutBounds="0.5,0.3,0.2,0.05" AbsoluteLayout.LayoutFlags="All" />
<StackLayout x:Name="bottomBar" BackgroundColor="Olive" AbsoluteLayout.LayoutBounds="0.5,1.0,1.0,0.04" AbsoluteLayout.LayoutFlags="All">
<!-- put the content of emoji keyboard and entry here -->
</StackLayout>
</AbsoluteLayout>
In Code behind
bool isShow;
const double layoutPropHeightMax = 0.45;
const double layoutPropHeightMin = 0.06;
//you could set the height here as you want
private void Button_Clicked(object sender, EventArgs e)
{
if(!isShow)
{
//show the keyboard
Device.BeginInvokeOnMainThread(async () =>
{
var height = layoutPropHeightMin;
while (height < layoutPropHeightMax)
{
await Task.Delay(1);
height += 0.04;
AbsoluteLayout.SetLayoutBounds(bottomBar, new Rectangle(0.5, 1.0,1.0, height));
}
});
}
else
{
// hide the keyboard
Device.BeginInvokeOnMainThread(async () =>
{
var height = layoutPropHeightMax;
while (height > layoutPropHeightMin)
{
await Task.Delay(1);
height -= 0.04;
AbsoluteLayout.SetLayoutBounds(bottomBar, new Rectangle(0.5, 1.0, 1.0, height));
}
});
}
isShow = !isShow;
}
And in Custom Control let the Entry and Keyboard fill the whole StackLayout .