Динамическое управление размером Silverlight на веб-странице - PullRequest
2 голосов
/ 15 декабря 2009

Вот в чем проблема ...

Я добавляю некоторые элементы управления silverlight 3 в приложение ASP.Net Web Forms. Высота приложения Silverlight может меняться в зависимости от количества данных в нем. Приложение является частью веб-страницы, а не всей страницы. Мои пользователи хотели бы иметь только 1 набор полос прокрутки. Есть ли способ динамического определения размера div или объекта на основе suze приложения silverlight?

Например, я могу подключиться к javascript Silverlight, чтобы сделать это как-нибудь?

Ответы [ 3 ]

1 голос
/ 16 декабря 2009

Есть два способа сделать это: либо напрямую получить доступ к элементу DOM и изменить его атрибуты style (или css), либо вызвать функцию javascript на странице, которая будет делать то же самое. Ниже у меня есть xaml, код и HTML-код для простого примера, который при перетаскивании ползунка в элементе управления silverlight изменяет размер элемента div, содержащего этот элемент управления. Если вы создаете простое приложение Silverlight с дополнительным тестовым веб-сайтом и страницей, а затем копируете и вставляете следующий код, то вы можете поиграть (обратите внимание, что я вытащил некоторые из сгенерированных стилей / скриптов со страницы aspx ради краткости).

Код на C # и javascript не особенно красив и пуленепробиваем, это просто пример.

<UserControl x:Class="SilverlightApplication6.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignWidth="200" d:DesignHeight="480">
  <Grid x:Name="LayoutRoot">

      <Slider x:Name="WidthSlider" Value="50" Maximum="200"></Slider>

  </Grid>
</UserControl>

Код для приложения Silverlight:

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();

        this.Loaded += new RoutedEventHandler(MainPage_Loaded);
    }

    private void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        WidthSlider.ValueChanged += new RoutedPropertyChangedEventHandler<double>(WidthSlider_ValueChanged);
    }

    private void WidthSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
    {
        //access and manipulate the DOM element directly:
        HtmlElement container = HtmlPage.Document.GetElementById("silverlightControlHost");
        if (container != null)
        {
            container.SetStyleAttribute("width", (50 + e.NewValue).ToString() + "px");
        }

        //pass a delta value to the js function, which will get added to the current width of the container:
        HtmlPage.Window.Invoke("resizeContainer", (e.NewValue - e.OldValue).ToString());
    }
}

и страница aspx:

<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>SilverlightApplication6</title>
    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript">
        function resizeContainer(delta) {
            var container = document.getElementById('silverlightControlHost');
            if (container != null) {
                //alert('starting width: ' + container.style.width);
                container.style.width = (parseInt(container.style.width) + Number(delta) + 'px');
                //alert('finishing width: ' + container.style.width);
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server" style="height:100%">
    <div id="silverlightControlHost" style="border: solid 1px red; width:200px; height: 400px;">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
          <param name="source" value="ClientBin/SilverlightApplication6.xap"/>
          <param name="onError" value="onSilverlightError" />
          <param name="background" value="white" />
          <param name="minRuntimeVersion" value="3.0.40624.0" />
          <param name="autoUpgrade" value="true" />
          <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration:none">
              <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>
          </a>
        </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
    </form>
</body>
</html>

Редактировать: Через два дня после того, как я написал этот ответ, Чарльз Петцольд написал в блоге сообщение об изменении размера элементов управления silverlight на html-странице, вы можете найти его здесь . Основное отличие состоит в том, что он изменяет размеры фактического элемента управления плагина silverlight, в то время как я изменял размеры HTML-элемента, в котором находится плагин silverlight.

1 голос
/ 15 декабря 2009

Я делаю что-то похожее с управлением Silverlight, которое я сделал. Моя проблема заключалась в том, что у меня был элемент управления для отображения отсканированных документов в элементе управления Silverlight, и я имел жестко заданную высоту, но некоторые пользователи работали с гораздо более высоким разрешением, поэтому у них было много потерянного пространства, которое они могли использовать.

Итак, я реализовал небольшую клиентскую JavaScript-функцию, которая определяет оптимальный размер элемента управления. Этот код запускается при загрузке страницы.

В нижней части HTML-страницы добавьте следующий код (используя Jquery):

<script type="text/javascript" language="javascript">
    function InitializeSilverlightControlHeight()
    {
        $(function()
        {
            var miniumimControlSize = 500;
            var pagePadding = 150;
            var screenheight = $(window).height() - pagePadding;
            if (screenheight > miniumimControlSize)
            {
                $("#yourSilverLightControlName").height(screenheight);
            }
        });
    }

    InitializeSilverlightControlHeight();
</script>

Что он делает, это проверяет видимый размер окна браузера, а затем минус сумму заполнения (которая в моем случае составляет 150 пикселей для учета высоты заголовка). Если этот размер больше минимального размера элемента управления, он устанавливает для элемента управления этот размер.

Надеюсь, что это поможет или, по крайней мере, укажет вам общее направление, чтобы вы начали катиться.

0 голосов
/ 15 декабря 2009

Не думаю, что это именно то, что вы ищете, но это может помочь ...

В ctor вашей первой страницы, которую создает ваш элемент управления silverlight, вы можете добавить событие

App.Current.Host.Content.Resized += new EventHandler(Content_Resized);

Затем в слушателе событий вы можете изменить размер элемента управления, чтобы он лучше соответствовал окну.

void Content_Resized(object sender, EventArgs e)
{
    double height = App.Current.Host.Content.ActualHeight;
    double width = App.Current.Host.Content.ActualWidth;
    this.Height = height;
    this.Width = width;
    m_currentPage.Height = height;
    m_currentPage.Width = width;
} 

Надеюсь, это поможет = D

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...