Archive for the ‘WPF’ Category

WPF: User settings anyone?

May 11, 2008

I wanted to knock up a simple window to view and edit all the available user settings for an application. I thought this would be a nice article as it shows how to make use of the DataSourceProvider and ObservableCollection.

The first step was to get the settings (SettingsPropertyCollection) into something more manageable.

public class UserSettingsCollection : ObservableCollection<UserSetting> { public UserSettingsCollection(SettingsPropertyCollection settings) : base() { foreach (SettingsProperty prop in settings) { UserSetting setting = new UserSetting(prop.Name, prop.DefaultValue); if (!base.Contains(setting)) { base.Add(setting); } } } }

The UserSetting object starts out very simple (Name/Value) but you will probably want to add some validation and notify the UI when something has changed.

public class UserSetting { public UserSetting(string name, object value) { Name = name; Value = value; } public string Name { get; set; } public object Value { get; set; } }

The only other object I required was some sort of provider to handle the reading and writing of the settings which I called the UserSettingsProvider.

public class UserSettingsProvider : DataSourceProvider { private UserSettingsCollection _settings; protected override void BeginQuery() { _settings = new UserSettingsCollection(Properties.User.Default.Properties); base.OnQueryFinished(_settings); } public void Save() { foreach (UserSetting setting in _settings) { Properties.User.Default.Properties[setting.Name].DefaultValue = setting.Value; } Properties.User.Default.Save(); } }

The XAML is pretty straightforward mainly because it is not my strong point and partly because I just created it manually and therefore didn’t pimp it up in Blend!

<Window.Resources> <ResourceDictionary> <local:UserSettingsProvider x:Key="settingsProvider"/> </ResourceDictionary> </Window.Resources> <Grid> <DockPanel DataContext="{StaticResource settingsProvider}"> <ItemsControl DockPanel.Dock="Top" ItemsSource="{Binding Path=.}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <WrapPanel /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <StackPanel Orientation="Vertical"> <Label x:Name="NameLabel" Content="{Binding Path=Name}"/> <TextBox x:Name="ValueTextBox" Text="{Binding Path=Value}" Width="200"/> </StackPanel> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> <Button x:Name="SaveButton" Content="Save" Command="Save" Height="20" Width="50" /> </DockPanel> </Grid>

Only thing worth noting here is that the UserSettingsProvider is bound to the DockPanel (not the ItemsControl). I basically did this so I could pick up the provider from the button’s DataContext when executing the save command like so:

public partial class UserSettings : Window { public UserSettings() { InitializeComponent(); CommandBinding saveCommand = new CommandBinding(); saveCommand.Command = ApplicationCommands.Save; saveCommand.CanExecute += this.CanExecuteSave; saveCommand.Executed += this.Save; this.CommandBindings.Add(saveCommand); } private void Save(object sender, ExecutedRoutedEventArgs e) { Button button = e.OriginalSource as Button; UserSettingsProvider provider = button.DataContext as UserSettingsProvider; if (provider == null) { throw new NullReferenceException("Failed to access the user settings provider."); } provider.Save(); } private void CanExecuteSave(object sender, CanExecuteRoutedEventArgs e) { e.CanExecute = true; } }

When it is all put together you get a simple little dialog like this.


I haven’t posted any code files to download for this one because all the code is shown here.

If you did want to take it further and add custom validation or fancy up the UI then feel free to let me know how you get on.


Josh Smith: Binding to the file system

WPF: Applications for the real world

April 16, 2008

Karl Schifflett has started a monster series on WPF for business applications which is winning awards on CodeProject.

He makes some very strong cases for WPF and how it can meet the demands of real world business applications. This series promises to cover every aspect of WPF and shows how to tackle a business application with WPF effectively. Check out Part One of the series

Also worth checking out this article by Karl: Reasons for choosing WPF over ASP.NET…

WPF: Making good progress

April 15, 2008

Recently I came across a situation where I had a list box of items which I wanted to process on separate threads but report progress to the user. I had never had to do something like this in Win32 let alone WPF so I decided to knock up a little prototype which is the basis for this blog entry.

Download the source code:

The prototype application basically contains a list of video clips which need to be converted. User selects a clip and presses the Convert button which kicks of a new thread to perform the conversion and shows progress through a ProgressBar which is part of the DataTemplate.


First off I defined some simple XAML for the ListBox items:

<Window.Resources> <DataTemplate DataType="{x:Type local:VideoClip}"> <StackPanel x:Name="stack" Background="Gainsboro" Width="200"> <Button x:Name="save" Width="60" Height="20" Click="convert_Click">Convert</Button> <Label Content="{Binding Name}"/> <ProgressBar x:Name="progress" Width="100" Height="15" Maximum="100" Value="{Binding SaveProgress}"/> <Label Content="{Binding Status}"/> </StackPanel> </DataTemplate> </Window.Resources>

Then I wired up the convert_Click event to start a BackgroundWorker thread which runs some code to mimic the conversion. This simply loops for a period of time reporting progress each second or so. The main window hooks into an event on the converter to pick up the progress which can then be set on the ProgressBar.Value.

There were two issues which I came across during this prototype:

1. Accessing the ProgressBar inside a DataTemplate

WPF provides a handy little method called FindName which you can use to find controls within a given ContentPresenter. Not quite as straightforward as the old favourite FindControl 😉

private ProgressBar GetProgressBar(VideoClip clip) { int index = clips.Items.IndexOf(clip); ListBoxItem selectedItem = clips.ItemContainerGenerator.ContainerFromIndex(index) as ListBoxItem; if (selectedItem == null) return null; DataTemplateKey key = new DataTemplateKey(typeof(VideoClip)); DataTemplate template = base.FindResource(key) as DataTemplate; Border border = VisualTreeHelper.GetChild(selectedItem, 0) as Border; ContentPresenter presenter = border.Child as ContentPresenter; ProgressBar progress = template.FindName("progress", presenter) as ProgressBar; return progress; }

This method allows me to take an object (which is the data type for the DataTemplate) from the list and use it to access the ProgressBar control.

2. Update the ProgressBar from a different thread

Converter converter = new Converter(); converter.OnConvertProgress += delegate(object sender1, ConvertEventArgs args) { Dispatcher.BeginInvoke(DispatcherPriority.Normal, (SendOrPostCallback)delegate { ProgressBar bar = GetProgressBar(args.Clip); if (bar != null) bar.Value = args.Clip.SaveProgress; } , null); };

Using the Dispatcher I get hold of the specific ProgressBar I want to update and simply set the value.