ScrollBars von WebBrowser-Control funktionieren nicht

  • WPF MVVM
  • .NET (FX) 4.5–4.8

Es gibt 28 Antworten in diesem Thema. Der letzte Beitrag () ist von kafffee.

    ScrollBars von WebBrowser-Control funktionieren nicht

    Guten Morgen :)

    Ich versuche gerade mein Webbrowser-Control mit Custom-Scrollbars auszustatten, wie ich sie in den Application.Rsources festgelegt habe, aber sie erscheinen einfach nicht:

    XML-Quellcode

    1. <WebBrowser Name="wbr" Height="Auto" Source="C:\Hilfeseite.htm" Grid.Row="0" VerticalAlignment="Stretch" ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollBarVisibility="Visible" LoadCompleted="wbr_LoadCompleted"/>


    Anstattdessen wird mir so ein hässlicher Standard-Scrollbar in meinem HTML-Dokument angezeigt. Wobei ich diesen schon geschafft habe auszublenden damit:

    VB.NET-Quellcode

    1. Private Sub wbr_LoadCompleted(sender As Object, e As NavigationEventArgs)
    2. wbr.Document.body.style.overflow = "hidden"
    3. End Sub


    Weiss jemand vielleicht warum die Scrollbars nicht erscheinen, obwohl es die Property offensichtlich gibt? Ich hab es auch schon mit einem festen Wert für Height versucht...

    Wenn du ein Sampleprojekt anhängst, kann ich mal reinsehen.

    Aber das was du machst ist IMO Schwachsinn. Warum erst in der App den Style für den Body setzen? Nutze CSS und mach das vernünftig!
    w3schools.com/html/html_css.asp
    Zitat von mir 2023:
    Was interessiert mich Rechtschreibung? Der Compiler wird meckern wenn nötig :D

    DTF schrieb:

    Warum erst in der App den Style für den Body setzen? Nutze CSS und mach das vernünftig!


    Wusste nicht, dass das geht. Meine HTML und CSS-Kenntnisse sind nur sehr oberflächlich. Probier ich mal...

    Hier nochmal das Testprojekt (musst in Zeile 16 in in QuickStartGuideView.xaml noch eine Source für den Webbrowser festlegen; wenn du willst schick ich dir gern mein HTML-Dokument noch zu, weiss nicht, wie man das auf GitHub inkludieren kann...):

    github.com/kafffee/WebBrowserScrollBarTest

    Ich hab noch ein zweites Problem:

    Ich möchte per Buttonklick zu einem Anchor im Dokument springen (QuickStartGuideView.xaml.vb - ab Zeile 28)

    Krieg da aber immer folgenden Fehler und Option Strict On will er das auch nicht:

    System.InvalidCastException: "Das COM-Objekt des Typs "System.__ComObject" kann nicht in den Klassentyp "System.Windows.Forms.HtmlElementCollection" umgewandelt werden. Instanzen von Typen, die COM-Komponenten repräsentieren, können nicht in andere Typen umgewandelt werden, die keine COM-Komponenten repräsentieren. Eine Umwandlung in Schnittstellen ist jedoch möglich, sofern die zugrunde liegende COM-Komponente QueryInterface-Aufrufe für die IID der Schnittstelle unterstützt."

    Weiss leider nicht nach was ich da genau googlen soll....

    kafffee schrieb:

    Probier ich mal...


    Solltest du unbedingt, denn ohne CSS kannste keine wirklich brauchbare Webseite machen, nutzbar schon, aber würde dementsprechend aussehen. Wegen der Sache mit dem Fehler, schaust du hier.
    stackoverflow.com/questions/29…ion-from-a-wpf-webbrowser
    Zitat von mir 2023:
    Was interessiert mich Rechtschreibung? Der Compiler wird meckern wenn nötig :D

    Okay das mit den Anchors hab ich hinbekommen und das mit den Default-Scrollbars mit CSS verstecken (s. Anhang) auch:

    VB.NET-Quellcode

    1. Dim document = TryCast(wbr.Document, mshtml.HTMLDocument) 'casten
    2. Dim element = document.getElementById("TOC") 'TOC ist die id des Anchors
    3. element.scrollIntoView(True) 'zu Anchor springen


    Nur meine XAML Custom Scrollbars, bzw. generell die Scrollbars werden noch immer nicht gezeigt....

    @DTF

    Bist mal dazu gekommen es anzuschauen?

    PS: Anbei mal noch ein HTML-File zum testen

    Edit: Hab grad nochmal rumgespielt damit und da ist mir etwas Merkwürdiges aufgefallen. Wenn ich das hier mache:

    XML-Quellcode

    1. <ScrollViewer VerticalScrollBarVisibility="Auto">
    2. <WebBrowser Name="wbr" Source="C:\hilfevbtest.htm" Grid.Row="0" VerticalAlignment="Stretch" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Visible" LoadCompleted="wbr_LoadCompleted"/>
    3. </ScrollViewer>


    ... dann kommt zwar ein Scrollbar, aber nur wenn ich das Fenster sehr, sehr klein ziehe (s. angehängter Screenshot)...
    Bilder

    • scrollbar.PNG

      11,3 kB, 868×238, 127 mal angesehen
    Dateien

    • hilfevbtest.htm

      (3,9 kB, 123 mal heruntergeladen, zuletzt: )

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „kafffee“ ()

    kafffee schrieb:

    Bist mal dazu gekommen es anzuschauen?


    Gerade eben, hab den Webbrowser einfach in ein Scrollview gepackt.

    XML-Quellcode

    1. <ScrollViewer VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible" Grid.Row="0" >
    2. <WebBrowser Name="wbr" Height="Auto" VerticalAlignment="Stretch" LoadCompleted="wbr_LoadCompleted" Source="https://home.audio/v2/API/help.php"/>
    3. </ScrollViewer>


    Zum HTML-Teil, da haben sich ein paar Fehler eingeschlichen. Es fehlt der Eröffnungs-Tag für den BODY. Bei ein paar Links fehlt </a>. Den Title hast du auch falsch gemacht!
    Du hast:

    HTML-Quellcode

    1. ...
    2. <head>
    3. <title="Hilfeseite"/>
    4. ...

    aber so muss das:

    HTML-Quellcode

    1. ...
    2. <head>
    3. <title>Hilfeseite</title>
    4. ...


    Du solltest die Seite mal in deinem Webbrowser öffnen, beim Firefox kann man sich über das Kontextmenu auch den Seitenquelltext anzeigen lassen, dabei werden dann auch Fehler gezeigt, wird auch mit anderen Browsern gehen. Kennste die Devtools in Browsern? Bei Firefox oder Chrome drücke mal F12 im Browser, für andere Browser frag google, könnte dir irgendwann nützlich sein.

    Solltest du mit einen Text-Editor die Webseite schreiben, installier dir VS-Code. Bei reinem HTML sollten dir solche Fehler engezeigt werden, bei PHP-HTML mixes spinnt VS Code ein wenig.
    Bilder

    • Unbenannt.jpg

      171,65 kB, 1.342×840, 123 mal angesehen
    Zitat von mir 2023:
    Was interessiert mich Rechtschreibung? Der Compiler wird meckern wenn nötig :D

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von „DTF“ ()

    Okay cool danke für die Hinweise, werd ich verbessern...hab das tatsächlich mit dem Text Editor geschrieben...

    Was willst du mir mit dem Screenshot sagen? Man sollte meinen Custom Scrollbar sehen, wie in dem Bild das ich im letzen Post angehängt hab. Der sollte auch braun sein...

    Ich hab ja auch versucht, den Webbrowser einfach in einen ScrollViewer zu packen (s. mein letzter Post) hat aber nur geklappt wenn ich das Fenster sehr klein ziehe, d.h. man hat, wenn es grösser war, nicht zum Ende des HTML Dokuments scrollen können...

    Edit: Okay das kann jetzt natürlich an den fehlenden/fehlerhaften Tags liegen...

    kafffee schrieb:

    Bist mal dazu gekommen es anzuschauen?


    Ja, ich hab den Style rausgeschmissen, damit ich das besser sehe, so sieht das mit deinem Style aus, man nimmt die Scrollbars nicht wirklich war, deshalb hatte ich den Style entfernt.

    Zitat von mir 2023:
    Was interessiert mich Rechtschreibung? Der Compiler wird meckern wenn nötig :D

    Ja nun sehe ich das Problem. Das Problem ist, das der Webbrowser intern das Scrollen macht, deshalb hat die Dimension der Webseite keinen Einfluss auf die Größe des Webbrowsers, da sich dessen Größe nicht verändert bekommt der Scrollviewer nichts mit.

    Probier mal das:
    stackoverflow.com/questions/14…rol-with-custom-scrollbar



    PS @kafffee
    Du kannst mal versuchen mit CSS die Scrollbar zu designen, ich habe das mal gemacht, aber das funktioniert mit manchen Browsern nicht oder nur bedingt. Jenachdem welchen unterbau der WPF-Webbrowser nutzt, könnte das eine einfachere Lösung sein.
    Zitat von mir 2023:
    Was interessiert mich Rechtschreibung? Der Compiler wird meckern wenn nötig :D

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „DTF“ ()

    Jetz hab ich das hier:

    VB.NET-Quellcode

    1. Dim ScrolablePlace As mshtml.IHTMLElement2 = CType(document.getElementById("TOCScroll"), mshtml.IHTMLElement2)
    2. scrlvTOC.ViewportSize = wbrTOC.ActualHeight
    3. scrlvTOC.Maximum = ScrolablePlace.scrollHeight


    TOCScroll ist die ID vom <div>-Tag in Zeile 17 des HTML-Dokuments:

    XML-Quellcode

    1. ​<div id="TOCScroll">


    scrlvTOC ist der Name des Scrollbars.

    Nur bekomm ich in Zeile 3 immer einen...:

    System.NullReferenceException: "Der Objektverweis wurde nicht auf eine Objektinstanz festgelegt."

    Weisst du waran das liegen könnte?

    Ich kann das nicht nachvollziehen. Habe das:

    HTML-Quellcode

    1. ...
    2. </head>
    3. <body>
    4. <h1 id="TOC" name="TOC">Inhaltsverzeichnis</h1>
    5. <div id="TOCScroll">
    6. ...

    und das:

    VB.NET-Quellcode

    1. Private Sub wbr_LoadCompleted(sender As Object, e As NavigationEventArgs)
    2. Dim document = CType(wbr.Document, mshtml.HTMLDocument)
    4. Dim div As mshtml.HTMLDivElement = DirectCast(document.getElementById("TOCScroll"), HTMLDivElement)
    5. End Sub



    Bei mir gibt es keine Exception. Hast du die HTML-Datei gespeichert nach dem editieren? Auch wenn ich statt HTMLDivElement, IHTMLElement2 nehme klappt das.

    PS.

    Evtl. Das navigated Event vom WB nehmen, falls zu einem anderen Dokument navigiert wurde. Ich denke LoadCompleted bezieht sich nicht auf das laden der Webseite.
    Zitat von mir 2023:
    Was interessiert mich Rechtschreibung? Der Compiler wird meckern wenn nötig :D

    Hatte tatsächlich die falsche Version des Dokuments geladen. Aber ein Scrollbar wird mir immer noch nicht gezeigt. Vielleicht verwende ich den ScrollBar falsch, hab das noch nie benutzt. Ich hab jetzt das hier:

    XML-Quellcode

    1. <ScrollBar Orientation="Vertical" Grid.Column="0" Name="scrlvTOC"/>
    2. <WebBrowser Name="wbrTOC" Source="C:\TOC.htm" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Visible" LoadCompleted="wbr_LoadCompleted" Navigating="wbrTOC_Navigating"/>

    ScrollBar != ScrollViewer

    Ein ScrollViewer hat bereits Scrollbars. Aber du kannst auch Scrollbar nehmen, aber auch da musst die Scrollbar einstellen. Mit "Auto" wird da aber nichts(auch nicht beim ScrollViewer), du wirst alles selbst managen müssen. Wenn im Browser gescrollt wird(MausRad), wenn deine Scrollbar gescrollt wird, beim Webbrowser das offset setzen. Hast du mal die Variante mit einer CSS-gestylten Scrollbar gestestet? Das wird u.U. einfacher sein.


    Zitat von mir 2023:
    Was interessiert mich Rechtschreibung? Der Compiler wird meckern wenn nötig :D

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „DTF“ ()

    Also ich verstehe nicht was du mit umschliessen meinst. Meinste Control in der ScrollBar wie ein Forms-Panel? ScrollBars werden auf Controls platziert, nicht Controls in/auf der ScrollBar.

    Ich denke du bist auf einen falschen Weg. Du wirst so einiges an Properties binden können, aber damit diese auch geupdated werden musst du Events von der Scrollbar wie auch vom Webbrowser nutzen um alles syncron zu halten. Versuch mal mit CSS eine Scrollbar zu stylen und ob das in diesem Browser funktioniert. Dann sparste dir das gefummel in VB, auch das mit dem syncronisieren, somit auch einiges an Zeit. Ich sehe schon Probleme welche du noch nicht siehst.

    Macht es überhaupt Sinn eine Hilfedatei in dieser Form zu machen? Ich wette machst du das direkt mit VB und XAML, hast du es viel einfacher. Kommt diese Hilfe auch woanders zum Einsatz? Wenn nur in dieser App, macht das wenig Sinn. Sollte das auch auf einem Webserver gehostet werden, würde ich das mit PHP gegenieren, so kannste statische HTML-Seiten wie du sie jetzt hast Zeit in jeder Sprache erstellen und musst nicht selbst immer wieder das Gerüst nachbauen.

    PS. Hab das nun probiert mit CSS die Scrollbar zu designen, wie in so einigen Browsern wird der Style ignoriert. Ich empfehle, wenn das nicht auch online gehostet wird, mach das in komplett VB in XAML.

    Zitat von mir 2023:
    Was interessiert mich Rechtschreibung? Der Compiler wird meckern wenn nötig :D

    Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von „DTF“ ()

    DTF schrieb:

    ScrollBars werden auf Controls platziert


    Auf? wie würde das aussehen in XAML?

    DTF schrieb:

    Versuch mal mit CSS eine Scrollbar zu stylen und ob das in diesem Browser funktioniert.


    Hab ich grad gemacht. Meiner Recherche nach gibt es verschiedene Möglichkeiten, aber vom Webbrowser-Control werden, wenn ich alles richtig gemacht habe, alle ignoriert.

    https://css-tricks.com/almanac/properties/s/scrollbar/

    Punkt 2 und 3 hab ich ausprobiert... Hast du noch was Anderes, aktuelles gefunden?

    Wäre schon gut, wenn das mit CSS oder dem ScrollBar-Control gehen würde, ich bin an den HTML-Code gut und gerne 5-6 Stunden gesessen. Ich hatte das ursprünglich auch als XAML geplant, es dann aber für einfacher empfunden, für diesen Zweck HTML zu nutzen... Frag mich jetzt aber nicht, was ich dabei gedacht hab, aber ich denke die Wartungseinfachheit war bestimmt auch ein Gesichtspunkt.

    Ich wüsste tatsächlich noch mehrere herangehensweisen. Aber dann käme auch noch JavaScript hinzu.

    Sollte diese Hilfe nicht auch Online gehostet werden, mach das mit VB und XAML.

    Also wie man ein Control auf einem anderen platziert ist dir doch bekannt! Die Kunst mit der Scrollbar ist dann halt, alles zu managen, dazu muss man dann auch wissen welche Properties genutzt werden können, auch welche Events man braucht. Dazu gehört Doku gucken, planen und dann umsetzen. Bei einer Scrollbar gibt es nicht so viel was du brauchst, Minimum, Maximum und Value, das aber mit den Werten des Webbrowsers bzw. dessen Elementen syncron halten.

    XML-Quellcode

    1. <ControlDasControlsAufnehmenKann>//z.B. Grid
    2. <ScrollBar Orientation="Vertical"/>
    3. </ControlDasControlsAufnehmenKann>

    Zitat von mir 2023:
    Was interessiert mich Rechtschreibung? Der Compiler wird meckern wenn nötig :D

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von „DTF“ ()

    DTF schrieb:

    Also wie man ein Control auf einem anderen platziert ist dir doch bekannt!


    Ah verstehe. Hatte bloss gedacht dass alles dann auch automatisiert geschieht wie beim ScrollViewer. Weil davon war in dem stackoverflow-Link von dir gar keine Rede von...

    DTF schrieb:

    Sollte diese Hilfe nicht auch Online gehostet werden, mach das mit VB und XAML.


    Was hast da so im Kopf? Ne RichTextBox?

    kafffee schrieb:

    Hatte bloss gedacht dass alles dann auch automatisiert geschieht wie beim ScrollViewer.


    Auch beim ScrollViewer hättest du das selbst mit den Werten machen müssen.

    Ein TreeView bietet sich für diesen Zwecke gut an.
    Zitat von mir 2023:
    Was interessiert mich Rechtschreibung? Der Compiler wird meckern wenn nötig :D

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „DTF“ ()