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.
Related
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;
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!
Im creating an app where the startpage is an login screen. When user enter their credentials and finally taps the login button an Progressindicator Dialog is being shown. The dialog is based on an Window Popup. The window and the indicator works like a charm but there is one problem. The indicator is wraping the content on the page. So if you for example entered the wrong credentials and tapped the login button the inticator will dissapear to give the user one more chance to enter their right credentials. But when the indicator dissapear the Rememember Me Checkbox position is changed, it's getting placed over the login button. It seems like the Indicator Dialog is wraping the content on the page. Im a pretty good css & html developer so i wonder if there are something like in css called z-index or is it possible to set the position of the checkbox to absolute so its position aren't based upon other elements position. I used this guide to make this indicator.
http://blogs.msdn.com/b/priozersk/archive/2010/09/20/creating-progress-dialog-for-wp7.aspx
Thanks
Problem solved. As i copied the sample code from the orginal project to my own there was a few variables that i had to change the value of to work with my project. Including the height and the width of the object and so on. Anyway, it works like a charm now.
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;
Did anyone ever try to create a jQuery "LightBox"-Like "Popup" (WPF UserControl) for displaying Images?
See this page for an example: http://www.huddletogether.com/projects/lightbox2/
Thanks!
Here is a site that appears to have done it, but it is only version 0.5 and might change dramatically before 1.0:
http://leandrovieira.com/projects/jquery/lightbox/#
This should be what you're looking for, and here is a sample of their code to implement:
$(function() {
$('#gallery a').lightBox({fixedNavigation:true});
});
I hope this helps,
Thanks!
EDIT:
Sorry that I didn't fully understand what you ment in version one of your question. Here is an updated answer (with code / source) to your question.
First I created a control that will act as a modal dialog box that grays everything out in the background. Then I added the ability to put a picture in there, with added ability to have a comment with each picture. Here are images of the final product:
First Image Loaded:
First Image Loaded http://img682.imageshack.us/img682/8941/firstpictureopen.jpg
Second Image Fading In:
Second Image Fading In http://img5.imageshack.us/img5/3172/secondpicturefading.jpg
Second Image Loaded:
Second Image Loaded http://img682.imageshack.us/img682/5404/secondpictureopen.jpg
I also added animations to resize the images like the Lightbox project does. I added the ability to have a forward and back buttons, accelerator keys, forward and back arrow control, and escape to exit. I think I've captured what you're looking for in this control.
As usual, I've uploaded the full source code to Google Code for your download.
The direct link to the zip file is here:
http://stackoverflow-answers-by-scott.googlecode.com/files/1755872.zip
I hope this helps,
Thanks!
Duplicating the functionality you linked to is absolutely trivial in WPF. Just:
Create a UserControl with a single ItemList property of type IEnumerable<ImageSource>
Add a Popup to the UserControl
Add a Grid to the Popup that lays out the LightBox the way you want, including panels for the Image, TextBlock, and Button
Add a StoryBoard that is triggered by the Loaded event that animates the changes.
Use an EventTrigger to set the Popup's IsOpen property to false when the button is clicked
Bind the Image.Source to {Binding ItemList/} to show the current item in the ItemList
Add a Background="Transparent" rectangle to each side of the Grid that runs code-behind to change the current item in ItemList
Optionally also repeat the BeginStoryboard when changing the current item