itemssource - Page 22 - Developer IT

WP7: Why does a ListBox.ItemsPanel break my ElementName data binding?

- by iguanaNet

I have a Windows Phone 7 ListBox that binds to a list of integers. I am using the default MVVM Light template, so there is a ViewModel class that contains data and a simple RelayCommand. Here is the ListBox: <ListBox ItemsSource="{Binding MyData}"> <ListBox.ItemTemplate> <DataTemplate> <Button Content="{Binding}"> <i:Interaction.Triggers> <i:EventTrigger EventName="Click"> <cmd:EventToCommand Command="{Binding ElementName=ContentGrid, Path=DataContext.TestCommand}" CommandParameter="{Binding}" /> </i:EventTrigger> </i:Interaction.Triggers> </Button> </DataTemplate> </ListBox.ItemTemplate> </ListBox> This displays a vertical list of integers inside buttons. If you click any of them, the following command code executes and shows a pop-up: new RelayCommand<int>(i => MessageBox.Show("Test" + i)); However, if I simply add the following XAML to change to a horizontal list, the databinding fails. Nothing happens when you click the button and no error messages are written to the Output window. <ListBox.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" /> </ItemsPanelTemplate> </ListBox.ItemsPanel> I have tried some other types of binding for the EventToCommand. For example, specifying my ViewModel as a static resource. It works, but is less ideal than the example above. Why does that ItemsPanel break the databinding?

Read the article

In Silverlight, what structures, aside of the ListBox, can be used for binding?

- by Aidenn

I need to simply provide the content of a property to a custom User Control in Silverlight. My control is something like this: <UserControl x:Class="SilverlightApplication.Header" 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" d:DesignWidth="300" d:DesignHeight="120"> <Grid x:Name="Header_Layout"> <StackPanel x:Name="hiHeaderContent" Width="Auto" Margin="73,8,8,8"> <TextBlock x:Name="User:" Text="{Binding name}" /> </StackPanel> </Grid> I try to use this User Control from another control where I try to pass the parameter "name" to the previous UserControl ("Header"). I don't need to create a "ListBox" as I will only have 1 header, so I try to avoid doing: <ListBox x:Name="HeaderListBox" Grid.Row="0"> <ListBox.ItemTemplate> <DataTemplate> <SilverlightApplication:Header/> </DataTemplate> </ListBox.ItemTemplate> </ListBox> in order to send the "User" account using: HeaderListBox.ItemsSource = name; Is there any other structure I can use instead of the ListBox to pass the parameter just once? It won't be a list, it's just a header... Thank you!

Read the article

Completed Event not triggering for web service on some systems

- by Farukh

Hi, This is rather weird issue that I am facing with by WCF/Silverlight application. I am using a WCF to get data from a database for my Silverlight application and the completed event is not triggering for method in WCF on some systems. I have checked the called method executes properly has returns the values. I have checked via Fiddler and it clearly shows that response has the returned values as well. However the completed event is not getting triggered. Moreover in few of the systems, everything is fine and I am able to process the returned value in the completed method. Any thoughts or suggestions would be greatly appreciated. I have tried searching around the web but without any luck :( Following is the code.. Calling the method.. void RFCDeploy_Loaded(object sender, RoutedEventArgs e) { btnSelectFile.IsEnabled = true; btnUploadFile.IsEnabled = false; btnSelectFile.Click += new RoutedEventHandler(btnSelectFile_Click); btnUploadFile.Click += new RoutedEventHandler(btnUploadFile_Click); RFCChangeDataGrid.KeyDown += new KeyEventHandler(RFCChangeDataGrid_KeyDown); btnAddRFCManually.Click += new RoutedEventHandler(btnAddRFCManually_Click); ServiceReference1.DataService1Client ws = new BEVDashBoard.ServiceReference1.DataService1Client(); ws.GetRFCChangeCompleted += new EventHandler<BEVDashBoard.ServiceReference1.GetRFCChangeCompletedEventArgs>(ws_GetRFCChangeCompleted); ws.GetRFCChangeAsync(); this.BusyIndicator1.IsBusy = true; } Completed Event.... void ws_GetRFCChangeCompleted(object sender, BEVDashBoard.ServiceReference1.GetRFCChangeCompletedEventArgs e) { PagedCollectionView view = new PagedCollectionView(e.Result); view.GroupDescriptions.Add(new PropertyGroupDescription("RFC")); RFCChangeDataGrid.ItemsSource = view; foreach (CollectionViewGroup group in view.Groups) { RFCChangeDataGrid.CollapseRowGroup(group, true); } this.BusyIndicator1.IsBusy = false; } Please note that this WCF has lots of other method as well and all of them are working fine.... I have problem with only this method... Thanks...

Read the article

Stretch ListBox Items hit area to full width if the ListBox?

- by Nicholas

I've looked around for an answer on this, but the potential duplicates are more concerned with presentation than interaction. I have a basic list box, and each item's content is a simple string. The ListBox itself is stretched to fill it's grid container, but each ListBoxItem's hitarea does not mirror the ListBox width. It looks as if the hitarea (pointer contact area) for each item is only the width of the text content. How do I make this stretch all the way across, regardless of the text size. I've set HorizontalContentAlignment to Stretch, but this doesn't solve my problem. My only other guess is that the content is actually stretching, but the background is invisible and so not capturing the mouse pointer. <ListBox Grid.Row="1" x:Name="ProjectsListBox" DisplayMemberPath="Name" ItemsSource="{Binding Path=Projects}" SelectedItem="{Binding Path=SelectedProject}" HorizontalContentAlignment="Stretch"/> The XAML is pretty straight forward on this. If I mouse over the text in one of the items, then the entire width of the item becomes active. I guess I just need to know how to create an interactive background that is invisible.

Read the article

DataTrigger not reevaluating after property changes

- by frozen

I have a listbox which has its itemssource (this is done in the code behind on as the window is created) databound to an observable collection. The List box then has the following data template assigned against the items: usercontrol.xaml ... <ListBox x:Name="communicatorListPhoneControls" ItemContainerStyle="{StaticResource templateForCalls}"/> ... app.xaml ... <Style x:Key="templateForCalls" TargetType="{x:Type ListBoxItem}"> <Setter Property="ContentTemplate" Value="{StaticResource templateRinging}"/> <Style.Triggers> <DataTrigger Binding="{Binding Path=hasBeenAnswered}" Value="True"> <Setter Property="ContentTemplate" Value="{StaticResource templateAnswered}"/> </DataTrigger> </Style.Triggers> </Style> ... When the observable collection is updated with an object, this appears in the listbox with the correct initial datatemplate, however when the "hasBeenAnswered" property is set to true (when debugging i can see the collection is correct) the datatrigger does not re-evaluate and then update the listbox to use the correct data template. I have implemented the INotifyPropertyChanged Event in my object, and if in the template i bind to a value, i can see the value update. Its just that the datatrigger will not re-evaluate and change to the correct template. I know the datatrigger binding is correct because if i close the window and open it again, it will correctly apply the second datatemplate, because the "hasBeenAnswered" is set to True.

Read the article

How to convert X/Y position to Canvas Left/Top properties when using ItemsControl

- by kshahar

I am trying to use a Canvas to display objects that have "world" location (rather than "screen" location). The canvas is defined like this: <Canvas Background="AliceBlue"> <ItemsControl Name="myItemsControl" ItemsSource="{Binding MyItems}"> <ItemsControl.ItemTemplate> <DataTemplate> <Canvas> <TextBlock Canvas.Left="{Binding WorldX}" Canvas.Top="{Binding WorldY}" Text="{Binding Text}" Width="Auto" Height="Auto" Foreground="Red" /> </Canvas> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </Canvas> MyItem is defined like this: public class MyItem { public MyItem(double worldX, double worldY, string text) { WorldX = worldX; WorldY = worldY; Text = text; } public double WorldX { get; set; } public double WorldY { get; set; } public string Text { get; set; } } In addition, I have a method to convert between world and screen coordinates: Point worldToScreen(double worldX, double worldY) { // return screen coordinates using the canvas properties and an internal MapData object } With the current implementation, the items are positioned in the wrong location, because their location is not converted to screen coordinates. How can I apply the worldToScreen method on the MyItem objects before they are added to the canvas?

Read the article

How to make DataGrid Row really fully selectable (clicking on non-cell area)

- by Samuel

The question might be a little misleading. Here is a screenshot of a DataGrid that has some dummy values (code provided below) Is there a way to make the white area not covered by a cell clickable? My intention: I want to have full row selection. This can be achieved by SelectionUnit="FullRow" which is fine but how can I make the white area implicitly select the entire row without expanding available cells in width and avoiding code behind Here is the repro code: Xaml: <Window x:Class="DGVRowSelectTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525" DataContext="{Binding RelativeSource={RelativeSource Self}}"> <DataGrid ItemsSource="{Binding Names}" SelectionMode="Single" SelectionUnit="FullRow" > </DataGrid> </Window> Dummy Code behind of it (just sets the two entries up) using System.Collections.Generic; using System.Windows; namespace DGVRowSelectTest { public partial class MainWindow : Window { private IList<KeyValuePair<string, string>> _names = new List<KeyValuePair<string, string>>{new KeyValuePair<string, string>("A1", "A2"),new KeyValuePair<string, string>("B1","B2")}; public IList<KeyValuePair<string, string>> Names{get { return _names; }set { _names = value; }} public MainWindow() { InitializeComponent(); } } }

Read the article

How to refactor models without breaking WPF views?

- by Tim Murphy

I've just started learning WPF and like the power of databinding it presents; that is ignoring the complexity and confusion for a noob. My concern is how do you safely refactor your models/viewmodels without breaking the views that use them? Take the following snippet of a view for example: <Grid> <ListView ItemsSource="{Binding Contacts}"> <ListView.View> <GridView> <GridViewColumn Header="First Name" DisplayMemberBinding="{Binding Path=FirstName}"/> <GridViewColumn Header="Last Name" DisplayMemberBinding="{Binding Path=FirstName}"/> <GridViewColumn Header="DOB" DisplayMemberBinding="{Binding Path=DateOfBirth}"/> <GridViewColumn Header="# Pets" DisplayMemberBinding="{Binding Path=NumberOfPets}"/> <GridViewColumn Header="Male" DisplayMemberBinding="{Binding Path=IsMale}"/> </GridView> </ListView.View> </ListView> </Grid> The list is bound to the Contacts property, IList(Of Contact), of the windows DataSource and each of the properties for a Contact is bound to a GridViewColumn. Now if I change the name of the NumberOfPets property in the Contact model to PetCount the view will break. How do I prevent the view breaking?

Read the article

How can I incorporate a data bound list of MenuItems to another MenuItem in WPF?

- by Julien Poulin

I have a 'File' MenuItem were I would like to display a list of recently opened files. Here is the xaml I have now: <MenuItem Header="File}"> <MenuItem Header="Preferences..." Command="{Binding ShowOptionsViewCommand}" /> <Separator /> <ItemsControl ItemsSource="{Binding RecentFiles}"> <ItemsControl.ItemTemplate> <DataTemplate> <MenuItem Header="{Binding DisplayPath}" CommandParameter="{Binding}" Command="{Binding Path=DataContext.OpenRecentFileCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}"> </MenuItem> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> <Separator /> <MenuItem Header="Exit" Command="{Binding CloseCommand}" /> </MenuItem> However, when I use this code, there is a weird offset around the MenuItems and it looks like there is a container around them. How can I get rid of that? Here is a screenshot of what it looks like:

Read the article

Iterating through items of CompositeCollection

- by Dudu

Consider the code: ObservableCollection<string> cities = new ObservableCollection<string>(); ObservableCollection<string> states = new ObservableCollection<string>(); ListBox list; cities.Add("Frederick"); cities.Add("Germantown"); cities.Add("Arlington"); cities.Add("Burbank"); cities.Add("Newton"); cities.Add("Watertown"); cities.Add("Pasadena"); states.Add("Maryland"); states.Add("Virginia"); states.Add("California"); states.Add("Nevada"); states.Add("Ohio"); CompositeCollection cmpc = new CompositeCollection(); CollectionContainer cc1 = new CollectionContainer(); cc1.Collection = cities; CollectionContainer cc2 = new CollectionContainer(); cc2.Collection = states; cmpc.Add(cc1); cmpc.Add(cc2); list.ItemsSource = cmpc; foreach(var itm in cmpc ) { // itm is CollectionContainer and there are only two itm’s // I need the strings } While list shows the right data on the GUI I need this data (without referring to the ListBox) and I am not getting it

Read the article

Have a clickable button on top of a combobox in WPF

- by Travyguy9

I can get a button to appear and be clickable in the drop down list of a combo box, but I cannot get the selected combo box item (the drop list is closed) to have the button be clickable. It always skips the button click and just opens the drop down list. I basically want the Button_Click event handler that I setup to be called once it is clicked. Here is my sample combo box that shows the button but is not clickable once it is in the selected item: <ComboBox x:Name="MyCombo" Width="200" Height="30" ItemsSource="{Binding ListCombo}"> <ComboBox.Resources> <DataTemplate DataType="{x:Type local:ComboItemClass}"> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding Path=SampleText}" Width="120" /> <Button Width="20" Content="..." Click="Button_Click"/> </StackPanel> </DataTemplate> </ComboBox.Resources> </ComboBox>

Read the article

WPF Binding Path=/ not working?

- by Mark

I've set up my DataContext like this: <Window.DataContext> <c:DownloadManager /> </Window.DataContext> Where DownloadManager is Enumerable<DownloadItem>. Then I set my DataGrid like this: <DataGrid Name="dataGrid1" ItemsSource="{Binding Path=/}" ... So that it should list all the DownloadItems, right? So I should be able to set my columns like: <DataGridTextColumn Binding="{Binding Path=Uri, Mode=OneWay}" Where Uri is a property of the DownloadItem. But it doesn't seem to like this. In the visual property editor, it doesn't recognize Uri is a valid property, so I'm guessing I'm doing something wrong. It was working before, when I had the data grid binding to Values, but then I took that enumerable out of the DownloadManager and made itself enumerable. How do I fix this? PS: By "doesn't work" I mean it doesn't list any items. I've added some to the constructor of the DM, so it shouldn't be empty.

Read the article

Prevent WPF control from expanding beyond viewable area

- by Dan dot net

I have an Items Control in my user control with a scroll viewer around it for when it gets too big (Too big being content is larger than the viewable area of the user control). The problem is that the grid that it is all in just keeps expanding so that the scroll viewer never kicks in (unless I specify an exact height for the grid). See code below and thanks in advance. <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="300px"> <Grid.RowDefinitions> <RowDefinition Height="*" /> </Grid.RowDefinitions> <GroupBox FontWeight="Bold" Header="Tables" Padding="2"> <ScrollViewer> <ItemsControl FontWeight="Normal" ItemsSource="{Binding Path=AvailableTables}"> <ItemsControl.ItemTemplate> <DataTemplate> <CheckBox Content="{Binding Path=DisplayName}" IsChecked="{Binding Path=IsSelected}" Margin="2,3.5" /> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </ScrollViewer> </GroupBox> </Grid> I would like to not specify the height.

Read the article

What am I doing wrong with my ItemsControl & databinding?

- by Joel

I'm reworking my simple hex editor to practice using what I've recently learned about data binding in WPF. I'm not sure what I'm doing wrong here. As I understand it, for each byte in the collection "backend" (inherits from ObservableCollection), my ItemsControl should apply the DataTemplate under resources. This template is just a textbox with a binding to a value converter. So I'm expecting to see a row of textboxes, each containing a string representation of one byte. When I use this XAML, all I get is a single line of uneditable text, which as far as I can tell doesn't use a textbox. What am I doing wrong? I've pasted my XAML in below, with the irrelevant parts (Menu declaration, schema, etc) removed. <Window ...> <Window.Resources> <local:Backend x:Key="backend" /> <local:ByteConverter x:Key="byteConverter" /> <DataTemplate DataType="byte"> <TextBox Text="{Binding Converter={StaticResource byteConverter}}" /> </DataTemplate> </Window.Resources> <StackPanel> <ItemsControl ItemsSource="{Binding Source={StaticResource backend}}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <WrapPanel /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> </ItemsControl> </StackPanel> </Window>

Read the article

Silverlight: Why doesn't this binding expression work?

- by Rosarch

I'm having difficulty with a binding expression in Silverlight 3 for the Windows Phone 7. <Grid x:Name="LayoutRoot" Background="Transparent"> <controls:Pivot ItemsSource="{Binding SectionViewModels}">  <controls:Pivot.ItemTemplate> <DataTemplate> <Grid>  <TextBlock Style="{StaticResource disabledText}" Visibility="{Binding ElementName=LayoutRoot, Path=DataContext.NoStoryContent}"> Do you have a network connection? </TextBlock>  The style, in app.xaml: <Style x:Key="disabledText" TargetType="TextBlock"> <Setter Property="Foreground" Value="{StaticResource PhoneDisabledBrush}" /> <Setter Property="TextWrapping" Value="Wrap" /> <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeLarge}" /> </Style> Code behind: public Visibility NoStoryContent { get { // trivial return value for debugging // no breakpoint here is hit return Visibility.Collapsed; } } public Sections() { InitializeComponent(); LayoutRoot.DataContext = this; } What am I doing wrong here? I suspect I have a mistake in the binding expression, but I'm not sure where.

Read the article

Rendering ListBox takes too long on Windows Phone

- by Bhawk1990

I am working on a Windows Phone 7 Application using Local SQLite Database and I'm having an issue with the rendering time of pages that use DataBinding. Currently it takes 60-70ms to retrieve the data from the database. Then it takes about 3100ms to render the data retrieved using a ListBox with DataBinding. Here you can see the DataTemplate of the ListBox: <DataTemplate x:Key="ListBoxItemTemplate"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="68" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <TextBlock x:Name="TimeColumn" Text="{Binding TimeSpan}" Grid.Column="0" Grid.Row="0" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" /> <TextBlock Text="{Binding Stop.StopName}" Grid.Column="1" Grid.Row="0" Margin="15,0,0,0" TextWrapping="NoWrap" Foreground="Black" HorizontalAlignment="Left" VerticalAlignment="Center" /> </Grid> </DataTemplate> Comment: I have tried it using Canvas instead of Grid too, same result. Then, the database loads data into a CSList (using ViciCoolStorage) and that gets Binded to the ListBox: StationList.ItemsSource = App.RouteViewModel.RouteStops; Comment: I have tried to add the elements of the CSList to an ObservableCollection and bind that to the interface but didn't seem to change anything. Question: Am I doing something wrong that results in a huge load time - even if just loading 10 elements -, or this is normal? Do you have any recommendations to get a better performance with DataBinding? Thank you for your answers in advance!

Read the article

Silverlight Recruiting Application Part 5 - Jobs Module / View

Now we starting getting into a more code-heavy portion of this series, thankfully though this means the groundwork is all set for the most part and after adding the modules we will have a complete application that can be provided with full source. The Jobs module will have two concerns- adding and maintaining jobs that can then be broadcast out to the website. How they are displayed on the site will be handled by our admin system (which will just poll from this common database), so we aren't too concerned with that, but rather with getting the information into the system and allowing the backend administration/HR users to keep things up to date. Since there is a fair bit of information that we want to display, we're going to move editing to a separate view so we can get all that information in an easy-to-use spot. With all the files created for this module, the project looks something like this: And now... on to the code. XAML for the Job Posting View All we really need for the Job Posting View is a RadGridView and a few buttons. This will let us both show off records and perform operations on the records without much hassle. That XAML is going to look something like this: 01.<Grid x:Name="LayoutRoot" 02.Background="White"> 03.<Grid.RowDefinitions> 04.<RowDefinition Height="30" /> 05.<RowDefinition /> 06.</Grid.RowDefinitions> 07.<StackPanel Orientation="Horizontal"> 08.<Button x:Name="xAddRecordButton" 09.Content="Add Job" 10.Width="120" 11.cal:Click.Command="{Binding AddRecord}" 12.telerik:StyleManager.Theme="Windows7" /> 13.<Button x:Name="xEditRecordButton" 14.Content="Edit Job" 15.Width="120" 16.cal:Click.Command="{Binding EditRecord}" 17.telerik:StyleManager.Theme="Windows7" /> 18.</StackPanel> 19.<telerikGrid:RadGridView x:Name="xJobsGrid" 20.Grid.Row="1" 21.IsReadOnly="True" 22.AutoGenerateColumns="False" 23.ColumnWidth="*" 24.RowDetailsVisibilityMode="VisibleWhenSelected" 25.ItemsSource="{Binding MyJobs}" 26.SelectedItem="{Binding SelectedJob, Mode=TwoWay}" 27.command:SelectedItemChangedEventClass.Command="{Binding SelectedItemChanged}"> 28.<telerikGrid:RadGridView.Columns> 29.<telerikGrid:GridViewDataColumn Header="Job Title" 30.DataMemberBinding="{Binding JobTitle}" 31.UniqueName="JobTitle" /> 32.<telerikGrid:GridViewDataColumn Header="Location" 33.DataMemberBinding="{Binding Location}" 34.UniqueName="Location" /> 35.<telerikGrid:GridViewDataColumn Header="Resume Required" 36.DataMemberBinding="{Binding NeedsResume}" 37.UniqueName="NeedsResume" /> 38.<telerikGrid:GridViewDataColumn Header="CV Required" 39.DataMemberBinding="{Binding NeedsCV}" 40.UniqueName="NeedsCV" /> 41.<telerikGrid:GridViewDataColumn Header="Overview Required" 42.DataMemberBinding="{Binding NeedsOverview}" 43.UniqueName="NeedsOverview" /> 44.<telerikGrid:GridViewDataColumn Header="Active" 45.DataMemberBinding="{Binding IsActive}" 46.UniqueName="IsActive" /> 47.</telerikGrid:RadGridView.Columns> 48.</telerikGrid:RadGridView> 49.</Grid> I'll explain what's happening here by line numbers: Lines 11 and 16: Using the same type of click commands as we saw in the Menu module, we tie the button clicks to delegate commands in the viewmodel. Line 25: The source for the jobs will be a collection in the viewmodel. Line 26: We also bind the selected item to a public property from the viewmodel for use in code. Line 27: We've turned the event into a command so we can handle it via code in the viewmodel. So those first three probably make sense to you as far as Silverlight/WPF binding magic is concerned, but for line 27... This actually comes from something I read onDamien Schenkelman's blog back in the day for creating an attached behavior from any event. So, any time you see me using command:Whatever.Command, the backing for it is actually something like this: SelectedItemChangedEventBehavior.cs: 01.public class SelectedItemChangedEventBehavior : CommandBehaviorBase<Telerik.Windows.Controls.DataControl> 02.{ 03.public SelectedItemChangedEventBehavior(DataControl element) 04.: base(element) 05.{ 06.element.SelectionChanged += new EventHandler<SelectionChangeEventArgs>(element_SelectionChanged); 07.} 08.void element_SelectionChanged(object sender, SelectionChangeEventArgs e) 09.{ 10.// We'll only ever allow single selection, so will only need item index 0 11.base.CommandParameter = e.AddedItems[0]; 12.base.ExecuteCommand(); 13.} 14.} SelectedItemChangedEventClass.cs: 01.public class SelectedItemChangedEventClass 02.{ 03.#region The Command Stuff 04.public static ICommand GetCommand(DependencyObject obj) 05.{ 06.return (ICommand)obj.GetValue(CommandProperty); 07.} 08.public static void SetCommand(DependencyObject obj, ICommand value) 09.{ 10.obj.SetValue(CommandProperty, value); 11.} 12.public static readonly DependencyProperty CommandProperty = 13.DependencyProperty.RegisterAttached("Command", typeof(ICommand), 14.typeof(SelectedItemChangedEventClass), new PropertyMetadata(OnSetCommandCallback)); 15.public static void OnSetCommandCallback(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs e) 16.{ 17.DataControl element = dependencyObject as DataControl; 18.if (element != null) 19.{ 20.SelectedItemChangedEventBehavior behavior = GetOrCreateBehavior(element); 21.behavior.Command = e.NewValue as ICommand; 22.} 23.} 24.#endregion 25.public static SelectedItemChangedEventBehavior GetOrCreateBehavior(DataControl element) 26.{ 27.SelectedItemChangedEventBehavior behavior = element.GetValue(SelectedItemChangedEventBehaviorProperty) as SelectedItemChangedEventBehavior; 28.if (behavior == null) 29.{ 30.behavior = new SelectedItemChangedEventBehavior(element); 31.element.SetValue(SelectedItemChangedEventBehaviorProperty, behavior); 32.} 33.return behavior; 34.} 35.public static SelectedItemChangedEventBehavior GetSelectedItemChangedEventBehavior(DependencyObject obj) 36.{ 37.return (SelectedItemChangedEventBehavior)obj.GetValue(SelectedItemChangedEventBehaviorProperty); 38.} 39.public static void SetSelectedItemChangedEventBehavior(DependencyObject obj, SelectedItemChangedEventBehavior value) 40.{ 41.obj.SetValue(SelectedItemChangedEventBehaviorProperty, value); 42.} 43.public static readonly DependencyProperty SelectedItemChangedEventBehaviorProperty = 44.DependencyProperty.RegisterAttached("SelectedItemChangedEventBehavior", 45.typeof(SelectedItemChangedEventBehavior), typeof(SelectedItemChangedEventClass), null); 46.} These end up looking very similar from command to command, but in a nutshell you create a command based on any event, determine what the parameter for it will be, then execute. It attaches via XAML and ties to a DelegateCommand in the viewmodel, so you get the full event experience (since some controls get a bit event-rich for added functionality). Simple enough, right? Viewmodel for the Job Posting View The Viewmodel is going to need to handle all events going back and forth, maintaining interactions with the data we are using, and both publishing and subscribing to events. Rather than breaking this into tons of little pieces, I'll give you a nice view of the entire viewmodel and then hit up the important points line-by-line: 001.public class JobPostingViewModel : ViewModelBase 002.{ 003.private readonly IEventAggregator eventAggregator; 004.private readonly IRegionManager regionManager; 005.public DelegateCommand<object> AddRecord { get; set; } 006.public DelegateCommand<object> EditRecord { get; set; } 007.public DelegateCommand<object> SelectedItemChanged { get; set; } 008.public RecruitingContext context; 009.private QueryableCollectionView _myJobs; 010.public QueryableCollectionView MyJobs 011.{ 012.get { return _myJobs; } 013.} 014.private QueryableCollectionView _selectionJobActionHistory; 015.public QueryableCollectionView SelectedJobActionHistory 016.{ 017.get { return _selectionJobActionHistory; } 018.} 019.private JobPosting _selectedJob; 020.public JobPosting SelectedJob 021.{ 022.get { return _selectedJob; } 023.set 024.{ 025.if (value != _selectedJob) 026.{ 027._selectedJob = value; 028.NotifyChanged("SelectedJob"); 029.} 030.} 031.} 032.public SubscriptionToken editToken = new SubscriptionToken(); 033.public SubscriptionToken addToken = new SubscriptionToken(); 034.public JobPostingViewModel(IEventAggregator eventAgg, IRegionManager regionmanager) 035.{ 036.// set Unity items 037.this.eventAggregator = eventAgg; 038.this.regionManager = regionmanager; 039.// load our context 040.context = new RecruitingContext(); 041.this._myJobs = new QueryableCollectionView(context.JobPostings); 042.context.Load(context.GetJobPostingsQuery()); 043.// set command events 044.this.AddRecord = new DelegateCommand<object>(this.AddNewRecord); 045.this.EditRecord = new DelegateCommand<object>(this.EditExistingRecord); 046.this.SelectedItemChanged = new DelegateCommand<object>(this.SelectedRecordChanged); 047.SetSubscriptions(); 048.} 049.#region DelegateCommands from View 050.public void AddNewRecord(object obj) 051.{ 052.this.eventAggregator.GetEvent<AddJobEvent>().Publish(true); 053.} 054.public void EditExistingRecord(object obj) 055.{ 056.if (_selectedJob == null) 057.{ 058.this.eventAggregator.GetEvent<NotifyUserEvent>().Publish("No job selected."); 059.} 060.else 061.{ 062.this._myJobs.EditItem(this._selectedJob); 063.this.eventAggregator.GetEvent<EditJobEvent>().Publish(this._selectedJob); 064.} 065.} 066.public void SelectedRecordChanged(object obj) 067.{ 068.if (obj.GetType() == typeof(ActionHistory)) 069.{ 070.// event bubbles up so we don't catch items from the ActionHistory grid 071.} 072.else 073.{ 074.JobPosting job = obj as JobPosting; 075.GrabHistory(job.PostingID); 076.} 077.} 078.#endregion 079.#region Subscription Declaration and Events 080.public void SetSubscriptions() 081.{ 082.EditJobCompleteEvent editComplete = eventAggregator.GetEvent<EditJobCompleteEvent>(); 083.if (editToken != null) 084.editComplete.Unsubscribe(editToken); 085.editToken = editComplete.Subscribe(this.EditCompleteEventHandler); 086.AddJobCompleteEvent addComplete = eventAggregator.GetEvent<AddJobCompleteEvent>(); 087.if (addToken != null) 088.addComplete.Unsubscribe(addToken); 089.addToken = addComplete.Subscribe(this.AddCompleteEventHandler); 090.} 091.public void EditCompleteEventHandler(bool complete) 092.{ 093.if (complete) 094.{ 095.JobPosting thisJob = _myJobs.CurrentEditItem as JobPosting; 096.this._myJobs.CommitEdit(); 097.this.context.SubmitChanges((s) => 098.{ 099.ActionHistory myAction = new ActionHistory(); 100.myAction.PostingID = thisJob.PostingID; 101.myAction.Description = String.Format("Job '{0}' has been edited by {1}", thisJob.JobTitle, "default user"); 102.myAction.TimeStamp = DateTime.Now; 103.eventAggregator.GetEvent<AddActionEvent>().Publish(myAction); 104.} 105., null); 106.} 107.else 108.{ 109.this._myJobs.CancelEdit(); 110.} 111.this.MakeMeActive(this.regionManager, "MainRegion", "JobPostingsView"); 112.} 113.public void AddCompleteEventHandler(JobPosting job) 114.{ 115.if (job == null) 116.{ 117.// do nothing, new job add cancelled 118.} 119.else 120.{ 121.this.context.JobPostings.Add(job); 122.this.context.SubmitChanges((s) => 123.{ 124.ActionHistory myAction = new ActionHistory(); 125.myAction.PostingID = job.PostingID; 126.myAction.Description = String.Format("Job '{0}' has been added by {1}", job.JobTitle, "default user"); 127.myAction.TimeStamp = DateTime.Now; 128.eventAggregator.GetEvent<AddActionEvent>().Publish(myAction); 129.} 130., null); 131.} 132.this.MakeMeActive(this.regionManager, "MainRegion", "JobPostingsView"); 133.} 134.#endregion 135.public void GrabHistory(int postID) 136.{ 137.context.ActionHistories.Clear(); 138._selectionJobActionHistory = new QueryableCollectionView(context.ActionHistories); 139.context.Load(context.GetHistoryForJobQuery(postID)); 140.} Taking it from the top, we're injecting an Event Aggregator and Region Manager for use down the road and also have the public DelegateCommands (just like in the Menu module). We also grab a reference to our context, which we'll obviously need for data, then set up a few fields with public properties tied to them. We're also setting subscription tokens, which we have not yet seen but I will get into below. The AddNewRecord (50) and EditExistingRecord (54) methods should speak for themselves for functionality, the one thing of note is we're sending events off to the Event Aggregator which some module, somewhere will take care of. Since these aren't entirely relying on one another, the Jobs View doesn't care if anyone is listening, but it will publish AddJobEvent (52), NotifyUserEvent (58) and EditJobEvent (63)regardless. Don't mind the GrabHistory() method so much, that is just grabbing history items (visibly being created in the SubmitChanges callbacks), and adding them to the database. Every action will trigger a history event, so we'll know who modified what and when, just in case. ;) So where are we at? Well, if we click to Add a job, we publish an event, if we edit a job, we publish an event with the selected record (attained through the magic of binding). Where is this all going though? To the Viewmodel, of course! XAML for the AddEditJobView This is pretty straightforward except for one thing, noted below: 001.<Grid x:Name="LayoutRoot" 002.Background="White"> 003.<Grid x:Name="xEditGrid" 004.Margin="10" 005.validationHelper:ValidationScope.Errors="{Binding Errors}"> 006.<Grid.Background> 007.<LinearGradientBrush EndPoint="0.5,1" 008.StartPoint="0.5,0"> 009.<GradientStop Color="#FFC7C7C7" 010.Offset="0" /> 011.<GradientStop Color="#FFF6F3F3" 012.Offset="1" /> 013.</LinearGradientBrush> 014.</Grid.Background> 015.<Grid.RowDefinitions> 016.<RowDefinition Height="40" /> 017.<RowDefinition Height="40" /> 018.<RowDefinition Height="40" /> 019.<RowDefinition Height="100" /> 020.<RowDefinition Height="100" /> 021.<RowDefinition Height="100" /> 022.<RowDefinition Height="40" /> 023.<RowDefinition Height="40" /> 024.<RowDefinition Height="40" /> 025.</Grid.RowDefinitions> 026.<Grid.ColumnDefinitions> 027.<ColumnDefinition Width="150" /> 028.<ColumnDefinition Width="150" /> 029.<ColumnDefinition Width="300" /> 030.<ColumnDefinition Width="100" /> 031.</Grid.ColumnDefinitions> 032. 033.<TextBlock Margin="8" 034.Text="{Binding AddEditString}" 035.TextWrapping="Wrap" 036.Grid.Column="1" 037.Grid.ColumnSpan="2" 038.FontSize="16" /> 039. 040. 041.<TextBlock Margin="8,0,0,0" 042.Style="{StaticResource LabelTxb}" 043.Grid.Row="1" 044.Text="Job Title" 045.VerticalAlignment="Center" /> 046.<TextBox x:Name="xJobTitleTB" 047.Margin="0,8" 048.Grid.Column="1" 049.Grid.Row="1" 050.Text="{Binding activeJob.JobTitle, Mode=TwoWay, NotifyOnValidationError=True, ValidatesOnExceptions=True}" 051.Grid.ColumnSpan="2" /> 052.<TextBlock Margin="8,0,0,0" 053.Grid.Row="2" 054.Text="Location" 055.d:LayoutOverrides="Height" 056.VerticalAlignment="Center" /> 057.<TextBox x:Name="xLocationTB" 058.Margin="0,8" 059.Grid.Column="1" 060.Grid.Row="2" 061.Text="{Binding activeJob.Location, Mode=TwoWay, NotifyOnValidationError=True, ValidatesOnExceptions=True}" 062.Grid.ColumnSpan="2" /> 063. 064.<TextBlock Margin="8,11,8,0" 065.Grid.Row="3" 066.Text="Description" 067.TextWrapping="Wrap" 068.VerticalAlignment="Top" /> 069. 070.<TextBox x:Name="xDescriptionTB" 071.Height="84" 072.TextWrapping="Wrap" 073.ScrollViewer.VerticalScrollBarVisibility="Auto" 074.Grid.Column="1" 075.Grid.Row="3" 076.Text="{Binding activeJob.Description, Mode=TwoWay, NotifyOnValidationError=True, ValidatesOnExceptions=True}" 077.Grid.ColumnSpan="2" /> 078.<TextBlock Margin="8,11,8,0" 079.Grid.Row="4" 080.Text="Requirements" 081.TextWrapping="Wrap" 082.VerticalAlignment="Top" /> 083. 084.<TextBox x:Name="xRequirementsTB" 085.Height="84" 086.TextWrapping="Wrap" 087.ScrollViewer.VerticalScrollBarVisibility="Auto" 088.Grid.Column="1" 089.Grid.Row="4" 090.Text="{Binding activeJob.Requirements, Mode=TwoWay, NotifyOnValidationError=True, ValidatesOnExceptions=True}" 091.Grid.ColumnSpan="2" /> 092.<TextBlock Margin="8,11,8,0" 093.Grid.Row="5" 094.Text="Qualifications" 095.TextWrapping="Wrap" 096.VerticalAlignment="Top" /> 097. 098.<TextBox x:Name="xQualificationsTB" 099.Height="84" 100.TextWrapping="Wrap" 101.ScrollViewer.VerticalScrollBarVisibility="Auto" 102.Grid.Column="1" 103.Grid.Row="5" 104.Text="{Binding activeJob.Qualifications, Mode=TwoWay, NotifyOnValidationError=True, ValidatesOnExceptions=True}" 105.Grid.ColumnSpan="2" /> 106. 107. 108.<CheckBox x:Name="xResumeRequiredCB" Margin="8,8,8,15" 109.Content="Resume Required" 110.Grid.Row="6" 111.Grid.ColumnSpan="2" 112.IsChecked="{Binding activeJob.NeedsResume, Mode=TwoWay, NotifyOnValidationError=True, ValidatesOnExceptions=True}"/> 113. 114.<CheckBox x:Name="xCoverletterRequiredCB" Margin="8,8,8,15" 115.Content="Cover Letter Required" 116.Grid.Column="2" 117.Grid.Row="6" 118.IsChecked="{Binding activeJob.NeedsCV, Mode=TwoWay, NotifyOnValidationError=True, ValidatesOnExceptions=True}"/> 119. 120.<CheckBox x:Name="xOverviewRequiredCB" Margin="8,8,8,15" 121.Content="Overview Required" 122.Grid.Row="7" 123.Grid.ColumnSpan="2" 124.IsChecked="{Binding activeJob.NeedsOverview, Mode=TwoWay, NotifyOnValidationError=True, ValidatesOnExceptions=True}"/> 125. 126.<CheckBox x:Name="xJobActiveCB" Margin="8,8,8,15" 127.Content="Job is Active" 128.Grid.Column="2" 129.Grid.Row="7" 130.IsChecked="{Binding activeJob.IsActive, Mode=TwoWay, NotifyOnValidationError=True, ValidatesOnExceptions=True}"/> 131. 132. 133. 134.<Button x:Name="xAddEditButton" Margin="8,8,0,10" 135.Content="{Binding AddEditButtonString}" 136.cal:Click.Command="{Binding AddEditCommand}" 137.Grid.Column="2" 138.Grid.Row="8" 139.HorizontalAlignment="Left" 140.Width="125" 141.telerik:StyleManager.Theme="Windows7" /> 142. 143.<Button x:Name="xCancelButton" HorizontalAlignment="Right" 144.Content="Cancel" 145.cal:Click.Command="{Binding CancelCommand}" 146.Margin="0,8,8,10" 147.Width="125" 148.Grid.Column="2" 149.Grid.Row="8" 150.telerik:StyleManager.Theme="Windows7" /> 151.</Grid> 152.</Grid> The 'validationHelper:ValidationScope' line may seem odd. This is a handy little trick for catching current and would-be validation errors when working in this whole setup. This all comes from an approach found on theJoy Of Code blog, although it looks like the story for this will be changing slightly with new advances in SL4/WCF RIA Services, so this section can definitely get an overhaul a little down the road. The code is the fun part of all this, so let us see what's happening under the hood. Viewmodel for the AddEditJobView We are going to see some of the same things happening here, so I'll skip over the repeat info and get right to the good stuff: 001.public class AddEditJobViewModel : ViewModelBase 002.{ 003.private readonly IEventAggregator eventAggregator; 004.private readonly IRegionManager regionManager; 005. 006.public RecruitingContext context; 007. 008.private JobPosting _activeJob; 009.public JobPosting activeJob 010.{ 011.get { return _activeJob; } 012.set 013.{ 014.if (_activeJob != value) 015.{ 016._activeJob = value; 017.NotifyChanged("activeJob"); 018.} 019.} 020.} 021. 022.public bool isNewJob; 023. 024.private string _addEditString; 025.public string AddEditString 026.{ 027.get { return _addEditString; } 028.set 029.{ 030.if (_addEditString != value) 031.{ 032._addEditString = value; 033.NotifyChanged("AddEditString"); 034.} 035.} 036.} 037. 038.private string _addEditButtonString; 039.public string AddEditButtonString 040.{ 041.get { return _addEditButtonString; } 042.set 043.{ 044.if (_addEditButtonString != value) 045.{ 046._addEditButtonString = value; 047.NotifyChanged("AddEditButtonString"); 048.} 049.} 050.} 051. 052.public SubscriptionToken addJobToken = new SubscriptionToken(); 053.public SubscriptionToken editJobToken = new SubscriptionToken(); 054. 055.public DelegateCommand<object> AddEditCommand { get; set; } 056.public DelegateCommand<object> CancelCommand { get; set; } 057. 058.private ObservableCollection<ValidationError> _errors = new ObservableCollection<ValidationError>(); 059.public ObservableCollection<ValidationError> Errors 060.{ 061.get { return _errors; } 062.} 063. 064.private ObservableCollection<ValidationResult> _valResults = new ObservableCollection<ValidationResult>(); 065.public ObservableCollection<ValidationResult> ValResults 066.{ 067.get { return this._valResults; } 068.} 069. 070.public AddEditJobViewModel(IEventAggregator eventAgg, IRegionManager regionmanager) 071.{ 072.// set Unity items 073.this.eventAggregator = eventAgg; 074.this.regionManager = regionmanager; 075. 076.context = new RecruitingContext(); 077. 078.AddEditCommand = new DelegateCommand<object>(this.AddEditJobCommand); 079.CancelCommand = new DelegateCommand<object>(this.CancelAddEditCommand); 080. 081.SetSubscriptions(); 082.} 083. 084.#region Subscription Declaration and Events 085. 086.public void SetSubscriptions() 087.{ 088.AddJobEvent addJob = this.eventAggregator.GetEvent<AddJobEvent>(); 089. 090.if (addJobToken != null) 091.addJob.Unsubscribe(addJobToken); 092. 093.addJobToken = addJob.Subscribe(this.AddJobEventHandler); 094. 095.EditJobEvent editJob = this.eventAggregator.GetEvent<EditJobEvent>(); 096. 097.if (editJobToken != null) 098.editJob.Unsubscribe(editJobToken); 099. 100.editJobToken = editJob.Subscribe(this.EditJobEventHandler); 101.} 102. 103.public void AddJobEventHandler(bool isNew) 104.{ 105.this.activeJob = null; 106.this.activeJob = new JobPosting(); 107.this.activeJob.IsActive = true; // We assume that we want a new job to go up immediately 108.this.isNewJob = true; 109.this.AddEditString = "Add New Job Posting"; 110.this.AddEditButtonString = "Add Job"; 111. 112.MakeMeActive(this.regionManager, "MainRegion", "AddEditJobView"); 113.} 114. 115.public void EditJobEventHandler(JobPosting editJob) 116.{ 117.this.activeJob = null; 118.this.activeJob = editJob; 119.this.isNewJob = false; 120.this.AddEditString = "Edit Job Posting"; 121.this.AddEditButtonString = "Edit Job"; 122. 123.MakeMeActive(this.regionManager, "MainRegion", "AddEditJobView"); 124.} 125. 126.#endregion 127. 128.#region DelegateCommands from View 129. 130.public void AddEditJobCommand(object obj) 131.{ 132.if (this.Errors.Count > 0) 133.{ 134.List<string> errorMessages = new List<string>(); 135. 136.foreach (var valR in this.Errors) 137.{ 138.errorMessages.Add(valR.Exception.Message); 139.} 140. 141.this.eventAggregator.GetEvent<DisplayValidationErrorsEvent>().Publish(errorMessages); 142. 143.} 144.else if (!Validator.TryValidateObject(this.activeJob, new ValidationContext(this.activeJob, null, null), _valResults, true)) 145.{ 146.List<string> errorMessages = new List<string>(); 147. 148.foreach (var valR in this._valResults) 149.{ 150.errorMessages.Add(valR.ErrorMessage); 151.} 152. 153.this._valResults.Clear(); 154. 155.this.eventAggregator.GetEvent<DisplayValidationErrorsEvent>().Publish(errorMessages); 156.} 157.else 158.{ 159.if (this.isNewJob) 160.{ 161.this.eventAggregator.GetEvent<AddJobCompleteEvent>().Publish(this.activeJob); 162.} 163.else 164.{ 165.this.eventAggregator.GetEvent<EditJobCompleteEvent>().Publish(true); 166.} 167.} 168.} 169. 170.public void CancelAddEditCommand(object obj) 171.{ 172.if (this.isNewJob) 173.{ 174.this.eventAggregator.GetEvent<AddJobCompleteEvent>().Publish(null); 175.} 176.else 177.{ 178.this.eventAggregator.GetEvent<EditJobCompleteEvent>().Publish(false); 179.} 180.} 181. 182.#endregion 183.} 184.} We start seeing something new on line 103- the AddJobEventHandler will create a new job and set that to the activeJob item on the ViewModel. When this is all set, the view calls that familiar MakeMeActive method to activate itself. I made a bit of a management call on making views self-activate like this, but I figured it works for one reason. As I create this application, views may not exist that I have in mind, so after a view receives its 'ping' from being subscribed to an event, it prepares whatever it needs to do and then goes active. This way if I don't have 'edit' hooked up, I can click as the day is long on the main view and won't get lost in an empty region. Total personal preference here. :) Everything else should again be pretty straightforward, although I do a bit of validation checking in the AddEditJobCommand, which can either fire off an event back to the main view/viewmodel if everything is a success or sent a list of errors to our notification module, which pops open a RadWindow with the alerts if any exist. As a bonus side note, here's what my WCF RIA Services metadata looks like for handling all of the validation: private JobPostingMetadata() { } [StringLength(2500, ErrorMessage = "Description should be more than one and less than 2500 characters.", MinimumLength = 1)] [Required(ErrorMessage = "Description is required.")] public string Description; [Required(ErrorMessage="Active Status is Required")] public bool IsActive; [StringLength(100, ErrorMessage = "Posting title must be more than 3 but less than 100 characters.", MinimumLength = 3)] [Required(ErrorMessage = "Job Title is required.")] public bool JobTitle; [Required] public string Location; public bool NeedsCV; public bool NeedsOverview; public bool NeedsResume; public int PostingID; [Required(ErrorMessage="Qualifications are required.")] [StringLength(2500, ErrorMessage="Qualifications should be more than one and less than 2500 characters.", MinimumLength=1)] public string Qualifications; [StringLength(2500, ErrorMessage = "Requirements should be more than one and less than 2500 characters.", MinimumLength = 1)] [Required(ErrorMessage="Requirements are required.")] public string Requirements; The RecruitCB Alternative See all that Xaml I pasted above? Those are now two pieces sitting in the JobsView.xaml file now. The only real difference is that the xEditGrid now sits in the same place as xJobsGrid, with visibility swapping out between the two for a quick switch. I also took out all the cal: and command: command references and replaced Button events with clicks and the Grid selection command replaced with a SelectedItemChanged event. Also, at the bottom of the xEditGrid after the last button, I add a ValidationSummary (with Visibility=Collapsed) to catch any errors that are popping up. Simple as can be, and leads to this being the single code-behind file: 001.public partial class JobsView : UserControl 002.{ 003.public RecruitingContext context; 004.public JobPosting activeJob; 005.public bool isNew; 006.private ObservableCollection<ValidationResult> _valResults = new ObservableCollection<ValidationResult>(); 007.public ObservableCollection<ValidationResult> ValResults 008.{ 009.get { return this._valResults; } 010.} 011.public JobsView() 012.{ 013.InitializeComponent(); 014.this.Loaded += new RoutedEventHandler(JobsView_Loaded); 015.} 016.void JobsView_Loaded(object sender, RoutedEventArgs e) 017.{ 018.context = new RecruitingContext(); 019.xJobsGrid.ItemsSource = context.JobPostings; 020.context.Load(context.GetJobPostingsQuery()); 021.} 022.private void xAddRecordButton_Click(object sender, RoutedEventArgs e) 023.{ 024.activeJob = new JobPosting(); 025.isNew = true; 026.xAddEditTitle.Text = "Add a Job Posting"; 027.xAddEditButton.Content = "Add"; 028.xEditGrid.DataContext = activeJob; 029.HideJobsGrid(); 030.} 031.private void xEditRecordButton_Click(object sender, RoutedEventArgs e) 032.{ 033.activeJob = xJobsGrid.SelectedItem as JobPosting; 034.isNew = false; 035.xAddEditTitle.Text = "Edit a Job Posting"; 036.xAddEditButton.Content = "Edit"; 037.xEditGrid.DataContext = activeJob; 038.HideJobsGrid(); 039.} 040.private void xAddEditButton_Click(object sender, RoutedEventArgs e) 041.{ 042.if (!Validator.TryValidateObject(this.activeJob, new ValidationContext(this.activeJob, null, null), _valResults, true)) 043.{ 044.List<string> errorMessages = new List<string>(); 045.foreach (var valR in this._valResults) 046.{ 047.errorMessages.Add(valR.ErrorMessage); 048.} 049.this._valResults.Clear(); 050.ShowErrors(errorMessages); 051.} 052.else if (xSummary.Errors.Count > 0) 053.{ 054.List<string> errorMessages = new List<string>(); 055.foreach (var err in xSummary.Errors) 056.{ 057.errorMessages.Add(err.Message); 058.} 059.ShowErrors(errorMessages); 060.} 061.else 062.{ 063.if (this.isNew) 064.{ 065.context.JobPostings.Add(activeJob); 066.context.SubmitChanges((s) => 067.{ 068.ActionHistory thisAction = new ActionHistory(); 069.thisAction.PostingID = activeJob.PostingID; 070.thisAction.Description = String.Format("Job '{0}' has been edited by {1}", activeJob.JobTitle, "default user"); 071.thisAction.TimeStamp = DateTime.Now; 072.context.ActionHistories.Add(thisAction); 073.context.SubmitChanges(); 074.}, null); 075.} 076.else 077.{ 078.context.SubmitChanges((s) => 079.{ 080.ActionHistory thisAction = new ActionHistory(); 081.thisAction.PostingID = activeJob.PostingID; 082.thisAction.Description = String.Format("Job '{0}' has been added by {1}", activeJob.JobTitle, "default user"); 083.thisAction.TimeStamp = DateTime.Now; 084.context.ActionHistories.Add(thisAction); 085.context.SubmitChanges(); 086.}, null); 087.} 088.ShowJobsGrid(); 089.} 090.} 091.private void xCancelButton_Click(object sender, RoutedEventArgs e) 092.{ 093.ShowJobsGrid(); 094.} 095.private void ShowJobsGrid() 096.{ 097.xAddEditRecordButtonPanel.Visibility = Visibility.Visible; 098.xEditGrid.Visibility = Visibility.Collapsed; 099.xJobsGrid.Visibility = Visibility.Visible; 100.} 101.private void HideJobsGrid() 102.{ 103.xAddEditRecordButtonPanel.Visibility = Visibility.Collapsed; 104.xJobsGrid.Visibility = Visibility.Collapsed; 105.xEditGrid.Visibility = Visibility.Visible; 106.} 107.private void ShowErrors(List<string> errorList) 108.{ 109.string nm = "Errors received: \n"; 110.foreach (string anerror in errorList) 111.nm += anerror + "\n"; 112.RadWindow.Alert(nm); 113.} 114.} The first 39 lines should be pretty familiar, not doing anything too unorthodox to get this up and running. Once we hit the xAddEditButton_Click on line 40, we're still doing pretty much the same things except instead of checking the ValidationHelper errors, we both run a check on the current activeJob object as well as check the ValidationSummary errors list. Once that is set, we again use the callback of context.SubmitChanges (lines 68 and 78) to create an ActionHistory which we will use to track these items down the line. That's all? Essentially... yes. If you look back through this post, most of the code and adventures we have taken were just to get things working in the MVVM/Prism setup. Since I have the whole 'module' self-contained in a single JobView+code-behind setup, I don't have to worry about things like sending events off into space for someone to pick up, communicating through an Infrastructure project, or even re-inventing events to be used with attached behaviors. Everything just kinda works, and again with much less code. Here's a picture of the MVVM and Code-behind versions on the Jobs and AddEdit views, but since the functionality is the same in both apps you still cannot tell them apart (for two-strike): Looking ahead, the Applicants module is effectively the same thing as the Jobs module, so most of the code is being cut-and-pasted back and forth with minor tweaks here and there. So that one is being taken care of by me behind the scenes. Next time, we get into a new world of fun- the interview scheduling module, which will pull from available jobs and applicants for each interview being scheduled, tying everything together with RadScheduler to the rescue. Did you know that DotNetSlackers also publishes .net articles written by top known .net Authors? We already have over 80 articles in several categories including Silverlight. Take a look: here.

Read the article

Silverlight Binding with multiple collections

- by George Evjen

We're designing some sport specific applications. In one of our views we have a gridview that is bound to an observable collection of Teams. This is pretty straight forward in terms of getting Teams bound to the GridView. <telerik:RadGridView Grid.Row="0" Grid.Column="0" x:Name="UsersGrid" ItemsSource="{Binding TeamResults}" SelectedItem="{Binding SelectedTeam, Mode=TwoWay}"> <telerik:RadGridView.Columns> <telerik:GridViewDataColumn Header="Name/Group" DataMemberBinding="{Binding TeamName}" MinWidth="150"></telerik:GridViewDataColumn> </telerik:RadGridView.Columns> </telerik:RadGridView> We use the observable collection of teams as our items source and then bind the property of TeamName to the first column. You can set the binding to mode=TwoWay, we use a dialog where we edit the selected item, so our binding here is not set to two way. The issue comes when we want to bind to a property that has another collection in it. To continue on our code from above, we have an observable collection of teams, within that collection we have a collection of KeyPeople. We get this collection using RIA Serivces with the code below. return _TeamsRepository.All().Include("KeyPerson"); Here we are getting all the teams and also including the KeyPerson entity. So when we are done with our Load we will end up with an observable collection of Teams with a navigation property / entity of KeyPerson. Within this KeyPerson entity is a list of people associated with that particular team. We want to display the head coach from this list of KeyPersons. This list currently has a list of ten or more people that are bound to this team, but we just want to display the Head Coach in the column next to team name. The issue becomes how do we bind to this included entity? I have found about three different ways to solve this issue. The way that seemed to fit us best is to utilize the features within RIA Services. We can create client side properties that will do the work for us. We will create in the client side library a partial class of Team. We will end up in our library a file that is Team.shared.cs. The code below is what we will put into our partial team class. public KeyPerson Coach { get { if (this.KeyPerson != null && this.KeyPerson.Any()) { return this.KeyPerson.Where(x => x.RelationshipType == “HeadCoach”).FirstOrDefault(); } return null; } } We will return just the person that is the Head Coach and then be able to bind that and any other additional properties that we need. <telerik:GridViewDataColumn Header="Coach" DataMemberBinding="{Binding Coach.Name}" MinWidth="150"></telerik:GridViewDataColumn> There are other ways that we could have solved this issue but we felt that creating a partial class through RIA Services best suited our needs.

Read the article

Pure Server-Side Filtering with RadGridView and WCF RIA Services

Those of you who are familiar with WCF RIA Services know that the DomainDataSource control provides a FilterDescriptors collection that enables you to filter data returned by the query on the server. We have been using this DomainDataSource feature in our RIA Services with DomainDataSource online example for almost an year now. In the example, we are listening for RadGridViews Filtering event in order to intercept any filtering that is performed on the client and translate it to something that the DomainDataSource will understand, in this case a System.Windows.Data.FilterDescriptor being added or removed from its FilterDescriptors collection. Think of RadGridView.FilterDescriptors as client-side filtering and of DomainDataSource.FilterDescriptors as server-side filtering. We no longer need the client-side one. With the introduction of the Custom Filtering Controls feature many new possibilities have opened. With these custom controls we no longer need to do any filtering on the client. I have prepared a very small project that demonstrates how to filter solely on the server by using a custom filtering control. As I have already mentioned filtering on the server is done through the FilterDescriptors collection of the DomainDataSource control. This collection holds instances of type System.Windows.Data.FilterDescriptor. The FilterDescriptor has three important properties: PropertyPath: Specifies the name of the property that we want to filter on (the left operand). Operator: Specifies the type of comparison to use when filtering. An instance of FilterOperator Enumeration. Value: The value to compare with (the right operand). An instance of the Parameter Class. By adding filters, you can specify that only entities which meet the condition in the filter are loaded from the domain context. In case you are not familiar with these concepts you might find Brad Abrams blog interesting. Now, our requirements are to create some kind of UI that will manipulate the DomainDataSource.FilterDescriptors collection. When it comes to collections, my first choice of course would be RadGridView. If you are not familiar with the Custom Filtering Controls concept I would strongly recommend getting acquainted with my step-by-step tutorial Custom Filtering with RadGridView for Silverlight and checking the online example out. I have created a simple custom filtering control that contains a RadGridView and several buttons. This control is aware of the DomainDataSource instance, since it is operating on its FilterDescriptors collection. In fact, the RadGridView that is inside it is bound to this collection. In order to display filters that are relevant for the current column only, I have applied a filter to the grid. This filter is a Telerik.Windows.Data.FilterDescriptor and is used to filter the little grid inside the custom control. It should not be confused with the DomainDataSource.FilterDescriptors collection that RadGridView is actually bound to. These are the RIA filters. Additionally, I have added several other features. For example, if you have specified a DataFormatString on your original column, the Value column inside the custom control will pick it up and format the filter values accordingly. Also, I have transferred the data type of the column that you are filtering to the Value column of the custom control. This will help the little RadGridView determine what kind of editor to show up when you begin edit, for example a date picker for DateTime columns. Finally, I have added four buttons two of them can be used to add or remove filters and the other two will communicate the changes you have made to the server. Here is the full source code of the DomainDataSourceFilteringControl. The XAML: <UserControl x:Class="PureServerSideFiltering.DomainDataSourceFilteringControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:telerikGrid="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView" xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls" Width="300"> <Border x:Name="LayoutRoot" BorderThickness="1" BorderBrush="#FF8A929E" Padding="5" Background="#FFDFE2E5"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="150"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <StackPanel Grid.Row="0" Margin="2" Orientation="Horizontal" HorizontalAlignment="Center"> <telerik:RadButton Name="addFilterButton" Click="OnAddFilterButtonClick" Content="Add Filter" Margin="2" Width="96"/> <telerik:RadButton Name="removeFilterButton" Click="OnRemoveFilterButtonClick" Content="Remove Filter" Margin="2" Width="96"/> </StackPanel> <telerikGrid:RadGridView Name="filtersGrid" Grid.Row="1" Margin="2" ItemsSource="{Binding FilterDescriptors}" AddingNewDataItem="OnFilterGridAddingNewDataItem" ColumnWidth="*" ShowGroupPanel="False" AutoGenerateColumns="False" CanUserResizeColumns="False" CanUserReorderColumns="False" CanUserFreezeColumns="False" RowIndicatorVisibility="Collapsed" IsFilteringAllowed="False" CanUserSortColumns="False"> <telerikGrid:RadGridView.Columns> <telerikGrid:GridViewComboBoxColumn DataMemberBinding="{Binding Operator}" UniqueName="Operator"/> <telerikGrid:GridViewDataColumn Header="Value" DataMemberBinding="{Binding Value.Value}" UniqueName="Value"/> </telerikGrid:RadGridView.Columns> </telerikGrid:RadGridView> <StackPanel Grid.Row="2" Margin="2" Orientation="Horizontal" HorizontalAlignment="Center"> <telerik:RadButton Name="filterButton" Click="OnApplyFiltersButtonClick" Content="Apply Filters" Margin="2" Width="96"/> <telerik:RadButton Name="clearButton" Click="OnClearFiltersButtonClick" Content="Clear Filters" Margin="2" Width="96"/> </StackPanel> </Grid> </Border> </UserControl> And the code-behind: using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using Telerik.Windows.Controls.GridView; using System.Windows.Data; using Telerik.Windows.Controls; using Telerik.Windows.Data; namespace PureServerSideFiltering { /// <summary> /// A custom filtering control capable of filtering purely server-side. /// </summary> public partial class DomainDataSourceFilteringControl : UserControl, IFilteringControl { // The main player here. DomainDataSource domainDataSource; // This is the name of the property that this column displays. private string dataMemberName; // This is the type of the property that this column displays. private Type dataMemberType; /// <summary> /// Identifies the <see cref="IsActive"/> dependency property. /// </summary> /// <remarks> /// The state of the filtering funnel (i.e. full or empty) is bound to this property. /// </remarks> public static readonly DependencyProperty IsActiveProperty = DependencyProperty.Register( "IsActive", typeof(bool), typeof(DomainDataSourceFilteringControl), new PropertyMetadata(false)); /// <summary> /// Gets or sets a value indicating whether the filtering is active. /// </summary> /// <remarks> /// Set this to true if you want to lit-up the filtering funnel. /// </remarks> public bool IsActive { get { return (bool)GetValue(IsActiveProperty); } set { SetValue(IsActiveProperty, value); } } /// <summary> /// Gets or sets the domain data source. /// We need this in order to work on its FilterDescriptors collection. /// </summary> /// <value>The domain data source.</value> public DomainDataSource DomainDataSource { get { return this.domainDataSource; } set { this.domainDataSource = value; } } public System.Windows.Data.FilterDescriptorCollection FilterDescriptors { get { return this.DomainDataSource.FilterDescriptors; } } public DomainDataSourceFilteringControl() { InitializeComponent(); } public void Prepare(GridViewBoundColumnBase column) { this.LayoutRoot.DataContext = this; if (this.DomainDataSource == null) { // Sorry, but we need a DomainDataSource. Can't do anything without it. return; } // This is the name of the property that this column displays. this.dataMemberName = column.GetDataMemberName(); // This is the type of the property that this column displays. // We need this in order to see which FilterOperators to feed to the combo-box column. this.dataMemberType = column.DataType; // We will use our magic Type extension method to see which operators are applicable for // this data type. You can go to the extension method body and see what it does. ((GridViewComboBoxColumn)this.filtersGrid.Columns["Operator"]).ItemsSource = this.dataMemberType.ApplicableFilterOperators(); // This is very nice as well. We will tell the Value column its data type. In this way // RadGridView will pick up the best editor according to the data type. For example, // if the data type of the value is DateTime, you will be editing it with a DatePicker. // Nice! ((GridViewDataColumn)this.filtersGrid.Columns["Value"]).DataType = this.dataMemberType; // Yet another nice feature. We will transfer the original DataFormatString (if any) to // the Value column. In this way if you have specified a DataFormatString for the original // column, you will see all filter values formatted accordingly. ((GridViewDataColumn)this.filtersGrid.Columns["Value"]).DataFormatString = column.DataFormatString; // This is important. Since our little filtersGrid will be bound to the entire collection // of this.domainDataSource.FilterDescriptors, we need to set a Telerik filter on the // grid so that it will display FilterDescriptor which are relevane to this column ONLY! Telerik.Windows.Data.FilterDescriptor columnFilter = new Telerik.Windows.Data.FilterDescriptor("PropertyPath" , Telerik.Windows.Data.FilterOperator.IsEqualTo , this.dataMemberName); this.filtersGrid.FilterDescriptors.Add(columnFilter); // We want to listen for this in order to activate and de-activate the UI funnel. this.filtersGrid.Items.CollectionChanged += this.OnFilterGridItemsCollectionChanged; } /// <summary> // Since the DomainDataSource is a little bit picky about adding uninitialized FilterDescriptors // to its collection, we will prepare each new instance with some default values and then // the user can change them later. Go to the event handler to see how we do this. /// </summary> void OnFilterGridAddingNewDataItem(object sender, GridViewAddingNewEventArgs e) { // We need to initialize the new instance with some values and let the user go on from here. System.Windows.Data.FilterDescriptor newFilter = new System.Windows.Data.FilterDescriptor(); // This is a must. It should know what member it is filtering on. newFilter.PropertyPath = this.dataMemberName; // Initialize it with one of the allowed operators. // TypeExtensions.ApplicableFilterOperators method for more info. newFilter.Operator = this.dataMemberType.ApplicableFilterOperators().First(); if (this.dataMemberType == typeof(DateTime)) { newFilter.Value.Value = DateTime.Now; } else if (this.dataMemberType == typeof(string)) { newFilter.Value.Value = "<enter text>"; } else if (this.dataMemberType.IsValueType) { // We need something non-null for all value types. newFilter.Value.Value = Activator.CreateInstance(this.dataMemberType); } // Let the user edit the new filter any way he/she likes. e.NewObject = newFilter; } void OnFilterGridItemsCollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e) { // We are active only if we have any filters define. In this case the filtering funnel will lit-up. this.IsActive = this.filtersGrid.Items.Count > 0; } private void OnApplyFiltersButtonClick(object sender, RoutedEventArgs e) { if (this.DomainDataSource.IsLoadingData) { return; } // Comment this if you want the popup to stay open after the button is clicked. this.ClosePopup(); // Since this.domainDataSource.AutoLoad is false, this will take into // account all filtering changes that the user has made since the last // Load() and pull the new data to the client. this.DomainDataSource.Load(); } private void OnClearFiltersButtonClick(object sender, RoutedEventArgs e) { if (this.DomainDataSource.IsLoadingData) { return; } // We want to remove ONLY those filters from the DomainDataSource // that this control is responsible for. this.DomainDataSource.FilterDescriptors .Where(fd => fd.PropertyPath == this.dataMemberName) // Only "our" filters. .ToList() .ForEach(fd => this.DomainDataSource.FilterDescriptors.Remove(fd)); // Bye-bye! // Comment this if you want the popup to stay open after the button is clicked. this.ClosePopup(); // After we did our housekeeping, get the new data to the client. this.DomainDataSource.Load(); } private void OnAddFilterButtonClick(object sender, RoutedEventArgs e) { if (this.DomainDataSource.IsLoadingData) { return; } // Let the user enter his/or her requirements for a new filter. this.filtersGrid.BeginInsert(); this.filtersGrid.UpdateLayout(); } private void OnRemoveFilterButtonClick(object sender, RoutedEventArgs e) { if (this.DomainDataSource.IsLoadingData) { return; } // Find the currently selected filter and destroy it. System.Windows.Data.FilterDescriptor filterToRemove = this.filtersGrid.SelectedItem as System.Windows.Data.FilterDescriptor; if (filterToRemove != null && this.DomainDataSource.FilterDescriptors.Contains(filterToRemove)) { this.DomainDataSource.FilterDescriptors.Remove(filterToRemove); } } private void ClosePopup() { System.Windows.Controls.Primitives.Popup popup = this.ParentOfType<System.Windows.Controls.Primitives.Popup>(); if (popup != null) { popup.IsOpen = false; } } } } Finally, we need to tell RadGridViews Columns to use this custom control instead of the default one. Here is how to do it: using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using System.Windows.Data; using Telerik.Windows.Data; using Telerik.Windows.Controls; using Telerik.Windows.Controls.GridView; namespace PureServerSideFiltering { public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); this.grid.AutoGeneratingColumn += this.OnGridAutoGeneratingColumn; // Uncomment this if you want the DomainDataSource to start pre-filtered. // You will notice how our custom filtering controls will correctly read this information, // populate their UI with the respective filters and lit-up the funnel to indicate that // filtering is active. Go ahead and try it. this.employeesDataSource.FilterDescriptors.Add(new System.Windows.Data.FilterDescriptor("Title", System.Windows.Data.FilterOperator.Contains, "Assistant")); this.employeesDataSource.FilterDescriptors.Add(new System.Windows.Data.FilterDescriptor("HireDate", System.Windows.Data.FilterOperator.IsGreaterThan, new DateTime(1998, 12, 31))); this.employeesDataSource.FilterDescriptors.Add(new System.Windows.Data.FilterDescriptor("HireDate", System.Windows.Data.FilterOperator.IsLessThanOrEqualTo, new DateTime(1999, 12, 31))); this.employeesDataSource.Load(); } /// <summary> /// First of all, we will need to replace the default filtering control /// of each column with out custom filtering control DomainDataSourceFilteringControl /// </summary> private void OnGridAutoGeneratingColumn(object sender, GridViewAutoGeneratingColumnEventArgs e) { GridViewBoundColumnBase dataColumn = e.Column as GridViewBoundColumnBase; if (dataColumn != null) { // We do not like ugly dates. if (dataColumn.DataType == typeof(DateTime)) { dataColumn.DataFormatString = "{0:d}"; // Short date pattern. // Notice how this format will be later transferred to the Value column // of the grid that we have inside the DomainDataSourceFilteringControl. } // Replace the default filtering control with our. dataColumn.FilteringControl = new DomainDataSourceFilteringControl() { // Let the control know about the DDS, after all it will work directly on it. DomainDataSource = this.employeesDataSource }; // Finally, lit-up the filtering funnel through the IsActive dependency property // in case there are some filters on the DDS that match our column member. string dataMemberName = dataColumn.GetDataMemberName(); dataColumn.FilteringControl.IsActive = this.employeesDataSource.FilterDescriptors .Where(fd => fd.PropertyPath == dataMemberName) .Count() > 0; } } } } The best part is that we are not only writing filters for the DomainDataSource we can read and load them. If the DomainDataSource has some pre-existing filters (like I have created in the code above), our control will read them and will populate its UI accordingly. Even the filtering funnel will light-up! Remember, the funnel is controlled by the IsActive property of our control. While this is just a basic implementation, the source code is absolutely yours and you can take it from here and extend it to match your specific business requirements. Below the main grid there is another debug grid. With its help you can monitor what filter descriptors are added and removed to the domain data source. Download Source Code. (You will have to have the AdventureWorks sample database installed on the default SQLExpress instance in order to run it.) Enjoy!Did you know that DotNetSlackers also publishes .net articles written by top known .net Authors? We already have over 80 articles in several categories including Silverlight. Take a look: here.

Read the article

Task-It Webinar - Source Code

Last week I presented a webinar called "Building a real-world application with RadControls for Silverlight 4". For those that didn't get to see the webinar, you can view it here: Building a read-world application with RadControls for Silverlight 4 Since the webinar I've received several requests asking if I could post the source code for the simple application I showed demonstrating some of the techniques used in the development of Task-It, such as MVVM, Commands and Internationalization. This source code is now available for downloadhere. After downloading the source: Extract it to the location of your choice on your hard-drive Open the solution Right-click ModuleProject.Web and selecte 'Set as StartUp Project'. Right-click ProjectTestPage.aspx and selected 'Set as Start Page' Create a database in SQL Server called WebinarProject. Navigate to the Database folder under the WebinarProject directory and run the .sql script against your WebinarProject database. The last two steps are necessary only for the Tasks page to work properly (using WCF RIA Services). Now some notes about each page: Code-behind This is not the way I recommend coding a line-of-business application in Silverlight, but simply wanted to show how the code-behind approach would look. Command This page introduces MVVM and Commands. You'll notice in the XAML that the Command property of theRadMenuItem and the Button are both bound to a SaveCommand. That comes from the view model. If you look in the code- behind of the user control you'll see that an instance of a CommandViewModel is instantiated and set as the DataContext of the UserControl.There is also a listener for the view model's SaveCompleted event. When this is fired, it tells the view (UserControl) to display the MessageBox. Internationalization This sample is similar to the previous one, but instead of using hard-coded strings in the UI, the strings are obtained via binding toview model properties. The view model gets the strings from the .resx files (Strings.resx or Strings.de.resx) under Assets/Resources. If you uncomment the call to ShowGerman() in App.xaml.cs's Application_Startup method and re-run the application, you will see the UI in German. Note that this code, which sets the CurrentCulture and CurrentUICulture on the current thread to "de" (German) is for testing purposes only. RadWindow Once again, very similar to the previous example.The difference is that we are now using a RadWindow to display the 'Saved' message instead of a MessageBox. The advantage here is that we do not have to hold on to a reference to the view model in our code behind so that we can get the 'Saved' message from it. The RadWindow's DataContext is now also bound to the view model, so within its XAML we can bind directly to properties in the view model. Much nicer, and cleaner. One other thing I introduced in this example is the use of spacer Rectangles. Rather than setting a width and/or height on the rectangles for spacing, I am now referencing a style in my ResourceDictionary called StandardSpacerStyle. I like doing this better than using margins or padding because now I have a reusable way to create space between elements, the Rectangle does not show (because I have not set its Fill color), and I can change my spacing throughout the user interface in one place if I'd like. Tasks This page is quite a bit different than the other four. It is a very simple, stripped-down version of the Tasks page in the Task-It application. The Tasks.xaml UserControl has a ContentControl, and the Content of that control is set based on whether we are looking at the list of tasks or editing a task. So it displays one of two child UserControls, which are called List and Details. List has the RadGridView, Details has the form. In the code-behind of the Tasks UserControl I am once again setting its DataContext to a view model class. The nice thing is, whichever child UserControl is being displayed (List or Details) inherits its DataContext from its parent control (Tasks), so I do not have to explicitly set it. The List UserControl simply displays a RadGridView whose ItemsSource is bound to a property in the view model called Tasks, and its SelectedItem property is bound to a property in the view model called SelectedItem. The SelectedItem binding must be TwoWay so that the view is notified when the SelectedItem changes in the view model, and the view model is notified when something changes in the view (like when a user changes the Name and/or DueDate in the form). You'll also notice that the form's TextBox and RadDatePicker are also TwoWay bound to the SelectedItem property in the view model. You can experiment with the binding by removing TwoWay and see how changes in the form do not show up in the RadGridView. So here we have an example of two different views (List and Details) that are both bound to the same view model...and actually, so is the Tasks UserControl, so it is really three views. WCF RIA Services By the way, I am using WCF RIA Services to retrieve data for the RadGridView and save the data when the user clicks the Save button in the form. I created a really simple ADO.NET Entity Data Model in WebinarProject.Web called DataModel.edmx. I also created a simple Domain Data Service called DataService that has methods for retrieving data, inserting, updating and deleting. However I am only using the retrieval and update methods in this sample. Note that I do not currently have any validation in place on the form, as I wanted to keep the sample as simple as possible. Wrap up Technically, I should move the calls to WCF RIA Services out of the view model and put them into a separate layer, but this works for now, and that is a topic for another day! Did you know that DotNetSlackers also publishes .net articles written by top known .net Authors? We already have over 80 articles in several categories including Silverlight. Take a look: here.

Read the article

Introducing jLight – Talking to the DOM using Silverlight and jQuery.

- by Timmy Kokke

Introduction With the recent news about Silverlight on the Windows Phone and all the great Out-Of-Browser features in the upcoming Silverlight 4 you almost forget Silverlight is a browser plugin. It most often runs in a web browser and often as a control. In many cases you need to communicate with the browser to get information about textboxes, events or details about the browser itself. To do this you can use JavaScript from Silverlight. Although Silverlight works the same on every browser, JavaScript does not and it won’t be long before problems arise. To overcome differences in browser I like to use jQuery. The only downside of doing this is that there’s a lot more code needed that you would normally use when you write jQuery in JavaScript. Lately, I had to catch changes is the browser scrollbar and act to the new position. I also had to move the scrollbar when the user dragged around in the Silverlight application. With jQuery it was peanuts to get and set the right attributes, but I found that I had to write a lot of code on Silverlight side. With a few refactoring I had a separated out the plumbing into a new class and could call only a few methods on that to get the same thing done. The idea for jLight was born. jLight vs. jQuery The main purpose of jLight is to take the ease of use of jQuery and bring it into Silverlight for handling DOM interaction. For example, to change the text color of a DIV to red, in jQuery you would write: jQuery("div").css("color","red"); In jLight the same thing looks like so: jQuery.Select("div").Css("color","red"); Another example. To change the offset in of the last SPAN you could write this in jQuery : jQuery("span:last").offset({left : 10, top : 100}); In jLight this would do the same: jQuery.Select("span:last").Offset(new {left = 10, top = 100 }); Callbacks Nothing too special so far. To get the same thing done using the “normal” HtmlPage.Window.Eval, it wouldn’t require too much effort. But to wire up a handler for events from the browser it’s a whole different story. Normally you need to register ScriptMembers, ScriptableTypes or write some code in JavaScript. jLight takes care of the plumbing and provide you with an simple interface in the same way jQuery would. If you would like to handle the scroll event of the BODY of your html page, you’ll have to bind the event using jQuery and have a function call back to a registered function in Silverlight. In the example below I assume there’s a method “SomeMethod” and it is registered as a ScriptableObject as “RegisteredFromSilverlight” from Silverlight. jQuery("body:first").scroll(function() { var sl = document.getElementbyId("SilverlightControl"); sl.content.RegisteredFromSilverlight.SomeMethod($(this)); }); Using jLight in Silverlight the code would be even simpler. The registration of RegisteredFromSilverlight as ScriptableObject can be omitted. Besides that, you don’t have to write any JavaScript or evaluate strings with JavaScript. jQuery.Select("body:first").scroll(SomeMethod); Lambdas Using a lambda in Silverlight can make it even simpler. Each is the jQuery equivalent of foreach in C#. It calls a function for every element found by jQuery. In this example all INPUT elements of the text type are selected. The FromObject method is used to create a jQueryObject from an object containing a ScriptObject. The Val method from jQuery is used to get the value of the INPUT elements. jQuery.Select("input:text").Each((element, index) => { textBox1.Text += jQueryObject.FromObject(element).Val(); return null; }); Ajax One thing jQuery is often used for is making Ajax calls. Making calls to services to external services can be done from Silverlight, but as easy as using jQuery. As an example I would like to show how jLight does this. Below is the entire code behind. It searches my name on twitter and shows the result. This example can be found in the source of the project. The GetJson method passes a Silverlight JsonValue to a callback. This callback instantiates Twit objects and adds them to a ListBox called TwitList. public partial class DemoPage2 : UserControl { public DemoPage2() { InitializeComponent(); jQuery.Load(); } private void CallButton_Click(object sender, RoutedEventArgs e) { jQuery.GetJson("http://search.twitter.com/search.json?lang=en&q=sorskoot", Done); } private void Done(JsonValue arg) { var tweets = new List<Twit>(); foreach (JsonObject result in arg["results"]) { tweets.Add(new Twit() { Text = (string)result["text"], Image = (string)result["profile_image_url"], User = (string)result["from_user"] } ); } TwitList.ItemsSource = tweets; } } public class Twit { public string User { get; set; } public string Image { get; set; } public string Text { get; set; } } Conclusion Although jLight is still in development it can be used already.There isn’t much documentation yet, but if you know jQuery jLight isn’t very hard to use. If you would like to try it, please let me know what you think and report any problems you run in to. jLight can be found at: http://jlight.codeplex.com

Read the article

WPF Databinding- Part 2 of 3

- by Shervin Shakibi

This is a follow up to my previous post WPF Databinding- Not your fathers databinding Part 1-3 you can download the source code here http://ssccinc.com/wpfdatabinding.zip Example 04 In this example we demonstrate the use of default properties and also binding to an instant of an object which is part of a collection bound to its container. this is actually not as complicated as it sounds. First of all, lets take a look at our Employee class notice we have overridden the ToString method, which will return employees First name , last name and employee number in parentheses, public override string ToString() { return String.Format("{0} {1} ({2})", FirstName, LastName, EmployeeNumber); } in our XAML we have set the itemsource of the list box to just “Binding” and the Grid that contains it, has its DataContext set to a collection of our Employee objects. DataContext="{StaticResource myEmployeeList}"> ….. <ListBox Name="employeeListBox" ItemsSource="{Binding }" Grid.Row="0" /> the ToString in the method for each instance will get executed and the following is a result of it. if we did not have a ToString the list box would look like this: now lets take a look at the grid that will display the details when someone clicks on an Item, the Grid has the following DataContext DataContext="{Binding ElementName=employeeListBox, Path=SelectedItem}"> Which means its bound to a specific instance of the Employee object. and within the gird we have textboxes that are bound to different Properties of our class. <TextBox Grid.Row="0" Grid.Column="1" Text="{Binding Path=FirstName}" /> <TextBox Grid.Row="1" Grid.Column="1" Text="{Binding Path=LastName}" /> <TextBox Grid.Row="2" Grid.Column="1" Text="{Binding Path=Title}" /> <TextBox Grid.Row="3" Grid.Column="1" Text="{Binding Path=Department}" /> Example 05 This project demonstrates use of the ObservableCollection and INotifyPropertyChanged interface. Lets take a look at Employee.cs first, notice it implements the INotifyPropertyChanged interface now scroll down and notice for each setter there is a call to the OnPropertyChanged method, which basically will will fire up the event notifying to the value of that specific property has been changed. Next EmployeeList.cs notice it is an ObservableCollection . Go ahead and set the start up project to example 05 and then run. Click on Add a new employee and the new employee should appear in the list box. Example 06 This is a great example of IValueConverter its actuall a two for one deal, like most of my presentation demos I found this by “Binging” ( formerly known as g---ing) unfortunately now I can’t find the original author to give him the credit he/she deserves. Before we look at the code lets run the app and look at the finished product, put in 0 in Celsius and you should see Fahrenheit textbox displaying to 32 degrees, I know this is calculating correctly from my elementary school science class , also note the color changed to blue, now put in 100 in Celsius which should give us 212 Fahrenheit but now the color is red indicating it is hot, and finally put in 75 Fahrenheit and you should see 23.88 for Celsius and the color now should be black. Basically IValueConverter allows us different types to be bound, I’m sure you have had problems in the past trying to bind to Date values . First look at FahrenheitToCelciusConverter.cs first notice it implements IValueConverter. IValueConverter has two methods Convert and ConvertBack. In each method we have the code for converting Fahrenheit to Celsius and vice Versa. In our XAML, after we set a reference in our Windows.Resources section. and for txtCelsius we set the path to TxtFahrenheit and the converter to an instance our FahrenheitToCelciusConverter converter. no need to repeat this for TxtFahrenheit since we have a convert and ConvertBack. Text="{Binding UpdateSourceTrigger=PropertyChanged, Path=Text,ElementName=txtFahrenheit, Converter={StaticResource myTemperatureConverter}}" As mentioned earlier this is a twofer Demo, in the second demo, we basically are converting a double datatype to a brush. Lets take a look at TemperatureToColorConverter, notice we in our Covert Method, if the value is less than our cold temperature threshold we return a blue brush and if it is higher than our hot temperature threshold we return a redbrush. since we don’t have to convert a brush to double value in our example the convert back is not being implemented. Take time and go through these three examples and I hope you have a better understanding of databinding, ObservableCollection and IValueConverter . Next blog posting we will talk about ValidationRule, DataTemplates and DataTemplate triggers.

Read the article

WPF DataGrid binding to UserControl

- by Trindaz

I have a DataGrid with one column using a UserControl via a styled DataGridTemplateColumn. I can't seem to get the UserControl to 'see' the object that is in it's containing DataGridCell though. What kind of bindings can I create on the TextBox in my UserControl so that it can look up and see that object?! My UserControl and TemplateColumn Style are defined as: <Window.Resources> <local:UCTest x:Key="UCTest" /> <Style x:Key="TestStyle" TargetType="{x:Type WpfToolkit:DataGridCell}"> <Style.Setters> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type WpfToolkit:DataGridCell}"> <Grid Background="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource drc}, Path=DataContext}"> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <local:UCTest /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style.Setters> </Style> </Window.Resources> and my sample DataGrid is defined as: <WpfToolkit:DataGrid Name="dgSampleData" ItemsSource="{Binding}" AutoGenerateColumns="True" Margin="0,75,0,0"> <WpfToolkit:DataGrid.Columns> <WpfToolkit:DataGridTemplateColumn Header="Col2" CellStyle="{StaticResource TestStyle}" /> </WpfToolkit:DataGrid.Columns> </WpfToolkit:DataGrid> and my User Control is defined in a separate file as: <UserControl x:Class="UCTest" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:local="clr-namespace:WpfApplication1" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="104" Height="51"> <UserControl.Resources> <local:DataRowConverter x:Key="drc" /> </UserControl.Resources> <Grid> <TextBox Margin="12,12,-155,16" Name="TextBox1" Text="" /> </Grid> EDIT: My implementation of TestClass, which has the Test Property, which I want UCTest.TextBox1 to bind do: Public Class TestClass Private _Test As String = "Hello World Property!" Public Property Test() As String Get Return _Test End Get Set(ByVal value As String) _Test = value End Set End Property End Class Thanks in advance!

Read the article

WPF Dynamic Layout with ItemsControl and Grid

- by Jason Williams

I am creating a WPF form. One of the requirements is that it have a sector-based layout so that a control can be explicitly placed in one of the sectors/cells. I have created a tic-tac-toe example below to convey my problem: There are two types and one base type: public class XMoveViewModel : MoveViewModel { } public class OMoveViewModel : MoveViewModel { } public class MoveViewModel { public int Row { get; set; } public int Column { get; set; } } The DataContext of the form is set to an instance of: public class MainViewModel : ViewModelBase { public MainViewModel() { Moves = new ObservableCollection<MoveViewModel>() { new XMoveViewModel() { Row = 0, Column = 0 }, new OMoveViewModel() { Row = 1, Column = 0 }, new XMoveViewModel() { Row = 1, Column = 1 }, new OMoveViewModel() { Row = 0, Column = 2 }, new XMoveViewModel() { Row = 2, Column = 2} }; } public ObservableCollection<MoveViewModel> Moves { get; set; } } And finally, the XAML looks like this: <Window.Resources> <DataTemplate DataType="{x:Type vm:XMoveViewModel}"> <Image Source="XMove.png" Grid.Row="{Binding Path=Row}" Grid.Column="{Binding Path=Column}" Stretch="None" /> </DataTemplate> <DataTemplate DataType="{x:Type vm:OMoveViewModel}"> <Image Source="OMove.png" Grid.Row="{Binding Path=Row}" Grid.Column="{Binding Path=Column}" Stretch="None" /> </DataTemplate> </Window.Resources> <Grid> <ItemsControl ItemsSource="{Binding Path=Moves}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <Grid ShowGridLines="True"> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> </Grid> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> </ItemsControl> </Grid> What was not so obvious to me when I started was that the ItemsControl element actually wraps each item in a container, so my Grid.Row and Grid.Column bindings are ignored since the images are not directly contained within the grid. Thus, all of the images are placed in the default Row and Column (0, 0). What is happening: The desired result: So, my question is this: how can I achieve the dynamic placement of my controls in a grid? I would prefer a XAML/Data Binding/MVVM-friendly solution. Thanks.

Read the article

WPF CommandParameter is NULL first time CanExecute is called

- by Jonas Follesø

I have run into an issue with WPF and Commands that are bound to a Button inside the DataTemplate of an ItemsControl. The scenario is quite straight forward. The ItemsControl is bound to a list of objects, and I want to be able to remove each object in the list by clicking a Button. The Button executes a Command, and the Command takes care of the deletion. The CommandParameter is bound to the Object I want to delete. That way I know what the user clicked. A user should only be able to delete their "own" objects - so I need to do some checks in the "CanExecute" call of the Command to verify that the user has the right permissions. The problem is that the parameter passed to CanExecute is NULL the first time it's called - so I can't run the logic to enable/disable the command. However, if I make it allways enabled, and then click the button to execute the command, the CommandParameter is passed in correctly. So that means that the binding against the CommandParameter is working. The XAML for the ItemsControl and the DataTemplate looks like this: <ItemsControl x:Name="commentsList" ItemsSource="{Binding Path=SharedDataItemPM.Comments}" Width="Auto" Height="Auto"> <ItemsControl.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <Button Content="Delete" FontSize="10" Command="{Binding Path=DataContext.DeleteCommentCommand, ElementName=commentsList}" CommandParameter="{Binding}" /> </StackPanel> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> So as you can see I have a list of Comments objects. I want the CommandParameter of the DeleteCommentCommand to be bound to the Command object. So I guess my question is: have anyone experienced this problem before? CanExecute gets called on my Command, but the parameter is always NULL the first time - why is that? Update: I was able to narrow the problem down a little. I added an empty Debug ValueConverter so that I could output a message when the CommandParameter is data bound. Turns out the problem is that the CanExecute method is executed before the CommandParameter is bound to the button. I have tried to set the CommandParameter before the Command (like suggested) - but it still doesn't work. Any tips on how to control it. Update2: Is there any way to detect when the binding is "done", so that I can force re-evaluation of the command? Also - is it a problem that I have multiple Buttons (one for each item in the ItemsControl) that bind to the same instance of a Command-object? Update3: I have uploaded a reproduction of the bug to my SkyDrive: http://cid-1a08c11c407c0d8e.skydrive.live.com/self.aspx/Code%20samples/CommandParameterBinding.zip

Search Results

Search found 669 results on 27 pages for 'itemssource'.

Page 22/27 | < Previous Page | 18 19 20 21 22 23 24 25 26 27 | Next Page >

- by iguanaNet

- by Aidenn

- by Farukh

- by Nicholas

- by frozen

- by kshahar

- by Samuel

- by Tim Murphy

- by Julien Poulin

- by Dudu

- by Travyguy9

- by Mark

- by Dan dot net

- by Joel

- by Rosarch

- by Bhawk1990

- by George Evjen

- by Timmy Kokke

- by Shervin Shakibi

- by Trindaz

- by Jason Williams

- by Jonas Follesø

< Previous Page | 18 19 20 21 22 23 24 25 26 27 | Next Page >