Windows Forms Documentation Updates : WebBrowser, HTML, Networking

Retrieve from RSS Feed using XmlDocument

Jay A. Allen — Thu, 03 Aug 2006 01:50:00 GMT

So I'm trying to wrap up this white paper I'm writing on consuming RSS in Windows Forms. I wrote a whole section on how to apply a custom XSLT transform to a feed, and display the resulting HTML in the WebBrowser. (I gave a less-complete version of a solution in an earlier blog post.) Then it hit me: "Jay, you fool - what if the RSS feed already has a stylesheet associated with it?"

Fortunately, factoring this into your logic is simple. You can use XmlDocument, SelectSingleNode(), and a rather funky-looking XPath command to test whether the feed has a stylesheet. If it does, you can pass it straight to the WebBrowser control for rendering, with no further processing required.

            XmlDocument doc = new XmlDocument();
            try
            {
                doc.Load("http://blogs.msdn.com/winformsue/rss.xml");
            }
            catch (Exception ex)
            {
                MessageBox.Show("Could not load XML file. Error: " + ex.Message);
                return;
            }

            XmlProcessingInstruction node = (XmlProcessingInstruction)doc.SelectSingleNode("/processing-instruction(\"xml-stylesheet\")");
            if (node != null)
            {
                webBrowser1.Url = new Uri("http://blogs.msdn.com/winformsue/rss.xml");
            }
            else
            {
                // Apply custom style.
            }

How to Data Bind to an RSS Feed (Blog Posts) in Windows Forms

Jay A. Allen — Thu, 15 Jun 2006 00:48:00 GMT

RSS feeds are XML files that represent the current posts on a syndicated content channel, such as a blog or news feed. Since RSS feeds are XML, they can be loaded into an ADO.NET DataSet and bound to the elements of a form.

Picture 1: Simple RSS Feed Reader

The following C# code shows the basics of wiring up a feed to a form so that the title element is bound to a Label and the description (blog post content) is bound to the DocumentText property of the WebBrowser control. The method GetBlogPost() is called in my code from a list of entries contained on a ToolStrip control; I use the Padding property of ToolStripItem to make the ToolStrip list appear as a categorized hierarchy of max one depth level. The feed URI is saved in the Tag property of the ToolStripButton, which is what the user clicks to call GetBlogPost(). The button controls at the bottom of the form allow you to flip back and forward through the currently available posts in the latest version of the feed.

The form for this sample requires these controls:

postTitleLink: LinkLabel
webBrowser1: WebBrowser
firstbutton, lastButton, previousButton, nextButton: Button

The trickiest part of this code occurs partway down the GetBlogPosts() method, where I need to obtain the list of item elements in the RSS feed to which I data bind. The item elements are consider children of the channel element. When I load the XML file into an ADO.NET DataSet, ADO.NET makes the item elements available as a DataRelation whose name is a conjunction of the channel and item elements. In other words, to get at the item elements, I have to use this line:

           bindingTable = dt.ChildRelations["channel_item"].ChildTable;

- where dt is the name of my DataTable containing the RSS data.

Here's the full sample. (NOTE: This is a preview of a full sample I'll be publishing as the subject of a white paper in July. The final sample will be more fleshed out than this skeleton sample.)

        private void GetBlogPost(string feed)
        {
            DataSet ds = new DataSet();
            XmlReader reader = null;

            try
            {
                reader = XmlReader.Create(feed);
            }
            catch (FileNotFoundException fileEx)
            {
                MessageBox.Show("Cannot file blog feed. Error returned: " + fileEx.Message);
                return;
            }
            catch (SecurityException secEx)
            {
                MessageBox.Show("You do not have permission to view this feed. Error returned: " + secEx.Message);
                return;
            }

            // Cruise forward to the <item> elements.
            reader.ReadToDescendant("channel");

            ds.ReadXml(reader);
            DataTable dt = ds.Tables[0];

            // Set up data binding.
            bindingTable = dt.ChildRelations["channel_item"].ChildTable;
            postTitleLink.DataBindings.Add(new Binding("Text", bindingTable, "title"));
            //dateLabel.DataBindings.Add(new Binding("Text", bindingTable, "dc:date"));
            webBrowser1.DataBindings.Add(new Binding("DocumentText", bindingTable, "description"));

            // Set the Previous and Next buttons as applicable.
            previousButton.Enabled = false;
            BindingManagerBase myContext = this.BindingContext[bindingTable];
            if (myContext.Count == 1)
            {
                nextButton.Enabled = false;
                lastButton.Enabled = false;
            }
            else
            {
                nextButton.Enabled = true;
                lastButton.Enabled = true;
            }

            firstButton.Enabled = false;

            recordLabel.Text = (myContext.Position + 1).ToString();

            myContext.CurrentChanged += new EventHandler(myContext_CurrentChanged);
        }

        void myContext_CurrentChanged(object sender, EventArgs e)
        {
            recordLabel.Text = (this.BindingContext[bindingTable].Position + 1).ToString();
        }

        private void nextButton_Click(object sender, EventArgs e)
        {
            BindingManagerBase myContext = this.BindingContext[bindingTable];
            myContext.Position += 1;
            previousButton.Enabled = true;
            if (myContext.Position + 1 == myContext.Count)
            {
                nextButton.Enabled = false;
                lastButton.Enabled = false;
            }
            if (myContext.Position == 1)
            {
                firstButton.Enabled = true;
            }
        }

        private void previousButton_Click(object sender, EventArgs e)
        {
            BindingManagerBase myContext = this.BindingContext[bindingTable];
            myContext.Position -= 1;
            nextButton.Enabled = true;
            if (myContext.Position == 0)
            {
                previousButton.Enabled = false;
                firstButton.Enabled = false;
            }
            if (myContext.Position + 2 == myContext.Count)
            {
                lastButton.Enabled = true;
            }
        }

        private void firstButton_Click(object sender, EventArgs e)
        {
            BindingManagerBase myContext = this.BindingContext[bindingTable];
            myContext.Position = 0;
            previousButton.Enabled = false;
            firstButton.Enabled = false;
            if (lastButton.Enabled == false)
            {
                lastButton.Enabled = true;
                nextButton.Enabled = true;
            }
        }

        private void lastButton_Click(object sender, EventArgs e)
        {
            BindingManagerBase myContext = this.BindingContext[bindingTable];
            myContext.Position = myContext.Count - 1;
            nextButton.Enabled = false;
            lastButton.Enabled = false;
            if (firstButton.Enabled == false)
            {
                firstButton.Enabled = true;
                previousButton.Enabled = true;
            }
        }

        private void postTitleLink_LinkClicked(object sender, LinkLabelLinkClickedEventArgs e)
        {
            BindingManagerBase myContext = this.BindingContext[bindingTable];
            DataRowView rowView = (DataRowView)myContext.Current;
            string permalink = rowView["link"].ToString();
            Process.Start(permalink);
        }

Script#: A New Way to AJAX

Jay A. Allen — Fri, 02 Jun 2006 23:40:00 GMT

Apologies for the recent radio silence - I've been out of office due to a death in the family. I'll have more next week. In the meantime, if you dabble in both Web development as well as Smart Client development, you'll want to check out Nikhil Kothari's Script#, a compiler that converts AJAX-ish C# into Javascript that's ready to roll.

Not sure if I'd personally ever use this, but it looks like a cool "gateway" for C# and .NET wonks who don't want to pick up YASL (Yet Another Scripting Language). Also, if you're crafting a Windows Forms app in C# that uses the WebBrowser control and need to churn out some script, this tool might prove useful in keeping all of your code base in C#, to ease both maintainability and testing.

Accessing the Unmanaged WebBrowser Control in Windows Forms

Jay A. Allen — Wed, 10 May 2006 21:30:00 GMT

Lets say you're using the managed WebBrowser control in Windows Forms 2.0. At some point, you realize you want/need access to the underlying unmanaged WebBrowser control. Perhaps you need access to IWebBrower2, or you want to get the unmanaged IServiceProvider and query for something like ITravelLogStg (which exposes the URL history). How do you pull this off?

Answer: Derive a new control from WebBrowser and access the property ActiveXInstance. Here's the code to enable fetching the unmanaged IServiceProvider:

    // The unmanaged IServiceProvider, for use with our WebBrowser control.
    [
        ComImport,
        Guid("6d5140c1-7436-11ce-8034-00aa006009fa"),
        InterfaceType(ComInterfaceType.InterfaceIsIUnknown)
    ]
    public interface IServiceProvider
    {
        void QueryService( ref Guid guidService, ref Guid riid,
            [MarshalAs(UnmanagedType.Interface)] out object ppvObject);
    }

    class WebBrowser2 : WebBrowser
    {
        private SHDocVw.IWebBrowser2 axWebBrowser = null;

        public WebBrowser2()
        {
        }

        public void GetServiceProvider()
        {
            axWebBrowser = (SHDocVw.IWebBrowser2)this.ActiveXInstance;

thisNamespace.IServiceProvider isp = (WebBrowserForwardBack.IServiceProvider)axWebBrowser;

// Do what Thou Wilt...

}
}

Note: Obtaining IWebBrowser2 depends upon importing the unmanaged COM interfaces into VS. To do this, right-click your project and select Add Reference.... Select the Browse... tab, and find shdocvw.dll in your System32 folder.

Using the WebBrowser Control as a Powerful DHTML Editor in Windows Forms

Jay A. Allen — Wed, 29 Mar 2006 14:34:00 GMT

As you may know, I love the WebBrowser control. You can do so many wonderful things with it. And one of those things is whipping up a quick, simple, but surprisingly rich DHTML editor.

This interface was easy to concoct with the ToolStrip control and images taken from the FreeTextBox page. The WebBrowser control is positioned right below the ToolStrip.

To make the page editable, you need merely feed the WebBrowser a document whose BODY has the contentEditable property set to true.

webBrowser1.DocumentText = "<HTML><BODY contentEditable='true'></BODY></HTML>";

Now, the tricky part was programming the ToolStrip control to update the buttons depending upon the current style settings inside of the document. What's cool about tripping contentEditable on the document is that shortcut keys are now available. I.e., your users can press CTRL+B to bold, CTRL+I to italicize, etc. - all without your writing a lick of code. But, being a good software designer, you want your toolbar buttons to be sticky. You want them to look pressed when the cursor is placed in the middle of some bold text, and unpressed when the text is not bold.

The problem is that the Windows Forms team didn't implement all of the wrapper calls to make this easy for us. Ideally, you would sync the OnCommandStateChange event to get a notification when a style has changed. You would then use queryCommandState() on the document object to determine whether or not a given style is set or unset, and update the toolbar appropriately. But neither was implemented! OnCommandStateChange was broken up into events for the forward and back buttons, but the command state change element of the event was left out entirely. And queryCommandState() is not implemented at all on HtmlDocument.

So to make this work, I first had to add the MSHTML library so I could make an interop call. (In VS, right-click your project, select Add Reference..., and choose MSHTML Library from the COM tab. VS will generate an RCW, or Runtime Callable Wrapper, for you.)

Next, I named the buttons after the commands you have to pass to HtmlDocument.ExecCommand() in order to enable and disable the style within DHTML.

Finally, I implemented a method that is called from a Timer event every 10 milliseconds. This method checks each of the styles in turn, and updates the pressed state of the ToolStrip buttons as appropriate. (Note: This code doesn't show implementation for the font controls.)

        private void CheckCommandStateChanges()
        {
            mshtml.IHTMLDocument2 doc = (mshtml.IHTMLDocument2)webBrowser1.Document.DomDocument;

// Test bold.
string[] commands = { "Bold", "Italic",
"Underline", "InsertOrderedList",
"InsertUnorderedList"};

            foreach (string command in commands)
            {
                ToolStripButton button =
(ToolStripButton)editStrip.Items[command + "Button"];

                if (doc.queryCommandState(command))
                {
                    // Get button.
                    if (button.CheckState != CheckState.Checked)
                    {
                        button.Checked = true;
                    }
                }
                else
                {
                    if (button.CheckState == CheckState.Checked)
                    {
                        button.Checked = false;
                    }
                }
            }
        }

Now, yes, I could have been a little less hacky about this by importing the WebBrowser control as well and just listening for onCommandStateChange. I didn't for two reasons:

I dislike Interop, and avoid it wherever possible. It's hard to debug if anything goes wrong, and event callbacks from COM to .NET make me nervous. I dealt with this stuff heavily when writing my article on .NET UserControls in Internet Explorer, and have sworn off that brand of hooch ever since.
I didn't want my app to have the overhead of importing two heavy COM libraries. Having to drag in MSHTML when we have a managed wrapper for the core classes was bad enough.

For my next trick, I set up the code so that pressing the style buttons on the ToolStrip would change the style in the document. First, I set each button to point to the same event handler.

            BoldButton.Click += new EventHandler(commandButton_Click);
            ItalicButton.Click += new EventHandler(commandButton_Click);
            UnderlineButton.Click += new EventHandler(commandButton_Click);
            InsertUnorderedListButton.Click += new EventHandler(commandButton_Click);
            InsertOrderedListButton.Click += new EventHandler(commandButton_Click);

I set the Tag property for each button to the name of the associated command used by HtmlDocument.ExecCommand(). Then, I wrote the event handler that handles all of these events. (Note that I have to turn my ToolStrip updating timer OFF.)

        private void commandButton_Click(object sender, EventArgs e)
        {
            timer1.Enabled = false;
            ToolStripButton button = (ToolStripButton)sender;

            // We don't need to check the state -
            // ExecCommand acts as a toggle, turning the
            //command on if it's
            // off, and off if it's on. Just ensure that
            //the Tag property of your button is set to the
            // appropriate command.
            webBrowser1.Document.ExecCommand(button.Tag.ToString(), false, null);
            timer1.Enabled = true;
        }

Doing it this way is nice, because you can now add any number of additional buttons corresponding to other styles and tags, and your code will be able to handle them.

And them's the basics. A simple DHTML Editor in your Windows Forms applications with no more than 90 lines of code. If you need to provide your users rich editing and export the results in HTML format, it's hard to go wrong with this solution.

Achieve Slide Show Effects in Windows Forms Easily with the WebBrowser Control

WinFormsUE — Fri, 10 Feb 2006 23:34:00 GMT

I love the new managed WebBrowser control. It makes it so easy to hack any number of fantastic things into Windows Forms.

Let's say you want to do a slide show between various images. You can muck around with DirectX...or you can just use the transitions and filters built into the WebBrowser control and the DHTML Document Object Model. The following Visual Basic.NET code shows a UserControl created in Visual Studio 2005 that uses the WebBrowser control's built-in transitions and filters to pull this off. Since IE defines a large number of transitions and filters, you can do any number of effects: fade, random dissolve, window blinds, etc. (See Introduction to Filters and Transitions to behold all of the possibilities.)

To recreate this yourself, create a UserControl called Slideshow. Add a WebBrowser control named webBrowser1, and set the Dock property to Fill. Paste in the following code to Slideshow.vb, and you're good to go. To use the control in your application, set the ImageFilePath property to the directory containing your images, and call StartSlideshow() to start it up.

Imports System.IO

Public Class Slideshow
    Private _ImageFolderPath As String
    Private CurrentImage As Integer = 0
    Private Files As String()
    Private _Loop As Boolean = True

Private _AllowedExtensions As Dictionary(Of String, Integer)

    Public Property ImagePath() As String
        Get
            ImagePath = _ImageFolderPath
        End Get

Set(ByVal value As String)
Dim FileStrs As String() = Nothing

            ' If we don't include the Is Nothing test, the designer sets the value to Nothing automagically,
            ' causing our form to fail to load at design time.
            If (Directory.Exists(value) Or value Is Nothing) Then
                _ImageFolderPath = value
            Else
                Throw New System.IO.FileNotFoundException("Directory does not exist.")
            End If
        End Set
    End Property

    Public Sub StartSlideshow(ByVal milliSeconds As Integer, ByVal LoopSlideshow As Boolean)
        If (_ImageFolderPath Is Nothing) Then
            Throw New ArgumentException("You must set a valid value for ImagePath first.")
        End If

        ' Load up the array of images through which to cycle.
        Dim FilesTmp As String() = Directory.GetFiles(Me._ImageFolderPath)
        Dim TmpArray As List(Of String) = New List(Of String)()
        ' Remove elements that aren't images.
        For Each File As String In FilesTmp
            Dim Ext As String = File.Substring(File.LastIndexOf(".") + 1).ToLower()
            If (Me._AllowedExtensions.ContainsKey(Ext)) Then
                TmpArray.Add(File)
            End If
        Next

Files = TmpArray.ToArray()

_Loop = LoopSlideshow

        ' Load up the initial page. We will manipulate the page by making Javascript calls via HtmlDocument's
        ' InvokeScript() method.
        Dim NewPage As String = "<HTML>" & vbCr & _
"<script type=""text/javascript"">" & vbCr & _
"function transitionImage(newImg){" & vbCr & _
        "var imgObject = document.getElementById(""ourImage"");" & vbCr & _
        "imgObject.filters[0].apply();" & vbCr & _
        "imgObject.src = newImg;" & vbCr & _
     "imgObject.filters[0].play();" & vbCr & _
"}</script>" & vbCr & _
"<BODY><IMG src=""" & GetNextImage() & _
""" id=""ourImage"" style=""position:absolute;top:0px;left:0px;
filter:progid:DXImageTransform.Microsoft.RandomDissolve(Duration=2);" & _
"width:" & WebBrowser1.Width & ";height:" & WebBrowser1.Height & ";""></BODY></HTML>"
        WebBrowser1.DocumentText = NewPage

        ' Start the timer.
        Me.ImageSlideTimer.Interval = milliSeconds
        Me.ImageSlideTimer.Start()
    End Sub

    Public Sub StopSlideshow()
        Me.ImageSlideTimer.Stop()
    End Sub

Private Function GetNextImage() As String
Dim UriStr As String = Nothing

        If (CurrentImage = Files.Length) Then
            If (_Loop) Then
                CurrentImage = 0
            Else
                ' That was it - time to bail.
                StopSlideshow()
            End If
        End If

UriStr = Files(CurrentImage)
CurrentImage += 1

GetNextImage = UriStr
End Function

Private Sub ImageSlideTimer_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles ImageSlideTimer.Tick
Dim UriStr As String = GetNextImage()

        ' Create transition page for image.
        Dim args(1) As String
        args(0) = UriStr
        WebBrowser1.Document.InvokeScript("transitionImage", args)
    End Sub

    Private Sub Slideshow_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Me._AllowedExtensions = New Dictionary(Of String, Integer)()
        With Me._AllowedExtensions
            .Add("jpg", 1)
            .Add("jpeg", 1)
            .Add("gif", 1)
            .Add("png", 1)
            .Add("tif", 1)
            .Add("tiff", 1)
        End With
    End Sub
End Class

Using WebBrowser in Windows Forms to View Blog Content Syndicated Through RSS

WinFormsUE — Fri, 03 Feb 2006 01:26:00 GMT

With the managed WebBrowser control in Windows Forms 2.0, it's a snap to take an RSS feed and display it as formatted HTML text in the browser. Using transformed RSS in lieu of the original site has several benefits: the transformed RSS is usually faster to load; you can manipulate it programmatically with ease to create a standard feel for all syndicated content; and you can easily switch from one blog site to another - perfect if you're building some type of branded RSS reader.

The first thing you need is a way to turn RSS into HTML. I chose to create an XSLT (XSL Transform) document to do the job:

<?xml version="1.0" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:content="http://purl.org/rss/1.0/modules/content/">
<xsl:template match="/rss/channel">
    <HTML>
    <HEAD>
      <TITLE>
        <xsl:value-of select="title"/>
      </TITLE>

      <STYLE>
        .PostTitle {
          font-size:16px;
          font-weight:bold;
        }
      </STYLE>
    </HEAD>

<BODY>

      <DIV class="RssHeader">
        <xsl:for-each select="image">
          <xsl:element name="IMG">
            <xsl:attribute name="src">
              <xsl:value-of select="url"/>
            </xsl:attribute>
            <xsl:attribute name="style">
              float:left;
            </xsl:attribute>
          </xsl:element>
        </xsl:for-each>
        <h2>
          <xsl:element name="a">
            <xsl:attribute name="href">
              <xsl:value-of select="link" />
            </xsl:attribute>
          <xsl:value-of select="title"/>
            </xsl:element>
        </h2>
        <span class="Errata">
          <strong>Description</strong>:
          <xsl:value-of select="description"/>
        </span>
        <br/>
        <span class="Errata">
          <strong>Generated By</strong>:
          <xsl:value-of select="generator"/>
        </span>
        <p/>
        <span class="Errata">
          <xsl:value-of select="copyright"/>
        </span>
      </DIV>
      <HR/>
      <BR/>

      <xsl:for-each select="item">
        <DIV class="PostTitle">
          <xsl:element name="a">
            <xsl:attribute name="href">
              <xsl:value-of select="link" />
            </xsl:attribute>
            <xsl:value-of select="title"/>
          </xsl:element>
        </DIV>
        <DIV class="PostAuthor">
          Author: <xsl:value-of select="dc:creator"/>
        </DIV>
        <DIV class="PostDate">
          Published on <xsl:value-of select="dc:date"/>
        </DIV>
        <DIV class="PostContent">
          <xsl:value-of select="description" disable-output-escaping="yes"/>
        </DIV>
        <BR/>
        <HR/>
        <BR/>
      </xsl:for-each>

</BODY>
</HTML>
</xsl:template>
</xsl:stylesheet>

Now, however, we need a way to execute the transform in code. Not a problem: Just use the XslCompiledTransform class defined in System.Xml.Xsl to pull this off. (NOTE: I do all exception handling in the caller of this method.)

        private StringBuilder TransformFeed(Uri feedUri, string xsltPath)
        {
            StringBuilder writtenHtmlString = new StringBuilder();
            XmlWriter writtenHtml = null;
            XmlDocument xmlDoc = new XmlDocument();

            xmlDoc.Load(feedUri.ToString());

            writtenHtml = XmlWriter.Create(writtenHtmlString);

            // Perform a transform.
            XslCompiledTransform xslt = new XslCompiledTransform();
            xslt.Load(xsltPath);
            xslt.Transform(xmlDoc, writtenHtml);
            writtenHtml.Close();

return (writtenHtmlString);
}

Assign this HTML to the DocumentText property of the WebBrowser control on your form, and you're golden. Add a TreeView to your app to maintain a list of categorized blog feed, throw in a persistence mechanism for the user's list of blogs to watch (say, perhaps, Application Settings?), and you have yourself a basic RSS feed reader in Windows Forms.