locked
Quais são so controles que devo utilizar para montar a página??? RRS feed

  • Pergunta

  • Prezados,

    Vamos lá. Em ASP.Net isto é mais fácil, mas estou tendo vários problemas para desenhar o site todo em silverlight. Eu tentei com o Blend 3 e confesso que gostei muito. Porém, como não sei quais são os controles que devo utilizar para a construção da página, estou perdido.

    Utilizei o retângulo como sendo a parte inicial. Quero fazer algo parecido como nesta página http://www.microsoft.com/web/gallery/install.aspx?appsxml=www.microsoft.com%2Fweb%2Fwebpi%2F2.0%2FWebProductList.xml%3Bwww.microsoft.com%2Fweb%2Fwebpi%2F2.0%2FWebProductList.xml&appid=78%3B121.

    O problema é que fica de um tamanho no Blend 3D que é o padrão do Auto e quando exibo na compilação, me aparece de outra forma, menos achatado. O meu código está assim.

    <UserControl x:Class="noponto.MainPage"
        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" d:DesignWidth="1000" d:DesignHeight="500">
      <Grid x:Name="LayoutRoot" Height="Auto" Width="Auto">
      	<Grid.Background>
      		<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
      			<GradientStop Color="#FFFFDCAB" Offset="0"/>
      			<GradientStop Color="White" Offset="1"/>
      		</LinearGradientBrush>
      	</Grid.Background>
      	<Rectangle Stroke="Black" Margin="300,31,300,29" Fill="White" StrokeThickness="0" RadiusX="10" RadiusY="10" d:LayoutOverrides="GridBox">
      		<Rectangle.Effect>
      			<DropShadowEffect BlurRadius="8" ShadowDepth="4"/>
      		</Rectangle.Effect>
      	</Rectangle>
      	<TextBlock Height="31" Margin="309,40,0,0" VerticalAlignment="Top" FontFamily="Trebuchet MS" FontSize="26.667" FontStretch="UltraExpanded" TextWrapping="Wrap" ToolTipService.ToolTip="A melhor diversidade de ítens e preços a sua disposição!" HorizontalAlignment="Left" Width="113"><Run Text="No"/><Run Text=" "/><Run Text="Ponto"/></TextBlock>
      	<TextBlock Height="31" HorizontalAlignment="Right" Margin="0,40,311,0" VerticalAlignment="Top" Width="113" FontFamily="Trebuchet MS" FontSize="26.667" FontStretch="UltraExpanded" TextWrapping="Wrap" ToolTipService.ToolTip="A melhor diversidade de ítens e preços a sua disposição!"><Run Text="No"/><Run Text=" "/><Run Text="Ponto"/></TextBlock>
            
      </Grid>
    </UserControl>
    


    Odeio ficar batendo a cabeça nas coisas.

    Queria saber tambémn que controles utilizar para fazer as separações de colunas, linhas, etc e etc.


    Artur de Souza Aragão - Consultor de TI e Segurança
    quarta-feira, 26 de agosto de 2009 04:48

Respostas

  • Bom dia Artur,

    Eu particularmente gosto mt do Blend também, o que não gosto nele é o codigo que ele gera quando cria paginas. Quando vou criar um novo projeto ou adicionar User Controls faço pelo visual studio e depois edito o layout todo no blend.

    Para criar os layouts na pagina principal por exemplo eu uso o grid, pois ele funciona como uma tabela(que voce disse que queria usar), eu divido todo o grid como eu quero(linhas e colonas) e dai dentro de cada celula eu ponho um Canvas geralmente para receber o conteudo. É bom pois dai fica facil de mexer nos conteudos dentro de cada Canvas sem interferir no layout principal.

    Também uso, quando quero fazer bordas arredondadas ou só bordas mesmo, o Border. É bom para dar uns toques diferentes no layout. Só que o Border aceita somente um elemento dentro dele, entao se quizer por mais elementos dentro do Border vc poe um Canvas dentro dele, por exemplo, e dai pode por o que quizer dentro do Canvas =)

    Ah, se voce for usar texto muito grande é bom usar o ScrollViewer, ele tem a opção de por scroll na horizontal e vertical entre outras funções que pode ajudar bastante.

    Acho que é mais ou menos isso, qualquer coisa é só mandar ai... Espero ter ajudado...

    Att,
    Fernando Marostega
    • Sugerido como Resposta Nandoviski terça-feira, 15 de setembro de 2009 17:53
    • Marcado como Resposta Daniel Ferreira terça-feira, 13 de julho de 2010 19:04
    terça-feira, 1 de setembro de 2009 11:31

Todas as Respostas

  • Puxa!!!

    Alguém pode me ajudar??? A maioria do material disposta na internet não tem o foco de contrução de sites, mas de ítens a serem adicionados em sites. Peço encarecidamente que ajudem.
    Artur de Souza Aragão - Consultor de TI e Segurança
    domingo, 30 de agosto de 2009 03:00
  • Bom dia Artur,

    Eu particularmente gosto mt do Blend também, o que não gosto nele é o codigo que ele gera quando cria paginas. Quando vou criar um novo projeto ou adicionar User Controls faço pelo visual studio e depois edito o layout todo no blend.

    Para criar os layouts na pagina principal por exemplo eu uso o grid, pois ele funciona como uma tabela(que voce disse que queria usar), eu divido todo o grid como eu quero(linhas e colonas) e dai dentro de cada celula eu ponho um Canvas geralmente para receber o conteudo. É bom pois dai fica facil de mexer nos conteudos dentro de cada Canvas sem interferir no layout principal.

    Também uso, quando quero fazer bordas arredondadas ou só bordas mesmo, o Border. É bom para dar uns toques diferentes no layout. Só que o Border aceita somente um elemento dentro dele, entao se quizer por mais elementos dentro do Border vc poe um Canvas dentro dele, por exemplo, e dai pode por o que quizer dentro do Canvas =)

    Ah, se voce for usar texto muito grande é bom usar o ScrollViewer, ele tem a opção de por scroll na horizontal e vertical entre outras funções que pode ajudar bastante.

    Acho que é mais ou menos isso, qualquer coisa é só mandar ai... Espero ter ajudado...

    Att,
    Fernando Marostega
    • Sugerido como Resposta Nandoviski terça-feira, 15 de setembro de 2009 17:53
    • Marcado como Resposta Daniel Ferreira terça-feira, 13 de julho de 2010 19:04
    terça-feira, 1 de setembro de 2009 11:31
  • Fernando,

    Obrigado. Você me ajudou muito meu amigo.

    Aproveitando o ensejo, eu consegui criar no blend o que layout do site, só não sei se estou usando os controles corretos. Agora com sau indicação vou dar uma revisada. Eu só não estou conseguindo colocar o conteúdo centralizado na página. Parece que dependendo da resolução, o retângulo é redimensionado.

    O chato é que ele não fica no centro da página.

    Dá uma olhada em meu código.

    <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" x:Class="noponto.MainPage"
        d:DesignWidth="1000" d:DesignHeight="600">
    	
    	<!-- [ Background ] -->
    	<Grid x:Name="GridLayout" Height="Auto" RenderTransformOrigin="0.5,0.5">
      	<Grid.RowDefinitions>
      		<RowDefinition Height="25"/>
    		<RowDefinition Height="500"/>
    		<RowDefinition Height="50"/>
      	</Grid.RowDefinitions>
      	<Grid.ColumnDefinitions>
      		<ColumnDefinition Width="96"/>
    		<ColumnDefinition Width="808"/>
      		<ColumnDefinition Width="96"/>
      	</Grid.ColumnDefinitions>
      	<Grid.Background>
      		<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
      			<GradientStop Color="#FFACDDEF" Offset="1"/>
      			<GradientStop Color="#FF177FA6"/>
      		</LinearGradientBrush>
      	</Grid.Background>
    	
    	<!-- [ Corpo da Página ] -->
      	<Rectangle Fill="White" Stroke="Black" StrokeThickness="0" RadiusX="10" RadiusY="10" Margin="29,6,29,70" Width="750" Grid.Column="1" Grid.Row="1">
      		<Rectangle.Effect>
      			<DropShadowEffect Color="#FF0A3B4E"/>
      		</Rectangle.Effect>
      	</Rectangle>
    	
    	<!-- [ Logo Digit One.net ] -->
      	<Image x:Name="Image" Source="images/DigitOne.net Logo_files/image0.png" Width="173" Height="86" ToolTipService.ToolTip="Tecnologia em favor da vida!" HorizontalAlignment="Left" Margin="33,22,0,0" VerticalAlignment="Top" d:LayoutOverrides="HorizontalAlignment" Grid.Row="1" Grid.Column="1">
      		<Image.RenderTransform>
      			<TransformGroup>
      				<MatrixTransform Matrix="1.33333,0,0,1.33333,7.34679e-006,-2.21111e-005"/>
      			</TransformGroup>
      		</Image.RenderTransform>
      	</Image>
    </Grid>
    </UserControl>
    

    Ahhhhhh!!! Estou procurando um bom livro de silverlight em português. Você pode me indicar algum? Ahhhh!! Por favor, sobre a versão 3.0.
    Artur de Souza Aragão - Consultor de TI e Segurança
    quarta-feira, 2 de setembro de 2009 01:43
  • e ae Artur,

    O grid é isso ai mesmo, criar as linhas e colunas ali em cima e depois posicionar os controles dentro...

    Eu só nao entendi o Rectangle como corpo da pagina! vc botou ele pq queria bordas arredondas e um backgroud personalizado? se for isso sugiro usar um Border ao invés de Rectangle, vc pode fazer varias coisas nele e é mais usual...
    Como eu dinha dito acima vc pode usar um Border e um canvas, por exemplo:

    <border //todas as propriedades aqui de BG, borda, tamanho e talz >
        <Canvas x:Name="corpo" backgroun="transparence">
            //Aqui vc poe os conteudos do corpo
        </Canvas>
    </border>

    quanto a centraliza na pagina ja tinha me acontecido isso tambem, nao sei se eh o mesmo problema, mas eu tinha uma aplicação 800x600 e queria q ela ficasse centralizada na pagina, e nao no canto... para fazer isso eu nao editei no SL, nem sei se da, o que vc tenq fazer eh centralizar seu arquivo .xap lah no codigo da sua pagina .aspx, pois eh lah q sua aplicasao silverlight é jogada na tela... acho que essa seja sua solução...

    da versao 3 do SL eu nao sei indicar nenhum livro ainda... malz

    espero ter ajudado...

    Att,
    Fernando Marostega
    quarta-feira, 2 de setembro de 2009 14:33
  • Puxa,


    Valeu pelas dicas.

    Mas, ainda não consegui o efeito que preciso.

    Queria que meu site ficasse assim que nem neste link http://expression.microsoft.com/pt-br/default(en-us).aspx, mas todo em silverlight.

    Estou começando a ver que não é interessante fazer um site todo em silverlight. O meu background não fica todo em azul. Ele fica azul até o limite do grid horizontalmente, aí ficam duas habas em branco, já que não configurei o background com outra cor. COmo faço para corrigir isto.

    Não encontrei as mesmas propriedades do retangule no border para arrendondar as pontas. Outra coisa que aconteceu, é que o controle ficou transparente. estranho.

    Artur de Souza Aragão - Consultor de TI e Segurança
    segunda-feira, 14 de setembro de 2009 06:02
  • Bom dia Artur,

    quanto ao background que voce falou, acho que o problema pode ser que voce tenq definir o backgroud da pagina .aspx que contenha o teu .xap... por exemplo, vc criou sua pagina em silverlight em 800x600, quando alguem abrir ela em uma resolução maior ela vai ocupar exatamente 800x600 e o resto que sobra vai mostra o que tem na sua pagina .aspx, que no caso deve ser uma pagina em branco. Entao tenta definir o backgroud da sua Default.aspx

    no Border, para arredondar as pontas é só voce setar a propriedade CornerRadius... segue um exemplo ai de como eu faço qando quero conteudos com bordas arredondadas:

    <Border BorderThickness="2" BorderBrush="Red" Width="200" Height="200" CornerRadius="20" >
            <Canvas x:Name="cnvConteudo" Width="180" Height="180" Background="Transparent">
                    <!-- Conteudo da pagina -->
            </Canvas>
    </Border>


    qualquer coisa é só falar... e nao se preocupa, no começo vai ter algumas dificuldades para fazer tudo em silverlight, mas depois acustuma =)

    Att,
    Fernando Marostega
    segunda-feira, 14 de setembro de 2009 11:34
  • Bom dia Artur,

    quanto ao background que voce falou, acho que o problema pode ser que voce tenq definir o backgroud da pagina .aspx que contenha o teu .xap... por exemplo, vc criou sua pagina em silverlight em 800x600, quando alguem abrir ela em uma resolução maior ela vai ocupar exatamente 800x600 e o resto que sobra vai mostra o que tem na sua pagina .aspx, que no caso deve ser uma pagina em branco. Entao tenta definir o backgroud da sua Default.aspx

    no Border, para arredondar as pontas é só voce setar a propriedade CornerRadius... segue um exemplo ai de como eu faço qando quero conteudos com bordas arredondadas:

    <Border BorderThickness="2" BorderBrush="Red" Width="200" Height="200" CornerRadius="20" >
    
            <Canvas x:Name="cnvConteudo" Width="180" Height="180" Background="Transparent">
    
                    <!-- Conteudo da pagina -->
    
            </Canvas>
    
    </Border>
    
    


    qualquer coisa é só falar... e nao se preocupa, no começo vai ter algumas dificuldades para fazer tudo em silverlight, mas depois acustuma =)

    Att,
    Fernando Marostega

    Fernando,

    Obrigado mesmo pela ajuda que está me dando. Vou testar os controles lá em casa e de lá posto os resultados.

    Queria saber se é melhor eu fazer um site todo em Silverlight ou se apenas alguns controles, como uma visualização mais cheia de efeitos eum uma parte do site, menus entre outras coisas.

    Eu tenho dúvidas, pois acho que isto no final acarretará a performance final do site. Eu não desejo torná-lo pesado, pois por incrível que pareça, ainda há muitas pessoas que acessam nos módicos 56K. Eu era um usuário destes até 8 meses atrás, durante quase 3 anos. A localidade onde eu morava não permitia o acesso através de banda larga, devido a central ser analógica. Então vocês podem imaginar o meu sofrimento neste tempo.

    Justamente estou me preocupando com esta parcela de usuários que possam estar passando por um problema similar, ou mesmo de estarem impossibilitados a possuirem um acesso mais rápido devido a outros fatores.

    Outra dúvida, é que para reaproveitar um User Control no ASP.Net, é algo superfácil. E como funciona isto no silverlight?

    Mais uma vez obrigado pela sua ajuda e paciência,
    Artur de Souza Aragão - Consultor de TI e Segurança
    segunda-feira, 14 de setembro de 2009 20:08
  • Boa tarde Artur,

    Na minha opinião acho melhor fazer tudo em silverlight... mas depende tambem de quanta interação você vai quere entre os controles... se for tudo separado e nao tiver nenhum interação entre os controles e animação de pagina, acho que é indiferente dai...
    Porem eu nao sei t dizer se voce vai poder interagir entre os controles se eles estiverem separados... acho que nao deve ter como, mas nao tenho certeza...

    Quanto a internet sei como é, jah morei no interior tb xD Acho que o silverlight eh um poko mais pessado para carregar no inicio, mas depois nao sei se muda muito... Porque depois que ele esta rodando o acesso a banco e coisas do genero eh bem rapido, nao diferenciando muito do asp.net...

    Acho o reaproveitamento de codigo no SL bem simples tambem... por exemplo, vc cria em um projeto um UC que é um menu... se voce quizer usar ele em outro projeto, eh soh copiar ele, ou o xaml dele, pro outro lugar e mudar o code behind... é tranquilo =)

    E sem estresse... estamos ai pra ajuda e tenta divulgar a tecnologia hehhe...


    Att,
    Fernando Marostega
    terça-feira, 15 de setembro de 2009 18:07
  • Fernando,

    Onde posso conseguir templates de páginas simples que contenham exemplos parecidos com os desta página  http://expression.microsoft.com/pt-br/default(en-us).aspx?

    Artur de Souza Aragão - Consultor de TI e Segurança
    quarta-feira, 16 de setembro de 2009 03:57
  • Artur,

    Eu nao sei nenhum site com templates para silverlight... nunca procurei nada do genero...

    Quem sabe dando uma procurada no google voce encontra algo... se encontrar posta ai pro pessoal...


    Att,
    Fernando Marostega
    quarta-feira, 16 de setembro de 2009 11:36