In a WP8 app, I have a ListBox bound to an ItemsSource with a Grid as it's ItemsPanelTemplate. The layout of the Grid might be different each time (different number of rows/columns) based on user selection and I'm using a helper class in order to bind the ItemsPanelTemplate Grid's Row and Column Definitions to values read from a database.
The user can add item's to the app and assign each item to a Grid cell in the ListBox. Each item can "sit" in multiple Grids (a many-to-many relationship), which led me to use another binding helper class in order to set the bindings of Grid.Row and Grid.Column attached properties in the ListBox.ItemContainerStyle, bound to a property of the ItemsSource class.
Another requirement is to have the app in Portrait orientation when Rows.Count >= Columns.Count and in Landscape when the columns are more.
I'm also using the Toolkit Gestures for drag and drop operations.
The issue in question, is a drag issue on Landscape orientation. While everything works great on Portrait, while on Landscape orientation the ListBox goes crazy. The dragging happens to different cell's that those actually being dragged and some of them don't even raise the gesture events (DragStarted, DragDelta, DragCompleted).
I'm lost here, don't know what the issue might be, or how to solve this.
Need your lights please.
Here is a sample that illustrates the problem.
EDIT
Phew, it's a bug of the GestureListener on the toolkit. It does not respect the Landscape orientation and treats the UIElements as if they were rendered in Portrait.
Using the Manipulation Events instead, which work properly. Can I have my 50 bounty points back? :P
If it is not gesture listener but Manipulation Event you are looking at there is couple of good questions out there:
Drag and drop from list to canvas on windows phone with MVVM
Moving Object in ScrollViewer
Related
I am creating a UWP app and I am using the VariableSizedWrapGrid control. I am binding the Width of the a ComboBox in the grid to it the ComboBox width resizes based on the entries in the list. ( I am using a simple property exposed through my view model.) When I had the items in a StackPanel with a Horizontal orientation it worked fine. See picture below
The challenge of course is that on a smaller screen I need the fields to wrap around. So I switched the StackPanel to a VariableSizedWrapGrid. However, when I do that, the Grid does not seem to be handling the resizing of the ComboBox correctly as I get what is shown below. (See the ComboBox is now cut off
Any suggestions on how to resolve this would be greatly appreciated.
You are using the wrong Panel for the job. The one you're looking for is a WrapPanel (which doesn't exist actually though), but there are some implementations available, eg.: http://codepaste.net/8gr5go
This question already has an answer here:
NSTableView with +/- buttons like in System Preferences using only Interface Builder
(1 answer)
Closed 7 years ago.
I'm building an OSX app and want to create a set of controls similar to what's found at bottom of the standard Network Preferences configuration panel. I'm running into some layout problems that I wouldn't have expected.
These are my specific questions:
What contains the 3 buttons so there's similar shading all they way across the row where the buttons are positioned? In particular, what's causing the area without buttons to have shading?
How do you do this without getting a double border where the row of buttons meets up with the table?
I want to do this with an xib file. This may be incredibly simple, but I'm missing something I guess.
I find that if you make a button with style "Gradient" and type "Momentary Change", then it looks like the other buttons but does not respond to clicks, so you can use that as the area after the last button. (The NSMomentaryChangeButton is documented as changing the image and title when clicked, so if you don't use an image or title, nothing should change.)
If you check Refuses First Responder in the attributes inspector, then it will not be possible to highlight this blank button using Full Keyboard Access.
Ken Thomases also brings up the issue of the blank button being shown as a button to Accessibility. One can fix that by using a subclass of NSButtonCell that has just one method:
- (BOOL)accessibilityIsIgnored
{
return YES;
}
I think that's easier than writing a custom view.
As d00dle says, avoid double borders by slightly overlapping things.
Since you want the slack space to have the same background as the buttons, and since the buttons can change appearance from release to release of the OS, the best thing to do is to get the frameworks to draw it like it would the buttons.
Rather than using an actual button as JWWalker suggests, I have used a custom view that leverages NSButtonCell to draw the background. The advantage is that you can be sure there's no chance of getting undesirable behavior. For example, a button could get focus (for users who have All Controls selected in System Preferences > Keyboard > Shortcuts > Full Keyboard Access) so that the user could Tab to it. Accessibility will report the presence of the button through VoiceOver. Etc.
Configure the button cell just like the buttons (set buttonType and bezelStyle). In the view's -drawRect: call [buttonCell drawWithFrame:rect inView:self];, where rect is similar to the frames of the buttons. Since one way to avoid double borders is to make the buttons larger than the view's bounds, you may need to do the same for rect. For example, you might want to use NSInsetRect(self.bounds, -1, -1).
The buttons are buttons... This can be accomplished with a custom view drawing border and the background "shading".
To avoid the double border where the table and the custom view meet you simply align it so they overlap by 1 point (pixel) or avoid drawing the top border in your custom view.
I don't know of any standard object capable of doing this.
Is it possible to apply UI virtualization to ScrollViewer in WinRT. In my application I am creating a line chart with the help of Polyline(Polyline embedded inside a scrollviewver). But in the current case, If it come more than 500 points. It blocks the UI during the time of interacting with the Map. So what I am trying to achieve is to apply kind of UI virtualization to scroll view. If anyone had any idea to solve this please help me.
The way I would handle a Polyline is I would break its data into sections, perhaps screen-wide ones (assuming horizontal-only scrolling), put a Canvas inside of the ScrollViewer, make the size (Width) of the Canvas the total size of the chart and put a few (say 5) Polyline controls in it and then on the ViewChanged event update the Polyline controls' Canvas.Left and Points properties to correspond to the area around the current view port of the ScrollViewer. That should give you smooth scrolling. Just don't add/remove or update the controls on each ViewChanged and only update Canvas.Left and Points when you need to - that is when you don't have a Polyline ready to display next to the current view port.
Application requires more than one window (Lets call A,B,C). Each window has more than one view (table views, image views as well as web view). Lets say window A has three views (x, y,z) and window B has three views (d,e,f). Application needs to display images of different size on orientation change.
I have achieved the same using gesture event listener and looping through windows for views and replacing the view with new images. The problem I have is when we navigate from one window to other and the orientation changes, the loading of view after looping goes for a toss. Is there a better way to achieve the same ?
Is there a method in titanium like following code to replace a view ?
var self=Ti.UI.currentWindow
var newView=Ti.UI.createImageView({image:'abc.png'})
self.replace(self.children[1],newView )
Unfortunately there is now replace method.
You need to remove the whole view and add it again but this can cause a wrong layout if you have more than one view on a same level. The implementation then depends on the layout which was set (vertical, horizontal, composite etc).
For example in vertical layout removing an item and simply add a new one would remove your specified item but appends the new one at the end since you can't specify in which order it should be added.
If you have a composite layout you can specify absolute positions but adding a new view causes a higher zIndex for this view so that it will hide views that were previously added at the same/similar position.
Why not simply change the image link ?
var self = Ti.UI.currentWindow;
self.children[1].image = 'bcd.png';
Well you could always lock the orientation of your window. But this isnt exactly good practice (especially for iOS).
Generally orientation changes are handled pretty well if you define the width and height of your views to be percentages or Ti.UI.FILL, if you have a composite layout. Check that you are not giving the views absolute coordinates as this could cause layout problems. If you have a vertical or horizontal layout you usually don't have to worry about orientation change, unless you did not nest your views in a main container correctly.
Prasad,
If this is about just ensuring that the images look good on different orientations,you can make use of the different folders provided by Titanium in the android/images folder.You can just make different images for each of the orientations and device sizes.For IOS you can change just the images on orientation change as you are already doing.
https://wiki.appcelerator.org/display/guides/Using+density-specific+resources+on+Android
If you are concernced about the layout there are couple of things you can do:
1.Give all the height or width values in percentages.This way all elements will be re sized once the orientation changes automatically.
2.On each window open check if the orientation is vertical or horizontal by default and accordingly set the image attribute of the imageView.
Ti.UI.orientation
This property will give you the orientation of the window by default.Values of this property could be this
Ti.UI.PORTRAIT
Ti.UI.UPSIDE_PORTRAIT
Ti.UI.LANDSCAPE_LEFT
Ti.UI.LANDSCAPE_RIGHT
Use "if else" and accordingly set the images.
I'd like to add some controls above the contents of an NSOutlineView that has NSTableViewSelectionHighlightStyleSourceList set so that it looks like a Finder/iTunes/iPhoto-like source list. The controls I want to add should therefore be placed above the whole source list, but in the same NSScrollView as the outline view. The color behind them should also be that of the source lis (which is special because it changes from light blue to grey when the window loses focus).
I already tried to move the NSOutlineView down programmatically inside its parent views (which are a NSClipView and then an NSScrollView), but changing the NSOutlineViews frame doesn't work (the frame isn't changed at all).
Cheers
MrMage
What you're describing -- controls sharing the background color of a source list but higher than (above, not on-top of) the content -- is not at all similar to Finder or iTunes. They put controls in the window's toolbar space. In fact, what you describe sounds like a poor UI decision entirely.
That said, you could probably achieve your stated goal by adding one or more rows of "empty content" i.e. return nil from outlineView:objectValueForTableColumn:byItem: and possibly set custom row height with outlineView:heightOfRowByItem: and then add your subviews onto that "empty" space.