The WebBrowser control enables you to bring in content from existing web applications. In my example today I’ll show how to launch a web page with a dynamically altered link. In my example I’ll use a textbox as the source but it could just as well be the CurrentItem of a M3 List or another Mashup Control. The mashup does a Bing search. It can do the search within the Mahup using the WebBrowser mashup control or it can launch the Bing page in a new window.

The final result looks like this:

Start with adding the TextBox and the two Buttons.

<StackPanel Orientation="Horizontal">
    <TextBlock VerticalAlignment="Center" Text="Search:" />
    <TextBox Width="400" VerticalAlignment="Center" Name="searchTextBox" />

    <Button Name="buttonOK" Content="OK" Width="100" Margin="8" IsDefault="True" Style="{DynamicResource styleButtonPrimaryMashup}">
      <Button.CommandParameter>
        <mashup:Events>
          <mashup:Event SourceEventName="Click" TargetName="webBrowser">
            <mashup:Parameter SourceKey="search" TargetKey="search" Value="{Binding ElementName=searchTextBox, Path=Text}" />
          </mashup:Event>
        </mashup:Events>
      </Button.CommandParameter>
    </Button>
    <Button Content="New window" Width="100" Margin="8">
      <Button.CommandParameter>
        <mashup:Events>
          <mashup:Event SourceEventName="Click" LinkUri="http://www.bing.com/search?q={search}&amp;form=QBLH&amp;filt=all">
            <mashup:Parameter SourceKey="search" TargetKey="search" Value="{Binding ElementName=searchTextBox, Path=Text}" />
          </mashup:Event>
        </mashup:Events>
      </Button.CommandParameter>
    </Button>
</StackPanel>

Notice that the first button send an event to the targetName webBrowser. webBrowser is the name of my webBrowser control on the mashup page. It has no TargetEventname specified becuase Navigate is the default event so you don’t need to set an EventName. The event has a parameter called search.

This is my browser control:

<mashup:WebBrowser Name="webBrowser" Grid.Row="1"
Uri="http://www.bing.com/search?q={search}&amp;amp;form=QBLH&amp;amp;filt=all"
StartUri="http://www.bing.com"/>

You can see that {search} is part of the Uri specified. Any value passed as search in the Event will be replaced in the URI. I also had to escape the & in the Uri with &

Now look at the New window button. In that button I use the Event with support for launching an Uri by setting the LinkUri property. The LinkUri property also supports substitution with event values.

The final Mashup has the following code:

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:ui="clr-namespace:Mango.UI.Controls;assembly=Mango.UI" xmlns:mashup="clr-namespace:Mango.UI.Services.Mashup;assembly=Mango.UI">
  <Grid.Resources>
    <mashup:CurrentItemValue x:Key="CurrentItemValueConverter" />
  </Grid.Resources>

  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>

  <StackPanel Orientation="Horizontal">
    <TextBlock VerticalAlignment="Center" Text="Search:" />
    <TextBox Width="400" VerticalAlignment="Center" Name="searchTextBox" />

    <Button Name="buttonOK" Content="OK" Width="100" Margin="8" IsDefault="True" Style="{DynamicResource styleButtonPrimaryMashup}">
      <Button.CommandParameter>
        <mashup:Events>
          <mashup:Event SourceEventName="Click" TargetName="webBrowser">
            <mashup:Parameter SourceKey="search" TargetKey="search" Value="{Binding ElementName=searchTextBox, Path=Text}" />
          </mashup:Event>
        </mashup:Events>
      </Button.CommandParameter>
    </Button>
    <Button Content="New window" Width="100" Margin="8">
      <Button.CommandParameter>
        <mashup:Events>
          <mashup:Event SourceEventName="Click" LinkUri="http://www.bing.com/search?q={search}&amp;form=QBLH&amp;filt=all">
            <mashup:Parameter SourceKey="search" TargetKey="search" Value="{Binding ElementName=searchTextBox, Path=Text}" />
          </mashup:Event>
        </mashup:Events>
      </Button.CommandParameter>
    </Button>
  </StackPanel>
  <mashup:WebBrowser Name="webBrowser" Grid.Row="1" Uri="http://www.bing.com/search?q={search}&amp;amp;form=QBLH&amp;amp;filt=all" StartUri="http://www.bing.com">
    </mashup:WebBrowser>

</Grid>