Customizing DiagramToolbox Appereance

Hello,

We would like to customize the appearance of Diagram toolbox font,color etc. We couldn't change the font size via properties. Does it supress our changes with its default style? If so, could you please provide default xaml codes and help about customizing toolbox?

Thanks for your help.

Hello

If you only need to make a few customizations such as the text styling, then you can make a data template containing a text block and set the style properties on that. Then set the HeaderTemplate property of each DiagramToolBoxGroup to be this data template. If you need to do broader changes such as background/border colors and mouse states, then you'll want to make an entirely custom toolbox style.

I have attached a sample that demonstrates how to customize the toolbox style. If you want to run the sample, be sure to add a reference to your copy of the Mindscape.WpfDiagramming.Foundation.dll. The style is a bit ugly, but the code is simple so you can easily get it looking like what you want. The styling code is all found in the App.xaml file, and then it is applied to the toolbox and each toolbox group in MainWindow.xaml. The background color of each group is achieved by setting the Background property of the DiagramToolBox.

Jason Fauchelle

Hello,

thank you for the example. There is a problem. You are using properties FilterMenuStyle for DiagramToolBox and HeaderContainerStyle for DiagramToolBoxGroup. VS says that there are no FilterMenuStyle property for DiagramToolBox type, and the same about HeaderContainerStyle. You propose using HeaderTemplate property. It is clear from FlowDiagramsDemo sample application how to create these templates. But there is no information how to display the filter menu. I am setting up the template using Style property:

        <Style x:Key="DiagramToolBoxStyle" TargetType="{x:Type ms:DiagramToolBox}">
            <Setter Property="Background" Value="{StaticResource DiagramToolBoxBackground}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ms:DiagramToolBox}">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <ItemsControl ItemSource="{ Binding ???????}" GridRow="0" />

     <!-- What should I use instead of ?????? to insert the Filter Menu in here -->

                            <ItemsControl ItemsSource="{Binding Groups,
                                          RelativeSource={RelativeSource TemplatedParent}}"
                                          Grid.Row="1"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>    

Regards, Alexander Mokrushin

Hello Alexander

It is possible that you do not have the latest update of WPF Diagramming. To get the latest update, you can go to your account page and download the latest nightly build. http://www.mindscapehq.com/store/myaccount. If you need to style/template the entire ToolBox control, I have attached a file containing the generic resources for this. This includes how the filter menu is setup. This still uses those properties, but if you need to, you can apply the styles/templates directly rather than getting them from the properties. Let me know if you need more information.

Jason Fauchelle