Wiki

Giả dụ trang web của bạn toàn bộ đều được viết bằng Silverlight, nhưng bạn muốn có thể tải và chạy một ứng dụng Silverlight khác với ứng dụng/ trang web chính Silverlight của bạn. Việc này hiện đang không được hỗ trợ trực tiếp trong Silverlight. Tuy nhiên, tôi có một giải pháp thay thế mà sẽ thực hiện nhiều hay ít hơn để hoàn thành kịch bản này.

Phương pháp mà tôi thực hiện là thêm một control Silverlight thứ hai bị ẩn  vào trang web của bạn. Tôi gán  Source  cho control Silverlight thứ hai này là empty (“”) cho đến khi tôi muốn tải và hiển thị control  Silverlight thứ hai này . Tôi cũng đặt control vào một thẻ  DIV mà nó bị ẩn đi. Bạn có thể tải và không tải control này cũng được và  có thể gán một cách tự động cho  nó để trỏ đến một XAP’s khác để tải ứng dụng khác trong trang của bạn.

Bước 1.

Trong trang web của tôi (thí dụ là tập tin  default.aspx ):

Silverlight Control chính đại diện cho trang web của tôi:

<div style="height: 100%; z-index: 1; position: absolute;">
    <asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/SLDev.xap"  MinimumVersion="2.0.30523" Width="100%" Height="100%" />
</div>

Silverlight control thứ hai mà chúng ta sẽ tải và hiển thị với trang chính:

<div id="myDIV" style="z-index: 2; display: none; position: absolute; padding-left: 0px;   padding-top: 200px;">
    <asp:Silverlight ID="Silverlight1" runat="server" Source="" MinimumVersion="2.0.30523" Width="800px" Height="600px" />
</div>

Những điều cần chú ý:

1. Tôi đặt  style z-index   cho control Silverlight thứ hai cao hơn control Silverlight thứ nhất cốt để control thứ nhất sẽ xuất hiện trên cùng.
2. Tôi gán style display = none cho thẻ  DIV của  Silverlight control thứ hai để nó không hiển thị và không làm nhiễu với chuột hay bàn phím khi nhập vào đối với Silverlight control thứ nhất.
3. Tôi gán style position = absolute để những control có thể nạp (tải) ở trên cùng của những cái khác. Bạn sẽ muốn điều chỉnh padding-left và  padding-right  trong  thuộc tính position để control xuất hiện ở nơi mà bạn muốn trên trang web của bạn.
4. Và tôi gán  Source =”” dành cho  Silverlight control thứ hai để giữ nó cho việc nạp một ứng dụng khác cho đến khi tôi đã sẵn sàng.

Bước 2.

Trong trang web của tôi (thí dụ như default.aspx) Tôi thêm 2 hàm Javascript mà ứng dụng Silverlight của tôi có thể gọi để nạp và ẩn Silverlight control thứ hai . Lưu ý:

1. LoadSilverlightControl() – Hàm này có một tham số mà nó sẽ chứa đường dẫn đầy đủ đến file XAP mà chúng ta muốn load. Thí dụ: “ClientBin\TankWar.xap”
2. Đối với  Silverlight Control, tôi gọi setAttribute() để thay đổi  source của  Silverlight control.
3. Đối với thẻ  DIV tôi điều chỉnh style.display có giá trị   “block” cốt để  hiển thị hay không hiển thị, để  cho nó ẩn nó đi.

<script type="text/javascript">

    function LoadSilverlightControl(ctrl) {

        var control = document.getElementById("Silverlight1");

        var div = document.getElementById("myDIV");

        div.style.display = "block";        

        control.setAttribute("Source", ctrl);

    }

    function HideSilverlightControl() {

        var control = document.getElementById("Silverlight1");

        var div = document.getElementById("myDIV");

        div.style.display = "none";

        control.setAttribute("Source", "");

    }

</script>

Bước 3.

Thực hiện gọi từ  Silverlight->Javascript để làm cho  control được nạp và chạy:

HtmlPage.Window.Invoke("LoadSilverlightControl", "ClientBin/TankWar.xap");

Để ẩn nó đi:

HtmlPage.Window.Invoke("HideSilverlightControl");

Kết quả.

Màn hình sau đây hiển thị điều này. Click vào  “Games” button….

Và ứng dụng  Tank War đã được nạp và hiển thị.

Thank you,
--Mike Snow