CODEWITHSUNDEEP
xamarinmvvmwebviewbinding
Felix Fischer
Felix Fischer

Reputation: 33

Xamarin.Forms MVVM WebView not Loading

We use the Xamarin.Forms WebView to display content of a certain object, but this content won't be displayed in the WebView until we rotate the Device twice.

The .xmal-File Code:

<WebView x:Name="WebView" HeightRequest="{Binding Height}" WidthRequest="{Binding Width}">
    <WebView.Source>
        <HtmlWebViewSource Html="{Binding Code}"/>
    </WebView.Source>
</WebView>

And the ModelView:

    private double _height;
    private double _width;
    public ICommand ItemTappedCommand { get; private set; }
    public string SearchBarLabelText { get; private set; }
    public object LastTappedItem { get; set; }
    public int ColumnCount { get; private set; } = 2;

    public string CodeName { get; private set; }
    public string CodeContent { get; private set; }

    public string Code { get; private set; }

    public double Height
    {
        get => _height;
        private set
        {
            if (_height == value)
                return;
            _height = value;
            OnPropertyChanged(nameof(Height));
        }
    }

    public double Width
    {
        get => _width;
        private set
        {
            if (_width == value)
                return;
            _width = value;
            OnPropertyChanged(nameof(Width));
        }
    }

    public ErrorcodeDetailPageViewModel(Errorcode code)
    {
        Device.Info.PropertyChanged += DevicePropertyChanged;
        DevicePropertyChanged(null, null);

        Code = code.Content;
        CodeName = code.Label;
        CodeContent = code.Content;


    }

    private void DevicePropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        switch (Device.Info.CurrentOrientation)
        {
            case DeviceOrientation.Portrait:
                Height = Device.Info.PixelScreenSize.Height - 150; // 120 is the Height of the ControlTemplate used on this Page + the top row on uwp; only required in portrait mode
                Width = Device.Info.PixelScreenSize.Width;
                break;

            case DeviceOrientation.Landscape:
                Height = Device.Info.PixelScreenSize.Height - 50;
                Width = Device.Info.PixelScreenSize.Width;
                break;
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    [NotifyPropertyChangedInvocator]
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

So, als already described, if we rotate the Device twice the content will be displayed, otherwise it won't. I think the problem is related to our bindings...

I should mention that we have some kind ob banner/headline on top of the WebView.

Upvotes: 3

Views: 1515

Answers (1)

Nkosi
Nkosi

Reputation: 247471

Code should also have a backing notification so that the view is aware of when its value changes.

Like

private string code;

public string Code {
    get => code;
    private set {
        if (code == value)
            return;
        code = value;
        OnPropertyChanged(nameof(Code));
    }
}

If you walk through the step of why you have to turn twice, you will see that is why you have to do that.

When the value is first set it is blank.

On first turn the value is set by the event handler not since no notification is sent to the view it is not visibly changed.

On second turn the value is already set and when the view redraws, the value is shown in the view.

Upvotes: 1

Related Questions