ListView items disappearing on touch or click on custom webview

658 views Asked by At

I am creating an UWP app through Xamarin PCL. In my page I have a listview and a native uwp webview(which is rendered through custom renderer) inside another stack layout.

My problem is:- When I am running the app in windows laptop which is having touchscreen, the list items items which are currently shown on screen, disappears on clicking or touching anywhere on the webview container. Click or touch at any other location doesn't affect the list.

However list items are present in the list itemssource as clicking on any item cell, app is working as expected. In emulator app is working fine.

I have checked with the long list data, in this case, only the items which are currently in view are disappearing while other items are shown properly as I can see them on scrolling down.

Please Suggest any solution.

View

public class NativeWebView : View
{
    public NativeWebView()
    {
        var htmlSource = new HtmlWebViewSource();
    }

    public static readonly BindableProperty UriProperty = BindableProperty.Create(
       propertyName: "Uri",
       returnType: typeof(string),
       declaringType: typeof(NativeWebView),
       defaultValue: default(string));

    public string Uri
    {
        get { return (string)GetValue(UriProperty); }
        set { SetValue(UriProperty, value); }
    }
}

CustomRenderer For webview

[assembly: ExportRenderer(typeof(NativeWebView), typeof(CustomWebViewRenderer))]

namespace XYZ

{

public class CustomWebViewRenderer : ViewRenderer<NativeWebView, WebView>

{

    static WebView webView;

    public CustomWebViewRenderer()
    {            
    }

    protected override void OnElementChanged(ElementChangedEventArgs<NativeWebView> e)
    {

        base.OnElementChanged(e);

        if (Control == null)
        {
            SetNativeControl(new WebView());
            webView = Control;
        }

        if (e.NewElement != null)
        {
            Control.Source = new Uri(string.Format("ms-appx-web:///Content//{0}", Element.Uri));
        }
    }

}

Xaml.cs

public ClassName()
    {
        InitializeComponent();

        NativeWebView nativeWebView = new NativeWebView();
        nativeWebView.Uri = "index.html";
        nativeWebView.HorizontalOptions = LayoutOptions.FillAndExpand;
        nativeWebView.VerticalOptions = LayoutOptions.FillAndExpand;

        myStackLayout.Children.Add(nativeWebView);

        this.viewModel = new PersonViewModel();

        this.BindingContext = this.viewModel;

        this.LoadItems(null, EventArgs.Empty);
    }

    public void LoadItems(object sender, EventArgs e)
    {
        this.listView.ItemsSource = this.viewModel.PersonItems;
    }

Xaml

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="300" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <StackLayout Grid.Column="0" Orientation="Vertical">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="40" />
                </Grid.RowDefinitions>
            <StackLayout Grid.Row="0" Orientation="Vertical">
                <ListView x:Name="listView" SeparatorVisibility="None" RowHeight="80">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <StackLayout Orientation="Vertical" Padding="2,15">
                                    <Label Text ="{Binding FirstName, Mode=OneWay}" HorizontalTextAlignment="Start" TextColor="#FFFFFF" Margin="20, 0, 0, 0"></Label>
                                    <Label Text ="{Binding LastName, Mode=OneWay}" HorizontalTextAlignment="Start" TextColor="#FFFFFF" Margin="20, 0, 0, 10"></Label>
                                    <StackLayout HeightRequest="1" WidthRequest="190" HorizontalOptions="Start"  BackgroundColor="White" Margin="20, 0, 0, 10" />
                                </StackLayout>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </StackLayout>
        </Grid>
        </StackLayout>

        <StackLayout x:Name="myStackLayout" Grid.Row="0" Grid.Column="1" Spacing="0"  >
        </StackLayout>
    </Grid>
0

There are 0 answers