[Version 2.0] add an icon/png to a LayoutDocument

Jun 11, 2012 at 10:50 PM
Edited Jun 11, 2012 at 10:50 PM

I would like to be able to put an icon/png on my LayoutDocument tabs.  Is this Possible?

I tried just adding the path to an ico file (I also tried a png file) like this:

<avalonDock:LayoutDocument Title="Tab1"
                           IconSource="Images\MyImage_16.ico"
                           IsActive="True"
                           IsSelected="True">

But that did not work.  I am sure that the file reference is correct because other parts of my app (the Ribbon) are referencing files in that folder.

Is there a way to get an Icon on an tab?

Aug 21, 2012 at 7:07 PM

I agree that this would be a nice feature to have, but i don't think it's possible at the moment.

Althought i made this possible in one of my programs that is using version 1.3 by modifying the template manually. 

I don't have the code with me right now, but i suppose that if you're still interested i could point you out in the right direction.

Sep 12, 2012 at 2:18 PM

This post might help

http://avalondock.codeplex.com/discussions/395288

Sep 12, 2012 at 2:24 PM

Would it be possible to add this feature? I know it's not how VS behave but it could be nice to have the possibility to see the icon on a document tab.

Also seeing the icon in a panel Header would be great. I dont understand why in visual studio the icon gets removed when docked. I always thought that it would be a good visual cue to have.

Maybe it could be an flag to enable/disable it?

 

Sep 12, 2012 at 3:01 PM

By default document icons are used for document switch context menu only. If you want to show the icon in document tabs too just override the default template:

        <avalonDock:DockingManager Grid.Row="1" x:Name="dockManager" AllowMixedOrientation="True" DocumentClosing="dockManager_DocumentClosing">
            <avalonDock:DockingManager.Theme>
                <avalonDock:VS2010Theme/>
            </avalonDock:DockingManager.Theme>
            <avalonDock:DockingManager.DocumentHeaderTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="{Binding IconSource}" Margin="0,0,4,0"/>
                        <TextBlock Text="{Binding Title}" TextTrimming="CharacterEllipsis"/>
                    </StackPanel>
                </DataTemplate>
            </avalonDock:DockingManager.DocumentHeaderTemplate>
...

 

it should work.

You can even choose to show the icon when the document is floating beside the title:

            <avalonDock:DockingManager.DocumentTitleTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="{Binding IconSource}" Margin="0,0,4,0"/>
                        <TextBlock Text="{Binding Title}" TextTrimming="CharacterEllipsis"/>
                    </StackPanel>
                </DataTemplate>
            </avalonDock:DockingManager.DocumentTitleTemplate>

There are many templates that can be customized like the anchorable/document title, header, menus etc. anchors and so on
Ado

 

Sep 13, 2012 at 8:33 AM

There remains one problem with the above (and with my method in the other thread about changing generic.xml).  When docked in the main documents pane there is a drop down menu on the right right that lets you pick from the docked tabs.  This is doubling up on the icons.  I assume the menu item has the icon and is embedding the template or something.

Sep 13, 2012 at 9:32 AM

Definitely is a generic theme bug, that I've fixed in my internal version that will be shortly live. The other themes don't have this problem. Ado

Sep 13, 2012 at 9:45 AM

Yes my assumption was correct and I fixed it too but I was confused, I'll tell you why:

In generic.xaml it is assigning an icon and a header template:

<avalonDockControls:ContextMenuEx.ItemContainerStyle>
                                            <Style TargetType="{x:Type avalonDockControls:MenuItemEx}">
                                                <Setter Property="HeaderTemplate" Value="{Binding Path=Root.Manager.DocumentPaneMenuItemHeaderTemplate}"/>
                                                <Setter Property="HeaderTemplateSelector" Value="{Binding Path=Root.Manager.DocumentPaneMenuItemHeaderTemplateSelector}"/>
                                                <Setter Property="IconTemplate" Value="{Binding Path=Root.Manager.IconContentTemplate}"/>
                                                <Setter Property="IconTemplateSelector" Value="{Binding Path=Root.Manager.IconContentTemplateSelector}"/>
                                                <Setter Property="Command" Value="{Binding Path=., Converter={StaticResource ActivateCommandLayoutItemFromLayoutModelConverter}}"/>
                                            </Style>
                                        </avalonDockControls:ContextMenuEx.ItemContainerStyle>

It was using the same template so I created a new separate template for menu items:

        <!-- AJC 13/9/12 Use new menu header template to stop doubling up of icons because the menu already has an icon -->
        <!--<Setter Property="DocumentPaneMenuItemHeaderTemplate" Value="{StaticResource DocumentHeaderTemplate}"/>-->
        <Setter Property="DocumentPaneMenuItemHeaderTemplate" Value="{StaticResource DocumentMenuHeaderTemplate}" />

Defined here:

    <!-- AJC 13/9/12: new document menu header template -->
    <DataTemplate
        x:Key="DocumentMenuHeaderTemplate">
        
        <TextBlock Text="{Binding Title}" TextTrimming="CharacterEllipsis"/>
    </DataTemplate>

But then it still did not work and I could not understand why - it was still using the DocumentHeaderTemplate for menu items.

Then I found the problem in DockingManager.cs:

        protected virtual void OnDocumentHeaderTemplateChanged(DependencyPropertyChangedEventArgs e)
        {
            // AJC 13/9/12: Don't do this because it seems to be stopping DocumentPaneMenuItemHeaderTemplate from being set
            //if (DocumentPaneMenuItemHeaderTemplate == null)
            //    DocumentPaneMenuItemHeaderTemplate = DocumentHeaderTemplate;
        }
The document header template is set first and so it was setting the menu template to a copy of the document header template.  I don't understand why it didn't then go and set the menu item template but the above code stops it for some reason.  Commenting it out fixes the problem and the menu item header template gets set.

Sep 13, 2012 at 5:46 PM

Exactly, I don't know anyway why it didn't work with the generic theme and it did with the others. I suppose that the generic theme is applied before that OnDocumentHeaderTemplateChanged is called. Forcing it the a local value broke the binding installed by the generic style.

Ado

May 14, 2014 at 7:48 AM
Edited May 14, 2014 at 7:51 AM
Hi,

it's been a while but I still have a similar problem.
In my application I am using avalondock-102592 with VS2010 Theme. The drop down menu on the right shows the icon but not the text:

Image

If I dont use any theme, it is displayed correctly. (when using the testapp from the avalon solution it works with VS2010 theme anyway which is strange...)
I was trying to overwrite the template but this only works if VS2010 is not used:
<avalonDock:DockingManager   >
            <avalonDock:DockingManager.Theme>
                <avalonDock:VS2010Theme/>
            </avalonDock:DockingManager.Theme>

            <avalonDock:DockingManager.DocumentPaneMenuItemHeaderTemplate>
                <DataTemplate DataType="{x:Type avalonDock:LayoutDocumentPane}">
                    <TextBlock Text="{Binding Title}" TextTrimming="CharacterEllipsis"/>
                </DataTemplate>
            </avalonDock:DockingManager.DocumentPaneMenuItemHeaderTemplate>
Any clue? Thank you in advance
chris