locked
Is it possible to convert SketchFlow app into WPF application? RRS feed

  • Question

  • Is it possible to create SketchFlow applicatin and convert it to WPF app?

    I had run into couple description how to do this - but none of them actually work (or at least produces result I'd expecting).

    I'd created SketchFlow APP and 

    For example, I'd followed these steps:

    (I cannot use link in this post for whatever reason, but searching for this string will return the link as a first result) 

    Convert into a production project

    if I open resulting project in VS2013, and run it, it launches screen inside the player  - not a application window. Am I missing something? are there other steps?

    Thursday, January 9, 2014 9:17 PM

All replies

  • The instructions you found in the help should work fine, but all of the steps must be followed, can you double check that you did them all? I can help you complete them if you are having trouble after checking, if you can share the project.
    Friday, January 10, 2014 2:36 PM
    Moderator
  • Chuck, thank you replay.

    I repeated all steps exactly as it is proposed in the article (see subtle differences between what I saw and steps below)

    I can load the project in Visual Studio - but what I am running it - it is launched in some kind of a container (with some greyed out panel with arrows at the top). I was expecting start screen to become a MainWindow - in reality it is a user control. Can I convert this to the normal window?

    Am I missing something? Is there a tutorial/book/help that explain this process - converting sketch work in Blend into the WPF application?

    To rephrase this - when I create Blend SketchFlow I do have a starting screen - and I expect this to be something corresponding to MainWindow in case I am starting the WPF project in Visual studio. In a project converted from Blend App.xaml.cs contains startup.uri which calls the package that points to my screen and its .xaml,

    @"pack://application:,,,/WpfPrototype2.Screens;Component/Screen_1.xaml");

    in a project created in VS App.xaml contains startup.uri which calls the Windows.xaml.

    StartupUri="MainWindow.xaml"

    I guess there is something I am missing to bridge the gap.

    Differences:

    My App.xaml contains:

    public partial class App : Application
     {
      public App()
      {
       this.Startup += this.App_Startup;
      }
    
      private void App_Startup(object sender, StartupEventArgs e)
      {
       this.StartupUri = new Uri(@"pack://application:,,,/Microsoft.Expression.Prototyping.Runtime;Component/WPF/Workspace/PlayerWindow.xaml");
      }
     }
    

    in instructions:

    this.Startup += (sender, args) => this.StartupUri = new Uri(@"pack://application:,,,/ Microsoft.Expression.Prototyping.Runtime;Component/WPF/Workspace/PlayerWindow.xaml");

    Replace it with the following code:

    this.StartupUri = new Uri(@"pack://application:,,,/MyProject.Screens;Component/MyFileName.xaml");

    Instead of "The project has no start up scene"

    I have"The start page has not been specified..."

    Friday, January 10, 2014 10:58 PM
  • Sorry if I am asking the obvious, but in this line:

    this.StartupUri = new Uri(@"pack://application:,,,/MyProject.Screens;Component/MyFileName.xaml");

    Did you replace MyProject.Screens with your project name, and MyFileName.xaml with the screen you want displayed first?

    Saturday, January 11, 2014 12:13 AM
    Moderator
  • Yes

    this.StartupUri = new Uri(@"pack://application:,,,/WpfPrototype2.Screens;Component/Screen_1.xaml");

    Saturday, January 11, 2014 12:39 AM
  • Do you get an error when you build or when you run? I ran through these steps in a new project and it worked:

    1. Remove the 2 capability flags from both .csproj files
    2. Removed the reference to the .Runtime.dll file
    3. Changed the StartupUri line similar to what you did

    this.StartupUri = new Uri(@"pack://application:,,,/WpfPrototype2.Screens;Component/Screen_1.xaml");

    Saturday, January 11, 2014 1:10 AM
    Moderator
  • When you ask whether I got am error - what do you mean?

    I did all these steps I can run. My question how I can convert it to WPF application?


    • Edited by O'Leg Saturday, January 11, 2014 1:15 AM
    Saturday, January 11, 2014 1:14 AM
  • Can you share a screenshot of what you got?
    Saturday, January 11, 2014 1:15 AM
  • Oh, sorry, it is a WPF application, those steps remove the SketchFlow "player" framework so it runs as a standalone WPF app.

    Is something not working as expected?

    Saturday, January 11, 2014 1:16 AM
    Moderator
  • It does not look like stand alone app. It looks like the screen ran from some kind of packager.

    I already explained what I'd expected:

    I can load the project in Visual Studio - but what I am running it - it is launched in some kind of a container (with some greyed out panel with arrows at the top). I was expecting start screen to become a MainWindow - in reality it is a user control. Can I convert this to the normal window?

    Am I missing something? Is there a tutorial/book/help that explain this process - converting sketch work in Blend into the WPF application?

    To rephrase this - when I create Blend SketchFlow I do have a starting screen - and I expect this to be something corresponding to MainWindow in case I am starting the WPF project in Visual studio.

    Saturday, January 11, 2014 1:21 AM
  • Saturday, January 11, 2014 1:21 AM
    Moderator
  • The conversion process converts your SketchFlow app into a navigation based WPF app. You can disable the grey bar with the navigation arrows, or you can leave them and use them to navigate the way the SketchFlow project did originally, and any click navigation behaviors you had should work as well.

    If you want to go further, you can create a new wpf project (that would have MainWindow.xaml) and reference your controls assembly (the screens project) and re-use the screens/UserControls you have made.

    Saturday, January 11, 2014 1:23 AM
    Moderator
  • YES! This is not a regular WPF application. What is this band at the top of the screen?

    I guess your project ode not have MainWindow...


    • Edited by O'Leg Saturday, January 11, 2014 1:24 AM
    Saturday, January 11, 2014 1:24 AM
  • How do I reuse Screen? I assumed it becomes a MainWindow during the conversion.

    Can you provide me with an example of the Start Screen being reused as a starting point of the WPF applicaiton?

    • Edited by O'Leg Saturday, January 11, 2014 1:32 AM
    Saturday, January 11, 2014 1:32 AM
  • How do I disable the band with an arrows?
    Saturday, January 11, 2014 1:33 AM
  • See this page for info about navigation based apps:

    http://msdn.microsoft.com/en-us/library/ms750478(v=vs.110).aspx

    They are regular WPF apps, they just start with some extra Chrome that be removed (the grey bar with buttons).

    Screens are just UserControls, so you can re-use them by referencing the built dll or the .csproj in another WPF project. For example, create a new WPF app, and add the Screens project to your new solution, then add a project reference from the new WPF project to the added screens project. Build, and then you can create the screens/controls from the asset pane in Blend.

    Saturday, January 11, 2014 1:34 AM
    Moderator
  • Just saw your edit. If you do what I suggested above with new project and reference, you can then create an instance of your Screen_1.xaml user control in MainWindow.xaml.
    Saturday, January 11, 2014 1:35 AM
    Moderator
  • I think simple example would help

    So, I have a project created in Blend. I make a conversion. open it in VS.

    Create a "normal" WPF application.

    Make a reference to the Screens project out of 2 projects created by Blend.

    How d I make a Screen which was my start screen in Blend the staring point of my application? can you provide an exmple of XAML (C#?) code?


    • Edited by O'Leg Saturday, January 11, 2014 1:52 AM
    Saturday, January 11, 2014 1:45 AM
  • After you build, create an instance of Screen 1 on MainWindow.xaml.

    Or if you want to just disable the grey bar, something like this would do it:

    public partial class Screen_1 : UserControl
    	{
    		public Screen_1()
    		{
    			this.InitializeComponent();
                this.Loaded += Screen_1_Loaded;
    		}
    
            void Screen_1_Loaded(object sender, RoutedEventArgs e)
            {
                var w = Window.GetWindow(this) as NavigationWindow;
                w.ShowsNavigationUI = false;
            }
    	}

    Saturday, January 11, 2014 2:19 AM
    Moderator