OutlookBar binding ItemsSource and providing a common style.

Hi, I'm trying to use the OutlookBar, but for various reasons rather than create all the outlookbaritems in the form, and I would rather bind the ItemsSource property to a list in my viewmodel. Naturally, I would like all the items to have the same "Header" and "Collapsed" header, except for the text and image displayed.

My frustration stems largely from the fact that OutlookBarItem is not a FrameworkElement. That would have saved me a lot of time. I could have created a Style for OutlookBarItem and provided a Setter for 'Header' and 'CollapsedHeader' and the content would essentially take care of itself. The bonus as well, is that I could have provided a binding for the 'IsSelected' property.

So barring that I can still provide a list of OutlookBarItems through the ItemsSource property, but how would I define a template for the Header and CollapsedHeader objects?

Any ideas?

Hello

I've had a look at changing OutlookBarItem to be a FrameworkElement but this produced a few breaking changes which means this would have to wait until a major version release.

I have however added some template properties to the OutlookBar which will be available in the next nightly build. You will now be able to use the existing ItemTemplate and ItemTemplateSelector properties to set templates for the item header objects. And you'll be able to use the new CollapsedItemTemplate and CollapsedItemTemplateSelector properties to set the templates of the collapsed header objects.

Jason Fauchelle

Providing an ItemTemplate should be an acceptable workaround. Although, I'm having difficulty making it work. Here is my xaml for the outlook bar.

<ms:OutlookBar HorizontalAlignment="Left" Name="outlookBar1" VerticalAlignment="Stretch" ExpandedItemCount="3" 
                         Margin="5,5,2,5" ItemsSource="{Binding NavigationItems}"
                         ItemTemplate="{StaticResource OutlookBarItemHeaderTemplate}" 
                         CollapsedItemTemplate="{StaticResource OutlookBarItemCollapsedHeaderTemplate}">

 </ms:OutlookBar>

And here is an example of one of the templates:

<DataTemplate x:Key="OutlookBarItemHeaderTemplate">
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" Margin="5,0,0,0" Height="25">
              <Image Width="21" Height="21" VerticalAlignment="Center" HorizontalAlignment="Left" Source="{Binding Image}" />
              <TextBlock Margin="13,0,0,0" FontWeight="Bold" VerticalAlignment="Center" 
                               HorizontalAlignment="Left" Foreground="Black" Text="{Binding Text}"></TextBlock>
         </StackPanel>
 </DataTemplate>

However, what I see when I run it is the same whether I specify templates or not. I certainly see that there are items displayed, but they are all squished at the bottom. Looking at the tree I see the ExpandedItemPanel with a ContentPresenter containing 3 togglebuttons each with a Grid, Border, and ultimately an Empty ContentPresenter.

I see that the HeaderTemplate and CollapsedHeaderTemplates are assigned on the OutlookBarItem. And I see in the style where we are using the HeaderTemplate. but I still see nothing.

The ContentHost is still working - which is good. But I had that working before.

Edit:

Ahah. Found something. In the OutlookBarButtonStyle which styles the ToggleButton for both the itembar and the collapsed button there is a missing binding. It should be this:

<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Stretch" Margin="0,2,0,2"
                              Content="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" 
                              ContentTemplate="{Binding ContentTemplate, RelativeSource={RelativeSource TemplatedParent}}"
                              ContentTemplateSelector="{Binding ContentTemplateSelector, RelativeSource={RelativeSource TemplatedParent}}"/>

So that helps, I can see the contents of my DataTemplate in the tree now, but it seems I still have a problem with binding to my content.

Hello Eliz

Good to see you solved the problem. Just to clarify, is this a change that you have made in a custom style at your end? Or is this something that needs to be applied in our styles? If so, which style are you using?

Please describe your remaining content binding problem an I'll see if we can do anything about it.

I will be away next week, so you may not get a reply until I'm back.

Jason Fauchelle

I was using the OutlookBar styles from the Silver Theme in the release. I believe the same issue exists in the other styles as well. I had been switching between the AlloyLight and the OfficeSilver styles trying to decide what kind of look I wanted. To fix the first problem, I copied the whole OutlookBar section from the theme xaml files that come with the release and made my change in OutlookBarButtonStyle.

Hmm... Ok, I got my content binding to work now too, although I'm not sure whether this was a good change or not.

Basically, the OutlookBar ItemsSource is binding to an ObservableCollection When this list is created the Content of each OutlookBarItem is set to a ViewModel of my creation. I have a DataTemplate for this ViewModel which shows up when the particular OutlookbarItem is selected.

Now, in the same style as I changed before OutlookBarButtonStyle I added another Binding for the 'Content' parameter. So now the contentPresenter looks like this:

 <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Stretch" Margin="0,2,0,2" 
                              Content="{Binding Content}"
                              ContentTemplate="{Binding ContentTemplate, RelativeSource={RelativeSource TemplatedParent}}"
                              ContentTemplateSelector="{Binding ContentTemplateSelector, RelativeSource={RelativeSource TemplatedParent}}"/>

So now my DataTemplate which is passed through "ItemTemplate" has access to the ViewModel which is set as the Content to the OutlookbarItem. And by extension the Collapsed button does too.

I don't know if you will approve of those changes, but it does work.

Hello

This binding is fine, glad you have it all working now.

Jason Fauchelle