Andrew Smith

ItemsSource for XamDockManager Elements

[Infragistics] Andrew Smith — Tue, 12 Jan 2010 21:09:03 GMT

A number of people have asked about binding the ItemsSource of a TabGroupPane to their collection. This is not supported by the TabGroupPane so I thought I would explain why and provide an alternative approach. If you’re looking to bind the DocumentContentHost or even a specific SplitPane to a collection, you should still read on as this solution will allow for that as well.

The TabGroupPane is a derived ItemsControl and the ItemsSource property you see on the TabGroupPane is that of the base ItemsControl class. The ItemsControl is really designed so that whatever containers that are created for items in the ItemsSource are hosted within that ItemsControl – specifically hosted by the Panel indicated by the ItemsPanel property. So items are either automatically pushed into the Children of the ItemsPanel as items are added to the collection or in the case of a VirtualizingPanel, the panel has control over when/which containers are hydrated. Also, once you set the ItemsSource it is not possible to directly change its Items collection – an exception will be thrown by the ItemCollection if you do.

If you think about the TabGroupPane, it needs to be able to manipulate the items it contains – i.e. its Items collection. This can happen for a number of reasons. For example, if the end user pins/unpins a pane, drags a pane into or out of the group, changes the docked/floating state of one of the children, etc. Since that wouldn’t be possible if the control’s items were provided by its ItemsSource (since the Items collection would not be modifiable), the control cannot support binding its Items collection via the ItemsSource.

So how can provide support for this without using the ItemsSource property. If you think about it, the thing that we need is something analogous to the ItemContainerGenerator. This is a class used by the ItemsControl and its associated ItemsPanel to generate containers/elements for items that are not of the desired type. So for a ListBox, ListBoxItem instances are generated for items that are not of that type. Unfortunately the ItemContainerGenerator is not publicly creatable.

So the approach I decided to take was to create my own ItemContainerGenerator type class named ContainerFactoryBase that could be given a source collection and it would maintain an associated collection of containers. Based on the contents of the collection and as the collection raised change notifications it would invoke methods similar to those of the ItemsControl on itself that derived classes could use to create the appropriate container (e.g. IsItemItsOwnContainer and GetContainerForItem) and associate that container with the item (e.g. ApplyItemContainerStyle and PrepareContainerForItem). It would invoke methods as items in the source collection were added/removed/moved so that the derived class could take the appropriate action with the associated container.

I then created a derived class named ContentPaneFactory that creates ContentPane instances as the container for each item and adds it to the associated target. The class exposes several path properties that can be used to bind properties of the ContentPane to properties of the data item including the Header, Content and TabHeader properties. For any other properties, you could either provide a Style for ContentPane using the ContainerStyle property or you could use the ItemBindings collection. Lastly, I also raise an attached event (InitializeContentPane) when a ContentPane is created so you could do any programmatic initialization that might be necessary.

To make this easier to use I created an attached property that would be used to associate the factory with a given target. So you would set the ContentPaneFactory.PaneFactory property to a ContentPaneFactory instance on either a TabGroupPane, SplitPane or DocumentContentHost and that is the target element to which new ContentPane instances are added.

    <igDock:DocumentContentHost >
        <igExtensions:ContentPaneFactory.PaneFactory>
            <!-- Binds to the Documents property of the DataContext. -->
            <igExtensions:ContentPaneFactory 
                ItemsSource="{Binding Documents}"
                HeaderPath="Name"
                ContentPath="." />
        </igExtensions:ContentPaneFactory.PaneFactory>
    </igDock:DocumentContentHost>

You can get the sample here.

Common Style Issues when using the Theme property

[Infragistics] Andrew Smith — Wed, 09 Dec 2009 22:42:34 GMT

Summary

There are a couple of Style related issues that I see often. The first is a case where you have set our Theme property but some of the elements do not appear to be following the look for that theme. The other is a case where you have created a Style for a given element but your Style is not being used. To determine what is happening it is helpful to understand how Styles are located/resolved by WPF. I’m going to assume that you have a basic understanding of defining and using Styles in WPF. If not, you may want to read through the Styling and Templating topic in Microsoft’s help first.

Background

In WPF, an element can be affected by up to 2 Style instances – the “local” style and the “theme” style. Note, the theme I am referring to here is the operating system theme (e.g. Aero, XP Blue, XP Silver, etc.) and not the Theme property that we expose on our controls. I’ll explain how our Theme property plays a role a little later.

The theme style is the Style that WPF uses as the default style for the element. Without going into too much detail as it isn’t relevant to these issues, essentially the WPF framework loads a Style for a given element based on the value of its DefaultStyleKey, which is usually the element’s Type, and the current OS theme name. Essentially this is the Style provided by the developer of the control.

The local style is the style provided by the application in which the element is being used. If the Style property of an element is set then that will be the local style. If the Style property is not set then WPF will attempt to locate an implicit style and use that as the local style. The implicit style is a resolution process that involves checking the Resources of the element and its ancestors for a Style where the key in the ResourceDictionary is the specific Type of the element. The first Style that is located is used as the local style. If one is not found then the Application’s Resources are checked, again using the specific Type of the element as the key used to locate the style in the dictionary. Note, when you define a Style in a ResourceDictionary in XAML, the TargetType is used as the key if you don’t explicitly specify the key.

If a local style is found, the setters and triggers of that style will take precedence over those of the theme style. It is also important to note that if the OverridesDefaultStyle property is set (directly on the element or in the local style) then WPF will not apply the information from the theme style on the element instance.

The Infragistics Theme property takes advantage of the implicit local style capability of WPF. When you set the Theme property on a control, the ThemeManager class loads a ResourceDictionary containing the resources defined for that Theme and places them into the MergedDictionaries of the Resources of that element.

Now that we understand how WPF locates Styles and how the Theme property is involved we can try to understand why the original issues were occuring.

Problem 1 - Element Not Using Theme

The first problem I mentioned was that while the Theme property was set, the element does not use the look for that Theme. There are actually a couple of scenarios under which this commonly occurs.

Scenario 1

The first situation is one where the element that you are using is a derived instance of our class – perhaps to isolate the contents of that element. For example, you might have derived from RibbonTabItem so that you could define the RibbonGroups and Tools used by that tab in isolation as opposed to defining them all within the Window that will contain the xamRibbon. E.g.

<igRibbon:RibbonTabItem x:Class="StyleIssues.DerivedNotUsingTheme.MyRibbonTabItem"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:igRibbon="http://infragistics.com/Ribbon"
   Header="Home">
    <igRibbon:RibbonGroup Caption="Clipboard">
...
    </igRibbon:RibbonGroup>
</igRibbon:RibbonTabItem>

And then use it within the ribbon by creating an instance of that derive tab.

<Window x:Class="StyleIssues.DerivedNotUsingTheme.TestWindow"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local="clr-namespace:StyleIssues.DerivedNotUsingTheme"
   xmlns:igRibbon="http://infragistics.com/Ribbon"
   Title="TestWindow" Height="300" Width="300">
    <StackPanel>
        <igRibbon:XamRibbon Theme="Office2k7Black">
            <local:MyRibbonTabItem />
            
            <igRibbon:RibbonTabItem Header="Other" />
        </igRibbon:XamRibbon>
    </StackPanel>
</Window>

What you will notice is that when you run the application, the tab will not appear correct when you hot track the mouse over the tab.

Recall that I mentioned that when WPF looks for the implicit local style that it will always use the actual Type of the class. Setting the Theme property puts a ResourceDictionary that contains amongst other things, a Style for the RibbonTabItem. However WPF is not looking for that Type; instead it is looking for a Style where the Key is MyRibbonTabItem in this case. There are a couple of ways to get around this problem. One would be to not create a derived class but instead just define the xaml without a backing class and use LoadComponent. I described this approach in a forum post here. Another approach would be to set the Style property of your instance to a DynamicResource where the key is the base type. E.g.

<igRibbon:RibbonTabItem x:Class="StyleIssues.DerivedNotUsingTheme.MyRibbonTabItem"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:igRibbon="http://infragistics.com/Ribbon"
    Style="{DynamicResource {x:Type igRibbon:RibbonTabItem}}"
   Header="Home">
    <igRibbon:RibbonGroup Caption="Clipboard">
...
    </igRibbon:RibbonGroup>
</igRibbon:RibbonTabItem>

Scenario 2

Another case where this occurs is if you explicitly or implicitly set the Style of an element. One of the most common examples for this is providing an EditorStyle for a Field. E.g.

<Window x:Class="StyleIssues.SetStyle.TestWindow"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:igDP="http://infragistics.com/DataPresenter"
   xmlns:igEditors="http://infragistics.com/Editors"
   xmlns:sys="clr-namespace:System;assembly=mscorlib"
   Title="TestWindow" Height="300" Width="600">
    <Window.Resources>
        <igEditors:ComboBoxItemsProvider x:Key="departments">
            <sys:String>Accounting</sys:String>
            <sys:String>Marketing</sys:String>
            <sys:String>Sales</sys:String>
            <sys:String>Admin</sys:String>
        </igEditors:ComboBoxItemsProvider>
        
        <Style x:Key="comboStyle" TargetType="igEditors:XamComboEditor">
            <Setter Property="ItemsProvider" Value="{StaticResource departments}" />
        </Style>
    </Window.Resources>
    <Grid>
        <igDP:XamDataGrid Theme="LunaOlive" BindToSampleData="True">
            <igDP:XamDataGrid.FieldLayouts>
                <igDP:FieldLayout>
                    <igDP:Field Name="department">
                        <igDP:Field.Settings>
                            <igDP:FieldSettings EditorStyle="{StaticResource comboStyle}" />
                        </igDP:Field.Settings>
                    </igDP:Field>
                </igDP:FieldLayout>
            </igDP:XamDataGrid.FieldLayouts>
        </igDP:XamDataGrid>
    </Grid>
</Window>

Recall that when WPF is locating the local style, it will first check the Style Property. If that is set then that will be the local style and it will not attempt to look for an implicit style. Since the implicit style will not be used, the Style provided for the element from the Theme will not be used. One way to workaround this is to set the Based on of your Style to the Style for the Theme you are using. E.g.

   xmlns:igThemes="http://infragistics.com/Themes"
   Title="TestWindow" Height="300" Width="600">
    <Window.Resources>
...
        
        <Style x:Key="comboStyle" 
              TargetType="igEditors:XamComboEditor"
               BasedOn="{x:Static igThemes:EditorsLunaNormal.XamComboEditor}"
              >
            <Setter Property="ItemsProvider" Value="{StaticResource departments}" />
        </Style>
    </Window.Resources>

Note a similar issue would occur if instead of explicitly setting the Style property, you put a Style into the Resources of an element either in the target element itself or one of its ancestors between it and the element on which you set the Theme property. The workaround for this issue would be the same as the one described above – to set the BasedOn for the Style.

Problem 2 - Custom Style Not Used

The second problem I mentioned is a case where you have defined a Style for an element and that Style is not being picked up when the Theme property has been set. E.g.

    <Window.Resources>
        <Style TargetType="igWindows:TabItemEx">
            <Setter Property="FontWeight" Value="Bold" />
        </Style>
    </Window.Resources>
    <Grid>
        <igWindows:XamTabControl Theme="Office2k7Black">
            <igWindows:TabItemEx Header="One" />
            <igWindows:TabItemEx Header="Two" />
            <igWindows:TabItemEx Header="Three" />
        </igWindows:XamTabControl>
    </Grid>

By now you can probably tell what the problem is. When you set the Theme property, Styles are put into the Resources of the control on which you set the Theme. WPF during its implicit Style search will encounter the Resource of that element (the xamTabControl in this case) first and will not continue and therefore would ignore any Style you might have placed into the the Window or Application Resources. The workaround is to move that Style into the Resources of the element on which you set the Theme. Note, since this Style will now be found first (since the ResourceDictionary provided by the Theme property is put into the Resources.MergedDictionaries and the MergedDictionaries are checked after the resources you place directly in the Resources) the Style provided by the Theme will not be used so you must also use the approach recommended in the second scenario for the first problem. E.g.

        <igWindows:XamTabControl Theme="Office2k7Black">
            <igWindows:XamTabControl.Resources>
                <Style TargetType="igWindows:TabItemEx"
                      BasedOn="{x:Static igThemes:PrimitivesOffice2k7Black.TabItemEx}">
                    <Setter Property="FontWeight" Value="Bold" />
                </Style>
            </igWindows:XamTabControl.Resources>
            <igWindows:TabItemEx Header="One" />
            <igWindows:TabItemEx Header="Two" />
            <igWindows:TabItemEx Header="Three" />
        </igWindows:XamTabControl>

Hosting WPF Controls in a XamDataGrid Cell

[Infragistics] Andrew Smith — Fri, 27 Mar 2009 20:26:00 GMT

By default, the elements used to display and edit values in a XamDataGrid cell are based on the ValueEditor associated with that Field. The EditorType and/or EditorStyle is used to determine which ValueEditor derived class (e.g. XamTextEditor, XamMaskedEditor, etc.) should be used. If those are not specified a default one is chosen based on the resolved EditAsType.

One way to provide a control for a cell is to create a custom Template for the cell as part of the CellValuePresenterStyle on the FieldSettings. This works fine if you are just using this to render the value but it has limitations with regards to editing and tab navigation. Since ValueEditor is not being used the EditMode(Start|End)(ing|ed) events will not be raised. Also when the cell tries to go into edit mode, the controls within the cell will not automatically get focus and when you use the tab key to navigate, the grid will use that to navigate amongst the cells.

The other option is to create a custom ValueEditor and use that as the editor for the Field. To help facilitate this I have created a sample ValueEditor named ControlHostEditor that can be used to host arbitrary controls/elements. The ControlHostEditor exposes 2 DataTemplate properties - RenderDataTemplate and EditDataTemplate - which are used based on whether the editor is in edit mode. You can get the sample here.

Update [8/25/09]: I modified the sample to avoid using FindAncestor within the sample templates since a FindAncestor binding is not evaluated synchronously. Instead, there is now an inherited property that provides access to the editor in the descendant elements eliminating the need for the FindAncestor call.

BitmapEffects

[Infragistics] Andrew Smith — Wed, 09 Apr 2008 06:08:21 GMT

BitmapEffects should be used sparingly since currently¹ they are software rendered but judicious limited usage of them can provide some nice effects for your application. In some cases, their usage is necessary to duplicate a particular look and feel - e.g. using a OuterGlowBitmapEffect to mimic the glow around text in the title area of the ribbon window. However, BitmapEffects are not allowed when running in a limited trust situation - e.g. xbap - so if your template defines a BitmapEffect, that template cannot be used when running in an xbap.

There are several options you could choose. You could create the bitmap effect in code so you can catch any security exceptions that might arise. This option allows you to catch the exception that would be generated when you don't have the security required to create it but it assumes that the developer knows when the bitmap effect will be needed. If you're working with a designer, you'll want to leave it up to them. The look of the element should be kept as separated as possible from the behavior/code behind. Another option is to create two templates and decide in a style trigger which to use depending on whether you're running in an xbap. This too isn't a great option since it means you have to maintain two different templates - more if you have to re-template the element for different themes.

We chose another route - we created the SafeOuterGlowExtension class. This class is a markup extension that can be used to define an OuterGlowBitmapEffect and exposes the same properties available on that class. Since the OuterGlowBitmapEffect is not defined in the xaml, the template can be used even when running in an xbap, in which case the bitmap effect is not created. Currently, this is the only bitmap effect exposed in this manner since it was the only one we needed at the time. If you need to use another bitmap effect, you could follow a similar route for the other bitmap effect classes.

Example usage:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:igWindows="http://infragistics.com/Windows"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
  <TextBlock Text="This text has a glow"
      BitmapEffect="{igWindows:SafeOuterGlow GlowColor=Yellow}"/>
</Page>

Notes
1. Some of the bitmap effects will be hardware accelerated in a service release due later this year.

MousePanning in WPF

[Infragistics] Andrew Smith — Fri, 04 Apr 2008 06:41:41 GMT

Many applications such as Microsoft Office and web browsers provide the ability to scroll by pressing down the middle mouse button and dragging in the direction that you want to scroll. This feature is often referred to as mouse panning. When you press down the middle mouse button on a scrollable area, an indicator is displayed. This indicator usually has arrows that let you know whether you can scroll vertically and/or horizontally. You can then drag the mouse in a direction to cause the window to scroll.

We had incorporated this functionality into our UIElement framework in Windows Forms but any element that wanted to utilize it had to opt into the feature, override certain members, and process the panning notifications since scrolling functionality is implemented by each control. In WPF, elements that want to allow for scrolling normally do so by using a ScrollViewer. The MousePanningDecorator class takes advantage of this fact to provide mouse panning functionality to any ScrollViewer nested within it. You just need to create an instance of this element within your Window/Page and any ScrollViewer within it will receive mouse panning support.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:sys="clr-namespace:System;assembly=mscorlib" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:igWindows="http://infragistics.com/Windows"
>
    <Grid>
        <igWindows:MousePanningDecorator>
            <ScrollViewer HorizontalScrollBarVisibility="Auto">
                <Image Stretch="None" 
                  Source="http://veimages.gsfc.nasa.gov/2433/land_shallow_topo_2048.jpg" />
            </ScrollViewer>
        </igWindows:MousePanningDecorator>
    </Grid>
</Page>

If you want to restyle the indicators, the class exposes several ResourceKey fields that can be used to provide custom ImageSources for the indicators.

Disabled Images in WPF

[Infragistics] Andrew Smith — Sun, 30 Mar 2008 07:11:00 GMT

I think most developers and end users have come to expect that when a menu item or button is disabled that the image and text within that item are displayed as grayed out. This provides a visual indication that the item is not available for use. I can understand why the Image element would not do this by default but I was surprised to find that there wasn't even an option to have it do this for you. If you have an Image within a Button or MenuItem and you disable that element, the Image element within will be disabled but the image it renders will appear no differently than when it was enabled. That is why we created the AutoDisabledImage class. This class derives from Image and provides support for automatically¹ rendering an image as disabled when the element is disabled. You use this element in the same way you would an Image element - just set the Source property to the image that you want to display. When the element is disabled, it will handle converting the image to a gray scale version.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:sys="clr-namespace:System;assembly=mscorlib" 
xmlns:igWindows="http://infragistics.com/Windows"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
  <StackPanel>
<igWindows:AutoDisabledImage  Source="http://www.infragistics.com/App_Themes/Default/images/logo.gif" 
Stretch="None" />
<igWindows:AutoDisabledImage IsEnabled="false" 
Source="http://www.infragistics.com/App_Themes/Default/images/logo.gif" 
Stretch="None" />
  </StackPanel>
</Page>

Notes
1. The current implementation only works with a BitmapSource derived ImageSource. If you use a DrawingImage, the Image will continue to appear as it did when it was enabled.