So for Android when the master page of a master-detail page is shown the master page is covered with a "black dim" view so it is easy to differentiate the two pages with the eye. In iOS the detail page is not dimmed so it is tougher to differentiate the views. Is there a way to overlay the details page with a BoxView or Frame that is "black translucent" so it dims the page in similar fashion to Android. I have tried many different colors and opacities of a box view but they all completely cover the screen and you can't "see through them". Any ideas? Or better solutions? Even if it is a customer renderer for the BoxView that will work. I just need color ideas/settings to make it see through.
Sample here:
https://github.com/jgold6/XamarinSupportSamples/tree/master/XForms-TestShadingiOSDetailPage
Here's the code in case the link ever breaks:
MasterDetailPage mdPage;
Color origContentBgColor;
Color origPageBgColor;
public App()
{
mdPage = new MasterDetailPage();
mdPage.IsPresentedChanged += async (object sender, EventArgs e) => {
if (Device.OS == TargetPlatform.iOS) {
if (mdPage.IsPresented) {
var currentPage = (DetailPage)((NavigationPage)mdPage.Detail).CurrentPage;
origPageBgColor = currentPage.BackgroundColor;
origContentBgColor = currentPage.Content.BackgroundColor;
currentPage.BackgroundColor = Color.Black;
currentPage.Content.FadeTo(0.5);
if (currentPage.Content.BackgroundColor == Color.Default) {
currentPage.Content.BackgroundColor = Color.White;
}
}
else {
var currentPage = (DetailPage)((NavigationPage)mdPage.Detail).CurrentPage;
currentPage.BackgroundColor = origPageBgColor;
currentPage.Content.BackgroundColor = origContentBgColor;
currentPage.Content.FadeTo(1.0);
}
}
};
mdPage.Master = new MasterPage(){Title = "Master Page"};
mdPage.Detail = new NavigationPage( new DetailPage());
// The root page of your application
MainPage = mdPage;
}
I just changed the order of FadeTo() method to be the last command and the dark black effect is gone!
await currentPage.Content.FadeTo(0.5);
Related
When I run my code scroll bars coming as disabled. I want to enabled it with fixed size. I am referring to this example and I have added ScrolledCompisite code in the creatContenyArea method. Appreciate suggestion on how to fix this thanks.
#Override
protected Composite createContentArea(Composite parent) {
ScrolledComposite sc = new ScrolledComposite(parent, SWT.H_SCROLL
| SWT.V_SCROLL);
sc.setMinSize(100, 100);
sc.setExpandHorizontal(true);
sc.setExpandVertical(true);
sc.setBackground(parent.getDisplay().getSystemColor(SWT.COLOR_INFO_BACKGROUND));
sc.setAlwaysShowScrollBars(true);
Composite comp = super.createContentArea(sc);
comp.setBackground(parent.getDisplay().getSystemColor(SWT.COLOR_INFO_BACKGROUND));
FillLayout layout = new FillLayout();
layout.marginWidth=5;
parent.getShell().setLayout(layout);
Link l = new Link(comp,SWT.NONE);
l.setText(
"This a custom tooltip you can: \n- pop up any control you want\n- define delays\n - ... \nGo and get Eclipse from <a>http://www.eclipse.org</a>");
l.setBackground(parent.getDisplay().getSystemColor(SWT.COLOR_INFO_BACKGROUND));
l.addSelectionListener(new SelectionAdapter() {
#Override
public void widgetSelected(SelectionEvent e) {
openURL();
}
});
sc.setContent(comp);
return comp;
}
I want to control the TabPane and switch tabs with a Canvas, basically hide the tab headers and use canvas instead, the canvas displays different "Devices" and when user click on the device, the TabPane switch to show the content of that device.
fun canvasFlow_Click(mouseEvent: MouseEvent) {
val d = flowPresenter.click(mouseEvent)
if (d != null) {
flowPresenter.select(d)
logger.info("switch to ${d.position}")
tab.selectionModel.clearSelection()
tab.selectionModel.select(d.position)
}
}
Why select doesn't work? I don't see tab content changed. from log, I see "switch to 1", "switch to 2" correctly, just the tab doesn't switch! Why?
Note: this is plain javafx and might not be the exact solution in your case (hard to tell without example) - but actually I can reproduce the described behavior.
The problem seems to be calling clearSelection: TabPane with tabs should have exactly one selected tab - which is not specified. But every internal collaborator (skin, header, listener) goes to great lengths to guarantee that constraint - this assumption was wrong, in fact the skin gets confused if the selection changes to empty - the previously selected content is not removed. Might be a bug, either don't allow the selectionModel to be empty or improve the skin to cope with it (wondering how that would be supposed to look - hide the content?)
Anyway, here the solution is to not call that method before manually selecting a tab. There's no need to do so anyway, it's a SingleSelectionModel so takes care of allowing at most one item selected.
An example: un/comment the clearSelection and see how the content is not/ correctly updated with/out the call.
public class TabPaneSelection extends Application {
private Parent createContent() {
TabPane pane = new TabPane();
HBox headers = new HBox();
for (int i = 0; i < 3; i++) {
int index = i;
Tab tab = new Tab("header " + i, new Label("content " + i));
pane.getTabs().add(tab);
Button button = new Button(tab.getText());
button.setOnAction(e -> {
// do __not__ clear selection
//pane.getSelectionModel().clearSelection();
pane.getSelectionModel().select(index);
});
headers.getChildren().add(button);
}
BorderPane content = new BorderPane(pane);
content.setTop(headers);
return content;
}
#Override
public void start(Stage stage) throws Exception {
stage.setScene(new Scene(createContent(), 400, 300));
//stage.setTitle(FXUtils.fxVersion());
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
I'm developing an app that uses drag & drop operations. The drag & drop part includes four containers as drop targets and two draggable labels.
The app works as expected in the simulator, but when I install it on my Android phone, the background of the dialog (otherwise white) turns black for a swift moment as soon as the draggable components (labels) are released (then gets back to the original light color).
In the theme builder, I have set the background of the dialog to an almost white color (unselected, selected, pressed, disabled), but that doesn't show any effect.
Is there any turnaround to keep the background color stable? Any help would be appreciated.
Here is the relevant code excerpt:
Dialog dialog_W1 = new Dialog();
dialog_W1.setScrollableY(true);
dialog_W1.setLayout(new BoxLayout(2));
dialog_W1.setScrollableY(true);
dialog_W1.setTitle("Acerte o bichinho");
Image img_Cat = Image.createImage("/cat.png");
ScaleImageLabel label_Scaled_Image = new ScaleImageLabel(img_Cat);
label_Scaled_Image.setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FIT);
label_Scaled_Image.setUIID("NewLabel");
Label label_1 = new Label("ga");
Label label_2 = new Label("to");
label_1.setUIID("LabelWord");
label_2.setUIID("LabelWord");
label_1.setDraggable(true);
label_2.setDraggable(true);
Container c_1 = new Container();
Container c_2 = new Container();
Container c_3 = new Container();
Container c_4 = new Container();
c_1.setDropTarget(true);
c_2.setDropTarget(true);
c_3.setDropTarget(true);
c_4.setDropTarget(true);
c_1.setLayout(new BoxLayout(2));
c_2.setLayout(new BoxLayout(2));
c_3.setLayout(new BoxLayout(2));
c_4.setLayout(new BoxLayout(2));
c_1.setUIID("Container_1");
c_2.setUIID("Container_1");
c_3.setUIID("Container_2");
c_4.setUIID("Container_2");
c_3.add(label_2);
c_4.add(label_1);
GridLayout gl = new GridLayout(2,2);
Container container_0 = new Container(gl);
container_0.add(c_1);
container_0.add(c_2);
container_0.add(c_3);
container_0.add(c_4);
ArrayList <Container> list_Containers = new ArrayList<>();
list_Containers.add(c_1);
list_Containers.add(c_2);
list_Containers.add(c_3);
list_Containers.add(c_4);
ArrayList <Label> list_Labels = new ArrayList<>();
list_Labels.add(label_1);
list_Labels.add(label_2);
for (Label label : list_Labels) {
label.addDragOverListener(new ActionListener() {
#Override
public void actionPerformed(ActionEvent e) {
for (Container c : list_Containers) {
int int_C = c.getComponentCount();
if (int_C == 1) {
c.setDropTarget(false);
} else if (int_C == 0) {
c.setDropTarget(true);
}
}
}
});
}
I suggest showing the Dialog as a modless dialog instead of using the show method use showModless() or similar.
Odd things like this can happen because of the EDT nesting inherent in modal dialogs, normally we don't recommend using dialog for anything more than simple notifications. When we use drag and drop from a dialog like component we use InteractionDialog.
Does anybody know how to move content of the page (maybe set relative margins or something like that) when soft keyboard is shown.
Here is the example page from my application.
So I want when the user starts typing a phone number in the text box the bottom button will be shown above the soft keyboard. As a result I want something like that:
P.S: Sorry about Russian language on the screens.
It's kind of tricky, but as I've tried should work. I've used InputPane's showing and hiding events to change the translate transform of the button. In page's constructor I've added such code:
Windows.UI.ViewManagement.InputPane.GetForCurrentView().Showing += (s, args) =>
{
GeneralTransform gt = loginButton.TransformToVisual(this);
Point buttonPoint = gt.TransformPoint(new Point(0, loginButton.RenderSize.Height - 1));
var trans = new TranslateTransform { Y = -(buttonPoint.Y - args.OccludedRect.Top) };
loginButton.RenderTransform = trans;
args.EnsuredFocusedElementInView = true;
};
Windows.UI.ViewManagement.InputPane.GetForCurrentView().Hiding += (s, args) =>
{
var trans = new TranslateTransform { Y = 0 };
loginButton.RenderTransform = trans;
args.EnsuredFocusedElementInView = false;
};
You only have to remember that InputPane is for the whole app - once you leave the page, you will probably have to unsubscribe from those events, otherwise you will likely get exceptions.
In Windows 8.1, I'm using the new SettingsFlyout control. The flyout animates in correctly and will animate out if you use the control's built-in back button to return to the Settings Charm flyout. But if you light dismiss by clicking outside the flyout, it disappears without a transition animation.
How do you animate a transition out when you light dismiss the SettingsFlyout? (I don't want to return to the Settings Charm flyout, I just want it to slide out on a light dismiss.)
Matt, what you want to do should be easily achievable but is currently not supported by the XAML SettingsFlyout API out of the box. As Jerry points out, there are transitions that allow an animate out effect (in XAML you want EdgeUIThemeTransition). Unfortunately, there is no API support on SettingsFlyout to add this transition, but you can get it to work using your own private popup to host the SettingsFlyout (more on this below):
public sealed partial class SettingsFlyout1 : SettingsFlyout
{
Popup _p;
Border _b;
public SettingsFlyout1()
{
this.InitializeComponent();
BackClick += SettingsFlyout1_BackClick;
Unloaded += SettingsFlyout1_Unloaded;
Tapped += SettingsFlyout1_Tapped;
}
void SettingsFlyout1_BackClick(object sender, BackClickEventArgs e)
{
_b.Child = null;
SettingsPane.Show();
}
void SettingsFlyout1_Unloaded(object sender, RoutedEventArgs e)
{
if (_p != null)
{
_p.IsOpen = false;
}
}
void SettingsFlyout1_Tapped(object sender, TappedRoutedEventArgs e)
{
e.Handled = true;
}
public void ShowCustom()
{
_p = new Popup();
_b = new Border();
_b.ChildTransitions = new TransitionCollection();
// TODO: if you support right-to-left builds, make sure to test all combinations of RTL operating
// system build (charms on left) and RTL flow direction for XAML app. EdgeTransitionLocation.Left
// may need to be used for RTL (and HorizontalAlignment.Left on the SettingsFlyout below).
_b.ChildTransitions.Add(new EdgeUIThemeTransition() { Edge = EdgeTransitionLocation.Right });
_b.Background = new SolidColorBrush(Colors.Transparent);
_b.Width = Window.Current.Bounds.Width;
_b.Height = Window.Current.Bounds.Height;
_b.Tapped += b_Tapped;
this.HorizontalAlignment = HorizontalAlignment.Right;
_b.Child = this;
_p.Child = _b;
_p.IsOpen = true;
}
void b_Tapped(object sender, TappedRoutedEventArgs e)
{
Border b = (Border)sender;
b.Child = null;
}
}
Full solution for this sample: https://github.com/finnigantime/Samples/tree/master/examples/Win8Xaml/SettingsFlyout_AnimateOut
I think SettingsFlyout should have API support for your scenario, so I filed a work item on the XAML team. In the future, such requests/issues can be raised on the MSDN forum as well (moderated by MSFT folks). The limitation here is that SettingsFlyout is implemented on top of Popup with IsLightDismissEnabled="True", and the light-dismiss event currently closes the Popup immediately without allowing unloading child transitions to run. I think this can be overcome and transitions can be supported at the SettingsFlyout API level to enable your scenario.
You need to use the HideEdgeUI animation
Read this: http://msdn.microsoft.com/en-us/library/windows/apps/jj655412.aspx