Xamarin forms custom scrollview showing weird behavior











up vote
1
down vote

favorite












I have a customized ScrollView as per the requirement which is based on the TLScrollView.



Now when I am adding some data to it there is weird behaviour that I noticed recently a part of the screen area is unclickable, And the rest of the part works fine.



Now the same code works like a charm on Android but iOS is showing this weird behaviour,



Xaml:



  <controls:TLScrollView Orientation="Horizontal" BackgroundColor="White"
x:Name="ListAddons" ItemsSource="{Binding ListAddons}" AbsoluteLayout.LayoutFlags = "All"
AbsoluteLayout.LayoutBounds = "0.5, 0.5, 1.0, 1.0">

<controls:TLScrollView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout BackgroundColor="Transparent" Margin = "0, 5, 0, 0">
<Grid BackgroundColor="White" InputTransparent="true" RowSpacing = "0" ColumnSpacing = "0">
<Grid.RowDefinitions>
<RowDefinition Height="0.5*" />
<RowDefinition Height="45.0*" />
<RowDefinition Height="45*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="1" />
</Grid.ColumnDefinitions>
<ffimageloading:CachedImage Source="{Binding Icon, Converter={StaticResource Base64ToImageConverter}}"
ErrorPlaceholder = "nopreviewlandscape" LoadingPlaceholder = "loadingicon"
Grid.Row="1" Grid.Column="0" HorizontalOptions="Center"
VerticalOptions="Center" Aspect="AspectFill" />
<Label x:Name="lblRecommendationsName" Margin="0" Text="{Binding CategoryName}"
LineBreakMode="WordWrap" XAlign="Center" TextColor="{StaticResource gray_text_color}"
VerticalOptions="Center" HorizontalOptions="Center" Grid.Row="2"
Grid.Column="0" Style="{StaticResource RecommendationName}">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="OpenSans-Light" />
<On Platform="Android" Value="OpenSans-Light" />
</OnPlatform>
</Label.FontFamily>
<Label.TextColor>
<OnPlatform x:TypeArguments="Color">
<On Platform="Android" Value="#000000"></On>
</OnPlatform>
</Label.TextColor>
</Label>

<BoxView WidthRequest="0" Grid.Row="1" Grid.Column="1"
BackgroundColor="{StaticResource separator_color}"
Grid.RowSpan="4" Style="{StaticResource BoxViewHomeStyle}">
</BoxView>

</Grid>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Path=BindingContext.AddonsClickCommand,Source={x:Reference ListAddons}}"
CommandParameter="{Binding CategoryId}"
/>
</StackLayout.GestureRecognizers>
</StackLayout>
</ViewCell>
</DataTemplate>
</controls:TLScrollView.ItemTemplate>
</controls:TLScrollView>


First, I thought there must be some sort of an overlapping in there which might be causing this but then I realized that the same code was working on Android devices and causing this on iOS.



The part of the image that is unclickable is inside the black box everywhere else the click event works well. Unclickable image










share|improve this question
























  • Which ios deivce did you run ?
    – Lucas Zhang - MSFT
    Nov 22 at 7:27










  • iPhone X,6,7,8,6s(Physical devices) and none of them seem to get the touch at that position
    – G.hakim
    Nov 22 at 7:37










  • The area of unclickable is in toolbar?
    – Lucas Zhang - MSFT
    Nov 22 at 7:39










  • No its not this is not the toolbar this is part of the screen around in the middle, i have only added the part of the screen that was relevant
    – G.hakim
    Nov 22 at 7:40

















up vote
1
down vote

favorite












I have a customized ScrollView as per the requirement which is based on the TLScrollView.



Now when I am adding some data to it there is weird behaviour that I noticed recently a part of the screen area is unclickable, And the rest of the part works fine.



Now the same code works like a charm on Android but iOS is showing this weird behaviour,



Xaml:



  <controls:TLScrollView Orientation="Horizontal" BackgroundColor="White"
x:Name="ListAddons" ItemsSource="{Binding ListAddons}" AbsoluteLayout.LayoutFlags = "All"
AbsoluteLayout.LayoutBounds = "0.5, 0.5, 1.0, 1.0">

<controls:TLScrollView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout BackgroundColor="Transparent" Margin = "0, 5, 0, 0">
<Grid BackgroundColor="White" InputTransparent="true" RowSpacing = "0" ColumnSpacing = "0">
<Grid.RowDefinitions>
<RowDefinition Height="0.5*" />
<RowDefinition Height="45.0*" />
<RowDefinition Height="45*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="1" />
</Grid.ColumnDefinitions>
<ffimageloading:CachedImage Source="{Binding Icon, Converter={StaticResource Base64ToImageConverter}}"
ErrorPlaceholder = "nopreviewlandscape" LoadingPlaceholder = "loadingicon"
Grid.Row="1" Grid.Column="0" HorizontalOptions="Center"
VerticalOptions="Center" Aspect="AspectFill" />
<Label x:Name="lblRecommendationsName" Margin="0" Text="{Binding CategoryName}"
LineBreakMode="WordWrap" XAlign="Center" TextColor="{StaticResource gray_text_color}"
VerticalOptions="Center" HorizontalOptions="Center" Grid.Row="2"
Grid.Column="0" Style="{StaticResource RecommendationName}">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="OpenSans-Light" />
<On Platform="Android" Value="OpenSans-Light" />
</OnPlatform>
</Label.FontFamily>
<Label.TextColor>
<OnPlatform x:TypeArguments="Color">
<On Platform="Android" Value="#000000"></On>
</OnPlatform>
</Label.TextColor>
</Label>

<BoxView WidthRequest="0" Grid.Row="1" Grid.Column="1"
BackgroundColor="{StaticResource separator_color}"
Grid.RowSpan="4" Style="{StaticResource BoxViewHomeStyle}">
</BoxView>

</Grid>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Path=BindingContext.AddonsClickCommand,Source={x:Reference ListAddons}}"
CommandParameter="{Binding CategoryId}"
/>
</StackLayout.GestureRecognizers>
</StackLayout>
</ViewCell>
</DataTemplate>
</controls:TLScrollView.ItemTemplate>
</controls:TLScrollView>


First, I thought there must be some sort of an overlapping in there which might be causing this but then I realized that the same code was working on Android devices and causing this on iOS.



The part of the image that is unclickable is inside the black box everywhere else the click event works well. Unclickable image










share|improve this question
























  • Which ios deivce did you run ?
    – Lucas Zhang - MSFT
    Nov 22 at 7:27










  • iPhone X,6,7,8,6s(Physical devices) and none of them seem to get the touch at that position
    – G.hakim
    Nov 22 at 7:37










  • The area of unclickable is in toolbar?
    – Lucas Zhang - MSFT
    Nov 22 at 7:39










  • No its not this is not the toolbar this is part of the screen around in the middle, i have only added the part of the screen that was relevant
    – G.hakim
    Nov 22 at 7:40















up vote
1
down vote

favorite









up vote
1
down vote

favorite











I have a customized ScrollView as per the requirement which is based on the TLScrollView.



Now when I am adding some data to it there is weird behaviour that I noticed recently a part of the screen area is unclickable, And the rest of the part works fine.



Now the same code works like a charm on Android but iOS is showing this weird behaviour,



Xaml:



  <controls:TLScrollView Orientation="Horizontal" BackgroundColor="White"
x:Name="ListAddons" ItemsSource="{Binding ListAddons}" AbsoluteLayout.LayoutFlags = "All"
AbsoluteLayout.LayoutBounds = "0.5, 0.5, 1.0, 1.0">

<controls:TLScrollView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout BackgroundColor="Transparent" Margin = "0, 5, 0, 0">
<Grid BackgroundColor="White" InputTransparent="true" RowSpacing = "0" ColumnSpacing = "0">
<Grid.RowDefinitions>
<RowDefinition Height="0.5*" />
<RowDefinition Height="45.0*" />
<RowDefinition Height="45*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="1" />
</Grid.ColumnDefinitions>
<ffimageloading:CachedImage Source="{Binding Icon, Converter={StaticResource Base64ToImageConverter}}"
ErrorPlaceholder = "nopreviewlandscape" LoadingPlaceholder = "loadingicon"
Grid.Row="1" Grid.Column="0" HorizontalOptions="Center"
VerticalOptions="Center" Aspect="AspectFill" />
<Label x:Name="lblRecommendationsName" Margin="0" Text="{Binding CategoryName}"
LineBreakMode="WordWrap" XAlign="Center" TextColor="{StaticResource gray_text_color}"
VerticalOptions="Center" HorizontalOptions="Center" Grid.Row="2"
Grid.Column="0" Style="{StaticResource RecommendationName}">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="OpenSans-Light" />
<On Platform="Android" Value="OpenSans-Light" />
</OnPlatform>
</Label.FontFamily>
<Label.TextColor>
<OnPlatform x:TypeArguments="Color">
<On Platform="Android" Value="#000000"></On>
</OnPlatform>
</Label.TextColor>
</Label>

<BoxView WidthRequest="0" Grid.Row="1" Grid.Column="1"
BackgroundColor="{StaticResource separator_color}"
Grid.RowSpan="4" Style="{StaticResource BoxViewHomeStyle}">
</BoxView>

</Grid>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Path=BindingContext.AddonsClickCommand,Source={x:Reference ListAddons}}"
CommandParameter="{Binding CategoryId}"
/>
</StackLayout.GestureRecognizers>
</StackLayout>
</ViewCell>
</DataTemplate>
</controls:TLScrollView.ItemTemplate>
</controls:TLScrollView>


First, I thought there must be some sort of an overlapping in there which might be causing this but then I realized that the same code was working on Android devices and causing this on iOS.



The part of the image that is unclickable is inside the black box everywhere else the click event works well. Unclickable image










share|improve this question















I have a customized ScrollView as per the requirement which is based on the TLScrollView.



Now when I am adding some data to it there is weird behaviour that I noticed recently a part of the screen area is unclickable, And the rest of the part works fine.



Now the same code works like a charm on Android but iOS is showing this weird behaviour,



Xaml:



  <controls:TLScrollView Orientation="Horizontal" BackgroundColor="White"
x:Name="ListAddons" ItemsSource="{Binding ListAddons}" AbsoluteLayout.LayoutFlags = "All"
AbsoluteLayout.LayoutBounds = "0.5, 0.5, 1.0, 1.0">

<controls:TLScrollView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout BackgroundColor="Transparent" Margin = "0, 5, 0, 0">
<Grid BackgroundColor="White" InputTransparent="true" RowSpacing = "0" ColumnSpacing = "0">
<Grid.RowDefinitions>
<RowDefinition Height="0.5*" />
<RowDefinition Height="45.0*" />
<RowDefinition Height="45*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="1" />
</Grid.ColumnDefinitions>
<ffimageloading:CachedImage Source="{Binding Icon, Converter={StaticResource Base64ToImageConverter}}"
ErrorPlaceholder = "nopreviewlandscape" LoadingPlaceholder = "loadingicon"
Grid.Row="1" Grid.Column="0" HorizontalOptions="Center"
VerticalOptions="Center" Aspect="AspectFill" />
<Label x:Name="lblRecommendationsName" Margin="0" Text="{Binding CategoryName}"
LineBreakMode="WordWrap" XAlign="Center" TextColor="{StaticResource gray_text_color}"
VerticalOptions="Center" HorizontalOptions="Center" Grid.Row="2"
Grid.Column="0" Style="{StaticResource RecommendationName}">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="OpenSans-Light" />
<On Platform="Android" Value="OpenSans-Light" />
</OnPlatform>
</Label.FontFamily>
<Label.TextColor>
<OnPlatform x:TypeArguments="Color">
<On Platform="Android" Value="#000000"></On>
</OnPlatform>
</Label.TextColor>
</Label>

<BoxView WidthRequest="0" Grid.Row="1" Grid.Column="1"
BackgroundColor="{StaticResource separator_color}"
Grid.RowSpan="4" Style="{StaticResource BoxViewHomeStyle}">
</BoxView>

</Grid>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Path=BindingContext.AddonsClickCommand,Source={x:Reference ListAddons}}"
CommandParameter="{Binding CategoryId}"
/>
</StackLayout.GestureRecognizers>
</StackLayout>
</ViewCell>
</DataTemplate>
</controls:TLScrollView.ItemTemplate>
</controls:TLScrollView>


First, I thought there must be some sort of an overlapping in there which might be causing this but then I realized that the same code was working on Android devices and causing this on iOS.



The part of the image that is unclickable is inside the black box everywhere else the click event works well. Unclickable image







xamarin xamarin.forms xamarin.ios xamarin.android






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 21 at 6:27

























asked Nov 20 at 14:53









G.hakim

2,7331627




2,7331627












  • Which ios deivce did you run ?
    – Lucas Zhang - MSFT
    Nov 22 at 7:27










  • iPhone X,6,7,8,6s(Physical devices) and none of them seem to get the touch at that position
    – G.hakim
    Nov 22 at 7:37










  • The area of unclickable is in toolbar?
    – Lucas Zhang - MSFT
    Nov 22 at 7:39










  • No its not this is not the toolbar this is part of the screen around in the middle, i have only added the part of the screen that was relevant
    – G.hakim
    Nov 22 at 7:40




















  • Which ios deivce did you run ?
    – Lucas Zhang - MSFT
    Nov 22 at 7:27










  • iPhone X,6,7,8,6s(Physical devices) and none of them seem to get the touch at that position
    – G.hakim
    Nov 22 at 7:37










  • The area of unclickable is in toolbar?
    – Lucas Zhang - MSFT
    Nov 22 at 7:39










  • No its not this is not the toolbar this is part of the screen around in the middle, i have only added the part of the screen that was relevant
    – G.hakim
    Nov 22 at 7:40


















Which ios deivce did you run ?
– Lucas Zhang - MSFT
Nov 22 at 7:27




Which ios deivce did you run ?
– Lucas Zhang - MSFT
Nov 22 at 7:27












iPhone X,6,7,8,6s(Physical devices) and none of them seem to get the touch at that position
– G.hakim
Nov 22 at 7:37




iPhone X,6,7,8,6s(Physical devices) and none of them seem to get the touch at that position
– G.hakim
Nov 22 at 7:37












The area of unclickable is in toolbar?
– Lucas Zhang - MSFT
Nov 22 at 7:39




The area of unclickable is in toolbar?
– Lucas Zhang - MSFT
Nov 22 at 7:39












No its not this is not the toolbar this is part of the screen around in the middle, i have only added the part of the screen that was relevant
– G.hakim
Nov 22 at 7:40






No its not this is not the toolbar this is part of the screen around in the middle, i have only added the part of the screen that was relevant
– G.hakim
Nov 22 at 7:40



















active

oldest

votes











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53395669%2fxamarin-forms-custom-scrollview-showing-weird-behavior%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown






























active

oldest

votes













active

oldest

votes









active

oldest

votes






active

oldest

votes
















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.





Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


Please pay close attention to the following guidance:


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53395669%2fxamarin-forms-custom-scrollview-showing-weird-behavior%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Wiesbaden

Marschland

Dieringhausen