How to create WebView and the preview of a web page in .NET MAUI
Tags: csharp, dotnet, maui, ios
Published: 2023-06-27 15:18:43

##First words
Hello guys! In this article, I want to show you instances of how to create web views and previews of the sites. Please make yourself comfortable, take tea or coffee, and let's begin.

##Project
Let's create a new project from the template.
```bash
dotnet new maui -n WebViewSample
```
And let's straight clean up `MainPage`. You should delete all code in the ScrollView block and delete reductant code in the class, and it should be only the constructor and initialize component in it.

##Preview of the sites
I'll create two view models. The first will be a preview, and the second will be a web view. You need to create a new folder at the project's root. We can call this folder `ViewModels.`
Before we continue, let's add one package. I want to warn you, and it's not necessary. Otherwise, you need to write much more code. I would like that you install this `CommunityToolkit.Mvvm` package. After you do this, you should create a new class named `MainPageViewModel` and paste this code:
```C#
[ObservableObject]
public partial class MainPageViewModel
{
    public ICommand SelectionChangedCommand
    {
        get => new Command(async () => await GoToWebsiteDetails());
    }

    private ObservableCollection<WebSiteModel> _websiteList;

    public ObservableCollection<WebSiteModel> WebsiteList
    {
        get => _websiteList;
        set
        {
            _websiteList = value;
            OnPropertyChanged();
        }
    }

    private WebSiteModel _selectedWebsite;

    public WebSiteModel SelectedWebsite
    {
        get => _selectedWebsite;
        set => SetProperty(ref _selectedWebsite, value);
    }


    private async Task GoToWebsiteDetails()
    {
        if (SelectedWebsite == null)
        {
            return;
        }

        SelectedWebsite = null;
    }

    public MainPageViewModel()
    {
        WebsiteList = GetDataForList();
    }

    private ObservableCollection<WebSiteModel> GetDataForList()
    {
        return new ObservableCollection<WebSiteModel>
        {
            new()
            {
                Title = "Facebook",
                Description =
                    "Facebook is an online social media and social networking service owned by American technology giant Meta Platforms. ",
                Url = new Uri("https://facebook.com/")
            },
            new()
            {
                Title = "Amazon",
                Description =
                    "Amazon.com, Inc.[1] (/ˈæməzɒn/ AM-ə-zon UK also /ˈæməzən/ AM-ə-zən) is an American multinational technology company focusing on e-commerce, cloud computing, online advertising, digital streaming, and artificial intelligence.",
                Url = new Uri("https://www.amazon.com/")
            },
            new()
            {
                Title = "Apple Inc",
                Description =
                    "Apple Inc. is an American multinational technology company headquartered in Cupertino, California. Apple is the world's largest technology company by revenue, with US$394.3 billion in 2022 revenue.[6] Apple Inc. is an American multinational technology company headquartered in Cupertino, California. Apple is the world's largest technology company by revenue, with US$394.3 billion in 2022 revenue.[6] ",
                Url = new Uri("https://www.apple.com/")
            },
            new()
            {
                Title = "Netflix",
                Description =
                    "Netflix is an American subscription video on-demand over-the-top streaming television service owned and operated by Netflix, Inc., a company based in Los Gatos, California. ",
                Url = new Uri("https://www.netflix.com/")
            },
            new()
            {
                Title = "Google LLC",
                Description =
                    "Google LLC (/ˈɡuːɡəl/ (listen)) is an American multinational technology company focusing on artificial intelligence,[9] online advertising, search engine technology, cloud computing, computer software, quantum computing, e-commerce, and consumer electronics.",
                Url = new Uri("https://www.google.com/")
            },
        };
    }
}
```
I want to explain what this class is doing. The `WebsiteList` collection is an observable collection that detects changing states. This `SelectedWebsite` property sets the selected item, and the `SelectionChangedCommand` command allows a tap for selecting. The GoToWebsiteDetails make redirects to another view that will be finished later. The constructor sets data for showing in view.
Further, we need to create a model for each site. Let's create a new Models folder and create a new WebSiteModel record. Into the record paste this code:
```C#
public record WebSiteModel
{
    public Uri Url { get; set; }
    public string Description { get; set; }
    public string Title { get; set; }
}
```
Next step, go to the `MainPage` class and inject created `MainPageViewModel`. It should be like that:
```C#
public MainPage(MainPageViewModel mainPageViewModel)
    {
        InitializeComponent();
        BindingContext = mainPageViewModel;
    }
```
And now, go to the layout of this class and paste this code:
```xml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="WebViewSample.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:models="clr-namespace:WebViewSample.Models"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <ScrollView>
        <VerticalStackLayout>
            <CollectionView
                ItemsSource="{Binding WebsiteList}"
                SelectedItem="{Binding SelectedWebsite}"
                SelectionChangedCommand="{Binding SelectionChangedCommand}"
                SelectionMode="Single">
                <CollectionView.ItemTemplate>
                    <DataTemplate x:DataType="models:WebSiteModel">
                        <StackLayout>
                            <Grid HorizontalOptions="Center" Margin="0,10,0,10">
                                <Label
                                    FontAttributes="Bold"
                                    FontSize="22"
                                    Text="{Binding Title}" />
                            </Grid>
                            <BoxView
                                Color="Black"
                                HeightRequest="1"
                                HorizontalOptions="FillAndExpand"
                                Margin="0,10,0,10" />
                            <Grid HorizontalOptions="Center">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <Frame
                                    CornerRadius="20"
                                    Margin="10"
                                    Padding="5">
                                    <WebView
                                        HeightRequest="200"
                                        Source="{Binding Url}"
                                        WidthRequest="200" />
                                </Frame>
                            </Grid>
                            <Grid HorizontalOptions="Center" Margin="10">
                                <Border Stroke="#808080" StrokeThickness="3">
                                    <Border.StrokeShape>
                                        <RoundRectangle CornerRadius="10,10,10,10" />
                                    </Border.StrokeShape>
                                    <Label
                                        FontAttributes="Italic"
                                        FontSize="16"
                                        HorizontalTextAlignment="Center"
                                        LineBreakMode="WordWrap"
                                        Padding="15"
                                        Text="{Binding Description}" />
                                </Border>
                            </Grid>
                        </StackLayout>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>
```

Before we'll check out, let's register our ViewModel and View. Got to the `MauiProgram` class and paste this code:
```C#
builder.Services.AddSingleton<MainPage>();
builder.Services.AddSingleton<MainPageViewModel>();
```

If everything is OK then you'll see this page:

![Main page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r4k5ndhr0b3s8ol4sb1d.png)

As you can see, each element has a preview that you can scroll and click to different elements.

##Web view page
Following the step, we need to create a new `WebViewPageViewModel` class in the `ViewModels` folder. This class is easier and it handles selected elements:
```C#
[ObservableObject]
public partial class WebViewPageViewModel
{
       
    private WebSiteModel _selected;
    public WebSiteModel Selected
    {
        get => _selected;
        set => SetProperty(ref _selected, value);
    }

    
    public WebViewPageViewModel(WebSiteModel selected)
    {
        _selected = selected;        
    }
}
```

Further, you should create a new content page named WebViewPage and add a little bit of code:
```C#
public partial class WebViewPage : ContentPage
{
    public WebViewPage(WebSiteModel selectedSite)
    {
        InitializeComponent();
        BindingContext = new WebViewPageViewModel(selectedSite);
    }


    private void OnSwiped(object sender, SwipedEventArgs e)
    {
        if (e.Direction == SwipeDirection.Right)
        {
            Application.Current!.MainPage!.Navigation.PopAsync();
        }
    }
```

The `OnSwiped` method allows swiping right for the back to the start page. The view also very simple:
```xml
<?xml version="1.0" encoding="utf-8" ?>

<ContentPage
    x:Class="WebViewSample.WebViewPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Grid>
        <Grid.GestureRecognizers>
            <SwipeGestureRecognizer Direction="Right" Swiped="OnSwiped" />
        </Grid.GestureRecognizers>
        <WebView Source="{Binding Selected.Url}" />
    </Grid>
</ContentPage>
```

To make this work, you should return to `MainPageViewModel` and find the `GoToWebsiteDetails` method, and paste this row:
```C#
await Application.Current!.MainPage!.Navigation.PushModalAsync(new WebViewPage(SelectedWebsite));
```
If you did everything properly, and if you'll tap by item, you'll be redirected to the website. For the back just swipe right.


![Web view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u708y0cmn4lkyj3hft0x.png)

##In conclusion 
That's all I wanted to show. You can find the source by [link](https://github.com/SergKorol/WebViewSample).
 Happy coding!
<a href="https://www.buymeacoffee.com/b9z99kntvtQ" target="_blank"><img src="http://dartfordwaffler.co.uk/wp-content/uploads/2021/03/buy-me-a-beer.jpg" alt="Buy Me A Beer" style="height: 60px !important;width: 317px !important;" ></a>