load URL into WebBrowser with MVVM

问题

I'm makeing an app where you have a listbox in the buttom with a logo of different websites, and a WebBrowseron the top. The idea is that when you press on a logo, the webBrowser load the corresponding page. I already make this work, but I want to remake the app with MVVM to make it better. I've made the listbox with all the logos, but I dont know how to load the URL onto the WebBrowser when I click on the logo.

回答1:

Not 100% sure if this will work on Phone7 but worth a shot...

Fist off the WebBrowser Source property is not bindable as its not a DependancyProperty so you will have to make a helper class to create an AttachedProperty to help with the binding.

Then you can link your ListBox SelectedItem to the new LinkSource property using the Property that contains the actual link from your ListBoxItem.

Example:

Xaml:

<Window x:Class="WpfApplication8.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication8"
        Title="MainWindow" Height="233" Width="405" Name="UI">

    <StackPanel Orientation="Horizontal" DataContext="{Binding ElementName=UI}">
        <ListBox x:Name="listbox" ItemsSource="{Binding Links}" Width="100" DisplayMemberPath="Name"/>
        <WebBrowser local:WebBrowserHelper.LinkSource="{Binding ElementName=listbox, Path=SelectedItem.Site}" Width="200"/>
    </StackPanel>

</Window>

Code:

public partial class MainWindow : Window
{
    private ObservableCollection<Link> _links = new ObservableCollection<Link>();

    public MainWindow()
    {
        InitializeComponent();
        Links.Add(new Link { Name = "StackOverflow", Site = new Uri("http://stackoverflow.com/") });
        Links.Add(new Link { Name = "Google", Site = new Uri("http://www.google.com/") });
    }

    public ObservableCollection<Link> Links
    {
        get { return _links; }
        set { _links = value; }
    }
}

// ListBox item
public class Link
{
    public string Name { get; set; }
    public Uri Site { get; set; }
}


// helper calss to create AttachedProperty
public static class WebBrowserHelper
{
    public static readonly DependencyProperty LinkSourceProperty =
        DependencyProperty.RegisterAttached("LinkSource", typeof(string), typeof(WebBrowserHelper), new UIPropertyMetadata(null, LinkSourcePropertyChanged));

    public static string GetLinkSource(DependencyObject obj)
    {
        return (string)obj.GetValue(LinkSourceProperty);
    }

    public static void SetLinkSource(DependencyObject obj, string value)
    {
        obj.SetValue(LinkSourceProperty, value);
    }

    // When link changed navigate to site.
    public static void LinkSourcePropertyChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
    {
        var browser = o as WebBrowser;
        if (browser != null)
        {
            string uri = e.NewValue as string;
            browser.Source = uri != null ? new Uri(uri) : null;
        }
    }

}

Result:

回答2:

Your question are actually two questions.

1. There're several ways to pick up clicks from listbox. Most basic one is <Listbox SelectedItem="{Binding selectedItem,mode=TwoWay}" ...

2. To set the web browser's URL, you could implement INotifyPropertyChanged in your VM, declare public Uri browserUri { get; private set; } in your WM, be sure to raise PropertyChanged when you change the property, and in XAML <WebBrowser Source="{Binding browserUri}" />

来源：https://stackoverflow.com/questions/14553680/load-url-into-webbrowser-with-mvvm