Вот в чем проблема ...
Я добавляю элементы управления silverlight 3 в приложение веб-форм ASP.Net. Высота приложения silverlight может изменяться в зависимости от количества данных в нем. Приложение является частью веб-страницы, а не всей страницей. Мои пользователи хотели бы иметь только 1 набор полос прокрутки. Есть ли способ динамически изменять размер div или объекта на основе suze приложения silverlight?
Например, могу ли я как-то подключиться к javascript silverlight, чтобы это сделать?
Есть два способа сделать это: либо напрямую получить доступ к элементу DOM и изменить его атрибуты стиля (или 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.
Я делаю нечто подобное с созданным мной элементом управления 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 пикселей для учета высоты заголовка). Если этот размер больше минимального размера элемента управления, он устанавливает для элемента управления этот размер.
Надеюсь, что это поможет или, по крайней мере, укажет вам общее направление движения.
Не думайте, что это именно то, что вы ищете, но это может помочь ...
В 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
