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);
}
}
