UWP NavigationView not lining up with titlebar back button - c#

I'm trying to line up my NavigationView with the back button that comes built into the window like so:
[]
but when i try to line up my NavigationView it ends up looking like
[]
How should i go about changing the width of the NavigationView so that it lines up with the back button?

The reason why the back button isn't aligned for you is that you're using the embedded back button in the title bar, which is deprecated now (as in, the MS guidelines suggest not to use it anymore, and to replace it with a dedicated back button in the app UI).
What you want to do is to set the IsBackButtonVisible property of the NavigationView to Visible, and use that back button instead to handle the navigation in your frame, or in other parts of your app.
To handle the back navigation request, you can just register to the BackRequested event in the NavigationView control.
Also, to hide the back button in the title bar, you just need to remove these couple lines in your code:
var currentView = SystemNavigationManager.GetForCurrentView();
currentView.AppViewBackButtonVisibility = AppViewBackButtonVisibility.Visible;

Related

Hide button text behind button image

Is there any method to hide a button text behind button image like bring to front or send to back option?
I only need to hide or show button image only as I have a code that coverts the original text CloseButton.text = "&Close"; to CloseButton.Text = "&Cancel";
to perform another command so I can't use CloseButton.Text = "";.
Tried this link - WinForms button with image and text but my button size is too small that it would only show the text and not the image no matter how I mix and match TextAlign and ImageAlign.
Any help is much appreciated. Thanks in advance.
Sample Button Size below:
Check this
Place Textbox in Button and set textbox.visible=false method
Is there any method to hide a button text behind button image like
bring to front or send to back option?
There is no such built in but you can simply clear out the text on click event of the controls. Example: if you have radio buttons for send to back then on click of that clear out the control text saying controlId.Text = string.Empty
As #Rotem posted in the comments.
Have your code behind use the Tag property rather than Text. Easiest way out is using properties for what they were made for.
Instead of using CloseButton.text = "&Close"; I changed it to CloseButton.Tag = "&Close"; and made my code worked around it to have the same function without placing an actual Text in my Buttons. Credit this asnwer to #Rotem. Thanks.

Template10 create on canvas back button

How to create on canvas back button for Template10?
I tried following the example but the back button is not showing.
It followed the information here btw:
https://github.com/Windows-XAML/Template10/wiki/Controls#navigation (overriding build in behavior section)
<Page x:Class="Controls.MainPage"
xmlns:controls="using:Template10.Controls">
<controls:PageHeader Frame="{x:Bind Frame}"
BackButtonVisibility="Visible"
Text="Detail" />
</Page>
When I navigate to the second page the back button is not showing. I wonder if I missed something here. I just wanted to show the back button in the canvas instead on the upper left corner in the app title. Thank you
To show the back button in the canvas instead on the upper left corner in the app title, you should be to set Bootstrapper.ShowShellBackButton to false. When the shell-drawn back button is visible, the PageHeader's on-canvas back button will not be visible.
If the back button in the canvas does not display, you should be able to check if the PageHeader bind to the context of the navigation stack. And if there is no page in the BackStack, the back button does not display.
For more info, please refer the Navigation.

Accessing SplitView control from a different page than it's host - C# XAML Windows 10 UWP

Pre-warning, I'm new to C# and XAML, but I'm really enjoying Windows 10 UWP apps. I've got a question on how to appropriately handle a SplitView.
I've got a Main Page, in which I have a SplitView control. In the SplitView Content, I've added a Frame for navigation to other pages. I want to add the Hamburger button on the child page to open the SplitView on the Main Page, but I can't access the SplitView control from the child page. How can I make the SplitView control accessible so that the hamburger button within the sub-page can open the SplitView pane?
The alternative is to add a header in the Main Page and have a static hamburger button there, but I don't like this option as it makes handling the text header content more difficult. Another is to copy the SplitView to each page. I don't want to do this either.
Any advice would be fantastic! Thank you.
I would highly recommend you take your alternative option of including the hamburger button in the main page. Users always expect it to be in the same location every time and changing this approach will probably result in a bad user experience.
You also don't want to be repeating code and thus you don't want to recreate the button on every page as well as any additional functionality like the open/close commands.
Rather than referencing elements from one page to another, a better practice is to keep things loosely coupled. This can be done with a messenger plugin which sends an event from one page to the other which can give it instructions on what you want to do. That way the other page only has to listen for the event instead of holding strong references. To streamline some of this process you could inherit from a base class which implements the messenger functionality.
That would provide a solution to your button and your header text situations but setting them up is out of the scope of this question. Depending on the size of you app and your goals, you might like to look into existing frameworks which helps in designing maintainable apps. A good Mvvm framework I would recommend checking out is MvvmCross which also cross platform and contains a messenger plugin.
Good luck with your app.
I found that solution :
In the MainPage, in your SplitView pane button method, add a SplitView reference as parameter in Navigate() :
private void SlitViewPaneButton_Tapped(object sender, TappedRoutedEventArgs e)
{
var frame = contentFrame;
Page page = frame?.Content as Page;
if (page?.GetType() != typeof(ChildPage))
{
frame.Navigate(typeof(ChildPage), SplitViewName);
}
}
In your ChildPage.xaml.cs :
protected override void OnNavigatedTo(NavigationEventArgs e)
{
SplitView sv = new SplitView();
sv = e.Parameter as NavigateControls;
}
You can now do sv.IsPaneOpen = false, in your ChildFrame code.
Note : if you want to pass several Controls, create a Class with these Controls as variables, and use an instance as parameter.
As stated above, it is better to keep your hamburger button in your main page for a couple of reasons. One is the consistency mentioned above. Second, you would have to recreate the hamburger button in each of your content pages instead of just once in the MainPage.xaml. Additionally, keep in mind, there are different kinds of interactions with the SplitView menu in terms of how it pops in and out and how it is displayed, all listed below.
Inline – When the menu pane is opened, it pushes the content over. When it’s closed, the content goes back to its original location
Overlay – When the menu pane is opened, it lays on top of the content. When it’s closed, it is invisible.
Compact Overlay – When the menu pane is opened, it lays on top of the content. When it’s closed, the pane is still visible in Compact Mode.
Compact Inline – When the menu pane is opened, it pushes the content over. When it’s closed, the content goes back to its original position but the pane is still visible in Compact Mode.
You can also see a quick intro into the SplitView here.
http://jamesqquick.com/windows-10-splitview-intro/

Create wizard some clarification

I want to create simple wizard with 3 pages
Page 1 have just next button
Page 2 have next and previous
Page 3 have previous and finish
I have created the pages and add to them needed buttons and in the events I have call to the next pages, for instance in page one in the button click I added the following code
private void Button_Click(object sender, RoutedEventArgs e)
{
p2 = new Page2();
NavigationService.Navigate(p2);
}
In the main window cs I have changed the inheritance to NavigationWindow instead of Window and in the xaml also. Currently its working but I have 3 questions.
The pages which displayed is part of the main window, how can i avoid it, since when I run it the buttons place is not like I put in the designer? It was changed.
The button currently in the Grid, should I put them in different control (the button place should be like any wizard in the left buttom of the page) ?
How can I avoid the navigation arrows in the page right upper screen?
Thanks!
To answer your questsions in reverse,
3. How can I avoid the navigation arrows in the page upper right screen?
I have an opensource library http://winchrome.codeplex.com/ that re-styles navigation windows in several ways. For example these are all NavigationWindow s
In short you just style the NavigationWindow to only show the parts you want.
2.The button currently in the Grid, should I put them in different control (the button place should be like any wizard in the left buttom of the page) ?
If you look at the styles from WinChrome then you will see that it is just a case of rebuiliding the UI as you want and providing a ContentPresenter to hold your pages. e.g. the VS2012 style applies lots of styles on the window but avoids adding back and forward buttons., whereas the Win7 style rebuilds the back and forwards in a Win7 Style.
If you do this however you will need a means of passing your enabled or visible states to the buttons outside the pages. Take a look at http://www.codeproject.com/Articles/8197/Designer-centric-Wizard-control for how to do this in Winforms. In WPF you could either derive from your Pages to create WizardPage classes with CanBack, CanNext or IsFinish properties, or alteratively define attached properties to do the same (There are examples of how to do this in VS2012.cs where we define the glow color)
And finally
1. The pages which displayed is part of the main window, how can i avoid it, since when I run it the buttons place is not like I put in the designer? It was changed.
I'd need to see some code to comment on how you've done it, but if you look at any of the demo programs in WinChrome then you can see how I've done it without problems.
Good luck!

Push Button (On/Off) in C# Windows Forms

On the Windows Form application I have a Lamp image (a black and white one, and a bright one. For OFF and ON respectively).
Using the Button how can I achieve the scenario such that same button will turn the property of the image (pictureBox in my case) to show the Lamp as ON and pressing the same button again will turn the Lamp off.
I am accessing the 'Visible' property of picture box.
Put two images on top of each other and get the button to switch which one of them is enabled.
In the form designer you make one of them visible and the other non-visible. The code in the button handler can then be something like:
lightImage.Visible = !lightImage.Visible;
darkImage.Visible = != lightImage.Visible;
That will swap which one is visible and eliminate the need to keep state elsewhere.
A bit late to the party, but you can use a checkbox and set the appearance to button.
I think that would do what is expected by the original post.
I'm not sure about the way to put 2 images over each other, but if you want to reach the same effect:
place the 2 image files in your project resources
in the click event of the button, toggle the button image depending on a setting:
this would be in the click event:
Properties.Settings.Default.IsOptimizedForTracer !=Properties.Settings.Default.IsOptimizedForTracer;
if (!Properties.Settings.Default.IsOptimizedForTracer)
{
btnOptimizeForTracer.Image = Properties.Resources.TracerOFF;
return;
}
btnOptimizeForTracer.Image = Properties.Resources.TracerON;

Categories

Resources