css - 使 Silverlight 应用程序在不同的浏览器缩放级别下工作

Question

我有一个 Silverlight 网站，我已将其配置为使用一些 JavaScript 代码和 Canvas 控件 ScaleTransform 属性处理不同的分辨率。这工作正常，但是，只有当浏览器缩放设置为 100% 或以下时，该网站才能获得最佳浏览效果。当我增加缩放级别时，浏览器不提供任何滚动条，并且我的内容被剪裁。我已经尝试了几个选项，比如使用 CSS 在 body 中设置 min-height ，但这没有帮助。 (注意我只需要在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修复布局。