Xamarin Scrollview scrollbar not visible - xamarin

Xamarin.Forms on Android. I have scrollView with stack inside. Scroll works, but scrollBar not visible. I've tried to write custom renders but it didn't help.
My code: https://github.com/FeduniakVitalii/ScrollView
var contentAndWebViewLayout = new StackLayout() { Orientation = StackOrientation.Vertical, VerticalOptions = LayoutOptions.FillAndExpand};
contentAndWebViewLayout.Children.Add(contentLayout);
contentAndWebViewLayout.Children.Add(webView);
ScrollView scrollView = new ScrollView()
{
Content = contentAndWebViewLayout,
IsEnabled = true,
IsVerticalScrollbarEnabled = true,
IsClippedToBounds = true,
VerticalScrollBarVisibility = ScrollBarVisibility.Always,
VerticalOptions = LayoutOptions.FillAndExpand,
};
var converter = new HtmlLabelConverter();
var layout = new RelativeLayout()
{
BackgroundColor = Color.White,
VerticalOptions = LayoutOptions.FillAndExpand
};
layout.Children.Add(scrollView,
xConstraint: Constraint.Constant(0),
yConstraint: Constraint.Constant(0),
widthConstraint: Constraint.RelativeToParent((parent) => { return parent.Width; }),
heightConstraint: Constraint.RelativeToParent((parent) => { return parent.Height; }));
this.Content = layout;

I tried to downgrade Xamarin.Forms version to 3.4, problem solved !

Related

Setting relative height for Grid children

I'm adding 2 children to a Grid like this:
private void pInitStackLayout()
{
grid1 = new Grid()
{
};
grid2 = new Grid()
{
};
biggrid = new Grid()
{
BackgroundColor = Color.Transparent,
Margin = new Thickness(0),
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.StartAndExpand,
Orientation = StackOrientation.Vertical,
};
biggrid.Children.Add(grid1,0,0);
biggrid.Children.Add(grid2,0,1);
this.Content = biggrid;
}
The ContentPage's (which is a Navigation Page) Content is the biggrid.
I would like to make it so that grid1 takes up 80% of the available height, and grid2 takes up 20% (or the rest).
How could I achieve this?
It's very simple actually, just set the RowDefinitions of biggrid.
// RowDefinitions isolated
RowDefinitions = new RowDefinitionCollection
{
new RowDefinition { Height = new GridLength(8, GridUnitType.Star) },
new RowDefinition { Height = new GridLength(2, GridUnitType.Star) }
}
// RowDefinitions isolated
// Actual code
private void pInitStackLayout()
{
grid1 = new Grid()
{
};
grid2 = new Grid()
{
};
biggrid = new Grid()
{
RowDefinitions = new RowDefinitionCollection
{
new RowDefinition { Height = new GridLength(8, GridUnitType.Star) },
new RowDefinition { Height = new GridLength(2, GridUnitType.Star) }
},
BackgroundColor = Color.Transparent,
Margin = new Thickness(0),
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.StartAndExpand,
Orientation = StackOrientation.Vertical,
};
biggrid.Children.Add(grid1,0,0);
biggrid.Children.Add(grid2,0,1);
this.Content = biggrid;
}

How to make sure elements land on full pixel boundaries in a StackLayout?

I have a StackLayout holding some elements for a custom cell in a ListView. The problem I am running in to is that my images are not landing on full pixel boundaries. This is causing the straight lines in my graphics to become blurry as they are not landing on pixel boundaries. Is there a way for me to easily prevent this behavior, perhaps in a custom renderer?
public InputEditCell()
{
image = new Image { HorizontalOptions = LayoutOptions.Start };
image.SetBinding(Image.SourceProperty, new Binding("Image.ImageNameSelect"));
image.BindingContext = _tempInputViewModel;
var tappedImageGesture = new TapGestureRecognizer
{
Command = new Command(OnImageTapped),
CommandParameter = image
};
image.GestureRecognizers.Add(tappedImageGesture);
nameEntry = new Entry()
{
TextColor = Color.FromHex("E60006"),
FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Entry)),
VerticalOptions = LayoutOptions.Center,
HorizontalOptions = LayoutOptions.FillAndExpand
};
nameEntry.SetBinding(Entry.TextProperty, "Name");
nameEntry.BindingContext = _tempInputViewModel;
var acceptImage = new Image
{
Source = ResourceHandler.GetAcceptImage(),
VerticalOptions = LayoutOptions.Center,
HorizontalOptions = LayoutOptions.End,
};
var tappedAcceptGesture = new TapGestureRecognizer
{
Command = new Command(OnAcceptTapped),
CommandParameter = acceptImage
};
acceptImage.GestureRecognizers.Add(tappedAcceptGesture);
var cancelImage = new Image
{
Source = ResourceHandler.GetCancelImage(),
VerticalOptions = LayoutOptions.Center,
HorizontalOptions = LayoutOptions.End,
};
var tappedCancelGesture = new TapGestureRecognizer
{
Command = new Command(OnCancelTapped),
CommandParameter = cancelImage
};
cancelImage.GestureRecognizers.Add(tappedCancelGesture);
var viewLayout = new StackLayout {
Orientation = StackOrientation.Horizontal,
Children = { image, nameEntry, acceptImage, cancelImage },
Padding = new Thickness(10, 10, 10 ,10)
};
View = viewLayout;
View.GestureRecognizers.Clear();
View.GestureRecognizers.Add(new TapGestureRecognizer());
}

How Disable Gestures (swipe l/r) of CarouselPage?

I want to use CarouselPage to have the right-to-left transition animation.
Could you please help me disable getsures in CarouselPage? I can't do that.
Thanks.
Setting InputTransparent of the CarouselPage will do the thing:
public App ()
{
MainPage = new CarouselPage{
InputTransparent = true, //This!
Children = {
new ContentPage{
Content = new Label{
Text = "Page 1",
HorizontalOptions = LayoutOptions.CenterAndExpand,
VerticalOptions = LayoutOptions.CenterAndExpand,
}
},
new ContentPage{
Content = new Label{
Text = "Page 2",
HorizontalOptions = LayoutOptions.CenterAndExpand,
VerticalOptions = LayoutOptions.CenterAndExpand,
}
}
}
};
}

Horizontal ScrollView - xamarin.forms

I know there are many about this topic (Scroll horizontally in Xamarin.Forms ScrollView), but I could not implement the horizontal scrollview which scrolls horizontally.
public class DetailView : ContentPage
{
public DetailView ()
{
StackLayout stack = new StackLayout {
Orientation = StackOrientation.Horizontal,
};
for (int i = 0; i < 40; i++)
stack.Children.Add (new Button { Text = "Button" });
var scrollView = new ScrollView
{
Orientation = ScrollOrientation.Horizontal,
Content = stack
};
Content = scrollView;
}
}
Any ideas?
try this:
public DetailView()
{
var scrollableContent = new StackLayout()
{
Orientation = StackOrientation.Horizontal,
HorizontalOptions = LayoutOptions.Fill,
Children =
{
new BoxView(){HeightRequest=40, WidthRequest=40, BackgroundColor = Color.Red},
new BoxView(){HeightRequest=40, WidthRequest=40, BackgroundColor = Color.Green},
new BoxView(){HeightRequest=40, WidthRequest=40, BackgroundColor = Color.Blue},
new BoxView(){HeightRequest=40, WidthRequest=40, BackgroundColor = Color.Maroon},
}
};
Content = new ScrollView()
{
HorizontalOptions = LayoutOptions.FillAndExpand,
Orientation = ScrollOrientation.Horizontal,
Content = scrollableContent,
};
}

Fill all the screen with StackLayout

I have a StackLayout coded like this:
StackLayout mainStackLayOut = new StackLayout{
BackgroundColor = Color.Blue,
//VerticalOptions = LayoutOptions.FillAndExpand,
//WidthRequest = width,
HorizontalOptions = LayoutOptions.FillAndExpand,
Orientation = StackOrientation.Vertical
};
But I want the StackLayout to fill all the screen width and height, also I have tree buttons added like this:
StackLayout buttonsStackLayOut = new StackLayout
{
BackgroundColor = Color.White,
//VerticalOptions = LayoutOptions.Fill,
HorizontalOptions = LayoutOptions.Fill,
Orientation = StackOrientation.Horizontal,
Spacing = 0
};
mainStackLayOut.Children.Add(buttonsStackLayOut);
Image doctorImage = new Image
{
WidthRequest = width / 3,
HeightRequest = 50,
BackgroundColor = Color.Gray,
Source = ImageSource.FromFile ("about.png")
};
buttonsStackLayOut.Children.Add(doctorImage);
How can I fill all the screensize?
In the most simple form I have managed to achieve what you require.
I set the content of the screen to the main stack layout.
var mainStackLayout = new StackLayout { BackgroundColor = Color.Blue};
var buttonsStackLayout = new StackLayout { BackgroundColor = Color.White, Orientation = StackOrientation.Horizontal , Spacing = 0 };
Image about = new Image { HeightRequest = 50, Source = ImageSource.FromFile("about.jpg") };
Image twitter = new Image { HeightRequest = 50, Source = ImageSource.FromFile("twitter.jpg") };
Image refresh = new Image { HeightRequest = 50, Source = ImageSource.FromFile("refresh.jpg") };
buttonsStackLayout.Children.Add(about);
buttonsStackLayout.Children.Add(twitter);
buttonsStackLayout.Children.Add(refresh);
mainStackLayout.Children.Add(buttonsStackLayout);
this.Content = mainStackLayout;

Resources