다른 브라우저 확대/축소 수준에서 Silverlight 응용 프로그램 작동

Question

일부 JavaScript 코드와 Canvas 컨트롤 ScaleTransform 속성을 사용하여 다른 해상도로 작업하도록 구성된 Silverlight 웹 사이트가 있습니다. 그러나 브라우저의 확대/축소가 100 % 이하로 설정된 경우에만 사이트가 가장 잘 보입니다. 확대/축소 수준을 높이면 브라우저에서 스크롤 막대를 제공하지 않고 콘텐츠가 잘립니다. CSS를 사용하여 본문에 min-height을 설정하는 것과 같은 몇 가지 옵션을 시도했지만 도움이되지 않습니다.

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

:

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

여기

이 페이지 뒤에있는 코드입니다 : 여기

내 스케일링 코드 (I은 IE의 웹 사이트를 테스트해야합니다) 마지막으로 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 레이아웃을 수정.