Is it possible to show/hide UserControls within a Silverlight XAP file from JavaScript?

Question

I've created a Silverlight project that produces [something].xap file to package a few silverlight UserControls. I would like to manipulate that .xap file through the use of javascript in the browser to show and hide user controls based upon java script events.

Is it possible to do this?

If so any sample could or links to documentation would be appreciated.

Thanks in advance

Kevin

Answer 1

Here is a my collections of my links for this subject.

• Javascript communication to Silverlight 2.0
• Silverlight interoperability
• Silverlight and JavaScript Interop Basics

Answer 2

Here's my solution...not sure if it's the "best-practices" way...comments????

In the App class within my Silverlight application I have the following code:

    private Page _page = null;
    private void Application_Startup(object sender, StartupEventArgs e)
    {
        _page = new Page();
        this.RootVisual = _page;

        HtmlPage.RegisterScriptableObject("App", this);
    }

Also to the App class I add a [ScriptableMember] to be called from JavaScript

    [ScriptableMember]
    public void ShowTeamSearch(Guid ctxId, Guid teamId)
    {
        _page.ShowTeamSearcher(ctxId, teamId);
    }

The Page class is the default one that get's created within the Silverlight Control project, it really doesn't have any UI or logic, it's just used to swap in/out the views.

    Login oLogin;
    TeamSearcher oSearcher;

    public Page()
    {
        InitializeComponent();
        oLogin = new Login();
        oSearcher = new TeamSearcher();

        oLogin.Visibility = Visibility;
        this.LayoutRoot.Children.Add(oLogin);
    }

Also a method is added to show/hide the views...this could/will probably get more advanced/robust with animations etc...but this shows the basic idea:

    public void ShowTeamSearcher(Guid ctxId, Guid teamId)
    {
        oSearcher.UserTeamId = teamId;
        oSearcher.UserContextId = ctxId;

        LayoutRoot.Children.Remove(oLogin);
        LayoutRoot.Children.Add(oSearcher);
    }

Then to invoke this in the JavaScript after assigning the id of oXaml to the instance of the silverlight host.

    var slControl = document.getElementById('oXaml');
    slControl.Content.App.ShowTeamSearch(sessionId, teamId);

This seems to work and isn't all that bad of a solution, but there might be something better...thoughts?