How to make a navigation in Expression Blend 4? - silverlight

So I created a layout in Expression Blend 4 for my Silverlight application. Now I need to create a simple navigation to navigate between pages. I have a canvas control in the layout (MainPage.xaml) and I would like the navigation buttons to just change the content of the canvas.
So if a user clicks on a navigation button for Page1.xaml, the Page1's content will be loaded into the canvas.
Could anybody give me an example how to do it? I tried using the MenuItem control but I could not understand how to use it. Now I have just used buttons but I don't know how to make a navigation from them.

I would love to be wrong about this but Im pretty sure, Blend 2,3,4 (the ones I have used)are just like windows form development your controls are not active until you actually build and run the application.
Sorry
Edit
To answer your comment the menuItem is a simple control that has been predefined like a button or link. The main idea with blend is to give developers and designers the ability to customize the look and feel of control layout in a similar way html uses CSS and javascript.

Try using "Hyperlink Buttons" for your menu and display the content in a "Frame" control.

Related

Display HTML in Boxlayout

I want to display HTML in my forms. The problem is I have to use a Boxlayout to place my components. So when I put a WebBrowser I'll have some height and scroll issues. I get the HTML I want to display from a webservice. The length of the content is variable. I just want to display a part of this response. Here is what I already have:
The webBrowser is below the edit button and ends near the LBL_LIB_NOM label.
As you can see the webBrowser is way too high and I can't scroll the Form when I click over the WebBrowser. In this example I would like to reduce the size of the WebBrowser so we can only see the Title. I also would like if possible to scroll my form when I click on the WebBrowser since I don't want the WebBrowser to scroll.
I have tried a few things to solve my issue:
I tried to override the calcPreferredSize method.
I revalidate my form and my webbrowser.
I resized it's container using the deprecated setPreferedSize method.
In that case the container is well sized but the the WebBrowser displays
above the other components.
The usual answer I have seen in other posts is to put the WebBrowser in a BorderLayout but I can't do that.
So here is my question: Is there any other component I can use to display one HTML line ? Or is there a way to make a webBrowser work properly in a boxLayout ? Do I have to write my own HTML renderer ?
I'm guessing you want box layout so you can scroll... This is problematic.
Web views generally expect to scroll themselves and this is common in native widgets which handle their own events and thus scrolling. It's hard for our code to know when your swipe is intended for us or to the underlying native widget and it's harder still to do this in a consistently portable way.
There are 3 options:
Use only Codename One code
Use a border layout or similar layout
Use the web browser for the entire UI of this form
If you want to take the first option this article might be useful as a starting point.

WPF Ribbon Navigation Buttons - How to use

If you create an empty WPF app, and replace the MainWindow.xaml with the following:
<ribbon:Ribbon xmlns:ribbon="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary" />
(Note the use of the Ribbon class, not RibbonWindow as is used in most tutorials on the subject.)
Then delete MainWindow.cs and run the app.
It will give you a nice looking window with IE like navigation buttons and under that, the actual ribbon bar.
How do I use those navigation buttons? I have found lots of info on the rest of the Ribbon Bar, but not the navigation buttons.
I have an app with has a navigation stack and I just need to be able to fire an event when the user clicks forward/backward so I can have the app navigate. And of course, I need to be able to enable or disable them depending on the navigation stack.
I have looked, but I don't see any property of the RibbonClass that exposes the buttons.
Navigation buttons are part of the navigation mechanics built into WPF since its Avalon times. They have nothing in common with Ribbon.
See details here:
https://learn.microsoft.com/en-us/dotnet/framework/wpf/app-development/navigation-overview
Well, after no responses here, and no luck Googling, I have come to the conclusion that the navigation buttons are not officially supported, and there are no properties exposing them. I went as far as searching through the source code which is available as part of the WPF Ribbon Download but I found nothing.
So am going to mark this as answered for now.

Making a Wizard in Silverlight + Xaml

I have a Silverlight application and I am trying to make each step of a wizard in XAML files, instead of hard-coded C#.
The problem is that I don't understand how I am going to switch between them after click on next button of each screen.
What is the best way to do this? I saw some tutorials on the internet about XAML dynamically loaded but none of them seem to work with me :/
Use a ChildWindow as your parent window. Then create multiple UserControls which will be framed in the content of the parent window. In the code-behind of the parent window, load the user controls into a list and set the visibility to 'Collapsed' for all of them but the first. When the user presses the Next/Prev buttons, pull the appropriate UserControl from the list (keep track of the current index) and make it 'Visible' while making the current control 'Collapsed'.
All of your navigation code will be in the parent window, but the parent window won't be concerned about the content of the wizard steps itself.
Each UserControl can be coded in XAML as a separate control so you still maintain a separation of the control from your wizards navigation logic.
You can then create a class type that will hold all of the options for the various wizard controls. Pass a reference to an object instance to each of the controls for them to update. When you get to the end of the wizard, your option object should maintain the state of all the wizard steps and the parent window can return that to the application.
I would suggest looking into the Silverlight Navigation Framework. It allows you to use "urls" to navigate between "pages" (which are your XAML user controls). It also also users to use the back and forth buttons in the browser, which may or may not be something you want to allow.
There is a VS 2010 template when you choose New Project, Silverlight, "Silverlight Navigation Application" that will help get you started.

silverlight animated UI

I am trying to put some tabs in the first page, and when mouse is over it, it should be bold and get larger, when click, it will direct to different page. Is it going to involve with JavaScript ? any tutorial for this ?
For the URL, you will want to read about The Silverlight Navigation Framework.
To make the URL go bold and get larger, you will want to use setup a MouseOverState VisualState Storyboard, as is done here: Style the MouseOver on a Silverlight/WPF button.

Display modal Silverlight popup on HTML button click

I have the following desired workflow: on HTML button click a Silverlight modal popup (dialog) must be displayed. No Silverlight content is displayed before HTML button click and no Silverlight content must be displayed after exiting from modal SL popup.
According to our customer inclination we couldn't use another technology for such popups.
Any thoughts on how to accomplish mentioned workflow?
I'm quite new to Silverlight so all the ideas are highly appreciated.
The requirement is a little unusual, but here goes...
I am assuming you have a Silverlight test project and know enough HTML/JScript to popup a window, as you tagged this question as Silverlight only.
Think of Silverlight as just another component you can put on a web page. Any web page. It can be a small control, or fill a HTML window.
In your case you want to simply put your Silverlight startup code into a html page that a popup window can show. The popup window will be triggered by JScript attached to a button.
The Silverlight startup code is usually generated for you in a HTML test webpage in your Silverlight Webproject. Copy it from there.
If you need more detailed instructions for a specific example, please provide more detail.

Resources