Please provide any simple example for listbox events in ViewModel using ReactiveUI

Vijaydhas C

unread,

Mar 29, 2014, 5:06:45 AM3/29/14

to reacti...@googlegroups.com

Hi all.

Does anyone know a good example for listbox events in ReactiveUI?

I am using ReactiveUI for my project. Now i have some idea about ReactiveAsyncCommand. And it' sworking Awesome.

But i can not find any good example for the list box tap event in ViewModel. Now my requirement is i want to write the listbox tab event in viewModel. Anyone give me a simple example.?

Till now i am writing the list box tab event in Xaml.Cs only.

private void listBox1_Tap(object sender, System.Windows.Input.GestureEventArgs e)

{

if (null != listBox1.SelectedItem)

{

ListBox listbox = (ListBox)sender;

StudentsModel stu = (StudentsModel )listbox.SelectedItem;

MessageBox.Show("Name==> "+stu.studentName);

var rootFrame = (App.Current as App).RootFrame;

rootFrame.Navigate(new Uri("/views/StudentInfo.xaml", UriKind.Relative));

}

But i want to write in the ViewModel using ReactiveUI. Can any one give me a simple example?

Thanks in advance..

Matt Oswald

unread,

Mar 29, 2014, 12:28:37 PM3/29/14

to reacti...@googlegroups.com

You wouldn't write an event handler in your VM, instead you would expose a ReactiveCommand and on the Tap event you execute the command.

Paul Betts

unread,

Mar 29, 2014, 12:42:00 PM3/29/14

to reacti...@googlegroups.com

It seems like you just want this in your View:

listBox.Events().Tap
    .Select(_=> listBox.SelectedItem as StudentsViewModel)
    .Where(x => x != null && x.ItemTap.CanExecute(null))
    .Subscribe(x => x.ItemTap.Execute(null));

Paul

--
You received this message because you are subscribed to the Google Groups "ReactiveUI mailing list" group.
To unsubscribe from this group and stop receiving emails from it, send an email to reactivexaml...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Vijaydhas C

unread,

Mar 31, 2014, 12:19:59 AM3/31/14

to reacti...@googlegroups.com

Hi Paul Betts and Matt Oswald.. Thanks for your valuable replay. I am newbie to app development. Now only learning. So can you please provide me a simple sample.

For Example here with i will attach my sample:

Xaml:-

Xaml.CS:-

public partial class RoughPage : PhoneApplicationPage

{

public RoughPage()

{

InitializeComponent();

RoughPageUIContainer.DataContext = new RoughPageViewModel();

}

private void textBox1_KeyUp(object sender, KeyEventArgs e)

{

TextBox textBox = sender as TextBox;

BindingExpression bindingExpr = textBox.GetBindingExpression(TextBox.TextProperty);

bindingExpr.UpdateSource();

}

View Model:-

namespace NewExample.ViewModel

{

public class RoughPageViewModel : ReactiveObject

{

public static double _rectWidth;

public double rectWidth

{

get { return _rectWidth; }

set { this.RaiseAndSetIfChanged(x => x.rectWidth, value); }

}

public static double _widthText;

public double widthText

{

get { return _widthText; }

set { this.RaiseAndSetIfChanged(x => x.widthText, value); }

}

public ReactiveAsyncCommand withCalculate { get; set; }

public RoughPageViewModel()

{

withCalculate = new ReactiveAsyncCommand();

withCalculate.Subscribe(x=>

{

double width = widthText;

double totWidth = 210;

rectWidth = widthText * (totWidth / 100);

});

}

Like this please provide me a sample. I know this is not a good way to ask. But i don't have any other way.

Here i will attach my listbox example also. If it is possible please just correct in my coding.

My Xaml:-

<ListBox.ItemTemplate>

</Border>

</StackPanel>

</Border>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

</Grid>

Xaml.Cs:-

namespace NewExample.Views

{

public partial class ListBoxExample : PhoneApplicationPage

{

public ListBoxExample()

{

InitializeComponent();

listBoxExample.DataContext = new ListBoxExampleViewModel();

}

View Model:-

namespace NewExample.ViewModel

{

public class ListBoxExampleViewModel : ReactiveObject

{

public static ObservableCollection<ListBoxExampleModel> _StudentDetails;

public ObservableCollection<ListBoxExampleModel> StudentDetails

{

get { return _StudentDetails; }

set { this.RaiseAndSetIfChanged(x => x.StudentDetails, value); }

}

XDocument myData = XDocument.Load("Student.xml");

public ListBoxExampleViewModel()

{

var getOrgDetails = new ReactiveAsyncCommand();

getOrgDetails.Subscribe(x =>

{

StudentDetails = new ObservableCollection<ListBoxExampleModel>();

StudentDetails = ListBoxExampleModel.extract(myData.ToString());

});

getOrgDetails.Execute(true);

}

Model:-

namespace NewExample.Model

{

public class ListBoxExampleModel

{

public string FirstName { get; set; }

public string LastName { get; set; }

public string Age { get; set; }

public string PersonImage { get; set; }

public static ObservableCollection<ListBoxExampleModel> extract(string result)

{

ListBoxExampleModel lgp = new ListBoxExampleModel();

ObservableCollection<ListBoxExampleModel> content = new ObservableCollection<ListBoxExampleModel>();

XDocument xdoc = XDocument.Parse(result);

var res = from query in xdoc.Descendants("student")

select query;

for (int i = 0; i < res.Count(); i++)

{

lgp.FirstName = res.ElementAt(i).Element("firstname").Value;

lgp.LastName = res.ElementAt(i).Element("lastname").Value;

lgp.Age = res.ElementAt(i).Element("age").Value;

lgp.PersonImage = res.ElementAt(i).Element("photo").Value;

content.Add(lgp);

lgp = new ListBoxExampleModel();

}

return content;

}

Please let me know how to write tab event in View Model. Here i want to select the item and i want to navigate to another page.

(Forgive me for poor English). Looking for help from experts.. Thanks in advance..

Reply all

Reply to author

Forward