The power of WPF binding really shines when you use design time data to have a live preview of the aspect of your UI without the need to press F5 to load actual data. Design time data is a cool feature you can have with little effort, suppose you have a simple windows and you want to show a list of customers, taken from the northwind datadabase inside a Listbox, personlizing the DataTemplate.

I start with  simple ViewModelBase, that is really far to be a real Base View Model to implement a full MVVM solution, but it serves me to show how to use design time data without scare people telling them to implement complex patterns or similar stuff.

   1: public abstract class ViewModelBase : MarkupExtension, INotifyPropertyChanged

   2: {

   3:  

   4:     public event PropertyChangedEventHandler PropertyChanged;

   5:  

   6:     protected virtual void OnPropertyChanged(String propertyName)

   7:     {

   8:  

   9:         var temp = PropertyChanged;

  10:         if (temp != null)

  11:         {

  12:             temp(this, new PropertyChangedEventArgs(propertyName));

  13:         }

  14:     }

  15:  

  16:     private DependencyObject syncRoot = new DependencyObject();

  17:  

  18:     protected Boolean IsInDesignMode

  19:     {

  20:         get { return DesignerProperties.GetIsInDesignMode(syncRoot); }

  21:     }

This is really simple base class that implements INotifyPropertyChanged and inherits from MarkupExtension, it has also an IsInDesign mode property to detect if the code is running inside a designer.

   1: protected abstract void CommonInit();

   2:  

   3: protected abstract void RuntimeInit();

   4:  

   5: protected abstract void DesignTimeInit();

   6:  

   7: protected ViewModelBase()

   8: {

   9:     this.CommonInit();

  10:     if (!IsInDesignMode)

  11:     {

  12:         this.RuntimeInit();

  13:     }

  14: }

  15:  

  16: public override object ProvideValue(IServiceProvider serviceProvider)

  17: {

  18:     this.DesignTimeInit();

  19:     return this;

  20: }

Then I defined three abstract methods, the first is called CommonInit() and is used to do common initialization, then the RuntimeInit() is called to do all initialization I do not want to do when the viewmodel is used inside the designer, finally the DesignTimeInit() is called when the object is constructed inside the Designer. The trick is that the constructor call the RuntimeInit() only when we are outside the designer and the DesignTimeInit() is simply called inside the ProvideValue() virtual method of the base MarkupExtension class

Then I create a MainWindowViewModel inheriting from this class, add an ObservableCollection<Customers> to show data and implemented the initialization methods, the RuntimeInit() loads data from database.

   1: protected override void RuntimeInit()

   2:  {

   3:      using (NorthWind context = new NorthWind())

   4:      {

   5:          foreach (var customer in context.Customers)

   6:          {

   7:              LoadedCustomers.Add(customer);

   8:          }

   9:      }

  10:  }

Then in the DesignTimeInit() I create some fake objects that will be used by the designer, you can do it simple using Fizzware NBuilder library.

   1: protected override void DesignTimeInit()

   2: {

   3:     for (int i = 0; i < 10; i++)

   4:     {

   5:         Customers customerDummy = FizzWare.NBuilder.Builder<Customers>.CreateNew().Build();

   6:         LoadedCustomers.Add(customerDummy);

   7:     }

   8: }

Now I fire blend and open the solution, create a windows then add the design time data context to the first Grid control

   1: <Grid d:DataContext="{sampleproject:MainWindowViewModel}">

This will call the ProvideValue of the MarkupExtension class, so the object will be constructed with some dummy design data, then I drop a ListBox inside the window and bind its ItemsSource property with designer

Figure 1: Bind with designer

The cool part is that the designer correctly recognize the ViewModel inside the DataContext and shows me the list of properties that can be bound to the ItemsControl property. Now I right click the ListBox and ask blend to edit the ItemTemplate, then create a simple layout with a border and a 2×2 grid.

Figure 2: The layout for the DataTemplate of the ListBox

Now that I created the grid with four cells, I need to bind the label of the second column to the right properties of the Customers object, so I simply select the label, then ask to DataBind the Content:

Figure 3: Thanks to Design Time Data, blend designer can use reflection to understand the properties of the Customers Object, so we can easily choose the property to bind

The cool part is that the interface in the designer immediately reflects the result with the Design Time Data

Figure 4: Designer uses design time data to render the interface directly inside the designer

This is a killer feature because permits you to have a real look at how the UI will be rendered with data.

Code sample is here.

Gian Maria

I’ve dealt with this problem some time ago and the solution I posted worked well, but requires you to manipulate the content of the page, injecting script on the DOM. If you want to get rid of annoying messagebox with javascript error, there is another solution based on simply setting the Silent property on the AXIWebBrowser2 COM control.

The full solution was described here by Brent Lamborn and is a pretty good solution that does not require you to manipulate the content of the DOM. The Silent property of the AXIWebBrowser2 control is probably the same Property that you can set through the ScriptErrorSuppressed property of the winform version of WebBrowser control.

I wonder why this property was not ported to the WPF version of the control.

Gian Maria.

In WPF there is no PropertyViewer control, but if your need is simply to show a read-only list of all properties of an object, for dump purpose, you can obtain this with few lines of code. First of all write a special IValueConverter.

   1: [ValueConversion(typeof(Object), typeof(ObservableCollection<PropertyInfo>))]

   2:    public class PropertyViewerConverter : IValueConverter

   3:    {

   4:        public class PropertyInfo

   5:        {

   6:            public String PropertyName { get; private set; }

   7:  

   8:            public String PropertyValue { get; private set; }

   9:  

  10:            public PropertyInfo(string propertyName, string propertyValue)

  11:            {

  12:                PropertyName = propertyName;

  13:                PropertyValue = propertyValue;

  14:            }

  15:        }

  16:  

  17:        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

  18:        {

  19:            var retvalue = new ObservableCollection<PropertyInfo>();

  20:            if (value != null)

  21:            {

  22:                var properties = value.GetType().GetProperties(BindingFlags.Public | BindingFlags.Instance);

  23:                foreach (var propertyInfo in properties)

  24:                { PropertyInfo info;

  25:                    try

  26:                    {

  27:                        object pvalue = propertyInfo.GetValue(value, new object[] { }) ?? "Null";

  28:                        info = new PropertyInfo(propertyInfo.Name, pvalue.ToString());

  29:                    }

  30:                    catch (Exception ex)

  31:                    {

  32:  

  33:                        info = new PropertyInfo(propertyInfo.Name, "Exception " + ex.Message);

  34:                    }

  35:                   

  36:                    

  37:                    retvalue.Add(info);

  38:                }

  39:            }

  40:            return retvalue;

  41:        }

  42:  

  43:        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

  44:        {

  45:            throw new NotImplementedException();

  46:        }

  47:    }

The code is straightforward, the converter accepts an object and return an ObservableCollection of PropertyInfo, where propertyinfo is a simple class declared in the converter to hold name and value of the property. You can use this converter in a really simple way.

   1: <ListView ItemsSource="{Binding SearchParam, Converter={StaticResource pvc}}">

   2:   <ListView.ItemTemplate>

   3:       <DataTemplate>

   4:           <StackPanel Orientation="Horizontal" >

   5:               <Label Content="{Binding PropertyName}" Width="200"/>

   6:               <Label Content="{Binding PropertyValue}" />

   7:           </StackPanel>

   8:       </DataTemplate>

   9:   </ListView.ItemTemplate>

  10: </ListView>

In the above code I used a Listview bound to a property of the viewmodel called SearchParam that is a complex object with many properties, and thanks to the Converter I’m able to obtain a list of propertyname-propertyvalue that I can show simply with two labels.

Clearly if you need a real property editor you can check Wpf Property Grid control, or WPF property grid, both of them are open source.

Alk.

Tags: Wpf

The problem is really simple, but sometimes I see people tend to forget a little bit how the DataContext works in WPF and being stuck in wandering why a command is not invoked when a button inside a DataTemplate is pressed.

Suppose you have a ListView bounds to a list of items called SingleResult, for each SingleResult I have a complex layout and the main ViewModel contains a command that expect a SingleResult parameter called “ShowDetails” that simply shows the details of a SingleResult item. I see people do binding in this way.

Figure 1: Code to bind a button to a command

When the program runs this is the UI.

Figure 2: The UI in action.

Now clicking on the Details button makes nothing to happen. The reason is quite simple, with the syntax in Figure 1, you are actually binding the command to the ShowDetails command of the SingleResult item bound to that row.

This happens because the code is inside a DataTemplate, and the DataContext is the specific object used to render the row. In an good MVVM scenario the SingleResult object should have ShowDetails command and everything works good, but if you prefer to define the command to the main ViewModel, you need to change the syntax in this way.

   1: Command="{Binding DataContext.ShowDetails, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}" 

This code works because the command is bound to the ShowDetails defined on the DataContext of the ancestor of type Window, thus, actually binding to the main ViewModel.

Alk.

Tags: MVVM

I have an application that is built with a Metro-Like UI, so each windows has no border and can be resized with the ResizeMode equal to CanResizeWithGrip.

Figure 1: The windows can be resized by a little grip on the bottom right border of the window

I created another view, use a similar layout from the preceding one, but this time the little grip to resize the windows does not appear in the windows.

Figure 2: The resize grip of this view is missing

To understand why the grip is missing you need to understand how the window without border is build, here is the important properties of the windows that determines the “no border” style.

One thing you should be aware of, is that the key of everything is the AllowsTransparency set to True, if you set this property to false, all the background will be rendered in black, because even if Bakground=”Transparent”, transparency is disabled in the Windows. Now here is what I see with AllowTransparency disabled.

Figure 3: With AllowTransparency to false I realized that the main grid does not span the entire width of the window

The problem is quite subtle, since the main control of the window (a grid) is smaller then the entire window, when the WPF engine renders the window, the little grip maker to resize the window is rendered on a transparent region, as you can see in Figure 4.

Figure 4: Turning transparency on and moving the windows against a dark background now I see the marker

The marker was correctly rendered, but since the real dimension of the window is bigger than the visible content, I do not see him where I’m expecting it to be, and this makes me think that it was not correctly rendered.

Alk.

Tags: Wpf

Sample Code is Here.

This is the scenario: I have a FlowDocument in a FlowDocumentScrollViewer as in Figure 1.

Figure 1: Initial scenario, a simple flow document.

My goal is to be able to highlight some words in the document and show some detailed info about highlighted word to the user. It turns out after some experiments that the code is quite simple. In the first part of the snippet I search content inside the Paragraph.

   1: Paragraph p = (Paragraph)document.Document.Blocks.FirstBlock;

   2: originalRunText = ((Run)p.Inlines.FirstInline).Text;

   3: String word = "consectetur";

   4:  

   5: var textSearchRange = new TextRange(p.ContentStart, p.ContentEnd);

   6: Int32 position = textSearchRange.Text.IndexOf(word, StringComparison.OrdinalIgnoreCase);

The code works because I already know that my FlowDocument has only one Paragraph that in turn contains a single Run, so I can easily grab the original Text (it will be used to restore the original test and remove the highligh), in line 5 I create a TextRange that span the whole paragraph, then I use the IndexOf function to find the text in the range. Now I can proceed to text modification

   1: if (position < 0) return;

   2:  

   3: TextPointer start;

   4: start = textSearchRange.Start.GetPositionAtOffset(position);

   5: var end = textSearchRange.Start.GetPositionAtOffset(position + word.Length);

   6:  

   7: var textR = new TextRange(start, end);

   8: textR.Text = "";

After a simple check to verify that we found the text to highlight, I create a range that comprehend the whole match and set Text value to an empty string to completely remove the text. This is done because I will highlight the text inserting a completely new Run.

   1: ToolTip tt = new ToolTip();

   2:  

   3:  tt.Background = Brushes.LightYellow;

   4:  tt.Content = new Label() {Content = "Tooltip of HighLighted word"};

   5:  

   6:  Run newRun = new Run(word, start);

   7:  newRun.FontSize = 30;

   8:  newRun.ToolTip = tt;

I created a tooltip, but the important part is in line 6 where I create another run with the word I want to highlight setting as start location the location where I found the word, I set the font size to 30 to highlight it (you can change whatever property you want) and assign the tooltip to the run. Here is the result.

Figure 2: The code will highlight a chosen word, and we also have a cool tooltip to show advanced info

The restore button simply clear all the paragraph content and insert again the original text in a single Run.

   1: Paragraph p = (Paragraph)document.Document.Blocks.FirstBlock;

   2: p.Inlines.Clear();

   3: p.Inlines.Add(new Run(originalRunText));

Quick and simple. Code is Here.

alk.

I needed a simple way to obtain this simple result: whenever a certain component in the UI (a WebBrowser control) raises some specific event, I want a command in the VM to be executed, without the need to specify any command parameter. The only requirement I want is avoiding a single line of code in the UI because, having no code in the UI is one of the main benefit of the MVVM model.

To keep everything simple I want a simple syntax that permits me to specify that when an event of type X is raised, a command of name Y should be called.

   1: <Controls:xxxWebBrowserManagerFlexible x:Name="wbBrowser" Margin="0,0,0,0"

   2:                BrowserType="InternetExplorer"   

   3:                Links="{Binding LinksOfThePage}"

   4:                Behaviours:EventToCommandBehavior.Bind="DocumentCompleted-SignalDocumentComplete"

   5:                RawHtmlContent="{Binding FullHtmlContent, Mode=TwoWay}"

   6:                SelectedText="{Binding BrowserSelectedText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"

   7:                CurrentUrl="{Binding UrlToNavigate, Mode=TwoWay}" />

As you can see I created a simple behavior called EventToCommandBehavior that accepts a very simple syntax: a string of format EvenName-CommandName. This solution probably is not so elegant, it has no intellisense or designer support, but it works and it is supersimple. My Behavior has an Attached property called Bind

   1: public static readonly DependencyProperty BindProperty =

   2:    DependencyProperty.RegisterAttached

   3:    (

   4:        "Bind",

   5:        typeof(String),

   6:        typeof(EventToCommandBehavior),

   7:        new UIPropertyMetadata(String.Empty, OnBindChanged)

   8:    );

All the dirty work is done inside the OnBindChanged.

   1: private static Dictionary<Object, String> _routes

   2:      = new Dictionary<object, String>();

   3:  

   4:  private static void OnBindChanged(DependencyObject dpo, DependencyPropertyChangedEventArgs args)

   5:  {

   6:      if (String.IsNullOrWhiteSpace((String) args.NewValue)) return;

   7:  

   8:      String[] bind = ((String) args.NewValue).Split('-');

   9:  

  10:      EventInfo ev = dpo.GetType().GetEvent(bind[0]);

  11:      MethodInfo handler = typeof(EventToCommandBehavior)

  12:          .GetMethod("Handler", BindingFlags.NonPublic | BindingFlags.Static);

  13:      var eh = Delegate.CreateDelegate(ev.EventHandlerType, null, handler);

  14:      var minfo = ev.GetAddMethod();

  15:      minfo.Invoke(dpo, new object[] { eh });

  16:      

  17:      //now go for the command.

  18:      _routes.Add(dpo, bind[1]);

  19:  }

The core part is finding the EventInfo for choosen event, and create dynamically an handler capable to handle every event. The association between EventName and CommandName is stored inside a dictionary object, and the handler is really simple, just get a reference to the command with reflection and call the Execute method.

   1: private static void Handler(Object sender, EventArgs e)

   2:  {

   3:      String commandName;

   4:      if (_routes.TryGetValue(sender, out commandName))

   5:      {

   6:          FrameworkElement fe = sender as FrameworkElement;

   7:          if (fe.DataContext != null)

   8:          {

   9:              PropertyInfo pinfo = fe.DataContext.GetType().GetProperty(commandName);

  10:              if (pinfo != null)

  11:              {

  12:                  ICommand command = (ICommand) pinfo.GetValue(fe.DataContext, null);

  13:                  if (command.CanExecute(null))

  14:                  {

  15:                      command.Execute(null);

  16:                  }

  17:              }

  18:          }

  19:      }

  20:  }

Since the View Model that contains the ICommand is the DataContext of the element that raised the event, I simply use the GetProperty() method to find the right ICommand, and finally call the Execute method to actually call the command. Since one of the prerequisites states that we need to pass no command parameters, I simply pass null to Execute method.

Alk.