Создание приложения Silverlight для разных уровней масштабирования браузера

Question

У меня есть веб-сайт Silverlight, который я настроил для работы с различными разрешениями с использованием некоторого кода JavaScript и свойства Canvas Control ScaleTransform. Это прекрасно работает, однако сайт лучше всего просматривать, только если масштаб браузера установлен на 100% или ниже. Когда я увеличиваю уровень масштабирования, браузер не предоставляет никаких полос прокрутки, и мой контент обрезается. Я попробовал несколько опций, например, установить min-height в теле с помощью CSS, но это не помогает. (Обратите внимание, что мне нужно, чтобы проверить сайт только на IE)

Вот мой скейлинг код:

<navigation:Page x:Class="Mynamespace.Homepage" 
      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" 
      xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" 
      xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" 
      xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" 
      Title="Home" 
      HorizontalAlignment="Stretch" 
      mc:Ignorable="d"> 

<Canvas x:Name="RootCanvas"> 
    <Canvas.RenderTransform> 
     <ScaleTransform x:Name="PageScale" 
         ScaleX="1" 
         ScaleY="1" /> 
    </Canvas.RenderTransform> 

    <Grid x:Name="RootGrid" 
      Canvas.Left="50" 
      Canvas.Top="5"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="62" /> 
      <RowDefinition Height="428*" /> 
     </Grid.RowDefinitions> 

     <!-- First Grid Row contains Navigation menu --> 
     <!-- Second one contains a scrollviewer that holds a navigation frame --> 
     <Grid x:Name="ScrollGrid" 
       Grid.Row="1" 
       Width="700" /> 
       <ScrollViewer x:Name="ScrollViewer1" 
         Grid.Row="1" 
         Margin="0,0,0,0" 
         Padding="0, 0, 0, 0" 
         VerticalScrollBarVisibility="Auto"> 
       <sdk:Frame Name="MainFrame" 
         Width="Auto" 
         Height="Auto" 
         Margin="0,0,0,0" 
         Padding="0,0,0,0"> 
       <sdk:Frame.UriMapper> 
        <sdk:UriMapper> 
         <!-- some uri mapping here --> 
        </sdk:UriMapper> 
       </sdk:Frame.UriMapper> 
      </sdk:Frame> 
     </ScrollViewer> 
    </Grid> 
</Canvas> 

Вот код позади на странице:

public Homepage() 
    { 
     InitializeComponent(); 

     App.Current.Host.Content.Resized += new EventHandler(Content_Resized); 
     App.Current.Host.Content.FullScreenChanged += new EventHandler(Content_FullScreenChanged); 
     HtmlPage.RegisterScriptableObject("Homepage", this); 
     if (App.Current.Host.IsLoaded) 
     { 
      HtmlPage.Window.Invoke("ResizeSLContainer"); 
     } 
    } 

    [ScriptableMember] 
    public void ScaleContainer(double containerHeight, double containerWidth) 
    { 
     if (containerHeight != 0 && containerWidth != 0) 
     { 
      ScaleTransform scale = this.FindName("PageScale") as ScaleTransform; 
      scale.ScaleX = containerHeight/744; 
      scale.ScaleY = containerHeight/744; 
     } 
    } 

    void Content_FullScreenChanged(object sender, EventArgs e) 
    { 

     if (App.Current.Host.IsLoaded) 
     { 
      HtmlPage.Window.Invoke("ResizeSLContainer"); 
     } 

    } 

    void Content_Resized(object sender, EventArgs e) 
    { 

     if (App.Current.Host.IsLoaded) 
     { 
      HtmlPage.Window.Invoke("ResizeSLContainer"); 
     } 
    } 

И, наконец, js:

function ResizeSLContainer() { 

     var slPlugin = document.getElementById("SilverlightControl"); 

     //Scale Canvas 
     slPlugin.Content.Homepage.ScaleContainer(slPlugin.content.actualHeight, slPlugin.content.actualWidth); 

     //Resize main Container 
     if (slPlugin.content.actualHeight > 0) { 

      slPlugin.width = (slPlugin.content.actualHeight/744) * 1005; 
     } 

    } 

Answer 1

Вы можете реагировать на события масштаба в управляемом коде путем присоединения обработчика к событию Content.Zoomed как это:

Application.Current.Host.Content.Zoomed += new EventHandler(this.ContentZoomed); 

Использование zoom design или adaptive UI исправить макет.