使Silverlight應用程序在不同的瀏覽器縮放級別下工作

我有一個Silverlight網站，我已配置爲使用JavaScript代碼和Canvas控件ScaleTransform屬性在不同分辨率下工作。這很好，但是，只有瀏覽器縮放設置爲100％或更低時才能查看該網站。當我增加縮放級別時，瀏覽器不提供任何滾動條，並且我的內容被剪裁。我嘗試了幾個選項，例如使用CSS在身體中設置min-height，但這沒有幫助。（請注意，我需要測試的網站只對IE）使Silverlight應用程序在不同的瀏覽器縮放級別下工作

這裏是我的縮放代碼：

<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; 
     } 

    }

來源

2012-01-27 prthrokz

可以響應由處理器連接到Content.Zoomed事件這樣可以放大託管代碼事件：

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

使用zoom design或adaptive UI修復佈局。

來源

2012-08-03 14:35:39

使Silverlight應用程序在不同的瀏覽器縮放級別下工作

回答

相關問題