locked
Blend 3 silverlight application & website RRS feed

  • Question

  • Hi every body,

    In a first time excsue me for my bad english, and for my exellent skill to do misstake.

    Im designer, and i wanted to create a website with the expression suite.
    I have done my design on expression design, converted all my files to put it in blend 3 etc...

    And then first problem.
    I searching a lot of time to do a hyperlink button to navigate in the next page of the silverlight website.
    When i find the beautiful Usercontrol "HyperlinkAction" i fell really happy cause im tired to search for nothing.

    So i add this usercontrol to my button, i select the page i wan open up with this function, and then booom IE8 give me a beautiful 404 page.
    I don't know what apened, i don't understeand why he give me this error.

    Here you can find the XAML code of my test, can you see if i have something wrong?
    I also give you the texte of the IE8 error page, but sorry it is in French ^^^^ Mon dieu!!!

    XAML: MainPage.xaml

    <UserControl
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:ic="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions"
    	x:Class="SilverlightApplication12.MainPage"
    	Width="640" Height="480">
    
    	<Grid x:Name="LayoutRoot" Background="White">
    		<Button Height="63" HorizontalAlignment="Left" Margin="92,150,0,0" VerticalAlignment="Top" Width="164" Content="Button">
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="Click">
    					<ic:HyperlinkAction NavigateUri="test.xaml"/>
    				</i:EventTrigger>
    			</i:Interaction.Triggers>
    		</Button>
    		<TextBlock Height="81" HorizontalAlignment="Right" Margin="0,86,88,0" VerticalAlignment="Top" Width="207" Text="Page 1" TextWrapping="Wrap"/>
    	</Grid>
    </UserControl>
    (it's a simple page with a big button and a litle texte)

    My second page : test.xaml

    <navigation:Page 
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    	mc:Ignorable="d"
    	xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
    	xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:ic="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions"
    	x:Class="SilverlightApplication12.Page1" 
    	Title="Page1 Page"
    	d:DesignWidth="640" d:DesignHeight="480">
    
    	<Grid x:Name="LayoutRoot" >
    		<Rectangle Fill="White" Stroke="Black" Margin="-3,-2,0,0"/>
    		<Button Margin="111,166,298,222" Content="Button">
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="Click">
    					<ic:HyperlinkAction NavigateUri="MainPage.xaml"/>
    				</i:EventTrigger>
    			</i:Interaction.Triggers>
    		</Button>
    		<TextBlock Height="57" HorizontalAlignment="Right" Margin="0,56,162,0" VerticalAlignment="Top" Width="136" Text="Page 2" TextWrapping="Wrap"/>
    	</Grid>
    </navigation:Page>
    This page look like the other ;)

    And finaly, the error message :

     

    Erreur du serveur dans l'application '/'.

    La ressource est introuvable.

    Description : HTTP 404. La ressource recherchée (ou l'une de ses dépendances) a peut-être été supprimée ou renommée ou bien elle n'est plus disponible temporairement. Vérifiez l'URL ci-après et assurez-vous qu'elle est correcte.

    URL demandée: /test.xaml


    Informations sur la version : Version Microsoft .NET Framework :2.0.50727.4927; Version ASP.NET :2.0.50727.4927

    Can someone help me?

    Thanks a lot for your response
    Thursday, December 3, 2009 4:19 AM

All replies

  • Hi there!

    Silverlight is a bit different from a regular website. In asp.net (or plain html) you simply navigate between "pages" and those pages are served by the web server. In Silverlight, your pages are actually user controls. These user controls are your xaml files (or "pages"). They are all part of the same Silverlight application, and they are all bundled up together into a single delivery file (a xap file).

    When you visit a web page that hosts your Silverlight application, everything comes down to your browser together. In Silverlight version 2, you can't just jump between pages by specifying a new URI (as you are doing with the Hyperlink button). A xaml file is not directly addressable, and so you get the 404 error because the web server doesn't know what that is.

    Now, for the fun part: Navigation between "pages." In Silverlight version 2, you could navigate between pages by building an empty container page (maybe called Navigation.xaml), and when a user clicks a button or takes some action requiring a new page, your button handler sets the navigation page's Content property to one of your "real" pages. For instance:
     
    this.Content = UserEditForm; // UserEditForm is a xaml page

    Jesse Liberty has a blog post on this technique: http://blogs.silverlight.net/blogs/jesseliberty/archive/2008/05/31/multi-page-applications-in-silverlight.aspx.

    In Silverlight version 3, there's now a brand new Navigation Framework. You set up a "frame" control (similar to the dummy navigation page mentioned above). You can then navigate between xaml pages just like you were describing in your original question. First, add a frame and give it a name:


    <navigation:Frame x:Name="MyFrame" />

    Then in your Hyperlink buttons, set the desired page name in the Tag property, along with a common click event for all of your hyperlink buttons on the page. For instance, let's say you had a Silverlight page called UserEditForm.xaml, in a Views folder (a common pattern is to put your pages, or "views," in a separate folder in your project):

    <HyperlinkButton Tag="/Views/UserEditForm.xaml" Click="Navigate_click" />

    Finally, in your click handler, tell the frame to navigate to the xaml found in the Tag property of the button:


    private void Navigate_Click(object sender, RoutedEventArgs e)
    {
       HyperlinkButton button = sender as HyperlinkButton;
       var uri = button.Tag.ToString();
       this.MyFrame.Navigate(uri, UriKind.Relative));
    }

    I think this should give you the behavior you're looking for.

    Please let me know if this helps, or if you need more information.

    David
    Thursday, December 3, 2009 3:38 PM
  • Hi,

    Thanks a lot for your response.

    But I still have a problem, this time is note a code source probleme. And the second im a Big Noob in devellopment ^^

    I don't have Visual Basic installed on my computer, and I can't install it cause the price is very high.

    I use Expression Studio for my personal work no commercial so it's difficult to me to buy Visual Basic.

    I have try to install Microsoft Web Developer caus i know it's possible to develop some stuff in VB, I have install all the plugin for silveright for the compatibilty with Blend 3, but doesnt work.

    I have try to install the VB express edition too, with plugin as well, but stil not working...

    Can you tell me if I can have another way to Develop my application?

    Off course i don't wanna use illegal program ;)

    Thanks a lot for your help, i waiting to try your Behavior ;)
    Friday, December 4, 2009 8:53 PM
  • Well, I don't know if you can develop Silverlight applications with Express (you can definitely build a website though - start with the Express Web Developer edition).

    If you want to try the latest and greatest, download a free beta of Visual Studio 2010 - just google it or go to http://www.microsoft.com/visualstudio/en-us/products/2010/default.mspx . This beta works quite nicely and you can start building Silverlght applications. In fact, the beta is the "full" edition, so you will absolutely be able to build Silverlight applications.

    Please let me know if this helps!
    Saturday, December 5, 2009 3:57 AM
  • Hello Ickyaxe,

    As this is a different problem it is best to raise a new question which starts a new thread. I will have a go at answering here.

    The parts needed to do Silverlight development need to be installed in the correct order. You need Expression Studio 3 to do Silverlight 3 development. You may need to uninstall what you currently have (including Expression Studio) and start a fresh.

    For home development use this link http://silverlight.net/getstarted/ . The Web Platform installer will search your computer and will guide you through the install of Microsoft Web Developer and any other products and patches you need. You can then install the other tools needed for Silverlight development as per the link above including Expression Studio 3.

    Hope this helps

    regards

    Andrew

    Saturday, December 5, 2009 11:24 AM
  • Thank's for your respons,

    I have installed VB 2010 version, and now i can open my silverlight project directly with blend 3.
    So this problem are now resolved.

    But now i have try to integrate your XAML code to try your solution.

    But when i go to the designer view, i can't see anytihing, I have a message "XAML not valide", and i have another message "Frame n'est pas pris en charge dans un prjet silverlight" if y translate it's like "Frame can't be compatible in a silverlight project".

    Can you please send me a zip file with a litle exemple, like 2 buttons and 2 page, can i see how can i reproduct this?

    I still searching if I have news i tell you directly.

    Thanks a lot
    Saturday, December 5, 2009 8:55 PM
  • Hi,

    I have find the solution for create this HyperlinkButton, Thank you for your help.

    Here you can find the way to create this button.

    MainPage.xaml :

    <UserControl
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
    	x:Class="SilverlightApplication10.MainPage"
    	Width="640" Height="480">
    
    	<Grid x:Name="LayoutRoot" Background="White">
    		<HyperlinkButton Tag="/Views/Page1.xaml" Background="Black" Height="47" HorizontalAlignment="Left" VerticalAlignment="Top" Width="133" NavigateUri="/Page1.xaml" Cursor="Stylus" />
    		<navigation:Frame Margin="8,51,20,42"/>
    	</Grid>
    </UserControl>
    And Page1.xaml :

    <navigation:Page 
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    	mc:Ignorable="d"
    	xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
    	x:Class="SilverlightApplication10.Page1" 
    	Title="Page1 Page"
    	d:DesignWidth="640" d:DesignHeight="480">
    
    	<Grid x:Name="LayoutRoot" >
    		<navigation:Frame Margin="1,0,0,0">
    			<navigation:Frame.Background>
    				<SolidColorBrush Color="Black"/>
    			</navigation:Frame.Background>
    		</navigation:Frame>
    	</Grid>
    </navigation:Page>
    You don't need to edit any code on Visual Basic with this solution ;)

    But i have a question, how can I change the States of this hyperlink button, like a normal button. I mean, with a Normal button i can edit the design, like a small ball or other, and i can tell blend 3 to do some states effect on rollover etc...

    But with a Hyperlink Button I just can change color and size.
    Can I use a Brush or transform a simple image in a Hyperlink button?

    Thank's a lot for your help, i hope this can help other Noobs like me ;)
    Monday, December 14, 2009 6:06 AM