pass visible frame reference to settings flyout - windows-8

In my Windows 8 App, I have a Popup which displays when clicking a link on the charm bar. How do I pass the current applications visible frame to the the popup? I would like to display and do different things based on where they call the charms bar and open the settings.
To create my settings popup i do the following:
void onCommandsRequested(SettingsPane settingsPane, SettingsPaneCommandsRequestedEventArgs eventArgs)
{
UICommandInvokedHandler handler = new UICommandInvokedHandler(onSettingsCommand);
SettingsCommand generalCommand = new SettingsCommand("SettingId", "Setting", handler);
eventArgs.Request.ApplicationCommands.Add(generalCommand);
}
void onSettingsCommand(IUICommand command)
{
// Create a SettingsFlyout the same dimenssions as the Popup.
MyApp.Common.LayoutAwarePage mypane = new SettingsFlyout;
}

I think you can pass current frame as DataContext to popup.
var popup = new Popup();
popup.DataContext = this;

Related

Codename One Drag & Drop blackens dialog background

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.

Listener not working with Modal Dialog

My Intention - Create a frame, add a button. When clicked the button, a Modal Dialog appears with custom buttons and text fields. takes user input from this dialog. close the dialog and pass the value to frame controls.
Question - I successfully achieved this when I created a Modeless dialog, but this does not work with Modal dialog:
when used, modeless dialog, clicking OK button on dialog, passed the value to frame and closed the dialog. But when set the dialog to modal = true, OK button on dialog is not working
code I used:
JButton diabtn = new JButton("Dialog");
diabtn.addActionListener(new ActionListener(){
public void actionPerformed(ActionEvent ae){
final JDialog dialog = new JDialog((JFrame)null,"Dia Window",true);
dialog.setDefaultCloseOperation(JDialog.DISPOSE_ON_CLOSE);
dialog.setSize(350,200);
JLabel dialbl1 = new JLabel("Enter your name");
JButton diaok = new JButton("OK");
final JTextField diatxt = new JTextField(20);
diaok.setSize(60,60);
dialog.setLayout(new FlowLayout());
dialog.add(dialbl1);
dialog.add(diatxt);
dialog.add(diaok);
dialog.setVisible(true);
// adding listener for button on the dialog
diaok.addActionListener(new ActionListener(){
public void actionPerformed(ActionEvent ae){
String tempval = diatxt.getText();
lblDialogValue.setText(tempval);
dialog.dispose();
}
});
}
});
I'm no Java expert, but there is some corroboration for what you are saying: Code after the .setvisible() is only executed after the dialog is closed. See reference.

How to animate SettingsFlyout on dismiss

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

Context menu in windows 8 using Popup

Hi I am trying to create a context menu in windows 8 using Popup. On Right click of a button I am calling the following function
private async void UIElement_OnRightTapped(object sender, RightTappedRoutedEventArgs e)
{
PopupMenu popUpMenu = new PopupMenu();
popUpMenu.Commands.Add(new UICommand("File"));
Rect rect = GetRect(sender);
var result= await popUpMenu.ShowForSelectionAsync(rect, Placement.Right);
}
While defination for GetRect method is as follows:-
private Rect GetRect(object sender)
{
FrameworkElement element = sender as FrameworkElement;
GeneralTransform elementTransform = element.TransformToVisual(null);
Point point = elementTransform.TransformPoint(new Point());
Size size = new Size(element.ActualWidth, element.ActualHeight);
Rect rect = new Rect(point, size);
return rect;
}
Though the GetRect is returning correct value, but still i am getting result as null.
Please help
I can't figure out why you have this problems. On the first view, everything looks fine.
Maybe Tim Heuer Callisto package contains an easier approach for exactly what you want. See this example.
It's because you're not clicking on the File command, but instead clicking elsewhere on the page.

Force a view to refresh?

I'm trying to do a loading icon where once you tap on the icon, it will call the following handler:
private void refresh_btn_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
refresh_btn.Visibility = System.Windows.Visibility.Collapsed;
loading_icon.Visibility = System.Windows.Visibility.Visible;
refreshMix();
}
private void refreshMix()
{
...
refresh_btn.Visibility = System.Windows.Visibility.Collapsed;
loading_icon.Visibility = System.Windows.Visibility.Visible;
}
However, the view doesn't seem to auto-reload after I change the icon visibilities before calling refreshMix(). Is there a way to force the page to reload itself?
You are probably doing some lengthy work in refreshMix() in UI thread, right? Do this work in background thread and UI thread will be free to update page.
You need set Collapsed before Visible :
control.Visibility = System.Windows.Visibility.Collapsed;
control.Visibility = System.Windows.Visibility.Visible;
Within Silverlight there is no concept of page or view re-loading. When you change the properties of any visual element, this will be reflected on the screen the next time it is rendered.