If I set the ExtendedDescription text for a DefaultOption clicking the option opens a view where the text is displayed in an HBox and is centered there. I would like to customize the HBox area where the text is: align the text not only to center, color the text or bold/italicise parts of it, add a small image maybe...
I didn't see any API to access anything relating to customization except for maybe OptionEditor but when I try to call editorFactoryProperty() the optional is always empty. Am I supposed to create one myself and set it? What is the process for that?
So far there is no API for the Extended View.
If you check it with ScenicView, you can see that the view nodes have custom style classes applied though, so you will be able to use lookups on runtime to get a hold of the BorderPane (id: extended-pane), the HBox at the top (id: extended-top), the one at the center (id: extended-center), and its Text child (styleClass: extended-text).
Something like this should work:
viewProperty().addListener((obs, ov, nv) -> {
if (nv != null && nv.getName().startsWith("Extended_View_Gender")) {
BorderPane pane = (BorderPane) nv.lookup(".extended-pane");
if (pane != null) {
Text text = (Text) pane.lookup(".extended-text");
text.setStyle("-fx-fill: red");
}
}
});
Related
So I have read mutliple articles regarding this issue, but none worked for my case.
What happens:
When you toggle the keyboard by clicking an entry, on Android the whole layout is shifted up by as much as the keyboard is big. iOS simply renderes the keyboard on top. This is ofc terrible, and especially for the chat application I am building right now completely hiding the entry editor field where the user types on. Inacceptable.
There are some solutions (allthoug I really wonder why such a basic thing isnt included into xamarin.ios already)
1.) Putting your layout into a scrollview.
This works. Simply wrap everything into a scrollview, and the keyboard will push everything up. Great, right?
No. In some instances you cannot wrap things into a scrollview: My chat is one example. Since the chat view is a scrollview itself, the outter layers cannot be a scrollview. I mean, they can: but then you have two scrollviews on top of each other leading to scroll issues and both interfering with one another. ALSO: values like height="180" dont work inside a scrollview anymore because the height isnt a fixed value.
2) Using a plugin
There are many nuget plugins that should work but with the newest iOS they just dont anymore. Some still do, but on few occasions (when the enter button is pressed to disable keyboard) the layout doesnt scroll back down well enough leaving a blank space. So these do not work at all or well enough.
3) Adding a layout that is inflated when the keyboard is triggered
This is what I did as a workaround (that isnt good either):
At the bottom of my layout where my entry field for the chat is I added this layout:
<Grid Grid.Column="1" Grid.Row="2" x:Name="keyboardLayout" IsVisible="false" >
<Grid.RowDefinitions>
<RowDefinition Height="300"/>
</Grid.RowDefinitions>
<BoxView BackgroundColor="Transparent"/>
</Grid>
It is a fixed layout with a height of 300. Now I can listen to keyboard change events:
if (Device.RuntimePlatform == Device.iOS)
{
// Android does it well by itself, iOS is special again
var keyboardService = Xamarin.Forms.DependencyService.Get<IKeyboardService>();
keyboardService.KeyboardIsHidden += delegate
{
keyboardLayout.IsVisible = false;
};
keyboardService.KeyboardIsShown += delegate
{
keyboardLayout.IsVisible = true;
};
}
With a complicated interface (that I am posting if someone wants it), I can listen to change keyboard events. If the keyboard is visible, I simply update the UI with the layout.
This works, but the fixed size of 300 is an issue.
To this day I still dont really know how fixed values in XAML work (input wanted...!), for smaller margins they seem to be equal on every phone, but for higher values (> 50) they differ too much.
So my solution is just about good enough for older iPhones (6, 7). But leaves a bit of an empty space between the keyboard and the entry filed on newer iPhones with longer screens (11, 12).
In summary: no solution is ideal.
What we need
Either an important xamarin update facing this issue (which wont happen anytime soon), or someone who knows how to get the height of the keyboard in pixels, translate that into XAML values, and fill them in in regards to the phone used. Then my solution (number 3) would work always, everywhere (still a workaround, but bulletproof).
Is there anybody out there, who knows how to
a.) get the height of the shown keyboard in pixels
and (and most important)
b.) konws how to translate pixels into Height="xxx"
Thank you for comming to my ted talk ;)
You can create class that extend grid in shared code firstly.
public class KeyboardView: Grid{}
Then create a custom renderer to do the resize control.
[assembly: ExportRenderer(typeof(KeyboardView), typeof(KeyboardViewRenderer))]
namespace KeyboardSample.iOS.Renderers
{
public class KeyboardViewRenderer : ViewRenderer
{
NSObject _keyboardShowObserver;
NSObject _keyboardHideObserver;
protected override void OnElementChanged(ElementChangedEventArgs<View> e)
{
base.OnElementChanged(e);
if (e.NewElement != null)
{
RegisterForKeyboardNotifications();
}
if (e.OldElement != null)
{
UnregisterForKeyboardNotifications();
}
}
void RegisterForKeyboardNotifications()
{
if (_keyboardShowObserver == null)
_keyboardShowObserver = UIKeyboard.Notifications.ObserveWillShow(OnKeyboardShow);
if (_keyboardHideObserver == null)
_keyboardHideObserver = UIKeyboard.Notifications.ObserveWillHide(OnKeyboardHide);
}
void OnKeyboardShow(object sender, UIKeyboardEventArgs args)
{
NSValue result = (NSValue)args.Notification.UserInfo.ObjectForKey(new NSString(UIKeyboard.FrameEndUserInfoKey));
CGSize keyboardSize = result.RectangleFValue.Size;
if (Element != null)
{
Element.Margin = new Thickness(0, 0, 0, keyboardSize.Height); //push the entry up to keyboard height when keyboard is activated
}
}
void OnKeyboardHide(object sender, UIKeyboardEventArgs args)
{
if (Element != null)
{
Element.Margin = new Thickness(0); //set the margins to zero when keyboard is dismissed
}
}
void UnregisterForKeyboardNotifications()
{
if (_keyboardShowObserver != null)
{
_keyboardShowObserver.Dispose();
_keyboardShowObserver = null;
}
if (_keyboardHideObserver != null)
{
_keyboardHideObserver.Dispose();
_keyboardHideObserver = null;
}
}
}
}
Finally, adding content inside KeyboardView.
You can take a look this thread:
adjust and move the content of a page up slightly when the keyboard appears in an Entry control Xamarin Forms
Install Xamarin.IQKeyboardManager nuget package in Xamarin.Forms iOS project only.
Add below code in AppDelegate.cs before Forms.init()
IQKeyboardManager.SharedManager.Enable = true;
IQKeyboardManager.SharedManager.KeyboardDistanceFromTextField = 20;
When you click on entry, it will shift UI up as you mentioned in your question for Android.
I am using spreadsheetgear, and I want to place the combobox (ComponentOne) into 1 cell. I want that when the user go to this cell, this combobox will activate and show the list to user. After user chose item on the list, it will place this item into the cell value and hide the combobox.
How to do it in Spreadsheetgear.
Thanks,
Doit
I am not familiar with ComponentOne controls, so cannot really speak for that portion of your question. However, regarding a more general approach to embedding custom controls onto a SpreadsheetGear WorkbookView UI control, this is possible by sub-classing the UIManager class, which would allow you to intercept the creation of existing shapes on a worksheet and replace them with your own custom controls.
Below is a simple example that demonstrates this with the Windows Forms WorkbookView control and a sub-class of SpreadsheetGear.Windows.Forms.UIManager. This example just replaces a rectangle AutoShape with a button. You could modify it to show a ComponentOne CheckBox instead.
Note that the UIManager.CreateCustomControl(...) method gets called anytime a shape is scrolled into view / made visible on the WorkbookView. Also note that that your custom control will be disposed of every time it is scrolled out of view or otherwise made invisible. Please see the documentation for more details on this API.
Another important point about shapes and worksheets in general--shapes are not embedded inside a cell. Instead they hover over cells. So there will be no explicit "link" between a given shape and a given cell. The closest you could come to making such an association is with the IShape.TopLeftCell or BottomRightCell properties, which will provide the ranges for which this shape's respective edges reside over. The IShape interface contains a number of other API that you might find useful in your use-case. For instance, you can hide a shape by setting the IShape.Visible property to false.
using System;
using System.Windows.Forms;
using SpreadsheetGear;
using SpreadsheetGear.Shapes;
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
// Create the UIManager replacement.
new MyUIManager(workbookView1.ActiveWorkbookSet);
}
private void buttonRunSample_Click(object sender, EventArgs e)
{
// NOTE: Must acquire a workbook set lock.
workbookView1.GetLock();
try
{
// Get a reference to the active worksheet and window information.
IWorksheetWindowInfo windowInfo = workbookView1.ActiveWorksheetWindowInfo;
IWorksheet worksheet = workbookView1.ActiveWorksheet;
// Get a reference to a cell.
IRange cell = workbookView1.ActiveWorksheet.Cells["B2"];
// Add a placeholder shape to the worksheet's shape collection.
// This shape will be replaced with a custom control.
double left = windowInfo.ColumnToPoints(cell.Column) + 5;
double top = windowInfo.RowToPoints(cell.Row) + 5;
double width = 100;
double height = 30;
IShape shape = worksheet.Shapes.AddShape(AutoShapeType.Rectangle, left, top, width, height);
// Set the name of the shape for identification purposes.
shape.Name = "MyCustomControl";
}
finally
{
// NOTE: Must release the workbook set lock.
workbookView1.ReleaseLock();
}
buttonRunSample.Enabled = false;
}
// UIManager replacement class.
private class MyUIManager : SpreadsheetGear.Windows.Forms.UIManager
{
private Button _customControl;
public MyUIManager(IWorkbookSet workbookSet)
: base(workbookSet)
{
_customControl = null;
}
// Override to substitute a custom control for any existing shape in the worksheet.
// This method is called when a control is first displayed within the WorkbookView.
public override System.Windows.Forms.Control CreateCustomControl(IShape shape)
{
// If the shape name matches...
if (String.Equals(shape.Name, "MyCustomControl"))
{
// Verify that a control does not already exist.
System.Diagnostics.Debug.Assert(_customControl == null);
// Create a custom control and set various properties.
_customControl = new Button();
_customControl.Text = "My Custom Button";
// Add a Click event handler.
_customControl.Click += new EventHandler(CustomControl_Click);
// Add an event handler so that we know when the control
// has been disposed. The control will be disposed when
// it is no longer in the viewable area of the WorkbookView.
_customControl.Disposed += new EventHandler(CustomControl_Disposed);
return _customControl;
}
return base.CreateCustomControl(shape);
}
private void CustomControl_Click(object sender, EventArgs e)
{
MessageBox.Show("Custom Control was Clicked!");
}
private void CustomControl_Disposed(object sender, EventArgs e)
{
// Add any cleanup code here...
// Set the custom control reference to null.
_customControl = null;
}
}
}
I created a custom dialog with my own panes and controls in it. But the dialog has a white border default which I want to remove. Here is an example with a single image:
I tried using ScenicView but couldn't find a way to catch the dialog layer and modify it:
public class MainView extends View {
Image img = new Image("https://i.stack.imgur.com/7bI1Y.jpg", 300, 500, true, true);
public MainView(String name) {
super(name);
Button b = new Button("Pop");
b.setOnAction(e -> {
Dialog<Void> dialog = new Dialog<>();
dialog.setOnShown(e2 -> {
Parent parent = getParent();
Pane p = (Pane) parent.lookup(".dialog");
p.setPadding(new Insets(0));
});
dialog.setGraphic(new ImageView(img));
dialog.showAndWait();
});
setCenter(b);
}
}
Best i got was removing the flowpane child to remove some of the lower part
dialog.setOnShown(e2 -> {
Parent parent = getParent();
Pane p = (Pane) parent.lookup(".dialog");
p.getChildren().removeIf(c -> (c instanceof FlowPane));
System.out.println(p.getChildren());
});
Removing the VBox moves the dialog which i don't want to do and changing its padding also dose nothing.
As you can see with ScenicView, the Dialog has the dialog style class.
One easy way to modify the dialog style is via css. Just add a css file to your view, and set:
.dialog {
-fx-background-color: transparent;
}
That will set the background transparent, instead of the default white color.
If you want to remove the borders instead, then you can play with padding. As you can also see with ScenicView, the dialog has a VBox with style class container for the content in the center, and the flow pane for the buttons at the bottom, with style class dialog-button-bar.
Before anything, just use the setContent method to add the image instead of the setGraphic one:
dialog.setContent(new ImageView(img));
And this will be required to remove all the borders, and let the image take the whole dialog:
.dialog,
.dialog > .container,
.dialog > .dialog-button-bar {
-fx-padding: 0;
}
I have something similar to this code:
TextArea textArea = new TextArea();
textArea.setSizeFull();
Panel dataPanel = new Panel("Panel", textArea);
dataPanel.setSizeFull();
textArea.setValue(... some very long text...);
The problem is that this TextArea appears without vertical scrollbar (and mouse-wheel scrolling also doesn't work), although inner text is longer than TextArea height (I can navigate lower using cursor and keyboard down arrow).
How do I enable scrolling in this component?
A bit weird, but as per the documentation if you disable word-wrapping in a text-area, you'll get the vertical scroll-bar:
Word Wrap
The setWordwrap() sets whether long lines are wrapped ( true - default) when the line length reaches the width of the writing area. If the word wrap is disabled (false), a vertical scrollbar will appear instead. The word wrap is only a visual feature and wrapping a long line does not insert line break characters in the field value; shortening a wrapped line will undo the wrapping.
The following code sample illustrates this behaviour with Vaadin 8.0.6. Please note my class extends Panel to match your sample but at this point you can eliminate it:
public class PanelWithScrollableTextField extends Panel {
public PanelWithScrollableTextField() {
TextArea textArea = new TextArea();
textArea.setWordWrap(false);
textArea.setSizeFull();
setContent(textArea);
setSizeFull();
StringBuffer buffer = new StringBuffer();
IntStream.range(1, 100).forEach(value -> buffer.append(value).append("\r\n"));
textArea.setValue(buffer.toString());
}
}
Result:
P.S. I know it's a bit weird to grasp, but panels are used to scroll surfaces that are larger then the panel size, so if we'd get it working, you'd be scrolling the text area itself, not its content. You can see below a sample to better understand what I mean:
public class PanelWithScrollableTextField extends Panel {
public PanelWithScrollableTextField() {
TextArea textArea = new TextArea();
textArea.setWordWrap(false);
textArea.setHeight("500px"); // fixed size with height larger than the panel
setContent(textArea);
setHeight("100px"); // fixed height smaller than the content so we get a scroll bar
StringBuffer buffer = new StringBuffer();
IntStream.range(1, 100).forEach(value -> buffer.append(value).append("\r\n"));
textArea.setValue(buffer.toString());
}
}
Result:
You can change it CSS also like below .
.v-textarea { overflow-y: auto ! important;}
If I create a settings pane and add new DefaultOption(...) to it with an icon and text then the controller on the right takes more space than it needs and trims the text in the middle.
Option<BooleanProperty> antiAliasingOption = new DefaultOption<>(MaterialDesignIcon.BLUR_OFF.graphic(),
"Anti-aliasing", "Toggle anti-Aliasing", null, new SimpleBooleanProperty(), true);
You can see that there's a lot of space (red line) for the toggle button which is not used and the text is cut off. I want the controls to be justified to the right like in a border pane where the center takes all unallocated space.
If you use Scenic View to inspect the Settings control, you will find that for every Option there is an HBox that contains a left HBox for the icon, a central VBox for the text and a right HBox for the editor.
All these containers have style classes, so an easy way to modify any of them on runtime is by using lookups.
As for the right HBox, you can look for the secondary-graphic and then set the preferred width:
public BasicView(String name) {
super(name);
Option<BooleanProperty> antiAliasingOption = new DefaultOption<>(MaterialDesignIcon.BLUR_OFF.graphic(),
"Anti-aliasing", "Toggle anti-Aliasing", null, new SimpleBooleanProperty(), true);
SettingsPane settings = new SettingsPane(FXCollections.<Option>observableArrayList(antiAliasingOption));
settings.setSearchBoxVisible(false);
setCenter(settings);
setOnShown(e -> {
HBox rightBox = (HBox) settings.lookup(".secondary-graphic");
rightBox.setPrefWidth(60);
});
}
Another option is to override the default styling within your css file:
.settings-pane .options-grid > .option-row > .secondary-graphic {
-fx-pref-width: 60;
}