Заставить приложение Silverlight работать на разных уровнях масштабирования браузера - PullRequest
Новая
       27

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

1 голос
/ 27 января 2012

У меня есть веб-сайт Silverlight, который я настроил для работы с различными разрешениями, используя некоторый код JavaScript и свойство ScaleTransform элемента управления Canvas. Это хорошо работает, однако, сайт лучше всего просматривать только тогда, когда масштаб браузера установлен на 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;
       }

    }

1 Ответ

0 голосов
/ 03 августа 2012

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

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

Используйте zoom design или adaptive UI , чтобы исправить макет.

...