I'm new to winRT, i'm trying to make a world map app.
I have a canvas control with a lot of path controls in it(every path control represents a country)
Now i want to make something so i can zoom in my canvas, so instead of seeing the wolrd map, i have to focus on, for example, Europe.
I think, it is easy to zoom in an image control, but an image control can't have different path controls in it.
Is there a way to make a zoom behavior or something on a canvas control?
thx in advance
You can try enclosing the canvas inside a ScrollViewer:
<ScrollViewer MinZoomFactor="0.25" >
<Canvas>
<Canvas.Background>
<ImageBrush x:Name="_background" />
</Canvas.Background>
</Canvas>
</ScrollViewer>
...then you can assign an image source to the canvas (in your case, a map).
Related
I'm trying to figure out how to overlay an image or textbox over an image in WPF. The base image will be hosting a video feed from a Kinect sensor and I want to overlay an image on it. For example the video feed will have a textbox on the feed that will update a counter or an image of a tree on top of the video feed.
Is there a straightforward way of achieving this in the layout? Is it just a matter of changing properties or adding a canvas?
The below picture better illustrates what it is I'm trying to do:
You can use two transparent canvas inside the Grid without any row and column then place your objects in Back and front Canvas accordingly they will overlap
that is:
<Grid>
<VideoControl><!-- I've never tried video --></VideoControl>
<TextBlock Text="My Text" />
</Grid>
Usually you specify <Grid.ColumnDefinitions> and <Grid.RowDefinitions> but since you do not du that here the controls will overlap
HTH
The usual way for me to overlay items in WPF is just to put all of the elements in a Grid. If you do not define any Columns or Rows the elements will overlap.
Example
<Grid>
<Image Source="image on lowest layer" />
<Image Source="overlaying image" />
</Grid>
I am developing a windows phone 8 app, I use Rectangle and Lines to draw a graph inside a Canvas placed inside a ScrollViewer.
But during the drawing I am facing System.OutOfMemoryException during drawing of the canvas( graph may go more than 3 times the size of the screen)
I have placed the Canvas inside a ScrollViewer. When I remove the ScrollViewer the issue does'nt occur but I am unable to scroll the Canvas even if I set the property Scrollviwer.HorizontalScrollBarVisibilty = Visible.
<ScrollViewer Name="MainScrollViewer" VerticalScrollBarVisibility="Disabled" HorizontalAlignment="Stretch" HorizontalScrollBarVisibility="Auto" Grid.RowSpan="2" >
<Canvas x:Name="MainCanvas" HorizontalAlignment="Left" Tap="OnCanvasTap" >
<Canvas.RenderTransform>
<CompositeTransform CenterX="100" CenterY="75" />
</Canvas.RenderTransform>
</Canvas>
</ScrollViewer>
I have also tried using GC.Collect and Canvas.Children.Clear() where I am drawing but even then the issue persist.
Instead of using a large canvas inside a scrollable div to contain all of the graphics you can use a smaller canvas, optimally max of the actual screen size (not the graphics) and then use translate the canvas and redraw the graphics at the translated position.
Optimally because if you have a huge canvas and only see 25% of then the other 75% is wasted memory.
By using the canvas as a "peephole" combined with translation you will get the same result on screen (you see 100% of what is possible to see at one time) and you don't need to worry about your graphics as this will be clipped automatically by the canvas.
You can attach translation to mouse/touch drag-and-move operation or make "virtual" scroll-bars if that is preferred.
Inside ScrollViewer control I have a large image and I want to use scroll bars to move that image inside ScrollViewer. See XAML code below:
<ScrollViewer HorizontalAlignment="Left" Height="282" Width="554"
HorizontalScrollBarVisibility="Visible" VerticalScrollMode="Enabled">
<Image HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top"
Source="Assets/big_image.jpg" Stretch="None" ManipulationMode="None"/>
</ScrollViewer>
This works fine on my PC. I can use mouse to move image inside ScrollViewer by using scrollbars. But when I deploy application on the tablet, I cannot do anything. The scrollbars are not visible and I cannot use gestures to manipulate the image. Does anyone know how can I solve this problem?
There is a Microsoft example with similar functionality:
http://code.msdn.microsoft.com/windowsapps/XAML-ScrollViewer-pan-and-949d29e9
This example uses a Scrollviewer with an inside image to show the capabilities of the ScrollViewer control to pan and zoom. I tried it with a tablet and it works well.
Hope it helps.
I have a Windows Store app with a ScrollViewer and an Image in it. When i double tap on the ScrollViewer I want it to zoom the Image to its width. This part is not a problem but I also want the Image to be centered after it has beed zoomed in.
I tried calling the ScrollToHorizontalOffset method on the ScrollViewer but It does not seem to work with any number I give it. What is the problem?
Perhaps the offset only works for the non-zoomed view where your image fills the ScrollViewer completely and thus can't be scrolled. You could try setting the image dimensions so that it is larger than the ScrollViewer, but set original ZoomFactor, so that it fills the ScrollViewer at first. Then zooming and scrolling might work.
Assign a SizeChangedEvent in the scrollviewer.
<ScrollViewer SizeChanged="OnSizeChange"></ScrollViewer>
like this. Then it is better to place your image inside a canvas. So your code will be probably like this.
<ScrollViewer SizeChanged="OnSizeChange" x:Name="scrl">
<Canvas RenderTransformOrigin="0.5,0.5" x:Name="main">
<Image source="" Canvas.Top="insert desire double value here", Canvas.Left="Same goes here"/>
</Canvas>
</ScrollViewer>
then in the code behind you can change the height and width of your canvass depending on the scroll viewer
Main.Width = scrl.ViewPortWidth;
Main.Height = scrl.ViewPortHeight;
You can experiment on the size of the canvass while adding a double tap event to it. Changing the size of the canvas can zoom in or out the image because the image is inside the canvass
Try with 'ChangeView' instead of 'ZoomToFactor'
Assume I have a re-sizable part in UI that is a standard WPF container control (in this case a Canvas) and I put some text on this Canvas. How can I re-size my text according to rendered size of my Canvas?
Viewbox will stretch a TextBlock
How to: Apply Stretch Properties to the Contents of a Viewbox
<Viewbox Grid.Row="1" Grid.Column="1" Name="vb1" Stretch="Fill" >
<TextBlock Text="tulip_farm.jpg"/>
</Viewbox>
You can simply link a method to the container resize event, that will resize the text as well (this way they are always in sync), i would offer an example but since you did not post an example, i think you undetrstand what i mean.