使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应用程序在不同的浏览器缩放级别下工作

回答

相关问题