.NET MAUI: WebView -Höhe nicht dynamisch in benutzerdefinierter WebView auf der iOS -Plattform anpassen ⇐ IOS

[Anonymous]

Ich verwende eine benutzerdefinierte WebView in meiner .NET MAUI -Anwendung, um dynamische HTML -Inhalte auf der iOS -Plattform anzuzeigen. Der HTML -Inhalt ändert sich täglich und ich muss die Höhe des WebView entsprechend anpassen.

Code: Select all

public class DailySaintWebViewRenderer : ViewRenderer
{
WKWebView _wkWebView;

protected override void OnElementChanged(ElementChangedEventArgs e)
{
base.OnElementChanged(e);

if (Control == null)
{
var config = new WKWebViewConfiguration();
config.AllowsInlineMediaPlayback = true;
_wkWebView = new WKWebView(Frame, config);
//transparent background
_wkWebView = new WKWebView(CGRect.Empty, config);
_wkWebView.BackgroundColor = UIColor.Clear;
_wkWebView.ScrollView.BackgroundColor = UIColor.Clear;
_wkWebView.Opaque = false;
_wkWebView.NavigationDelegate = new MyNavigationDelegate();
_wkWebView.ScrollView.ScrollEnabled = false;
SetNativeControl(_wkWebView);

if (Device.Idiom == TargetIdiom.Tablet)
{
//when targeting on iPad, add this to force the iPad behavior
_wkWebView.Configuration.DefaultWebpagePreferences.PreferredContentMode = WKContentMode.Mobile;
}
SetNativeControl(_wkWebView);
}
}

public class MyNavigationDelegate : WKNavigationDelegate
{
public override void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
{
string fontSize = Device.Idiom == TargetIdiom.Phone ? "500%" : "320%";

string injectCustomFontScript = @"
let style = document.createElement('style');
style.innerHTML = `
@font-face {
font-family: 'CustomFont';
src: url('Poppins-Light') format('truetype');
}
body, p, h1, h2, h3, h4, h5, h6 {
font-family: 'CustomFont', sans-serif !important;
color: white !important;
}
`;
document.head.appendChild(style);
";

string adjustTextSizeScript = $"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '{fontSize}';";

WKJavascriptEvaluationResult handler = (NSObject result, NSError err) =>
{
if (err != null)
{
System.Console.WriteLine(err);
}
if (result != null)
{
System.Console.WriteLine(result);
}
};

webView.EvaluateJavaScript(adjustTextSizeScript, handler);
webView.EvaluateJavaScript(injectCustomFontScript, handler);
}

}

protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);

if (e.PropertyName == "Url")
{
string finalHtml = Element.Url.Replace("width=\"640\"", "width=\"1000\"");
Control.LoadHtmlString(finalHtml, null);
}
}
}
< /code>
xaml Code: Vollständiges Layout: < /p>







0,-10,0,0
0
0,-10,0,0




























//Header layout


















//Title content



















28
44
28





















20
30
20











3000
4500
3000


















//Audio frame layout


380
960
380




60
90
60



















//Footer Layout


60
90
60





< /code>
Ich habe versucht, die WebView -Höhe dynamisch auf dem HTML -Inhalt in meiner .NET MAUI -Anwendung festzulegen. Unten ist der benutzerdefinierte Renderer, den ich mit WKWebView für iOS implementiert habe. Die Höhe wird jedoch nicht korrekt angepasst.  Könnten Sie meinen Ansatz überprüfen und Verbesserungen vorschlagen?public class DailySaintWebViewRenderer : ViewRenderer
{
WKWebView _wkWebView;

protected override void OnElementChanged(ElementChangedEventArgs e)
{
base.OnElementChanged(e);

if (Control == null)
{
var config = new WKWebViewConfiguration();
config.AllowsInlineMediaPlayback = true;
_wkWebView = new WKWebView(Frame, config);
//transparent background
_wkWebView = new WKWebView(CGRect.Empty, config);
_wkWebView.BackgroundColor = UIColor.Clear;
_wkWebView.ScrollView.BackgroundColor = UIColor.Clear;
_wkWebView.Opaque = false;
_wkWebView.NavigationDelegate = new MyNavigationDelegate(this);
_wkWebView.ScrollView.ScrollEnabled = false;
SetNativeControl(_wkWebView);

if (Device.Idiom == TargetIdiom.Tablet)
{
//when targeting on iPad, add this to force the iPad behavior
_wkWebView.Configuration.DefaultWebpagePreferences.PreferredContentMode = WKContentMode.Mobile;
}
SetNativeControl(_wkWebView);
}
}

public class MyNavigationDelegate : WKNavigationDelegate
{
DailySaintWebViewRenderer dailysaintWebViewRenderer;

// Constructor to receive reference of MyWebViewRenderer
public MyNavigationDelegate(DailySaintWebViewRenderer webViewRenderer)
{
dailysaintWebViewRenderer = webViewRenderer;
}
public async override void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
{
string fontSize = Device.Idiom == TargetIdiom.Phone ? "500%" : "320%";

string injectCustomFontScript = @"
let style = document.createElement('style');
style.innerHTML = `
@font-face {
font-family: 'CustomFont';
src: url('Poppins-Light') format('truetype');
}
body, p, h1, h2, h3, h4, h5, h6 {
font-family: 'CustomFont', sans-serif !important;
color: white !important;
}
`;
document.head.appendChild(style);
";

string adjustTextSizeScript = $"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '{fontSize}';";

WKJavascriptEvaluationResult handler = (NSObject result, NSError err) =>
{
if (err != null)
{
System.Console.WriteLine(err);
}
if (result != null)
{
System.Console.WriteLine(result);
}
};

webView.EvaluateJavaScript(adjustTextSizeScript, handler);
webView.EvaluateJavaScript(injectCustomFontScript, handler);

// Dynamically adjust WebView height
var wv = dailysaintWebViewRenderer.Element as DailySaintWebView;
if (webView != null && webView.ScrollView != null && webView.ScrollView.ContentSize != null)
{
await Task.Delay(200); // Wait for rendering to complete
wv.HeightRequest = (double)webView.ScrollView.ContentSize.Height;
}
}

}

protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);

if (e.PropertyName == "Url")
{
string finalHtml = Element.Url.Replace("width=\"640\"", "width=\"1000\"");
Control.LoadHtmlString(finalHtml, null);
}
}
}
< /code>
XAML -Implementierung (ohne Himmels) < /p>


< /code>
Ich möchte, dass die WebView -Höhe basierend auf der Höhe des HTML -Inhalts automatisch eingestellt wird, anstatt ein festes Himmels festzulegen.  Da sich der Inhalt täglich ändert, kann ich keine bestimmte Höhe harten.public class DailySaintWebView : WebView
{
public static readonly BindableProperty UrlProperty = BindableProperty.Create(
propertyName: "Url",
returnType: typeof(string),
declaringType: typeof(DailySaintWebView),
defaultValue: default(string));

public string Url
{
get { return (string)GetValue(UrlProperty); }
set { SetValue(UrlProperty, value); }
}
}