Archive for the 'Avalon' Category

Page 2 of 6

Launching the Browser from a Hyperlink

One question that has been coming up frequently over the past few days has been how to launch the browser when the user clicks on a hyperlink. The answer is different for the browser and standalone cases:

Browser (XBAP or Loose XAML)

XBAPs and loose XAML support special named targets for Hyperlink; these are the same named targets that are supported by HTML:

  • _self: the browser should load the document in the same frame as the element that refers to this target
  • _parent: the browser should load the document into the immediate parent frame of the current frame. This value is equivalent to _self if the current frame has no parent.
  • _blank: the browser should load the document in a new, unnamed window
  • _top: the browser should load the document into the full, original window (thus canceling all other frames). This value is equivalent to _self if the current frame has no parent.

The following XAML illustrates using a special target:

<TextBlock>
   <Hyperlink NavigateUri="http://microsoft.com" TargetName="_top">
      Navigate the top-level window to Microsoft.com
   </Hyperlink>
</TextBlock>

If you specify a target that does not exist, a new browser window will be created and the navigation will occur in that window. If you specify a target that already exists, the existing browser window will be used.

This functionality all relies on the named browser targeting feature that already exists in Internet Explorer. Note that the WPF navigation framework also supports named targets, so if you have a Frame in your Window named “_self,” “_top,” etc., those Frames will be searched first before delegating to the browser. This means that the hyperlink targeting logic will start by looking for an Avalon Frame inside the application with the specified name. If it does not find it, and the application is hosted in the browser, then it will call the browser’s navigate function with the specified target name.

I have a sample HTML page that hosts loose XAML in an iframe and demonstrates each of the special hyperlink targets. You can try it out here, and download both pages from here.

Standalone

Unfortunately WPF v1 does not have this convenient feature in the standalone case as well, since we can’t call into the browser in this case. For standalone scenarios, the simplest way to accomplish this task is to handle Hyperlink’s RequestNavigate event, and launch the default browser in your event handler.

The following XAML creates the Hyperlink and attaches an event handler:

<TextBlock>
   <Hyperlink RequestNavigate="HandleRequestNavigate" Name="hl"
      NavigateUri="http://microsoft.com">
      Open Microsoft.com in the default browser
   </Hyperlink>
</TextBlock>

And the following code implements the event handler:

void HandleRequestNavigate(object sender, RoutedEventArgs e)
{
   string navigateUri = hl.NavigateUri.ToString();
   // if the URI somehow came from an untrusted source, make sure to
   // validate it before calling Process.Start(), e.g. check to see
   // the scheme is HTTP, etc.
   Process.Start(new ProcessStartInfo(navigateUri));
   e.Handled = true;
}

You can download the source for this sample here.

Creating a File Upload Control that Works in the Sandbox

In HTML, it is easy to add file upload capabilities to your application using the INPUT element with type=”file”:

<input type="file" />

This renders a text box and a button, and when a user clicks on the button she is confronted with a file open dialog. She selects a file, and the text box gets populated with file name:

The input element is usually used inside of a form, and the contents of the file are sent to the form processing agent when the form is submitted.

WPF does not provide a file upload control out of the box, but it is very easy to construct your own using a TextBox, a Button, and Microsoft.Win32.OpenFileDialog. I have created a simple version of this control by deriving from UserControl. My UserControl has one public property, called File, which is of type Stream, and an event, called FileSelected, which is raised when the user chooses a new file using the OpenFileDialog.

The main logic for this control lives in the Click event handler for the Button:

        void SelectFile(object sender, RoutedEventArgs e)
        {
            OpenFileDialog ofd = new OpenFileDialog();
            bool? dialogResult = ofd.ShowDialog();

            if (dialogResult == true)
            {
                TBFileName.Text = ofd.SafeFileName;
                file = ofd.OpenFile();

                // raise the FileSelected event:
                OnFileSelected(EventArgs.Empty);
            }
        }

In order to make this work inside the sandbox for an Internet Zone XBAP, I need to populate the TextBox using the SafeFileName property on OpenFileDialog, rather than using the FileName property. FileName will provide the full path to the file, and hence is not safe to use in partial trust (you will get a SecurityException if you try to use it from an Internet Zone XBAP). SafeFileName gives you a sanitized file name – simply the name of the file, without disclosing the path. This may be used safely by a partial trust application.

If you have the July CTP installed, you can try out a little test XBAP that uses this control here. You can download source for the control and the test app here.

Which Build is Right for You?

There seems to be some confusion about the new July CTP, and how to use it without a new build of Orcas (in fact, Orcas is just the dev environment, and you should be able to use the July framework with the June build of Orcas). In order to help clarify which build is right for you, Tom Archer has posted a thorough discussion of the differences between the different builds and how to get the right combination of tools (thanks Ashish for the tip).

.Net Framework 3.0 July CTP

The July CTP shipped today. Get it here.

June CTP and Transparent Windows

The June CTP of .Net Framework 3.0 was released on Friday. One new June CTP feature that I am very excited to introduce is a new property on Window called AllowsTransparency. AllowsTransparency enables you to create those semi-transparent windows and rounded-corner windows for which many of you have been asking.

I have written a small sample to illustrate some of the things to think about when creating semi-transparent windows. The central part of the sample is the following XAML:

<Window x:Class="WindowTransparency.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="WindowTransparency" Height="300" Width="300"
    AllowsTransparency="True" WindowStyle="None"
    Background="Transparent"
    >
  <Border CornerRadius="50" Background="Blue" Opacity=".7">
    <Button Click="CloseWindow" Height="30" Width="100">Close Me
    </Button>
  </Border>
</Window>

There are a few things to notice in this XAML. First is that I set Window.AllowsTransparency to true. Of course, as the name implies, this simply means that the Window may be made transparent (under the covers, it switches to using a layered window), it does not actually set the background to transparent. To achieve a transparent window, I set Window.Background to Transparent. Now that I have a transparent window surface, I can draw whatever content inside of it that I like. In this example, I’m simply using a Border with rounded corners to show that you can create rounded-corner windows and dialogs.

You’ll also notice that I have set Window.WindowStyle to None. For now, Windows with AllowsTransparency=true are not compatible with any of the other WindowStyles, and we expect that this will be fine for most scenarios (if you are using a transparent window, you probably don’t want the standard Win32 window chrome). Drawing your own Window chrome is easy (as an example, I’ve created a close button that I’ve hooked up to Window.Close()). Making your Window user-draggable is actually just as easy to do. The following code does it:

public Window1()
{
    InitializeComponent();
    MouseLeftButtonDown += new MouseButtonEventHandler
           (Window1_MouseLeftButtonDown);
}

void Window1_MouseLeftButtonDown(object sender,
     MouseButtonEventArgs e)
{
    DragMove();
}

Super sexy rounded corner window

You can download the full sample here.

Windows SDK is Live for Beta 2

The Windows SDK online documentation is now live with Beta 2 content. The WPF content is under the WinFX node. My assumption is that that node will change to “.Net Framework 3.0″ at some point.

A Sea of Orange at TechEd Boston

Here is a shot of about half of the WPF team members present at TechEd (they made me stand in front because I’m short). I’ll try to snag another this week with everyone.

Our Alternative Chalk Talk Schedule

Unfortunately the chalk talk schedule is not provided in any of the printed TechEd materials, but we on the WPF team are resourceful folks, and we put together this high-tech alternative:

Our demo booth is a bit hidden, so it may be hard to find by the signage, but you can always just look for our bright orange shirts over in the Developer area.

The WPF Community Site is Live

The brand new WPF community website is live! Check out the aggregate feed for WPF blogs, another feed for forum posts, a sample gallery (you can download samples or post your own), and news and announcements about WPF. We hope that this will be a great resource for WPF developers and designers, and we’d love your feedback on it.

WPF Content at TechEd

Here’s a cheat sheet if you want to attend all of the WPF talks at TechEd:

Date Time Code Title Speaker
Mon 6/12 9:00am-10:15am DEV 202 WPF: Introduction Rob Relyea
Mon 6/12 5:00pm-6:15pm DEVTLC 05 WPF: Interop with Win32 and MFC Nick Kramer
Tue 6/13 2:45pm-4:00pm DEVTLC 09 WPF: Data Visualization Kevin Moore, Beatriz Costa, & Robert Ingebretsen
Tue 6/13 4:30pm-5:45pm DEVTLC 10 WPF: XAML Browser Applications and the Partial Trust Sandbox Karen Corby & Ashish Shetty
Wed 6/14 10:15am-11:30am DEV 326 WPF: Building Rich Content Experiences with Windows Presentation Foundation Chris Han
Thu 6/15 9:45am-11:00am DEV 336 WPF: Creating Windows and Web Applications with WPF Lauren Lavoie
Thu 6/15 1:00pm-2:15pm DEV 338 WPF: Building Data-Driven Applications with Windows Presentation Foundation Kevin Moore
Fri 6/16 2:45pm-4:00pm DEV 349 WPF: Build Beautiful Applications with Windows Presentation Foundation Robert Ingebretsen

There are going to be three chalk talks covering WPF content as well (one on data visualization, one on writing XBAPs, and one on interop). I will update this post with the schedule for those talks when I know it.

Update 6/12/2006 7:47am (PDT): Added the chalk talks to the table above.