none
Zoom no Page Turn Silverlight. RRS feed

  • Pergunta

  • Senhores bom dia,

    estou desenvolvendo um intranet para a empresa na qual trabalho, e este intranet está sendo desenvolvido em silverlight. Vou descrever o projeto para que possam entender melhor.

    O site terá uma Página Inicial, onde ficaram os menus, e o logo da empresa.

    Nos menus eu gostaria de fazer algumas animações, mas sem muita coisa.

    E cada um desses menus quando clicados, irão mostrar cada um o seu respectivo Page Turn.

    O meu problema é o seguinte.

    A principio, não estou conseguindo fazer o zoom nesse page turn, pois os arquivos a serem mostrados, são imagens de arquivos PDF, sendo assim necessito de um zoom para que a pessoa que esteja vendo este page turn, possa ler os arquivos. Alguem sabe ow poderia me ajudar com este projeto, pois estou necessitando disso com urgência, pois minha efetivação ou desligamento da empresa depende disso.

     

    Senhores aqui se encontra uma amostra do meu projeto, está a mesma coisa, a unica diferença seria as fotos, neste projeto só preciso acrescentar o zoom e os menus, se alguém puder em ajudar com isso, ficarei muito grato.

     

    http://blogs.msdn.com/deviations/archive/2008/10/06/silverlight-2-beta-2-page-turn.aspx

    segunda-feira, 24 de novembro de 2008 13:53

Respostas

  • Erick,

     

    Segue um tutorial ensinando como adicionar zoom em sua aplicação page turn:

     

    http://blogs.msdn.com/aonishi/archive/2007/11/28/how-to-add-the-zooming-feature-for-your-silverlight-page-turn-application-with-silverlight-1-0.aspx

     

    Está disponível para download esta aplicação já com o zoom:

     

    http://blogs.msdn.com/aonishi/attachment/6574315.ashx

     

     

    Abraço,

     

    "Se sua dúvida foi respondida, favor classificar como resposta."

    terça-feira, 25 de novembro de 2008 11:03
    Moderador
  • Erick,

     

    Eu fiz um efeito de zoom com ScrollViewer em sua aplicação. Primeiro, eu adicionei algumas tags no Canvas "PageCanvas":

     

    Code Snippet
    <
    Canvas Canvas.Top="0" Canvas.Left="0" x:Name="PageCanvas" Width="850" Height="600" Margin="0" >

     

     

     

    Depois o coloquei dentro de outro canvas que usei para fazer o efeito de zoom:

     

    Code Snippet
    <
    Canvas x:Name="canvasOut" Width="850" Height="600" >

     

     

     

    Coloquei dentro de um ScrollViewer:

     

    Code Snippet
    <
    ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Auto" Height="600" Width="900" VerticalScrollBarVisibility="Auto" >

     

     

     

    E adicionei um slider:

     

    Code Snippet

    <Slider x:Name="sldZoom" Grid.Row="0" VerticalAlignment="Top" Width="300" HorizontalAlignment="Center" ValueChanged="slider_ValueChanged"></Slider>

     

     

    Por questão de alinhamentro, criei um Grid com duas linhas, na primeira coloquei o slider e na segunda o scrollviewer (onde estão os canvas).

     

    Code Snippet

    <Grid Width="900">

    <Grid.RowDefinitions>

    <RowDefinition Height="40"></RowDefinition>

    <RowDefinition Height="*"></RowDefinition>

    </Grid.RowDefinitions>

     

     

     

    A estrutura da minha aplicação ficou assim:

     

    Grid

    Linha 1: Slider

    Linha 2: ScrollViewer

    -Canvas Out

    -Page Canvas

     

     

     

    Depois alinhei as propriedades "Canvas.Top" de sua revista.

     

    Code Snippet

    <Canvas Canvas.Top="0" Canvas.Left="0" x:Name="PageCanvas" Width="850" Height="600" Margin="0" >

    <TextBlock x:Name="traceMsg" Foreground="LightGray" FontSize="9" />

    <Image x:Name="shadowBehindPageNN" Canvas.Top="10" Canvas.Left="420" Source="/assets/shadowPage.png" Opacity="0"/>

    <Image x:Name="shadowBehindPage01" Canvas.Top="10" Canvas.Left="0" Opacity="0" IsHitTestVisible="false" Source="/assets/shadowPage.png"/>

    <Canvas x:Name="evenPageCanvas" Canvas.Top="10" Canvas.Left="425" Opacity="1"/>

    <Polygon x:Name="shadowOnEvenPage" Canvas.Top="10" Canvas.Left="425" Points="420,570 420,570 420,570 420,570" Fill="Black" Opacity="0.25"/>

    <Canvas x:Name="oddPageCanvas" Canvas.Top="10" Canvas.Left="5" Opacity="1"/>

    <Canvas x:Name="mouseCaptureCanvas" Canvas.Top="10" Canvas.Left="5" Opacity="0" IsHitTestVisible="false" Background="transparent" Width="840" Height="570"/>

    </Canvas>

     

     

     

     

    E por último criei o evento ValueChanged no Slider:

     

    Code Snippet

    private void slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)

    {

    ScaleTransform st = new ScaleTransform();

    st.ScaleX = sldZoom.Value;

    st.ScaleY = sldZoom.Value;

    PageCanvas.RenderTransform = st;

    canvasOut.Height = 600 * sldZoom.Value;

    canvasOut.Width = 850 * sldZoom.Value;

    }

     

     

     

     

     

    Não esqueça de colocar no PageLoad o valor máximo e o mínimo de seu slider:

     

    Code Snippet

    public Page()

    {

    InitializeComponent();

    sldZoom.Minimum = 1;

    sldZoom.Maximum = 3;

    }

     

     

     

    Para ajudar, coloquei aquele projeto que você me passou para download:

     

    http://www.brasilverlight.com.br/PageTurn.zip

     

     

    "Se sua dúvida foi respondida, favor classificar como resposta."

     

    Abraço,

    terça-feira, 25 de novembro de 2008 18:57
    Moderador

Todas as Respostas

  • Erick,

     

    Segue um tutorial ensinando como adicionar zoom em sua aplicação page turn:

     

    http://blogs.msdn.com/aonishi/archive/2007/11/28/how-to-add-the-zooming-feature-for-your-silverlight-page-turn-application-with-silverlight-1-0.aspx

     

    Está disponível para download esta aplicação já com o zoom:

     

    http://blogs.msdn.com/aonishi/attachment/6574315.ashx

     

     

    Abraço,

     

    "Se sua dúvida foi respondida, favor classificar como resposta."

    terça-feira, 25 de novembro de 2008 11:03
    Moderador
  • Defácio, eu não sei como utilizar este projeto, pois não consigo alterar nenhuma imagem e nenhuma outra alteração.

    Você poderia me ajudar com ele, ou até mesmo me enviar aquele projeto que eu havia lhe mandado por e-mail? Se possível pode mandar no e-mail mesmo..

     

    Obrigado por toda a sua atenção.

    terça-feira, 25 de novembro de 2008 15:47
  • Erick,

     

    Eu fiz um efeito de zoom com ScrollViewer em sua aplicação. Primeiro, eu adicionei algumas tags no Canvas "PageCanvas":

     

    Code Snippet
    <
    Canvas Canvas.Top="0" Canvas.Left="0" x:Name="PageCanvas" Width="850" Height="600" Margin="0" >

     

     

     

    Depois o coloquei dentro de outro canvas que usei para fazer o efeito de zoom:

     

    Code Snippet
    <
    Canvas x:Name="canvasOut" Width="850" Height="600" >

     

     

     

    Coloquei dentro de um ScrollViewer:

     

    Code Snippet
    <
    ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Auto" Height="600" Width="900" VerticalScrollBarVisibility="Auto" >

     

     

     

    E adicionei um slider:

     

    Code Snippet

    <Slider x:Name="sldZoom" Grid.Row="0" VerticalAlignment="Top" Width="300" HorizontalAlignment="Center" ValueChanged="slider_ValueChanged"></Slider>

     

     

    Por questão de alinhamentro, criei um Grid com duas linhas, na primeira coloquei o slider e na segunda o scrollviewer (onde estão os canvas).

     

    Code Snippet

    <Grid Width="900">

    <Grid.RowDefinitions>

    <RowDefinition Height="40"></RowDefinition>

    <RowDefinition Height="*"></RowDefinition>

    </Grid.RowDefinitions>

     

     

     

    A estrutura da minha aplicação ficou assim:

     

    Grid

    Linha 1: Slider

    Linha 2: ScrollViewer

    -Canvas Out

    -Page Canvas

     

     

     

    Depois alinhei as propriedades "Canvas.Top" de sua revista.

     

    Code Snippet

    <Canvas Canvas.Top="0" Canvas.Left="0" x:Name="PageCanvas" Width="850" Height="600" Margin="0" >

    <TextBlock x:Name="traceMsg" Foreground="LightGray" FontSize="9" />

    <Image x:Name="shadowBehindPageNN" Canvas.Top="10" Canvas.Left="420" Source="/assets/shadowPage.png" Opacity="0"/>

    <Image x:Name="shadowBehindPage01" Canvas.Top="10" Canvas.Left="0" Opacity="0" IsHitTestVisible="false" Source="/assets/shadowPage.png"/>

    <Canvas x:Name="evenPageCanvas" Canvas.Top="10" Canvas.Left="425" Opacity="1"/>

    <Polygon x:Name="shadowOnEvenPage" Canvas.Top="10" Canvas.Left="425" Points="420,570 420,570 420,570 420,570" Fill="Black" Opacity="0.25"/>

    <Canvas x:Name="oddPageCanvas" Canvas.Top="10" Canvas.Left="5" Opacity="1"/>

    <Canvas x:Name="mouseCaptureCanvas" Canvas.Top="10" Canvas.Left="5" Opacity="0" IsHitTestVisible="false" Background="transparent" Width="840" Height="570"/>

    </Canvas>

     

     

     

     

    E por último criei o evento ValueChanged no Slider:

     

    Code Snippet

    private void slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)

    {

    ScaleTransform st = new ScaleTransform();

    st.ScaleX = sldZoom.Value;

    st.ScaleY = sldZoom.Value;

    PageCanvas.RenderTransform = st;

    canvasOut.Height = 600 * sldZoom.Value;

    canvasOut.Width = 850 * sldZoom.Value;

    }

     

     

     

     

     

    Não esqueça de colocar no PageLoad o valor máximo e o mínimo de seu slider:

     

    Code Snippet

    public Page()

    {

    InitializeComponent();

    sldZoom.Minimum = 1;

    sldZoom.Maximum = 3;

    }

     

     

     

    Para ajudar, coloquei aquele projeto que você me passou para download:

     

    http://www.brasilverlight.com.br/PageTurn.zip

     

     

    "Se sua dúvida foi respondida, favor classificar como resposta."

     

    Abraço,

    terça-feira, 25 de novembro de 2008 18:57
    Moderador
  • Ok Defácio, consegui entender a sua explicação, agora antes de baixar o projeto, vou tentar fazer este projeto para que eu possa aprender um pouco mais sobre essas aplicações, e outra dúvida que tenho, existem algumas que tenho sobre este mesmo projeto ainda, como por exemplo de como publica-lo aqui no meu intranet, pois eu tentei como você me passou no "Brasilverlight", mas não consegui. Gostaria de saber se essas dúvidas referentes a este projeto eu posso tirar aqui neste mesmo tópico ou se preciso postar mais um tópico.

    Obrigado por toda a sua ajuda Defacio,

     

    Abraço.

     

    quarta-feira, 26 de novembro de 2008 14:02
  • Defácio, agora eu consegui publicar como web site, mas quando eu vou abrir ele, ele não abre só mostra a tela de fundo cinza, a qual não consigo alterar a cor, e mais nada, o meu projeto pisca na tela mas não bare, e outra dúvida, como que eu cocolo menus, para abrirem outras páginas?

     

    quarta-feira, 26 de novembro de 2008 14:55
  •  

    Erick,

     

    Acredito que seja melhor você abrir estas suas dúvidas em um novo tópico. Assim quando outras pessoas realizarem busca no fórum, irão encontrar facilmente a resposta.

     

    Os menus para abrirem as páginas, você pode se basear no código utilizado no menu de navegação (aquele que possui um ícone que quando você clica ele mostra as páginas de sua revista).

     

    Quando a hostar a aplicação, acredito que seja legal você abrir um novo tópico pois esta é uma dúvida que que muitas pessoas possuem. Pode ser?

     

    "Se sua pergunta foi respondida, favor classificar como resposta."

     

    Abraço,

     

     

    quarta-feira, 26 de novembro de 2008 16:02
    Moderador
  • Tudo bem Defácio, obrigado pela ajuda. Irei abrir novos tópicos agora mesmo.

     

    quarta-feira, 26 de novembro de 2008 16:23