none
Como faer uma tela flexivel? RRS feed

  • Pergunta

  • Oi! Pessoal!

    Eu tenho um pagina web em silverLight eu travei um tamanho para a Tela do meu page, o problema é que quando fui apresentar a minha pagina a pessoa tinha uma tela widescreen 22º polegadas e eu contava com apenas 14º, por ai vcs já viram a vergonha que passei quando minha page ficou do pequinininha diante deste monstro.

    Bem! Espero que vcs possam me ajudar a deixar a tela de minha web flexivel, pois porcurei na net e não encontrei nada talvez eu possa está procurando errado, enfim, eu agradeço a todos que puderem me ajudar de alguma forma.

    quinta-feira, 25 de março de 2010 12:42

Respostas

  • Existe um jeito bem simples de resolver isto, mas complica um pouco se você quiser desenvolver no Expression Blend. Vai no código xaml e no cabeçalho, tem as opções Width e Height. Simplesmente apague elas. No desenvolvimento, a tela vai se ajustar aos seus componentes e se tiver vazia só vai ficar um ponto, mas quando você for abrir num, browser, ela vai se ajustar ao tamanho do browser. É importante que o contairner principal que irá conter os controles da página também não tenha tamanho fixo.


    Samuel Fabel
    quinta-feira, 25 de março de 2010 12:53
  • Eu fiz essa tela de silverlight estudando. Então não está muito legal, mas dá pra ter uma idéia. Dá uma olhada:

    <UserControl
     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"
     mc:Ignorable="d" xmlns:controlsToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
     xmlns:layoutToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Layout.Toolkit" xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
     xmlns:local="clr-namespace:Application"
     x:Class="Application.MainPage" Loaded="UserControl_Loaded">

     <Grid x:Name="LayoutRoot" Background="Black">  
      <Image HorizontalAlignment="Right" Source="bg/bg_1.jpg" Stretch="Fill" Margin="0,0,0,0"/>
      <Grid>
       <Grid.RowDefinitions>
        <RowDefinition Height="86"/>
        <RowDefinition/>
        <RowDefinition Height="24"/>
       </Grid.RowDefinitions>
       <StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
        <Grid>
         <Rectangle Height="83">
          <Rectangle.Fill>
           <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FF333333" Offset="1"/>
            <GradientStop Color="#FF666666"/>
           </LinearGradientBrush>
          </Rectangle.Fill>
         </Rectangle>
         <TextBlock HorizontalAlignment="Left" Margin="28,8,0,0" VerticalAlignment="Center" Text="Aplicação" TextWrapping="Wrap" Foreground="White" Height="44" FontSize="35"/>
        </Grid>
        <Rectangle Height="1" Fill="#FF000000"/>
        <Rectangle Height="1" Fill="#FF303030"/>   
       </StackPanel>
       <Grid Grid.Row="1"/>
       <StackPanel VerticalAlignment="Bottom" Height="24" Grid.Row="2">
        <Rectangle Height="1" Fill="#FF484848"/>
        <Grid>
        </Grid>
       </StackPanel>
       <ScrollViewer x:Name="scrollScrollViewer"  Grid.Row="1" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
        <ScrollViewer.BorderBrush>
         <SolidColorBrush/>
        </ScrollViewer.BorderBrush>
        <StackPanel x:Name="LayoutRootStackPanel" Orientation="Vertical"  >
         <local:NewsRotator x:Name="newsNewsRotator" Width="600" HorizontalAlignment="Center"  VerticalAlignment="Top" Height="322" Margin="0,10,0,0"/>
        </StackPanel>
       </ScrollViewer>
       <local:MenuUserControl HorizontalAlignment="Left" Grid.Row="1" d:LayoutOverrides="Width"/>   
      </Grid>
     </Grid>
    </UserControl>


    Samuel Fabel
    quinta-feira, 25 de março de 2010 15:04

Todas as Respostas

  • Existe um jeito bem simples de resolver isto, mas complica um pouco se você quiser desenvolver no Expression Blend. Vai no código xaml e no cabeçalho, tem as opções Width e Height. Simplesmente apague elas. No desenvolvimento, a tela vai se ajustar aos seus componentes e se tiver vazia só vai ficar um ponto, mas quando você for abrir num, browser, ela vai se ajustar ao tamanho do browser. É importante que o contairner principal que irá conter os controles da página também não tenha tamanho fixo.


    Samuel Fabel
    quinta-feira, 25 de março de 2010 12:53
  • Bom, Samuel irei testar, obrigado!
    quinta-feira, 25 de março de 2010 13:00
  • O problema é que estou usando um ScrollViewer para habilitar e desabilitar a tela quando o usuario faz login, não sei se isto influencia mas ainda não consegui fazer funcionar.

    quinta-feira, 25 de março de 2010 13:36
  • Nesse caso, utiliza ScrollViewer, vai ser meio complicado utilizar se você estiver trabalhando com Grid, Ele funciona legal com o StackPanel que redimenciona quando não colocar o Width e Height. Aí no StackPanel, você pode colocar um Grid, se julgar mais fácil de trabalhar.


    Samuel Fabel
    quinta-feira, 25 de março de 2010 13:59
  • Eu fiz essa tela de silverlight estudando. Então não está muito legal, mas dá pra ter uma idéia. Dá uma olhada:

    <UserControl
     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"
     mc:Ignorable="d" xmlns:controlsToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
     xmlns:layoutToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Layout.Toolkit" xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
     xmlns:local="clr-namespace:Application"
     x:Class="Application.MainPage" Loaded="UserControl_Loaded">

     <Grid x:Name="LayoutRoot" Background="Black">  
      <Image HorizontalAlignment="Right" Source="bg/bg_1.jpg" Stretch="Fill" Margin="0,0,0,0"/>
      <Grid>
       <Grid.RowDefinitions>
        <RowDefinition Height="86"/>
        <RowDefinition/>
        <RowDefinition Height="24"/>
       </Grid.RowDefinitions>
       <StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
        <Grid>
         <Rectangle Height="83">
          <Rectangle.Fill>
           <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FF333333" Offset="1"/>
            <GradientStop Color="#FF666666"/>
           </LinearGradientBrush>
          </Rectangle.Fill>
         </Rectangle>
         <TextBlock HorizontalAlignment="Left" Margin="28,8,0,0" VerticalAlignment="Center" Text="Aplicação" TextWrapping="Wrap" Foreground="White" Height="44" FontSize="35"/>
        </Grid>
        <Rectangle Height="1" Fill="#FF000000"/>
        <Rectangle Height="1" Fill="#FF303030"/>   
       </StackPanel>
       <Grid Grid.Row="1"/>
       <StackPanel VerticalAlignment="Bottom" Height="24" Grid.Row="2">
        <Rectangle Height="1" Fill="#FF484848"/>
        <Grid>
        </Grid>
       </StackPanel>
       <ScrollViewer x:Name="scrollScrollViewer"  Grid.Row="1" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
        <ScrollViewer.BorderBrush>
         <SolidColorBrush/>
        </ScrollViewer.BorderBrush>
        <StackPanel x:Name="LayoutRootStackPanel" Orientation="Vertical"  >
         <local:NewsRotator x:Name="newsNewsRotator" Width="600" HorizontalAlignment="Center"  VerticalAlignment="Top" Height="322" Margin="0,10,0,0"/>
        </StackPanel>
       </ScrollViewer>
       <local:MenuUserControl HorizontalAlignment="Left" Grid.Row="1" d:LayoutOverrides="Width"/>   
      </Grid>
     </Grid>
    </UserControl>


    Samuel Fabel
    quinta-feira, 25 de março de 2010 15:04