I've following situation.
<ScrollView BackgroundColor="DeepPink">
...
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<ContentView Opacity="{Binding ViewProvider.IsCancelling, Converter={StaticResource BoolToOpacityConverter}}" Content="{Binding ViewProvider.CurrentView}"/>
</Grid>
...
</ScrollView>
The Content View contains multiple elements and one of them is a StackLayout with BindableLayout.ItemsSource
<StackLayout BindableLayout.ItemsSource="{Binding Rings}" Margin="12,0,0,0">
<BindableLayout.ItemTemplate>
<DataTemplate>
...
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
The Rings will be added by different actions while the View is open. As soon as this happens, the height of the ScrollViewer increases, but the parts below are cut off or just not rendered. (It cut's the height off, which the rings are using - I guess because the Grid doesn't resize? But why?)
I've tried to call InvalidateMeasure() and ForceLayout() after adding rings but without any changes. Any ideas?
Edit
As requested in the comments I've uploaded a simple demo on github to reproduce this issue.
https://github.com/Valronicon/ScrollViewerIssue
Thank you!
Edit 2
I was able to fix this by wrapping the ScrollViewer within an additional Grid. Don't know why it works, but it works...
As Rich Mentioned wrapping the scrollview in a grid seemed to solve this issue for me as well, so im posting it as an answer
<Grid>
<ScrollView>
...
</ScrollView>
</Grid>
Related
I need advice. There is some way in PopupPage to make content InputTransparent = "True".
I'm trying to create an inputtransparent content pop-up page.
Unfortunately, InputTransparent = "True" does not work for x: Name = "GridRoot" in PopUpPage. It should go click on the Button in MainPage.
I have the following XAML code here:
here is the code-behind:
PopUpTest.cs
Use RowDefinitions to explicitly say what areas are NOT part of the clickable content.
<Grid RowDefinitions="*,Auto,*" InputTransparent="True" CascadeInputTransparent="False" >
<Grid Grid.Row="1" BackgroundColor="Red">
...
</Grid>
</Grid>
This makes an outer 3-row grid. Inside that, on the second row (Row=1) is your visible content. Surrounded by Rows 0 and 2, which divide the extra space between them - but have no content, so they should not block input.
I don't think you need to put anything in rows 0 and 2, but if the above doesn't work, try:
...
<BoxView Grid.Row="0" VerticalOptions="Fill" InputTransparent="True" />
<Grid Grid.Row="1" BackgroundColor="Red">
...
</Grid>
<BoxView Grid.Row="2" VerticalOptions="Fill" InputTransparent="True" />
I don't know if the BoxView's need HeightRequest attributes. If above doesn't work, try adding HeightRequest="999" to them. The Grid logic will limit each BoxView's height to fit in its row.
Recently I changed a collectionview by setting its VerticalItemSpacing property to have a preseted value, it seemed to work fine but just noticed that when some new element is added, the spacing between it and penultimate one is zero until I scroll the view. When I back to the last element again, the space between them appears. Is this a known issue? some one knows a fix for that?
my data templates are grids with boxviews inside(for simulating a background since frames were seeing to be more expensive) and this is my ItemsLayout property:
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" VerticalItemSpacing="3" />
</CollectionView.ItemsLayout>
This issue is related to your DataTemplate name of MapMsgSend, please check this line
<BoxView Margin="-5,-5,-5,-1" Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="3" CornerRadius="5" BackgroundColor="#dcf8c6" />
If you set the Margin to "-5,-5,-5,-1" , it will get the result like this screenshot.
If I set the margin to Margin="3" it worked like following sceenshot.
I have a Carousel View that works really well.
<my:Carousel x:FieldModifier="public" x:Name="Carousel" IsDoubleTapEnabled="False" ItemsSource="{Binding Source={StaticResource ces}}" Margin="21,730,33,37" ItemMargin="20" ItemDepth="200" ItemRotationX="0" ItemRotationY="0" ItemRotationZ="0" InvertPositive="False" PointerPressed="Carousel_PointerPressed" SelectionChanged="Carousel_SelectionChanged" ManipulationStarted="Carousel_ManipulationStarted" >
<my:Carousel.ItemTemplate>
<DataTemplate x:DataType="data:Bilder">
<StackPanel Orientation="Vertical">
<Image Width="250" Height="170" Source="{Binding Bild}"/>
</StackPanel>
</DataTemplate>
</my:Carousel.ItemTemplate>
</my:Carousel>
I want to remove the border if the selection changed of a item (see picture below). How can I manage this? I know there is something with a Storyboard, but i dont know how to use it.
Please help me.
EDIT
If i try it with sample pictures which i created self with paint, is there no border. But as you can see the shoes does not have any border (See Pic 1 and 4). So why he add this border? Anyone know this issue?
your Images are to large you Need to resize it to 250/170 and the broder will be gone.
I am using ViewCell to create rows in my table settings page. I have a setting to select a Light or Dark theme.
<ViewCell Height="50">
<StackLayout x:Name="darkTheme" VerticalOptions="FillAndExpand" Padding="20,0,20,0">
<StackLayout Orientation="Horizontal" VerticalOptions="CenterAndExpand">
<Label Text="Dark" XAlign="Center" FontSize="15"/>
<Label x:Name="darkThemeCheckmark" Text="{x:Static local:FontAwesome.FACheck}" FontFamily="FontAwesome" XAlign="Center" IsVisible="false" FontSize="12" HorizontalOptions="EndAndExpand"/
</StackLayout>
</StackLayout>
</ViewCell>
<ViewCell Height="50">
<StackLayout x:Name="lightTheme" VerticalOptions="FillAndExpand" Padding="20,0,20,0">
<StackLayout Orientation="Horizontal" VerticalOptions="CenterAndExpand">
<Label Text="Light" XAlign="Center" FontSize="15"/>
<Label x:Name="lightThemeCheckmark" Text="{x:Static local:FontAwesome.FACheck}" FontFamily="FontAwesome" XAlign="Center" IsVisible="false" FontSize="12"/>
</StackLayout>
</StackLayout>
</ViewCell>
Whenever I switch from dark to light theme, there is faint light line on the left side between my rows that I can't seem to get rid of. Please refer to the images below:
In my renderer I have set the following:
tableView.LayoutMargins = new UIEdgeInsets() { Left = 20 };
cell.SeparatorInset = new UIEdgeInsets() { Left = 20 };
cell.LayoutMargins = new UIEdgeInsets() { Left = 20 };
Anyone knows how to get rid of this line?
Edit:
I wanted it to look like below:
I am novice to xamarin but, According to this post you need to do this on the UITableView and on your UITableViewCell subclasses.
I hope this will help you. :)
Apologies in advance incase you have already considered this but I believe what you're looking for is 'TableView.SeparatorInset' this would apply to your renderer rather than the xaml your using in your PCL. You can find the documentation around styling the tableviews at this link.
E.G.
TableView.SeparatorInset.InsetRect(new CGRect(4, 4, 150, 2));
Moving the inset of the seperator will get around the problem I saw you mention in the comments of the other answer about the whole table shifting. Please let me know if you've tried this already, it's the simplest solution but there are other options available to you. (They just aren't as nice).
Edit: Example of a way of achieving your goals by creating your own seperators, not my favourite but would also resolve the issue you've highlighted as you'd have complete control over the styling of a seperator. Refer to this Link
I am trying to display data using carousel view in my forms application. I am not sure what am I missing but data is not getting populated, I have followed almost all available samples but still I have not found any success. Please help me get out of this problem:
I am using the following code in my xaml file:
<forms:CarouselView x:Name="listview" ItemsSource="postIdList" HeightRequest="200" Margin="5">
<forms:CarouselView.ItemTemplate>
<DataTemplate>
<ContentPage >
<StackLayout >
<Label Text="{Binding .}" FontSize="20" TextColor="Black" HorizontalOptions="Center" />
</StackLayout>
</ContentPage>
</DataTemplate>
</forms:CarouselView.ItemTemplate>
</forms:CarouselView>
And I am trying to populate the data in the following manner in .cs file:
List<string> postIdList = new List<string>
{
"Carousel", "Carousel", "carousel"
};
listview.ItemsSource = postIdList;
If I give a background colour for carousal view I am able to see that colour, but text is not getting displayed.
Please let me know my mistake.
In case of a ListView, you need an ObservableCollection instead of a List. Switch it around and see if it works?
On your XAML you are defining a <ContentPage> inside the <Datatemplate>. Replace the <ContentPage> with a <ViewCell> or a <Grid>
Here is a great example on how to use it, you need to keep in mind that CarouselView work like a ListView, it need to have a Datatemplate.