Display UIMenuController in UIBarButton Click - xamarin.ios

I am trying to display a UIMenuController in a Toolbar button. I have the code below but I am unsure as to what should be in the "SetTargetRect" method.
What should I put in the SetTargetRect method to display the Menu?
Is there anything else that is missing from this code?
ToolbarItems = new UIBarButtonItem[] {
new UIBarButtonItem ("Sort", UIBarButtonItemStyle.Bordered, (sender, e) => {
var menu = UIMenuController.SharedMenuController;
menu.MenuItems = new UIMenuItem[] {
new UIMenuItem ("Current", new Selector ("SortRaceEntrants")),
new UIMenuItem ("Movers", new Selector ("SortRaceEntrants")),
new UIMenuItem ("Opening", new Selector ("SortRaceEntrants")),
new UIMenuItem ("Number", new Selector ("SortRaceEntrants"))
};
//menu.SetTargetRect ();
menu.SetMenuVisible (true, true);
}),
};

UIBarButtonItem inherits from UIBarItem and NSObject, so finding a frame for them is not easy if not impossible. UINavigationBar inherits from UIView and thus is a view (go figure) and has a frame, etc.
What I do is point to a rect inside that view where the UIBarButtonItem should be.
For example:
[myMenu setTargetRect:CGRectMake(10, 10, 20, 25)
inView:self.navigationController.navigationBar];
This will make the UIMenuController 'point' at the leftBarButtonItem.
The same technique can be used for the toolbar.
In your case something like:
[menu setTargetRect:CGRectMake(0,0,40,40)
inView:self.navigationController.toolBar];
would point to the center of the toolBar and thus the center button in the toolBar

According to the API docs, the target rect defines the area that you want to display the menu relative to - iOS will either show the menu above or below the area defined by TargetRect.
When you make this menu visible, UIMenuController positions it
relative to a target rectangle on the screen; this rectangle usually
defines a selection. The menu appears above the target rectangle or,
if there is not enough space for it, below it. The menu’s pointer is
placed at the center of the top or bottom of the target rectangle, as
appropriate. Be sure to set the tracking rectangle before you make the
menu visible. You are also responsible for detecting, tracking, and
displaying selections.
and
This target rectangle (targetRect) is usually the bounding rectangle
of a selection. UIMenuController positions the editing menu above this
rectangle; if there is not enough space for the menu there, it
positions it below the rectangle. The menu’s pointer is placed at the
center of the top or bottom of the target rectangle as appropriate.
Note that if you make the width or height of the target rectangle
zero, UIMenuController treats the target area as a line or point for
positioning (for example, an insertion caret or a single point).
Once it is set, the target rectangle does not track the view; if the
view moves (such as would happen in a scroll view), you must update
the target rectangle accordingly.

Related

Codename One - customize Dialog style not working

I would like to have a customized Dialog styling, having another background color and a rounded border, as it looks nicer than the gray rectangle that comes by default.
This is partially possible, by styling the Contentpane of the Dialog. The problem is, that the underlying Dialog Style is still there, in which the contentpane is shown. And it seems the Dialog UDID itself cannot be changed, nor can the "Dialog" style be overwritten in the designer nor by code.
Form hi = new Form();
hi.getUnselectedStyle().setBgColor(0xffffff);
Button but = new Button("open dialog");
but.addActionListener(e -> {
Dialog d = new Dialog(BoxLayout.y());
d.setUIID("Container"); // this line has no effect, the outside dialog component is still visible
Style s = d.getContentPane().getUnselectedStyle();
s.setBorder(RoundRectBorder.create());
s.setBgColor(0x00ff00);
s.setBgTransparency(255);
s.setMargin(5, 5, 5, 5); // adding some margin between contentpane and Dailog container, to be more obvious
d.setDisposeWhenPointerOutOfBounds(true);
// title
Label title = new Label();
title.setText("Confirmation");
d.add(title);
// body field with spanlabel info text
SpanLabel bodyLabel = new SpanLabel("Body Text");
d.add(bodyLabel);
// delete button
Button okButton = new Button("Ok");
okButton.addActionListener(e2 -> {
d.dispose();
});
// exit button
Button exitButton = new Button("Cancel");
exitButton.addActionListener(e3 -> {
d.dispose();
});
d.add(GridLayout.encloseIn(2, okButton, exitButton));
d.show();
});
hi.add(but);
hi.show();
In above image, the outermost dark gray is the tinted area outside the dialog. The green is the content pane with the intended rounded border. the light grey in between comes from the Dialog style that I would like to get rid off.
Can this be done?
Short answer: setDialogUIID("Container");
However dialogs are a bit problematic to customize via code, I would strongly recommend styling them via the designer/css as we just didn't design them for hand styling and so you're relying on internal implementation details that might break.
When you invoke getContentPane() on the Dialog you're styling the content pane of the Dialog. Not the Dialog itself so the dialog styling still has the non-transparent background. You can use getDialogStyle() to style the Dialog itself. I'm not sure how well that will work.

Android: Custom bottom sheet dialog

How can I implement following design functionality with android standard component bottom sheet:
Image when Bottom sheet dialog fragment will appear:
Image when user scrolled to up to view bottom of content:
I will use ViewPager to scrolling header images and RecyclerView to showing descriptions and other informations. And parallax effect to ImageView(which are placed in ViewPager) when scrolling content vertically. Have a minimum height of the ImageView(and ViewPager), user can't collapse fully it (Look to second screenshot, which is user scrolled until the end of content).
I want stop scrolling ImageView when it will reach to minimum height(look to second one Screenshot), but the content of below ImageView should be continue scrolling
This can be done with an if statement in an on scroll view such as shown below:
ScrollView scrollView = findViewById(R.id.scrollView); //Adjust for your code
ImageView imageView = findViewById(R.id.imageView); //Adjust for your code
boolean imageIsHidden = false;
int threshold = 250;
scrollView.getViewTreeObserver().addOnScrollChangedListener(new OnScrollChangedListener() {
#Override
public void onScrollChanged() {
int scrollY = rootScrollView.getScrollY();
if(scrollY >= threshold){
imageIsHidden = true;
//Move image outside of scroll view so it doesn't scroll
}
else if(scrollY < threshold && imageIsHidden){
imageIsHidden = false;
//Move image inside of scroll view so it does scroll
}
}
});
What this does is has a boolean called imageIsHidden and an integer called threshold. Threshold is where you want it to make it disappear. You will need to play around with this value to find a sweet spot.
You will also need to implement moving the image inside and outside of the scroll view as well in the if and if else statement.

how to change the position of the property sheet wizard buttons?

I am having a property sheet wizard which consists of three buttons Back,Next,Cancel as default at the right bottom corner.Do we have any possibility of moving those wizard buttons towards it's left to the center bottom of the sheet (exactly to the sheet center at the bottom,in detail those buttons should move towards their left to the center of the sheet)?
The short answer is yes. You'll need to derive your own CPropertySheet class and override OnInitDialog () to move the buttons. You need to use the IDs ID_WIZNEXT and ID_WIZBACK to get a pointer to the actual buttons. Once you have the pointer, you can move the buttons just like you would any other control using CWnd::MoveWindow. Here's some sample code (lacking error checking)...
CWnd* pWnd = GetDlgItem(ID_WIZBACK);
CRect rect(0, 0, 0, 0);
pWnd->GetWindowRect(&rect);
rect.OffsetRect(-50, 0);
ScreenToClient(&rect);
pWnd->MoveWindow(&rect);

How can I create resizing spacers in JavaFX?

First of all, I'm a long time Java/Swing developer. I recently installed JavaFX 2.2 to play around with.
I'm creating a fairly simple app, whose main window has a toolbar on top and content in the rest of the window. The obvious way to accomplish this is to use a BorderPane, and stick a ToolBar into the top section. So far, so good. However, I would like some of the controls in the toolbar to be at the left edge of the window, and some at the right edge. I can find no way to do this. I can put an invisible spacer object into the toolbar, but I only know how to give it a fixed width; it doesn't resize when the window is resized.
So I thought that instead of using a ToolBar object, I'll just use an HBox; it should be equivalent to a horizontally-oriented Swing Box object, right? And the Swing Box class has a createHorizontalGlue() method that inserts an auto-sizing spacer. Well, I can't find an equivalent in the JavaFX HBox class. Is there no simple way to do this?
I figured out how to do it using an HBox instead of a ToolBar to hold the controls; the key is the HBox.setHgrow() method, which allows you to set a spacer object to grow to fill the available space. I still don't know if it's possible to do this with an actual ToolBar instance.
/**
* Creates and populates the Node that serves as the window toolbar.
*
* #return a newly constructed and populated toolbar component
*/
private Node makeToolbar() {
// Auto-sizing spacer
Region spacer = new Region();
HBox.setHgrow(spacer, Priority.ALWAYS);
// Horizontal box containing toolbar controls
HBox box = new HBox();
box.setPadding(new Insets(8));
box.setAlignment(Pos.CENTER);
box.getChildren().addAll(openButton, spacer, resizeSlider);
// Colored background panel with drop shadow
Pane bgRect = new Pane();
bgRect.setStyle("-fx-background-color: #e0e0e0;");
bgRect.setEffect(DropShadowBuilder.create().width(1).build());
// StackPane to hold box and rectangle
StackPane stack = new StackPane();
stack.getChildren().addAll(bgRect, box);
return stack;
}
i do it this way:
private Node makeFooter(Node left, Node right) {
ToolBar footer = new ToolBar();
Region spacer = new Region();
HBox.setHgrow(spacer, Priority.ALWAYS);
spacer.setMinWidth(Region.USE_PREF_SIZE);
footer.getItems().addAll(left, spacer, right);
return footer;
}
hope i could help someone

How to move controls from the bottom to the top of an MFC form?

In VC++ 6.0 (MFC), how the the controls eg : Button, EditBox, and Static Text can be move from bottom of the form to top of the form.
You can use CWnd::MoveWindow() to move controls. CWnd::GetDlgItem() will retrieve a CWnd for a given control id.
Some pseudocode to be called from inside the class of the window that is parent of the controls:
RECT windowRect;
GetClientRect( &windowRect );// Bounds of the current window
CWnd* controlWindow = GetDlgItem( controlId );
RECT controlRect;
controlWindow->GetWindowRect( &controlRect );//control rectangle
ScreenToClient( &controlRect );//control rectangle in the coordinate system of the parent
const int vertOffset = windowRect.top - controlRect.top;//how much to adjust
controlRect.top += vertOffset;
controlRect.bottom += vertOffset;
controlWindow->MoveWindow( &controlRect );

Resources