locked
Changing position to a canvas object when scrolling ?

    Question

  • Hi , 

    I'm building a Metro UI c# app.

    I have the below in my XAML

    <ScrollViewer HorizontalScrollMode="Enabled"    HorizontalScrollBarVisibility="Visible" VerticalScrollMode="Enabled" VerticalScrollBarVisibility="Visible">

                                  
                                    <Image Name="Target"   Tapped="Image_Tapped"/>

                                </ScrollViewer>
                                <Canvas  x:Name="MyCanvas" >
                                  
                                </Canvas>

    I'm getting from a webservice an Image , I can populate the image in my "target" object and I want to draw a button over my image so when the user clicks the button the system will display a message.

    So , to dynamically create the button I did the below which is completely fine and IT IS WORKING so let's not focus there.

     
                            Windows.Foundation.Point p;


                            p.X = x;
                            p.Y = y;

                            rand.NextBytes(rgb);

                            Color c = Color.FromArgb(0xFF, rgb[0], rgb[1], rgb[2]);
                            Button MyRect1 = new Button { Width = radius * 2, Height = radius * 2 };
                            MyRect1.BorderThickness = new Thickness(2);
                            MyRect1.Background = new SolidColorBrush(Colors.Red);
                            Canvas.SetLeft(MyRect1, p.X + 10 - radius);
                            Canvas.SetTop(MyRect1, p.Y + 10 - radius);
                            MyCanvas.Children.Add(MyRect1);
                            MyRect1.Click += MyRect2_Click;

    My problem starts when the Image is large enough and the users starts the scrolling. Canvas is not following the Image . It stays there at the x,y coordinates that it was first created

    How do I make canvas ,buttons ? to move accordingly with the Image(and not statying pinned) when the user scrolls down or up ?

    Any suggestions or ideas ?

    Appreciate any help you could give me.

    thank you

    Tuesday, June 3, 2014 12:53 PM

Answers

  • You need to include the Canvas inside the ScrollViewer. Since the Canvas is a container it can hold the Image as well as the buttons:

    <ScrollViewer>
       <Canvas>
          <Image />
          <Button />
          <Button />
          <Button />
       </Canvas>
    </ScrollViewer>
    • Marked as answer by zakkar Wednesday, June 4, 2014 11:31 AM
    Wednesday, June 4, 2014 7:36 AM
    Owner

All replies

  • Put the buttons inside the ScrollViewer if you want them to scroll.

    I'd probably set up a Grid in the ScrollViewer to host the Image and Button.

    --Rob

    Tuesday, June 3, 2014 2:24 PM
    Owner
  • Hi Rob ,

    When I do this

     <Grid Grid.Row="0">
                                <ScrollViewer HorizontalScrollMode="Enabled"    HorizontalScrollBarVisibility="Visible" VerticalScrollMode="Enabled" VerticalScrollBarVisibility="Visible">

                              
                                    <Image Name="Target"   Tapped="Image_Tapped"/>

                              
                                <Canvas  x:Name="MyCanvas" >
                                    
                                </Canvas>
                                </ScrollViewer>
                            </Grid>

    I get "Content can only be set once".

    Let me explain you what I'm trying to accomplish. I will give you a visual.

    I get from a web service an image with some hotspots. And I want to paint these hotspots on my image and give the user access to tap

    Take a look at the below screenshot

    As you can see I have already got from the webservice the image I have drew my hotspots and from my first post am I able to press the red buttons(because they are buttons) and give information to the user. But this is all be done dynamically. And to create all these buttons I used a canvas .

    My problem starts when I start to scroll down. Canvas remains as it is which is something logical and the image scrolls down. How can I move them both ???

    Ideas ?

    thank you

    Wednesday, June 4, 2014 6:33 AM
  • You need to include the Canvas inside the ScrollViewer. Since the Canvas is a container it can hold the Image as well as the buttons:

    <ScrollViewer>
       <Canvas>
          <Image />
          <Button />
          <Button />
          <Button />
       </Canvas>
    </ScrollViewer>
    • Marked as answer by zakkar Wednesday, June 4, 2014 11:31 AM
    Wednesday, June 4, 2014 7:36 AM
    Owner
  • Hi Rob ,

    I will give it a try and revert.

    thank you

    Wednesday, June 4, 2014 9:30 AM
  • Hi Rob ,

    this is what I did according to your post

                                

     <ScrollViewer HorizontalScrollMode="Enabled"    HorizontalScrollBarVisibility="Visible" VerticalScrollMode="Enabled" VerticalScrollBarVisibility="Visible">
                                    <Canvas  x:Name="MyCanvas" >
                                        <Image Name="Target"   Tapped="Image_Tapped"/>
                                    </Canvas>

                                </ScrollViewer>

    and it worked. Of course the rest of my buttons are created dynamically and haven't included them in the XAML.

    I'm OK now Rob. thank you for your suggestion.

    Wednesday, June 4, 2014 10:43 AM