Windows 8 appbar on selected item (like startup screen) - windows-8

What I want to achieve in my application is the same as what windows did on their start up screen. When you select an item, open the appbar and show more items. When you just open te appbar when not selecting anything, don't show those items.
So far so good and it works like I want it to be. But there is some issue I can't solve. When you select an item on the start up screen, you can't close te appbar when right clicking anywhere on the screen. You have to deselect the item.
I just can't figure out how to disable that right click to close the appbar. Because then I am in a state where I have a selected item, but no appbar. I don't want that...
Thanks in advance!

There is a property called IsSticky
this can be used to stop you appbar from collapsing.
the other option you have is to hooking into Closed event and force it to re-open.
Based on the screen you provided aka the Metro UI :) i'd say that create a page that just hosts other tiles.
I have done a similar thing in one of my apps, have a look at
http://apps.microsoft.com/windows/en-gb/app/cineworld/7adfde16-33c3-4b51-b758-00366325288d
Have a look at Coding4Fun or Callisto

Set the AppBar property IsSticky="true" and handle the event RightTapped on your GridView/ListView, and in the event handler set e.Handled = true;
This will stop the rightclick/swipe routed event from reaching Page and it won't close the AppBar.

You could override the hide() function of the appbar and replace it with something like this:
appBar.hide = function () {
/// <signature helpKeyword="WinJS.UI.AppBar.hide">
/// <summary locid="WinJS.UI.AppBar.hide">
/// Hides the AppBar, if visible, regardless of other state
/// </summary>
/// </signature>
// Just wrap the private one
var listView = document.getElementById("yourListView").winControl;
var count = listView.selection.count();
if(count <1)
this._hide();
}
It's not a great workaround, but it works like a charm :)

Related

VSCT: Place Search Textbox below the toolwindow toolbar

I have made a toolbar that has a Search Textbox, using the visual studio built in search for the toolwindowpane: https://learn.microsoft.com/pt-pt/previous-versions/visualstudio/visual-studio-2015/extensibility/adding-search-to-a-tool-window?view=vs-2015&redirectedfrom=MSDN
That is working just fine right now after overriding the methods, however i also added a toolbar to the toolwindow from the vsct file, however it is positioning the search and the toolbar in the same row:
Is there any way to position the search bar underneath the toolbar just like the solution explorer in visual studio? If not, is there a way to decrease the toolbar size so it uses the minimum space so it doesn't look weird like in the picture?
Thank you.
EDIT: Constructor of the class that inherits ToolWindowPane:
public CpcObjectsWindow() : base(null)
{
this.Caption = "CPC Objects";
// This is the user control hosted by the tool window; Note that, even if this class implements IDisposable,
// we are not calling Dispose on this object. This is because ToolWindowPane calls Dispose on
// the object returned by the Content property.
this.Content = new CpcObjectsWindowControl();
this.ToolBar = new CommandID(new Guid(CpcExtensionPackage.guidCpcExtensionPackageCmdSet), CpcExtensionPackage.cpcObjectsToolbar);
this.ToolBarLocation = (int)VSTWT_LOCATION.VSTWT_TOP;
}
I tried to add search to a tool window , a search control appears at the top of the tool window.
I tried to search form the ToolWindowPane Class but there is not any property can set the size of search bar. I think that you can submit a feature request on DC.

How to hide and show group of controls using Panel [duplicate]

I am designing a multipage windows form using panels.
I'm displaying a login form and validating the button click, and want to hide the login panel and show the main panel.
However, when I click the button, the login panel disappears alright, but the main panel does not appear. since there is nothing to display, the form window shrinks to just the minimize/maximize/close buttons.
Here's the code for the button:
private void btn_login_Click(object sender, EventArgs e)
{
if (pwdBox.Text == optopwd)
{
MessageBox.Show("Good Morning!!");
loginpanel.Visible = false;
mainpanel.Visible = true;
}
else MessageBox.Show("Incorrect password!");
pwdBox.Text = "";
}
Please let me know what I have missed/misunderstood. Thanks!
Edit:
Screenshots:
Login Screen:
http://img641.imageshack.us/img641/9310/loginscreenj.jpg
Empty window:
http://img163.imageshack.us/img163/1376/emptyx.jpg
The standard mistake is that you accidentally put the mainpanel inside the loginpanel. So when you make loginpanel invisible, the mainpanel can never become visible. This accident is common in the designer, it won't let you put two panels on top of each other. You fix it with View + (Other Windows) + Document Outline. Drag mainpanel and drop it on the form. You'll have to fix the Location property by editing it in the Properties window instead of moving the panel with the mouse.
An entirely different approach is to use a TabControl. Easy in the designer, you just need to hide the tabs at runtime. Code is here.
Or use two UserControls.
Looks like your for is automatically resizing. There are 2 properties on the form responsible for auto size:
AutoSize = True;
AutoSizeMode = GrowAndShrink;
If you have the above settings then your form would shrink just to control panel (buttons) if there's nothing else to display.
Let me know if that helps.
UPDATED
also... does your control "pwdBox" belong to main panel?
Two suggestions:
Try setting the height attribute to 100%
mainpanel.Height = 100%
If that doesn't work, ensure that the page isn't initializing with mainpanel.visible set to false on a postback.

How to have a div rather than a button for pivot link

I want to customize a PivotItem to make it close-able (kind of like browser tabs).
I provided a custom onRenderItemLink implementation do display an X icon on the right side of the tab, and an onClick method on that icon that will close the tab.
The main issue I'm facing is that this PivotItem is wrapped with a button (Pivot.Base.tsx renders a Commandbutton), that intercepts all onClick events on Firefox.
Firefox does not allow onClick events under a Button (this seems to be in accordance with the standard, so it's not considered a bug), so i can never close a tab on Firefox.
Is there any way to force Fabric UI to create a div rather than a button in this scenario?
Is there any other way to force a div there (some way to intercept what fabric ui creates and switch the button with a div)?
Advice appreciated.
Ended up closing the tab if the button was clicked on its right side
const clickX = clickEvent.pageX;
const buttonRight = clickEvent.currentTarget.offsetLeft + clickEvent.currentTarget.offsetWidth ;
if (buttonRight - clickX <= 40) {
removeTab(tab);
}

Custom context menu XAML for WP8

I try to implement a custom ContextMenu in a LongListSelector.
I'm not using the ContextMenu from Microsoft.Phone.Controls.Toolkit, it's basically the same as in the Rowi App:
(source: hiddenpineapple.com)
Approach 1
My list item toggles a VisualState on hold and an overlay is shown with controls in it.
The problem
I can't find a way to go back to the default state when the user clicks outside of the list item (as in the default ContextMenu).
Approach 2
I've implemented a custom template for the toolkit ContextMenu which looks exactly the same. I had to move its margin top to -itemHeight, as by default it is below the item.
The problem
The problem with this solution is, that it automatically closes itself when opening and I couldn't figure out how to avoid this.
Another problem was that it didn't work well with TiltEffect.IsTiltEnabled from the Toolkit (visual problems).
I need your help
Any suggestions on how to get this working?
Answer
Thanks to Cheese, now I know how to properly close the menu when the user clicks outside.
His suggestion was to get the coordinates of a Tap event on the current page, and check if it's inside the menu. When not, close the menu.
So I added a Tap listener to the page when the menu opens, and removed it when the menu closes. From the page listener I got the event coordinates and could check if it's inside the control which holds the menu (same size and position). I received the position of the control with Point leftUpperPoint = control.TransformToVisual(page).Transform(new Point(0, 0)) and the rightLowerPoint by adding the ActualWidth and ActualHeight.
But then I realized:
Why should I even calculate if the tap is inside the menu? I always want to close the menu when the user taps anywhere on the screen. If it's outside, yes. If it's on a menu button, yes.
Another modification I made was to listen for MouseLeftButtonDown instead of Tap as it also triggers when the user swipes.
So I removed this code and came up with the following:
private void ToggleMenu(object sender, System.Windows.Input.GestureEventArgs e)
{
PhoneApplicationFrame frame = ((PhoneApplicationFrame)Application.Current.RootVisual);
VisualState state = this.States.CurrentState;
if (state == null || state.Name == "DefaultState")
{
frame.MouseLeftButtonDown += MouseDownDelegate;
this.State = "MenuState";
}
else
{
frame.MouseLeftButtonDown -= MouseDownDelegate;
this.State = "DefaultState";
}
}
private void MouseDownDelegate(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
ToggleMenu(sender, null);
}
This works perfectly!
Thanks to Cheese for the hint.
Something like this by #denniscode http://dotnet.dzone.com/articles/rowi-show-tap-menu
Approach 1 problem
The best solution would be:
Get the menus coordinates, when user makes a tap - you check are tap coordinates on menu or not, if not - dissmiss - simple.
Approach 2 problem
I guess you had some button in a corner and when you tapped on it - nothing happened? And when you dissmissed the Tilt all worked. It seems that tilt works faster than a click, so, tilt changes the button coordinates, and device thiks you have missed/or dragged off
You can use what #ScottIsAFool suggested and maybe create another Dependency Property on your TapMenu control of type UIElement named CloseWhenTappedElement and automatically listen for Tap events inside your control once set. For example
<Grid x:Name="TapArea"/>
<TapMenu CloseWhenTappedElement="{Binding ElementName=TapArea"}/>

Dynamic content in User Control [Metro app, xaml]

I'm approaching to Metro App development in this days, so please be gentle.
I have created a User Control - some buttons and textblocks- that is loaded in every page of my app. I want the texblocks to change dynamically depending on the page selected: for example one of the texblocks of the user control is the page title. How can I accomplish this?
you can go for a simple code by finding the children of the usercontrol you are adding.
xaml code
xmlns:newPage="using:TestApp"
add the page like this in say mainpage.xaml:
<newPage:TestPage x:Name="pageNew"></newPage:TestPage>
then from code behind of the mainpage ie mainpage.xaml.cs
public mainpage(){
InitializeComponent();
var newPageContent = pageNew.Content; //here content will give u the immidiete children of usercntrl
}
Now you can type cast like
(Grid)newPageContent = pageNew.content;
var TextBlockFirst = newPageContent.children[0];
and so on :) please check if the suggestion is helpful :)