CODEWITHSUNDEEP
maui
Sam
Sam

Reputation: 30298

Blazor Page added to existing standard .NET MAUI app is not scrolling

I have a standard .NET MAUI app targeting .NET 7 and using XAML for UI. I want to continue with this approach but also want to have a few Blazor pages in the app.

I've already implemented this following the steps below and it actually works fine. The problem I seem to be having is that the Blazor page is not scrolling. I purposely put a lot of text on the page and I can only see what fits the screen and it's not responding to my swipes. What do I need to do to make sure the Blazor page is scrollable?

Here are the exact steps I've taken:

  1. Changed the SDK in proj file from <Project Sdk="Microsoft.NET.Sdk"> to <Project Sdk="Microsoft.NET.Sdk.Razor">
  2. Added wwwroot folder containing css and index.html files
  3. Created a folder named Pages which is where I intend to keep all my Blazor pages
  4. Placed Shared folder containing MainLayout.razor in the Pages folder -- again to keep everything Blazor in one place
  5. Created MyTestComponent.razor in Pages folder

It's important to note that I left out the Main.razor because I don't want to handle any routing through Blazor. I simply want to place BlazorWebView in my regular .NET MAUI pages using XAML and handle my navigation through the Shell.

The BlazorWebView code on my ContentPage looks like this i.e. pointing directly at my component:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:page="clr-namespace:MyApp.Pages.Testing"
             x:Class="MyApp.MainPage">
    <VerticalStackLayout>
        <BlazorWebView HostPage="wwwroot/index.html">
            <BlazorWebView.RootComponents>
                <RootComponent
                    Selector="#app"
                    ComponentType="{x:Type page:MyTestComponent}"/>
            </BlazorWebView.RootComponents>
        </BlazorWebView>
    </VerticalStackLayout>
</ContentPage>

Looks like I made a mistake somewhere or left something out. Any suggestions on how to fix the scroll issue on the Blazor page?

Upvotes: 1

Views: 815

Answers (1)

Liyun Zhang - MSFT
Liyun Zhang - MSFT

Reputation: 14269

The cause should be you put the BlazorWebView into the VerticalStackLayout.

You can try the default the style(delete the VerticalStackLayout) :

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:page="clr-namespace:MyApp.Pages.Testing"
             x:Class="MyApp.MainPage">
        <BlazorWebView HostPage="wwwroot/index.html">
            <BlazorWebView.RootComponents>
                <RootComponent
                    Selector="#app"
                    ComponentType="{x:Type page:MyTestComponent}"/>
            </BlazorWebView.RootComponents>
        </BlazorWebView>
</ContentPage>

Or you can put it into the ScrollView:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:page="clr-namespace:MyApp.Pages.Testing"
             x:Class="MyApp.MainPage">
    <ScrollView>
        <BlazorWebView HostPage="wwwroot/index.html">
            <BlazorWebView.RootComponents>
                <RootComponent
                    Selector="#app"
                    ComponentType="{x:Type page:MyTestComponent}"/>
            </BlazorWebView.RootComponents>
        </BlazorWebView>
    </ScrollView>
</ContentPage>

Upvotes: 1

Related Questions