none
How to make it resizes to fit with browser screen?

    Question

  • I am developing an web application on Silverlight framework, I want my webpage to fulfill browser’s screen each time I resize the browser or switch to FullScreen mode.
    For example:
    - I am using Internet Explorer 7.0
    - By default, my browser’s not in full screen mode, my webpage’s content is fine and fit the design. But when I press F11 key, only the browser expands but the content still stay the same. How to make it resizes to fit with browser screen?

    Link download demo

    Thanks!

    Friday, October 24, 2008 12:55 AM

Answers

  • Try to use this code below.

    In your Constructor you need to add this event below.

    Application.Current.Host.Content.Resized += new EventHandler(Content_Resized);

     Now the event code:

    void Content_Resized(object sender, EventArgs e)

    {

    //Here you need to resize your control (Grid, Canvas, etc...)

    //Example:

    gridName.Width = Application.Current.Host.Content.ActualWidth;

    gridName.Height = Application.Current.Host.Content.ActualHeight;

    }

    Try and tell me if works.

    Friday, October 24, 2008 2:41 PM

All replies

  •  App.Current.Host.Content.FullScreenChanged += new EventHandler(Content_FullScreenChanged);

     void Content_FullScreenChanged(object sender, EventArgs e)
            {
                if (App.Current.Host.Content.IsFullScreen)
                {
                   // Increse your grid or canvas size to fit the total screen

                  // use App.Current.Host.Content.ActualHeigh and   

                //App.Current.Host.Content.ActualWidth to get browser height and width
                }
                else
                {
                    // back to normal size
                }
              
            }
     

    This worked with beta 2. Please check if it is ok wityh latest version.

    Friday, October 24, 2008 1:07 AM
  • I've checked and don't have any effects occur
    Please demo it help me!
    Friday, October 24, 2008 5:06 AM
  • Try to use this code below.

    In your Constructor you need to add this event below.

    Application.Current.Host.Content.Resized += new EventHandler(Content_Resized);

     Now the event code:

    void Content_Resized(object sender, EventArgs e)

    {

    //Here you need to resize your control (Grid, Canvas, etc...)

    //Example:

    gridName.Width = Application.Current.Host.Content.ActualWidth;

    gridName.Height = Application.Current.Host.Content.ActualHeight;

    }

    Try and tell me if works.

    Friday, October 24, 2008 2:41 PM
  • Hi

    I have a problem with resize a canvas control, in mi CS  I Have:

    private void UserControl_Loaded(object sender, RoutedEventArgs e)

    {

        Application.Current.Host.Content.Resized += new EventHandler(Content_Resized);

    }

    void Content_Resized(object sender, EventArgs e)

    {

        CanvasMenu.Height = Application.Current.Host.Content.ActualHeight;

    }

     This not works, but if I set the value of the Height property putting direcly the value:

    void Content_Resized(object sender, EventArgs e)

    {

        CanvasMenu.Height = 700;

    }

    Works OK.

     What is the problem?

    If run in the debug mode, the value of the  CanvasMenu.Height and  Application.Current.Host.Content.ActualHeight are corrects.

    Thanks.

    Alejandro

     

    Wednesday, February 04, 2009 4:39 AM
  • First: Check MaxHeight property of CanvasMenu, after check height of canvasmenu on immediate window and check after get value from event.
    Monday, February 09, 2009 11:28 AM
  • I have been studing this subject. Look at this links:

    http://msdn.microsoft.com/en-us/library/cc645025(VS.95).aspx

    http://msdn.microsoft.com/en-us/library/cc903936(VS.95).aspx

    http://msdn.microsoft.com/en-us/library/cc896566(VS.95).aspx

    What you have to do is: In the XAML take out the hight and width staff. in the HTML make te size 100% for width and hight.

    You have to design having in mind that you are going to resize, so your componentes should be created accordingly. If you want them to be resize, then the width and hight should be automatic.

    I hope this unswer your question.

     Regards, lina

    Monday, February 09, 2009 10:49 PM
  • Thanks at all, but still not work

    I tried to set the Height and Width propertis to "Auto", the XAML is:

    <UserControl x:Class="ControlPresentismo.Page"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Width="Auto" Height="Auto" Loaded="UserControl_Loaded">

    <Canvas x:Name="LayoutRoot" Background="White" Width="Auto" Height="Auto">

    <Canvas x:Name="CanvasMenu" Canvas.Left="0" Canvas.Top="0" Width="100" Height="Auto">

    <Canvas.Background>

    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

    <GradientStop Color="#FF0C1030" Offset="0.991"/>

    <GradientStop Color="#FF6369DF" Offset="0"/>

    </LinearGradientBrush>

    </Canvas.Background>

    <TextBlock x:Name="txbUsuario" Canvas.Left="1" Canvas.Top="10" Text="Usuario"></TextBlock>

    <TextBlock x:Name="txbCliente" Canvas.Left="1" Canvas.Top="30" Text="Cliente"></TextBlock>

    <Button x:Name="btnClientes" Canvas.Left="10" Canvas.Top="100" Width="80" Height="30" Content="Clientes" Click="btnClientes_Click"></Button>

    <Button x:Name="btnEquipos" Canvas.Left="10" Canvas.Top="140" Width="80" Height="30" Content="Equipos" Click="btnEquipos_Click"></Button>

    </Canvas>

    </Canvas>

    </UserControl>

    After  the Content_Resized, if I show the following  MessageBox: MessageBox.Show(CanvasMenu.Height.ToString()); I see than the CanvasMenu's Height is correct, but the control is no resized.

    Remember that if I ser the property with a Fixed value for example: CanvasMenu.Height = 900; CanvasMenu  is resized correctly.

    Regards

    Alejandro

    Tuesday, February 10, 2009 5:51 AM
  • Hi,

    Just add a Grid as parent control of the canvas and try to resize the grid when you resize the browser...

    I have used Grid in my apps and when ever the browser size changes the user control size also changing.

    so use this.....

    <Grid x:Name="LayoutRoot" Background="White">
    <canvas......

    </Grid>

     

    ***code behind....

    resize only Grid not canvas

    LayoutRoot.Width = App.Current.Host.Content.ActualWidth;

    LayoutRoot.Height = App.Current.Host.Content.ActualHeight;

    Tuesday, February 10, 2009 7:08 AM
  • After you set CanvasMenu.Height the value change ? if change you resized canvas ... but canvas <> grid ... all controls in canvas stay floating... in grid all stay fixed ...

    Tuesday, February 10, 2009 7:15 AM
  • Delete this part of your xaml: Width="Auto" Height="Auto"

    and see if it works

    Your buttons won't resize because they have a fixed width and height

     This:

    <Canvas x:Name="CanvasMenu" Canvas.Left="0" Canvas.Top="0" Width="100" Height="Auto">

    will resize just for the height becasue the width is fixed.

    Tuesday, February 10, 2009 3:15 PM
  • Thanks at all for your help.

    With the Grid works ok.

    Regards.

    Alejandro.

     

    Thursday, February 12, 2009 4:33 AM