locked
problem while runing in the browser RRS feed

  • Question

  •  Hello.

    I'm traying to make a simple web page where the grid must be suitable to the browser size and without loosing the proportions.

    This is my page.xaml:

    <UserControl
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="testscreen2.Page"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
        Width="1680" Height="933"
        >

        <Grid x:Name="LayoutRoot" Background="White">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RenderTransform>
                <ScaleTransform x:Name="CanvasScale" ScaleX="1" ScaleY="1"></ScaleTransform>
            </Grid.RenderTransform>

            <Image Grid.Column="0" Grid.Row="0" Source="Butterfly.jpg" Stretch="Fill" Height="1260" HorizontalAlignment="Left" VerticalAlignment="Top" Width="1680" d:LayoutOverrides="GridBox" Margin="0,-163.25,0,0" RenderTransformOrigin="0.5,0.5">
                <Image.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform AngleX="0"/>
                        <RotateTransform/>
                        <TranslateTransform X="0"/>
                    </TransformGroup>
                </Image.RenderTransform>
            </Image>
           
        </Grid>
    </UserControl>

     

    This is my page.xaml.cs:

     

    using System;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Ink;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;

    namespace testscreen2
    {
        public partial class Page : UserControl
        {
            private int _startingWidth = 1680;

            private int _startingHeight = 933;
            public Page()
            {
                // Requis pour initialiser les variables
                InitializeComponent();
                App.Current.Host.Content.Resized += new EventHandler(Content_Resized);
            }
            void Content_Resized(object sender, EventArgs e)
            {

                double height = App.Current.Host.Content.ActualHeight;

                double width = App.Current.Host.Content.ActualWidth;



                CanvasScale.ScaleX = height / _startingHeight;


                CanvasScale.ScaleY = height / _startingHeight;

            }
        }
    }

     

    So, I tried to make a procedure where we can make a scale with keeping proportions.

    But the problem is while runing the grid is always keeping the right side. I put Horizontalalignement= Center but it's always keeping the right size while runing.

    It's appearing like that:

    http://docs.google.com/View?id=dfcd2x2z_25pkg8bhgx

     

    I don't know how to solve this problem. Could someone please help me?

    Monday, June 22, 2009 9:59 AM

Answers

  • Hi developper2009,

    Check the alignment of Silverlight plugin in the aspx page, in which your xap is loading. see this screen shot to know which file to modify.

     

    Tuesday, June 23, 2009 1:35 AM
  • Ok, now in same file you will see below line. The height & width which is 100% here; should be replaced with height & width of UserControl (root control of xaml).

    <asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/testscreen4.xap" MinimumVersion="2.0.31005.0" Width="100%" Height="100%" />

    Let me know if this doesn't work. Also, send me screen shot of how it looks in browser.

    Wednesday, June 24, 2009 5:13 AM
  • Hi, developper2009

    I post my code at http://silverlight.net/forums/p/103215/237186.aspx#237186

    for short, set control's margin to center the grid. please have a try.

    Friday, June 26, 2009 2:23 AM
  • You could modify plugin's width/height by using Html Bridge, check this post

    http://silverlight.net/forums/p/89459/207847.aspx#207847

    Thursday, July 2, 2009 10:15 PM
  • hi,

    you could use code both in aspx page and html page

    aspx page setting

    <body>
        <form id="form1" runat="server" style="height: 100%;">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div style=" width:400px; height:300px;">
            <asp:Silverlight
                Width="100%" Height="100%" ID="Silverlight1" runat="server" Source="~/ClientBin/SL3_test1.xap"
                MinimumVersion="3.0.40307.0"/>
        </div>
        </form>
    </body>

    html page setting

    <body>
        <div id="silverlightControlHost" style="width: 400px; height: 300px">
            <object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
                width="100%" height="100%">
                <param name="source" value="ClientBin/SL3_test1.xap" />
                <param name="minRuntimeVersion" value="2.0"/>
            </object>
            <iframe style='visibility: hidden; height: 0; width: 0; border: 0px'></iframe>
    </body>

    Tuesday, July 7, 2009 10:18 PM

All replies

  • Hi developper2009,

    Check the alignment of Silverlight plugin in the aspx page, in which your xap is loading. see this screen shot to know which file to modify.

     

    Tuesday, June 23, 2009 1:35 AM
  •  Thank you for your reply.

    But when I tried to do it I couldn't find "<asp:Silverlight " I mean that after writing that an error appears.

    Could you help me with that?

    Tuesday, June 23, 2009 9:22 AM
  • Sure, check if you are editing correct file. OR can you give me a view of what you see in aspx page by copy pasting complete code here?

    Wednesday, June 24, 2009 12:29 AM
  •  Yes, I was in the wrong page. But now I found it and modify it and I didn't get centered Grid.

    Could you help? This is the code that I have actually:

    <%@ Page Language="C#" AutoEventWireup="true" %>

    <%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
        TagPrefix="asp" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>testscreen4</title>
        <style type="text/css">
         html, body
         {
             height: 100%;
             overflow:auto;
         }
         body
         {
             padding: 0;
             margin: 0;
         }  
        </style>
    </head>
    <body>
        <form id="form1" runat="server" style="height:100%;">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <div  style="height:100%; text-align:center;">
                <asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/testscreen4.xap" MinimumVersion="2.0.31005.0" Width="100%" Height="100%" />
            </div>
        </form>
    </body>
    </html>

     

    Wednesday, June 24, 2009 4:39 AM
  • Ok, now in same file you will see below line. The height & width which is 100% here; should be replaced with height & width of UserControl (root control of xaml).

    <asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/testscreen4.xap" MinimumVersion="2.0.31005.0" Width="100%" Height="100%" />

    Let me know if this doesn't work. Also, send me screen shot of how it looks in browser.

    Wednesday, June 24, 2009 5:13 AM
  •  I've replaced it but it looks the same.

    This is the link:

    http://docs.google.com/View?id=dfcd2x2z_30f96tkjwx

    thank you

    Wednesday, June 24, 2009 5:34 AM
  • Can u send me your project in zip, I will have a look at it.

    Wednesday, June 24, 2009 5:55 AM
  • Hi, developper2009

    I post my code at http://silverlight.net/forums/p/103215/237186.aspx#237186

    for short, set control's margin to center the grid. please have a try.

    Friday, June 26, 2009 2:23 AM
  •  Hi Mog.

    I tried your code. It keeps the grid in the middle but it doesn't keep proportions.

     Actually I modified in the aspx file and I've got the grid in the middle and it's keeping proportion but it doesn't fit the browser.

    This is the code :

    <head runat="server">
        <title>NewTest5</title>
    <style type="text/css">
         html, body
         {
             height: 100%;
             overflow:auto;
             background: black;
             text-align: center;
         }
        
         body
         {
             padding: 0;
             margin: 0;
         } 
        </style>
    </head>
    <body style="height:100%;margin:0;">
        <form id="form1" runat="server" style="height:100%;">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <div  style="height:100%; text-align:center; background:black; background-color:Black;">
                <asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/NewTest5.xap" MinimumVersion="2.0.31005.0" Width="1278" Height="616"/>
            </div>
        </form>
    </body>
    </html>

     

    Here I'm putting fixed width and height but they must be:

    ActualHeigh/Starting height

     

    So is it possible to replace the width and height with other values.

    I would like to use this procedure for that:

    void Content_Resized(object sender, EventArgs e)
            {

                double height = App.Current.Host.Content.ActualHeight;

                double width = App.Current.Host.Content.ActualWidth;


                CanvasScale.ScaleX = height / _startingHeight;

                CanvasScale.ScaleY = height / _startingHeight;

            }

     

    Could someone tell me how it could be possible with that?

    Thank you

     

     


    Thursday, July 2, 2009 9:12 AM
  • You could modify plugin's width/height by using Html Bridge, check this post

    http://silverlight.net/forums/p/89459/207847.aspx#207847

    Thursday, July 2, 2009 10:15 PM
  •  Hello Mog. Thank you so much for your reply. I think that it's exactly what I need. But I didn't understand how to use this code because actually I'm modifying in the aspx page and I as I understood I must modify in html Page.

    Could you please explain more how to use this code.

    Tuesday, July 7, 2009 8:00 AM
  • hi,

    you could use code both in aspx page and html page

    aspx page setting

    <body>
        <form id="form1" runat="server" style="height: 100%;">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div style=" width:400px; height:300px;">
            <asp:Silverlight
                Width="100%" Height="100%" ID="Silverlight1" runat="server" Source="~/ClientBin/SL3_test1.xap"
                MinimumVersion="3.0.40307.0"/>
        </div>
        </form>
    </body>

    html page setting

    <body>
        <div id="silverlightControlHost" style="width: 400px; height: 300px">
            <object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
                width="100%" height="100%">
                <param name="source" value="ClientBin/SL3_test1.xap" />
                <param name="minRuntimeVersion" value="2.0"/>
            </object>
            <iframe style='visibility: hidden; height: 0; width: 0; border: 0px'></iframe>
    </body>

    Tuesday, July 7, 2009 10:18 PM
  •  Hi.

    Thank you for your support.

    It helped me to solve the problem :)

    Monday, July 13, 2009 5:17 AM