Google Image like application RRS feed

  • Question

  • Hi ,

    I am new to SL. I am trying to make Google Image like Application.
    Where i have to plot some points in a 2D Image.
    My Image is just a single JPG file.

    I have a Canvas control
    I have a set the Canvas Background as a 2D map ( a JPG Image)
    I am trying to draw some rectangles as a child of Canvas to display some 2D Points (x , Y cordinates) pulled from Database.

    No i am trying to give a Zoom feature to it.
    I found a code that helps me Zoom.
    It works fine.

    But i find the Image while Zoming get cut.
    After Zooming by 0.1 Scale
    I loose the Complete Picture.
    All other Canvas objects (Rectangles)  i find retains the scale value.
    But the Image gets cut .
    I am not sure if i am doing correct.


    ------------------------------------------------------Dashboard . XMAL------------------------------------------------------------

    <UserControl x:Class="UGTML.View.DashBoard"
        Width="900" Height="680">
        <Grid x:Name="LayoutRoot" Background="LightGray" Margin="5">       
            <Border Margin="5" Padding="5" Background="LightYellow"
                BorderBrush="SteelBlue" BorderThickness="3" CornerRadius="15">

                <ScrollViewer Background="AliceBlue" HorizontalScrollBarVisibility="Visible"
                              HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >

                    <Canvas x:Name="canvas" Width="1000" Height="1000" Cursor="Hand" >

                            <ImageBrush x:Name="imageBrush" ImageSource="../Images/MineMap.jpg" />

                        <ItemsControl ItemsSource="{Binding Path=MinerList}">
                                    <Canvas x:Name="innerCanvas">
                                        <Rectangle x:Name="{Binding Path=Name}" Canvas.Left="{Binding Path=XCordinate}"
                                            Canvas.Top="{Binding Path=YCordinate}"
                                            Height="10" Width="10"  Stroke="Black" Fill="{Binding Path=Fill}"
                                            ToolTipService.ToolTip="{Binding Path=ToolTip}">                                 

                                <ScaleTransform x:Name="ZoomMe"></ScaleTransform>




    public DashBoard()
                HtmlPage.Document.AttachEvent("onmousewheel", OnMouseWheelTurned);


    private void OnMouseWheelTurned(Object sender, HtmlEventArgs args)
                double delta = 0;  ScriptObject e = args.EventObject;           

                if (e.GetProperty("wheelDelta") != null) // IE and Opera
                    delta = ((double)e.GetProperty("wheelDelta"));
                    if (HtmlPage.Window.GetProperty("opera") != null)
                        delta = -delta;

                else if (e.GetProperty("detail") != null) // Mozilla and Safari
                    delta = -((double)e.GetProperty("detail"));
                if (delta > 0)
                    // Zoom in
                    ZoomMe.ScaleX += 0.1;
                    ZoomMe.ScaleY += 0.1;               
                    //canvas.Width = canvas.ActualWidth * 1.1;
                    //canvas.Height = canvas.ActualHeight * 1.1;

                else if (delta < 0)
                    if (scale.ScaleX > 1)
                        // Zoom out
                        ZoomMe.ScaleX -= 0.1;
                        ZoomMe.ScaleY -= 0.1;
                        //canvas.Width = canvas.ActualWidth / 1.1;
                        //canvas.Height = canvas.ActualHeight / 1.1;

                if (delta != 0)
                    e.SetProperty("returnValue", false);

    • Moved by Harry Zhu Wednesday, July 28, 2010 4:07 AM I'm moving the thread for advice. (From:Visual C# Language)
    Monday, July 26, 2010 12:05 PM