locked
Questions regarding presenting content RRS feed

  • Question

  • Hello everyone.

    I am looking for help regarding the presentation of content. I am currently making a GUI for a project in school, which is designed to act like a panel to your smart-home, allowing you to control different functions in your home. I have made a bogus blueprint that is supposed to show the status of current rooms, with text showing at what percentage the lights are on and so on and so forth. I want to make each of the rooms clickable, bringing up a new menu with options and sliders. These values, however, are then to be projected onto the blueprint again.

    For example, one room should read "Living Room, Lights 75% - On" or something like that. when clicked, they will bring up a new screen where I can adjust the values. when going back, the new values should be presented on the room.

    I'm sorry if I'm being unclear, if so just ask away; English isn't my first language.

    Regards and hopes for help!

    Monday, February 13, 2012 4:57 PM

Answers

  • Looks like a very nice and very fun project so far.

    I've created a sample and downloaded it to my SkyDrive.  It makes use of databinding, a numberRounder converter file and 2 screens.

    You can take a look at it here:  https://skydrive.live.com/?cid=513b70517e544edb#cid=513B70517E544EDB&id=513B70517E544EDB%21131 

    It is the SilverlightPrototype1 zipped folder.

    But basically I created a new dataStore with one property.

    I renamed that property myNumber and by clicking the "Edit Data Store Values" I then changed it from a string to a number.

    I added the NumberRounder.cs file, to round the numbers.

    I bound the first page to myNumber in the dataStore.

    <textblock Text="{Binding myNumber, Converter={StaticResource NumberRounder}}" TextAlignment="Right" TextWrapping="Wrap" x:Name="numberDisplay"></textblock>

    By clicking that number on the first screen it will take you to the second screen where the slider is.

    I bound that slider like this...

    <slider HorizontalAlignment="Center" Margin="0,0,0,8" Maximum="100" Value="{Binding myNumber, Mode=TwoWay}" VerticalAlignment="Bottom" Width="200"></slider>

    I made it "TwoWay" so that when you change the slider value it updates the dataStore.

    Hope that gets you started.

    Best of luck with your project!

    ~Christine


    Monday, February 13, 2012 8:02 PM
  • Well you need to change the namespace to the namespace of your project...

    using System;
    using System.Windows.Data;
    
    namespace SilverlightPrototype1Screens
    {
    	public class NumberRounder : IValueConverter
    	{
    		#region IValueConverter Members
    
    		public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    		{
    			double d = Math.Round(System.Convert.ToDouble(value));
    				return d;
    		}
    
    		public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    		{
    			throw new NotImplementedException();
    		}
    
    		#endregion
    	}
    }

    However, I suspect you already did that.  So try going to Project > Clean and then Project > Rebuild.

    If that still does not work... I would delete the converter bindings, remove the C# file, Clean and Rebuild the Project.  Then add my own New Item > Class and paste the above code with my namespace.  Clean and Rebuild the project again and then try to do my bindings.

    You could spend hours trying to figure out why Blend is being stubborn or just start from scratch with the converter and save the headache. :)

    Hope you get it worked out easily and quickly.

    ~Christine

     
    Tuesday, February 14, 2012 9:57 PM

All replies

  • What have you created so far? Are particular areas giving you trouble? Are you looking for advice on particular areas, or are you looking for more general knowledge/tips on using Blend to create an interface?
    Monday, February 13, 2012 5:15 PM
  • I have created a dummy interface. So far, it has the basic navigation scheme set up - i.e, I can navigate to the proper subscreen (blueprint-page)
    I need to know how to present the rooms ( areas) with information by making it clickable like a button , and navigating to the next subscreen, where these values can be changed.

    Do you kind of get the jist of what I mean? :)
    Monday, February 13, 2012 5:27 PM
  • Is this doable?
    Monday, February 13, 2012 5:33 PM
  • So far, I've collected that you need to use databinding. How, is another question. This is where you come in, althoigh this forum doesn't seem to be of much help. :(
    Monday, February 13, 2012 6:44 PM
  • Since you referred to Screens I am assuming you are working in a Silverlight Sketchflow project.  Is this correct?

    If so, in your Assets panel you will find "NavigateToScreenAction" behavior.  Click that and drag it onto your button.

    On the right side of your screen in your property panel you will see Trigger and Common Properites.

    Set the EvenName to "click" and the TargetScreen to the screen you want to go to.

    As far as the forums go, there are tools at the top when you post that you can provide screen shots and code.  Making use of those helps the people answering to better understand what your goal is.

    ~Christine

    Monday, February 13, 2012 6:58 PM
  • Are you by chance asking how to pass data back and forth between screens?

    If so, since this is a mock-up project, you could make use of the DataStore feature in blend.

    There is an exampler here that was done for a WPF project, but it is the same concept:

    https://skydrive.live.com/?cid=513b70517e544edb#cid=513B70517E544EDB&id=513B70517E544EDB%21131

    It is the WprPrototype project.

    ~Christine

    Monday, February 13, 2012 7:07 PM
  • Thanks for your help Christine!

    I will try to illustrate what I mean by showing two screen shots.

    I want the *DATA* fields to be manipulable on my next screen;


    This has to be possible, right? How could one do that?

    Monday, February 13, 2012 7:19 PM
  • If i use the slider, a value between 0 and 100 is supposed to show up in the MODIFY DATA box. this value will be carried over to the first screen. How do I do that?
    Monday, February 13, 2012 7:40 PM
  • Looks like a very nice and very fun project so far.

    I've created a sample and downloaded it to my SkyDrive.  It makes use of databinding, a numberRounder converter file and 2 screens.

    You can take a look at it here:  https://skydrive.live.com/?cid=513b70517e544edb#cid=513B70517E544EDB&id=513B70517E544EDB%21131 

    It is the SilverlightPrototype1 zipped folder.

    But basically I created a new dataStore with one property.

    I renamed that property myNumber and by clicking the "Edit Data Store Values" I then changed it from a string to a number.

    I added the NumberRounder.cs file, to round the numbers.

    I bound the first page to myNumber in the dataStore.

    <textblock Text="{Binding myNumber, Converter={StaticResource NumberRounder}}" TextAlignment="Right" TextWrapping="Wrap" x:Name="numberDisplay"></textblock>

    By clicking that number on the first screen it will take you to the second screen where the slider is.

    I bound that slider like this...

    <slider HorizontalAlignment="Center" Margin="0,0,0,8" Maximum="100" Value="{Binding myNumber, Mode=TwoWay}" VerticalAlignment="Bottom" Width="200"></slider>

    I made it "TwoWay" so that when you change the slider value it updates the dataStore.

    Hope that gets you started.

    Best of luck with your project!

    ~Christine


    Monday, February 13, 2012 8:02 PM
  • Thanks alot Christine - really great help. I will dig this goldmine dry!
    Monday, February 13, 2012 9:13 PM
  • It did it Christine, thanks alot! Is there a way to call the Math.Round method instead of using the NumberRounder? Will try implementing NumberRounder for now.
    Monday, February 13, 2012 10:29 PM
  • There is...

    On Screen 1 remove the binding to the converter so that it looks like this...

    <textblock Text="{Binding myNumber}" TextAlignment="Right" TextWrapping="Wrap" x:Name="numberDisplay"></textblock>

    On Screen 2 add an event to the "ValueChanged" for your slider bar...

    <slider HorizontalAlignment="Center" Margin="0,0,0,8" Maximum="100" Value="{Binding myNumber, Mode=TwoWay}" ValueChanged="setValue" VerticalAlignment="Bottom" Width="200"></slider>

    I called it "setValue".

    Now in your code behind file for Screen 2 you would need to add 2 using statements and the "setValue" method...

    using System;
    using System.Windows.Controls;
    using Expression.Blend.DataStore.DataStore;
    
    namespace SilverlightPrototype1Screens
    {
    	public partial class Screen_2 : UserControl
    	{
    		public Screen_2()
    		{
    			InitializeComponent();
    		}
    
    		private void setValue(object sender, System.Windows.RoutedPropertyChangedEventArgs<double> e)
    		{
                double a = Math.Round(DataStoreGlobalStorage.Singleton.myNumber);
                DataStoreGlobalStorage.Singleton.myNumber = a;			
    		}
    	}
    }</double>

    Using the ValueConverter though is nice for not having to write that code for every screen.

    Just remember, my way is by no means the right way or the only way... :) it seldom is.

    Have a great night!

    ~Christine

    I am uploading the revised project to SkyDrive now.

    LOL  ...   apparently I'm seeing double... You would need to add 1 using statement.  the    using Expression.Blend.DataStore.DataStore;

    Monday, February 13, 2012 11:20 PM
  • NumberRounder seems better, but importing it and using the
    Converter={StaticResource NumberRounder}
    snippet gives me compiling errors. I don't know why, cause it's imported into my project, but it doesn't seem to recognize the resource..
    Tuesday, February 14, 2012 8:43 PM
  • <local:NumberRounder x:Key="NumberRounder"/> does not exist in the namespace clr-xxxx.... I googled it last night and I didn't get any valuable information. anyone know ?
    Tuesday, February 14, 2012 8:56 PM
  • Given you're using the namespace "local", I assume you're wanting to point this at your current project. In the XAML for your file, how do you have the namespace "local" defined? If I were creating a reference to my application called "MyApplication", it would look like this:

    xmlns:local="clr-namespace:MyApplication"
    • Proposed as answer by Christine L. _ Tuesday, February 14, 2012 10:03 PM
    Tuesday, February 14, 2012 9:54 PM
  • Well you need to change the namespace to the namespace of your project...

    using System;
    using System.Windows.Data;
    
    namespace SilverlightPrototype1Screens
    {
    	public class NumberRounder : IValueConverter
    	{
    		#region IValueConverter Members
    
    		public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    		{
    			double d = Math.Round(System.Convert.ToDouble(value));
    				return d;
    		}
    
    		public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    		{
    			throw new NotImplementedException();
    		}
    
    		#endregion
    	}
    }

    However, I suspect you already did that.  So try going to Project > Clean and then Project > Rebuild.

    If that still does not work... I would delete the converter bindings, remove the C# file, Clean and Rebuild the Project.  Then add my own New Item > Class and paste the above code with my namespace.  Clean and Rebuild the project again and then try to do my bindings.

    You could spend hours trying to figure out why Blend is being stubborn or just start from scratch with the converter and save the headache. :)

    Hope you get it worked out easily and quickly.

    ~Christine

     
    Tuesday, February 14, 2012 9:57 PM
  • Ah, yes, that is specified.
    Tuesday, February 14, 2012 9:58 PM
  • Christine's point is correct -- the namespace in the XAML needs to match the one in the class file. If you used the class from her example directly, it won't show up in your "local" namespace until you modify the namespace on the .cs file.
    • Proposed as answer by Christine L. _ Tuesday, February 14, 2012 10:03 PM
    Tuesday, February 14, 2012 10:00 PM
  • Thank you - This fixed it. It was way easier making a new class, and databinding each of the values to it using the dropdownbox to select the class from there.


    Awesome work! Thanks alot Christine
    Tuesday, February 14, 2012 10:37 PM