I have a XULRunner application that I want to have display 2d graphics in a HTML element. I would like to be able to repaint those graphics when the window resizes. The layout looks something like this:
<box flex="1" id="canvas-box">
<html:canvas id="canvas" flex="1">
</html:canvas>
</box>
First of all the "width" and "height" properties of the canvas element do not reflect its actual size on the screen. This causes the strokes to come out stretched strangely, since 1 unit in the x direction ends up being different than 1 unit in the y direction. Secondly, I can't get the onresize event to fire, regardless of whether I put it on the canvas or on the surrounding box.
The XUL tutorial does warn that there are layout weirdnesses that will occur when you use HTML elements inside your XUL app, but in this case I don't have a choice because I need 2d graphics. Any pointers?
EDIT For now I'm going to use SVG in the place of the canvas element. I'm in the preliminary stages of trying it out, but at least it doesn't seem to have the weird "stretching" problems that canvas was having.
Couldn't you just put an HTML frame/iframe in the XUL and put the canvas in there?
I thought onresize only worked on <window>, you could resize the canvas and repaint it from there.
Related
I have a yfiles.canvas.Control, with some nodes inside. However, the number of nodes is getting bigger, and I need to add a scrollbar in order to vertically navigate through them, despite the reduced size in height.
How can I do this? I see that a ScrollBar class exists, but I don't know how to integrate it.
yFiles for HTML comes with scrollbars built in. You can customize their visibility, but by default they will be shown as soon as the content rectangle is larger than the visible area. Maybe calling updateContentRect is all that is missing in your code?
I'm using XAML Toolkit ImageButton control to be able to create normal and pressed states for a button. Code is:
<toolkit:ImageButton NormalStateImageSource="ms-appx:///Assets/1_off.png"
PressedStateImageSource="ms-appx:///Assets/1_on.png"
Width="500"
Height="200">
</toolkit:ImageButton>
Issue I'm facing is, say I have a shape which isn't rectangle or square. For example I have PNGs for star and arrow object. Is there a way to set their boundary corresponding to shape? If not, please advice the best approach to handle such scenarios.
There are two options I tried
When clicking using mouse or touch - you'd check the last position of the pointer before click and see if the image in your button has a non-transparent pixel at that position.
Pros:
It's simpler than option 2.
You get most precise information
Cons:
You can't tell if a button got clicked with mouse, touch, pen, keyboard or by narrator using automation, so you could end up filtering out keyboard clicks just because the mouse cursor is a bit off. You could possibly use some heuristics like how long ago was the pointer move or pointer down event before the click event, but it's a bit hacky and might be unreliable.
Generate a vector path for your image and put it in the button template as a Path element with Fill="Transparent", then mark any other non-transparent or hit testable template elements (buttons, borders with Background="Transparent", etc.) as IsHitTestVisible="false".
Pros:
Doesn't break any input methods
Can be quite precise
For some shapes like a circle - the Path.Data could be quite simple or you could even use something like an Ellipse element instead
Cons:
You need to generate the path somehow
A complex path might adversely affect performance
A better solution overall in most cases is to leave the hit-testable area rectangular. The reason is - an arbitrary shape is a finicky and unreliable hit test target so it makes clicking your button more difficult. Using the default rectangular border or at most - an ellipse shape is a lot simpler and more usable.
I am creating a custom video player in flash builder using SDK 4.1 on windows 7.
I have created video player controls like Play/Pause, progress bar etc. in a HBox.
Now I want to display these controls when user mouse hover on display object as overlay like in vimeo.com video player and remove/disable when hover out.
My current .mxml page structure is like http://i48.tinypic.com/15x4w7a.png
I simply show/hide video player controls HBox on video container mouse hover event by giving HBox height.
How can I implement overlay functionality in video player?
Any web link and source code would be highly appreciated.
The solution is to use a Flex container that will allow content to be layered on top of other content. By design, the VBox and HBox containers do not allow this. They layout their contents in a vertical or horizontal layout with no overlap.
You can use the Canvas or Group containers to overlay components on top of other components. Since you are using Flex 4, I would recommend using Group instead of Canvas ... and VGroup instead of VBox ... and HGroup instead of HBox.
Here is a simple layout you could do using the Flex 4 classes:
<s:Group>
<s:VideoDisplay top="0" bottom="0" left="0" right="0" />
<s:HGroup bottom="0" left="0" right="0"/>
</s:Group>
The VideoDisplay component is whatever you are using to show the video. Note that the top/bottom/left/right attributes tell the parent Group object to layout this component so that its top is 0 pixels from the parent's (Group's) top edge (and similar for the bottom/left/right edges).
The HGroup component is the container that holds your player controls. The HGroup is positioned to be 0 pixels from the bottom, left, and right edges of the parent container.
Instead of changing the height of the player controls container on mouseover, you should set the visible property HGroup (or HBox) container to false.
As they say, a picture is worth a thousand words. But on StackOverflow, code is worth a thousand pictures. If this answer doesn't help, you should edit your question and add the actual code you're using :)
I have a series of items in a GridView.
I want to animate the TranslateTransform of a GridViewItem so that it is outside the boundary of the GridView. When I do, it is clipped. Is this type of transform possible?
Sadly, I don't think so. I had to do something similar a while ago and it turns out that the template of a GriView (and ListView, ListBox, etc...) contains a ScrollViewer control. The thing about the ScrollViewer controls is that they MUST define a clipped viewport to give the user the impression of scrolling. In fact, if you were to decompile the ScrollViewer control, you can see that it hard codes the clipped bounds, so you cant even change the template or style.
Things may have changed since I looked into this, and my investigations where on WPF not XAML in Windows 8, but I dont think that it would have changed based on your description of the issue.
Here is a SO question in relation to this topic: WPF clipping even when no clipping is desired - how to turn it off?
I know this has to be simple, but it's driving me crazy. I'm trying to make a very simple Silverlight application. I want it to be full-screen, and I want to draw a line onto a Canvas.
My problem is that the .Width and .Height of the canvas never seem to have a valid value.
The website shows the canvas at 400x300 pixels or so, and when you click on it, it goes into Fullscreen mode. I want to use the Height and Width to find the usable space of the screen. I've tried adding events (thinking that the canvas wasn't yet ready to be used immediate after the full-screen line of code) but the LayoutChanged and Resized events don't seem to yield anything.
What am I doing wrong?
Have you tried using .ActualWidth and .ActualHeight. You could also reference this Article