locked
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.

    Regards
    Debashish

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

    <UserControl x:Class="UGTML.View.DashBoard"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        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" >

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

                        <ItemsControl ItemsSource="{Binding Path=MinerList}">
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <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}">                                 
                                        </Rectangle>
                                    </Canvas>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>

                        <Canvas.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform x:Name="ZoomMe"></ScaleTransform>
                            </TransformGroup>
                        </Canvas.RenderTransform>
                    </Canvas>

                </ScrollViewer>

            </Border>

        </Grid>

    </UserControl>
    ---------------------------------------DASHBOARD.CS----------------------------------------------------------------------------
    public DashBoard()
            {
                InitializeComponent();           
                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)
                {
                    args.PreventDefault();
                    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

Answers