i have this:
<StackLayout VerticalOptions="FillAndExpand">
<LineEntry />
<ScrollView VerticalOptions="FillAndExpand">
<StackLayout x:Name="stack" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
</StackLayout>
</ScrollView>
</StackLayout>
But it does not scroll, except if you are into the LineEntry, because the keyboard is up. I think it's because the content page has less height than the scrollView, but don't know how to fix this.
I will update some mockups(can't use the real images) for more information, in the first one, does not works, in the second one, it works:
the content page has less height than the scrollView
This should be the first reason , and the send reason is the Content should exists some things , not a empty layot in ScrollView :
The follow code can work , just for reference :
<StackLayout VerticalOptions="FillAndExpand">
<Entry Text="First Entry"/>
<ScrollView HeightRequest="100" BackgroundColor="Beige" VerticalScrollBarVisibility="Always">
<StackLayout x:Name="stack"
HorizontalOptions="FillAndExpand"
HeightRequest="200">
<Entry Placeholder="Second Entry"/>
</StackLayout>
</ScrollView>
</StackLayout>
Related
I getting a conception problem to display correctly the page. I want to have on the bottom of the page a button. I used to do it, AbsoluteLayout.
For some of the screens that are small, all the information doesn't appear so I had to activate the ScrollView.
But the ScrollView doesn't make the job as I would like, a part of the information is still "eaten" by the bottom button. (See the image)
There is the code :
<ContentPage.Content>
<AbsoluteLayout>
<ScrollView AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
AbsoluteLayout.LayoutFlags="All">
<StackLayout>
**** Some code *****
</StackLayout>
</ScrollView>
<Button AbsoluteLayout.LayoutBounds="0, 1, 1, 40"
AbsoluteLayout.LayoutFlags="PositionProportional, WidthProportional"
... some more code .../>
</AbsoluteLayout>
</ContentPage.Content>
I think the way I want to make it is not correct. what can I do to make it display correctly?
Just as Steve said, using Grid is better than AbsoluteLayout. I made a demo and it works well.
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
</Grid.RowDefinitions>
<ScrollView Grid.Row="0" >
<StackLayout>
<Label></Label>
</StackLayout>
</ScrollView>
<Button Grid.Row="1" />
</Grid>
I'm trying to implement a CarouselView to display a set of images on my app. Apparently, I can't remove the Whitespace at the Bottom of the CarouselView no matter what combinations I tried.
I've placed BackgroundColor property for CarouselView [Red], Grid[Green] (inside DataTemplate), and IndicatorView [Blue] to see which of them is consuming the rest of the screen despite the lack of StackLayout and it seems that either CarouselView or Grid is causing the unwanted behaviour.
Here's my XAML Code with roughly nothing on the ViewModel but a Mock Database for the Image Collection:
<ContentPage.Content>
<Grid ColumnDefinitions="*"
RowDefinitions="Auto,Auto,Auto,1*">
<Label Grid.Row="0" Grid.Column="0"
Text="CarouselView Test"
TextColor="Black"
FontAttributes="Bold"
FontSize="20"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
Padding="10" />
<CarouselView Grid.Row="1" Grid.Column="0" BackgroundColor="Red" HeightRequest="{Binding ScreenWidth}"
x:Name="TheCarousel"
ItemsSource="{Binding ImageSourceCollection}"
IndicatorView="indicatorView">
<CarouselView.ItemTemplate>
<DataTemplate>
<Grid RowDefinitions="Auto" ColumnDefinitions="Auto" BackgroundColor="Green" HorizontalOptions="Center" VerticalOptions="Center">
<Image Grid.Row="0" Grid.Column="0" Source="{Binding .}" />
</Grid>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView Grid.Row="2" Grid.Column="0" BackgroundColor="Blue"
x:Name="indicatorView"
IndicatorColor="LightGray"
IndicatorSize="10"
SelectedIndicatorColor="Black" />
</Grid>
</ContentPage.Content>
And here's a screenshot of my current build with the CarouselView/Grid consuming most of the Screen Space:
CarouselView has some weird behaviors on size calculating,in your scenario the only way is get the height it(template) needs in code(viewmodel), and bind it to the HeightRequest on CarouselView .
Xaml
<CarouselView HeightRequest="{Binding xxx}"
View model
public double xxx {
get
{
// calculate the height according to the width by ratio
return height;
}
}
I think you need to set Space between rows and columns to Zero if you want to make your indicatorView stick to your CarouselView
So what actually worked for me.
I set Grid Row Definition to ex.(300) and then Carousel Height Request to 350.
I'm setting Image Width based on Screen Width, but I tried it Manually ex (400) and still worked, don't get confused.
<Grid RowDefinitions="300">
<CarouselView x:Name="carouselView"
Grid.Row="0"
ItemsSource="{Binding HomeCarousel}">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Frame HasShadow="False"
CornerRadius="0"
Margin="0"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
HeightRequest="350">
<SwipeView>
<Image Source="{Binding ImageSource}"
Aspect="AspectFill"
WidthRequest="{DynamicResource FullScreenWidth}"
HorizontalOptions="Center" />
</SwipeView>
</Frame>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
</Grid>
I am using Rg.Plugins.Popup plugin in my xamarin forms app. It is a nice plugin for modal dialogs. However, I am looking to dismiss the dialog when user scrolls down. (Most dialogs in iOS has this behavior of closing with scrolling down).
XAML inside Popup page.
Option 1
<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
HasSystemPadding="True"
CloseWhenBackgroundIsClicked="False"
x:Name="MyPage"
x:Class="wQuran.Views.Today.PrayerTimesSettingsPopupPage">
<Frame Style="{DynamicResource PopupFrame}" VerticalOptions="FillAndExpand" IsClippedToBounds="True">
<Grid RowDefinitions="Auto,*" Style="{DynamicResource BaseGrid}">
<BoxView Grid.Row="0" Style="{DynamicResource PopupTitleBoxView}"/>
<Grid Grid.Row="0" ColumnDefinitions="*,30" HeightRequest="40" Padding="10">
<Label Grid.Column="0" Text="{Binding Title}" Style="{DynamicResource PopupTitleLabel}"/>
<ImageButton Grid.Column="1" Style="{DynamicResource DialogCloseImageButton}" Command="{Binding CloseDialogCommand}"/>
</Grid>
</Grid>
</Frame>
</pages:PopupPage>
Option 2.
Updated XAML and added the Frame inside ScrollView
<ScrollView Scrolled="ScrollView_Scrolled">
....
</ScrollView>
private void ScrollView_Scrolled(object sender, Xamarin.Forms.ScrolledEventArgs e)
{
if (e.ScrollY > 100)
{
itemViewModel.CloseDialogCommand.Execute(null);
}
}
In option 1 I don't have the scroll, so the plug in works with default behavior, but I have no way to close the dialog in scroll.
In option 2, I added the frame inside the scrollview to check for Y scroll and dismiss the dialog. The Scrolled event never fires. Additionally, I cannot close the dialog when clicking outside the modal.
After all, my question is how to dismiss the dialog while scrolling down?
After all, my question is how to dismiss the dialog while scrolling down?
I guess that you want to close PopupPage when ScrollView scroll ending. If yes, please take a look the following code:
<pages:PopupPage
x:Class="FormsSample.simplecontrol.Page16"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup">
<StackLayout
Padding="20,0"
HorizontalOptions="FillAndExpand"
VerticalOptions="Center">
<Frame
Padding="0"
BackgroundColor="CadetBlue"
CornerRadius="10"
HeightRequest="100">
<ScrollView Scrolled="ScrollView_Scrolled">
<StackLayout Padding="10">
<Label
FontSize="20"
HorizontalOptions="Center"
Text="First Popup Page"
TextColor="Black" />
<Label Text="Hello Xamarin Guys" TextColor="Red" />
<Label Text="This is Very Awesome Popup Plugins For Xamarin forms" TextColor="LightBlue" />
<Button Text="Close" TextColor="Black" />
<Image Source="a11.jpg" />
</StackLayout>
</ScrollView>
</Frame>
</StackLayout></pages:PopupPage>
private async void ScrollView_Scrolled(object sender, ScrolledEventArgs e)
{
ScrollView scrollView = sender as ScrollView;
double scrollingSpace = scrollView.ContentSize.Height - scrollView.Height;
if (scrollingSpace <= e.ScrollY) // Touched bottom
// Do the things you want to do
await PopupNavigation.Instance.PopAsync();
}
I've got following view:
<ContentPage.Content>
<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
<StackLayout VerticalOptions="CenterAndExpand" Margin="20, 0, 20, 0">
<StackLayout>
<Label Text="Login" HorizontalOptions="CenterAndExpand" />
<Entry Text="{Binding Login, Mode=OneWayToSource}"></Entry>
</StackLayout>
<StackLayout>
<Label Text="Hasło" HorizontalOptions="CenterAndExpand" />
<Entry IsPassword="True" Text="{Binding Password, Mode=TwoWay}"></Entry>
</StackLayout>
<Button Text="Zaloguj się" Command="{Binding SignInCommand}"></Button>
</StackLayout>
</StackLayout>
<BoxView AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" BackgroundColor="Gray" Opacity="0.5" InputTransparent="false" IsVisible="{Binding IsBusy}" />
<ActivityIndicator IsRunning="{Binding IsBusy}" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" />
</AbsoluteLayout>
</ContentPage.Content>
I want to move BoxView and ActivityIndicator to external control to make reusable component. The problem is that to achieve this I need to "group" these controls to obtain one child element.
The question is if is there any element I can use to group my controls, but which will not affect the way how controls are displayed? Alternatevlly which element I can use and how to still have effect of overlay over whole page and loading indicator?
I was trying to use AbsoluteLayout, StackLayout etc. but I couldn't position it to persist initial effect (overlay on whole page and loading indicator in the center with opacity = 1).
You can use DependencyService and reuse it in any page.
Check this tutorial.
There is also a working sample.
Now that ScrollView ContentSize property is readonly how do I SET
the size of the ScrollView content?
That very same property that is settable in UIScrollView
(but not in xamarin forms)
I have this:
<ScrollView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" HorizontalOptions="FillAndExpand"
x:Name="attachmentScroller"
>
<StackLayout x:Name="AttachmentsView" Orientation="Horizontal" VerticalOptions="Fill"/>
</ScrollView>
what I've tried is setting AttachmentsView.MinimumWidthRequest to the desired contentWidth;
But that does not seem to expand the parent's scrollview content width
to the desired value.
You can set the set of the content size, by setting the property of the content, instead of the the ScrollView.
Here's it in xaml
<ScrollView>
<StackLayout HeightRequest="100" />
</ScrollView>
To stop the scroll view restricting the size of the contained content to its own size, ensure you set
ScrollView Orientation="Horizontal" or "Both" or "Vertical" respectively.
i.e. for your example -
<ScrollView Orientation="Horizontal" Grid.Row="1"
Grid.Column="0" Grid.ColumnSpan="3"
HorizontalOptions="FillAndExpand"
x:Name="attachmentScroller">
<StackLayout WidthRequest="1000" x:Name="AttachmentsView"
Orientation="Horizontal" VerticalOptions="Fill"/>
</ScrollView>