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.
xamarin xamarin.forms xamarin.ios xamarin.android
add a comment |
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.
xamarin xamarin.forms xamarin.ios xamarin.android
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
add a comment |
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.
xamarin xamarin.forms xamarin.ios xamarin.android
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.
xamarin xamarin.forms xamarin.ios xamarin.android
xamarin xamarin.forms xamarin.ios xamarin.android
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
add a comment |
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
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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