Silverlightアプリケーションを別のブラウザのズームレベルで動作させる

Question

JavaScriptのコードとCanvasコントロールのScaleTransformプロパティを使用して異なる解像度で動作するように設定したSilverlight Webサイトがあります。しかし、ブラウザのズームが100％以下に設定されている場合に限り、サイトが最適に表示されます。ズームレベルを上げると、ブラウザにスクロールバーが表示されず、コンテンツがクリップされます。私はいくつかのオプションを試してみました。例えば、min-heightを本体でCSSを使って設定していますが、それは役に立ちません。 （私はIEでWebサイトをテストする必要があることに注意してください）

ここに私のスケーリングコードは次のとおりです。ここで

<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レイアウトを修正します。