Reputation: 851

MAUI: Blank space on the UI in between the contents and font style issue

I have a label, image and a webview on the UI.

My XAML:

<ScrollView
    Grid.Row="0"
    Orientation="Vertical"
    VerticalOptions="FillAndExpand">

    <VerticalStackLayout
        Grid.Row="0"
        Padding="5"
        Spacing="10"
        VerticalOptions="FillAndExpand"
        BackgroundColor="#0091DA">

        <!-- Title label -->
        <Label
            x:Name="android_title_label"
            VerticalOptions="Start"
            VerticalTextAlignment="Center"
            HorizontalOptions="CenterAndExpand"
            HorizontalTextAlignment="Center"
            FontFamily="Poppins-Bold"
            FontAttributes="Bold"
            TextColor="White">
            <Label.FontSize>
                <OnIdiom x:TypeArguments="x:Double">
                    <OnIdiom.Phone>25</OnIdiom.Phone>
                    <OnIdiom.Tablet>38</OnIdiom.Tablet>
                    <OnIdiom.Desktop>25</OnIdiom.Desktop>
                </OnIdiom>
            </Label.FontSize>
        </Label>

        <!-- Saint image -->
        <Grid 
            IsVisible="False"
            x:Name="image_layout">
            <!-- Main Saint Image -->
            <Image
                x:Name="android_saint_image"
                Aspect="AspectFit"
                HorizontalOptions="FillAndExpand"
                VerticalOptions="FillAndExpand"
                IsVisible="False"
                Margin="5"/>

            <!-- Banner with Label on Top -->
            <Grid
                VerticalOptions="End"
                Margin="15,0,15,10"
                HorizontalOptions="FillAndExpand"
                HeightRequest="50">

                <!-- The banner image -->
                <Image
                    Source="ic_dailysaintbanner_xx.png"
                    Aspect="Fill" />

                <!-- The label overlaying the banner -->
                <ScrollView
                    Orientation="Horizontal"
                    Margin="8,0"
                    VerticalOptions="CenterAndExpand"
                    HorizontalOptions="CenterAndExpand">

                    <Label
                        x:Name="saintname_label"
                        TextColor="Black"
                        HorizontalTextAlignment="Center"
                        HorizontalOptions="CenterAndExpand"
                        VerticalTextAlignment="Center"
                        FontFamily="Poppins-Bold.ttf" >
                        <Label.FontSize>
                            <OnIdiom x:TypeArguments="x:Double">
                                <OnIdiom.Phone>20</OnIdiom.Phone>
                                <OnIdiom.Tablet>30</OnIdiom.Tablet>
                                <OnIdiom.Desktop>20</OnIdiom.Desktop>
                            </OnIdiom>
                        </Label.FontSize>
                    </Label>
                </ScrollView>
            </Grid>
        </Grid>

        <!-- Main content -->
        <WebView 
            x:Name="android_webview"
            BackgroundColor="#0091DA"
            HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand">
        </WebView>
    </VerticalStackLayout>
</ScrollView>

I am setting data to webview using below code:

string htmldata = "<div class=\"daily-activities-content\">  \t  <h4> Saint Caesarius of Nazianzen </h4> \r\n<h5>Born: 331 </h5>\r\n<h5>Died: 368 </h5>\r\n\r\n\r\n<p>Caesarius lived in what is today known as Turkey.  His father was the bishop of Nazianzen, and his brother is St. Gregory of Nazianzen. </p>\r\n<p>Caesarius and his brother Gregory both received an excellent education.  Gregory became a priest, and Caesarius went on to become a doctor.  He went to Constantinople to complete his studies.  Emperor Constantius wanted Caesarius to be his personal physician.  Caesarius politely refused and went back to his home city of Nazianzen. </p>\r\n<p>The next Emperor, Julian the Apostate, asked Caesarius to serve him as well.  An apostate is someone who gives up their Christian faith.  Caesarius refused Julian&#39;s request, too.  Julian tried to get Caesarius to give up his faith.  He offered Caesarius high positions, bribes, and many other things, but Caesarius did not accept them. </p>\r\n<p>In 368 Caesarius was almost killed in an earthquake.  He felt God was calling him to a life of prayer.  He gave away everything and led a quiet, prayerful life.  One year later Caesarius died, and his brother Gregory preached at his funeral. </p></div>";
string description = htmldata.Replace("&#39;", "'");
var htmlSource = new HtmlWebViewSource();
string cssStyle = @"<style>
                                            @font-face {
                                                font-family: 'Poppins';
                                                src: url('file:///android_asset/Poppins-Regular.ttf');
                                            }
                                            body {
                                                color: #FFFFFF;
                                                font-family: 'Poppins', sans-serif;
                                                font-size: 28px;
                                            }
                                        </style>";

string modifiedHtml = $@"<!DOCTYPE html>
                    <html>
                    <head>
                        {cssStyle}
                    </head>
                    <body>
                        {description.Replace("width=\"640\" height=\"360\"", "width=\"350\" height=\"350\"")}
                    </body>
                    </html>";

htmlSource.Html = modifiedHtml;
android_webview.Source = htmlSource;

Screenshot:

My Issues:

After the image there is a blank space showing before the webview contents.
Before setting the data to UI I have adding custom font for the webview contents. But in UI the custom font is looking very bad. Poppins-Regular is my custom font.

I have created a sample project to recreate this issue.

Upvotes: 0

Answers (1)

Stephen Quan

Reputation: 26214

These are the issues I encountered:

ScrollView has Grid.Row="0" but no parent Grid was supplied
VerticalStackLayout has Grid.Row="0" but no parent Grid was supplied
Label android_title_label but there is no code shown where Text was set
Image android_saint_label has no code shown where Source was set
Image ic_dailysaintbanner_xx.png cannot be found in the download
There's a nesting of a ScrollView that's parented by a ScrollView which is not recommended
There's a Label saintname_label with no Text populated
There's an outer WebView but the parent is a VerticalStackLayout so the actual Height is unknown
The code-behind for the HTML refers to file::///android_asset/Poppins-Regular.ttf but the Poppins-Regular.ttf font doesn't appear in the Raw folder in the downloads
The download was unrunnable

To reset my understanding of the problem, I put the WebView in a Grid. This will cause the WebView to get its Width and Height from the Grid and it can now be seen. The WebView implements its own scrolling should the HTML content exceed the given Height.

When you put the WebView inside a VerticalStackLayout, the WebView will not get any implied Height, the WebView will need to set its own Height via HeightRequest.

When you put a WebView inside a ScrollView, this complicates the UI/UX to the user since both the ScrollView and WebView both want to provide a scrolling behavior.

<ContentPage
    x:Class="CatholicBrain.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Grid>
        <WebView x:Name="android_webview" />
    </Grid>
</ContentPage>

For the Poppins font, I moved/copied Poppins-Regular.ttf from the Resources/Font folder to the Resource/raw folder. Then, I updated the code-behind to have the updated url() reference as well as I moved the background color to the CSS within:

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        string htmldata = "<div class=\"daily-activities-content\">  \t  <h4> Saint Caesarius of Nazianzen </h4> \r\n<h5>Born: 331 </h5>\r\n<h5>Died: 368 </h5>\r\n\r\n\r\n<p>Caesarius lived in what is today known as Turkey.  His father was the bishop of Nazianzen, and his brother is St. Gregory of Nazianzen. </p>\r\n<p>Caesarius and his brother Gregory both received an excellent education.  Gregory became a priest, and Caesarius went on to become a doctor.  He went to Constantinople to complete his studies.  Emperor Constantius wanted Caesarius to be his personal physician.  Caesarius politely refused and went back to his home city of Nazianzen. </p>\r\n<p>The next Emperor, Julian the Apostate, asked Caesarius to serve him as well.  An apostate is someone who gives up their Christian faith.  Caesarius refused Julian&#39;s request, too.  Julian tried to get Caesarius to give up his faith.  He offered Caesarius high positions, bribes, and many other things, but Caesarius did not accept them. </p>\r\n<p>In 368 Caesarius was almost killed in an earthquake.  He felt God was calling him to a life of prayer.  He gave away everything and led a quiet, prayerful life.  One year later Caesarius died, and his brother Gregory preached at his funeral. </p></div>";
        string description = htmldata.Replace("&#39;", "'");
        var htmlSource = new HtmlWebViewSource();
        string cssStyle = @"<style>
                                            @font-face {
                                                font-family: 'Poppins';
                                                src: url('Poppins-Regular.ttf');
                                            }
                                            body {
                                                background: #0091DA;
                                                color: #FFFFFF;
                                                font-family: 'Poppins', sans-serif;
                                                font-size: 28px;
                                            }
                                        </style>";

        string modifiedHtml = $@"<!DOCTYPE html>
                    <html>
                    <head>
                        {cssStyle}
                    </head>
                    <body>
                        {description.Replace("width=\"640\" height=\"360\"", "width=\"350\" height=\"350\"")}
                    </body>
                    </html>";

        htmlSource.Html = modifiedHtml;
        android_webview.Source = htmlSource;
    }
}

Upvotes: 1

MAUI: Blank space on the UI in between the contents and font style issue

Answers (1)

Related Questions