Converter Parameter with bound variable

You will run into a situation where you need to convert a value based on another value in the object. As you would know by now, you can not use {Binding variable} in convert parameter. If you do, even though you will not any compilation error, you will get run time error. So how do we do that. You can pass static variable in the convert parameter.

So a simple work around for this problem would be to bind as following in your XAML.

 <c1:Column Header="Amount" Binding="{Binding Converter={StaticResource myConverter}, ConverterParameter=Amount}" GroupAggregate="Sum" Width="100"/>

 

In the above XAML instead of binding it to a object variable, I bound it to the row and then call my converter passing the string name of the column I am interested in.

   1:   public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
   2:   {
   3:          Person p = value as Person;
   4:          if (p.Amount < 0 && p.Name.Equals("Unni"))
   5:             return p.Amount + p.Amount * p.Bonus;
   6:          else
   7:             return p.Amount;
   8:          return value;
   9:   }

In the above code as you can see, first thing I do, is to unbox the object to the class and in here it is ‘Person’ class. Once you do that, from there you have access to all the properties in the class for you in the Convert method.  In the above code, as you can see, if the name is “Unni’ then my salary would salary + bonus other wise just salary.

Digg This

Obey the commands in Jounce (3)

One of my favorite thing in Silverlight is command. It makes the code look very simple and elegant. This is build on top of part 2 of the blog. As always, lets first look at the result.

The default initial screen

This is same as previous now. Now if you type the name differently and focus out (do not click on ‘Say Hello’) You will get the following screen

Now click on the ‘Say Hello’ button which will render the following screen.

You see that, when I click on say hello, the word command get added to the name text block and in the bottom label as well. What I want to do demonstrate here is that, it is very easy to do commanding. Lets look at the code. In this one, my view XAML changed a bit (MainPage.XAML) as follows

<Grid x:Name=”LayoutRoot” Background=”White”>
<sdk:Label Height=”28″ HorizontalAlignment=”Left” Margin=”38,32,0,0″ Name=”label1″ VerticalAlignment=”Top” Width=”47″ Content=”Name:” />
<TextBox Height=”23″ HorizontalAlignment=”Left” Margin=”81,28,0,0″ Name=”textBox1″ VerticalAlignment=”Top” Width=”235″ Text=”{Binding Name, Mode=TwoWay}” />
<sdk:Label Height=”28″ HorizontalAlignment=”Left” Margin=”43,125,0,0″ Name=”label2″ VerticalAlignment=”Top” Width=”273″ Content=”{Binding HelloName}” />
<Button Content=”Say Hello” Height=”23″ HorizontalAlignment=”Left” Margin=”43,77,0,0″ Name=”button1″ VerticalAlignment=”Top” Width=”263″ Command=”{Binding SayHelloCommand}” CommandParameter=”{Binding ElementName=textBox1, Path=Text}”/>
    </Grid>

Nothing changed except the Button control. Now I have two additional attributes added. They are Command and CommandParameter. The Command in here says what command to execute when user click the button. The command parameter says what is the parameter for command. For command parameter, I am reading the Name text block and passing the text. Now lets look at the command implementation, it is implemented in the view model as follows

namespace simplelabel
{
using Jounce.Core.ViewModel;
using Jounce.Core.View;
using System.ComponentModel.Composition;
using Jounce.Core.Command;
using Jounce.Framework.Command;

[ExportAsViewModel(“Shell”)]
public class MainPageViewModel:BaseViewModel
{
private string _name;
public string Name
{
get
{
if (_name == null)
_name = “Unni”;
return _name;
}
set
{
_name = value;
RaisePropertyChanged<string>(() => Name);
RaisePropertyChanged<string>(() => HelloName);
}
}

public string HelloName
{
get
{
return “Hello ” + Name;
}
}

public IActionCommand<string> SayHelloCommand { get; private set; }

        public MainPageViewModel()
{
SayHelloCommand = new ActionCommand<string>(name => Name = name + ” Command”);
}
    }
}

We declared new command called ‘SayHelloCommand’ of type IActionCommand and it gets instantiated at the view model constructor with delegate on what is it supposed to do. In the delegate what we are doing is setting the Name value with current value in the text block and then add text ‘Command’ to distinguish between the command execution and focusing out of the text block. Since we are setting the Name field, both the text block and the bottom label, which are bound field take the new values.

That is it.

Technorati Tags: ,,

Simple Binding in Jounce (2)

Building on what we have developed in my previous post, in this example we will display the name it is entered in the text block in another field. The final result would like the following

When the application starts the initial screen would like this

When the user change value in the Name field and hit ‘Say Hello’ and it will then put the new value in the bottom part like the following

This is to demonstrate the two way binding and making the second label aware of the changes.

 

The main page xaml will have the code like the following to add one button for ‘Say Hello’ and the second one to display the new text ‘Hello ‘ + name.

<Grid x:Name="LayoutRoot" Background="White">
       <sdk:Label Height="28" HorizontalAlignment="Left" Margin="38,32,0,0" Name="label1" VerticalAlignment="Top" Width="47" Content="Name:" />
       <TextBox Height="23" HorizontalAlignment="Left" Margin="81,28,0,0" Name="textBox1" VerticalAlignment="Top" Width="235" Text="{Binding Name, Mode=TwoWay}" />
       <sdk:Label Height="28" HorizontalAlignment="Left" Margin="43,125,0,0" Name="label2" VerticalAlignment="Top" Width="273" Content="{Binding HelloName}" />
       <Button Content="Say Hello" Height="23" HorizontalAlignment="Left" Margin="43,77,0,0" Name="button1" VerticalAlignment="Top" Width="263" />
   </Grid>

The next change is in the viewmodel.

namespace simplelabel
{
    using Jounce.Core.ViewModel;
    using Jounce.Core.View;
    using System.ComponentModel.Composition;

    [ExportAsViewModel("Shell")]
    public class MainPageViewModel:BaseViewModel
    {
        private string _name;
        public string Name
        {
            get
            {
                if (_name == null)
                    _name = "Unni";
                return _name;
            }
            set
            {
                _name = value;
                RaisePropertyChanged<string>(() => Name);
                RaisePropertyChanged<string>(() => HelloName);
            }
        }

        public string HelloName
        {
            get
            {
                return "Hello " + Name;
            }
        }
    }
}

The changes are, I have added the HelloName public variable, which is bound in the main view XAML.  One other new line is in the setter of ‘Name’, where I raise the property changed event for ‘HelloName’ when the Name field changes.

Normally when we raise property event change, we end up using constant values and then check the constant values in the places where it is used, those complexities are removed from developer perspective in Jounce which I really like.

That is it.

Technorati Tags: ,,