Home » Microsoft Technologies

Minimum width for flowchart designer in collapsed state?


This is a followup to this forum question. In the earlier question, I found away to change the appearance of the flowchart designer in its collapsed state by changing the template of the activity designer.  This seems to work pretty well.  The one thing I've noticed is that when I replace the flowchart's template with my own, even if I have a very small width to my template content, there seems to be some minimum width to the selected designer.  That is, if my style looks like this:

<ControlTemplate x:Key="FlowchartDesignerCollapsedTemplate" TargetType="swd:ActivityDesigner">
        <TextBlock Text="Hello, world!"/>

The width of the designer selected area is significantly wider than the width of the characters in 'Hello, world!'.  If I have a border around my text, then my border is much wider than necessary.  If I don't have a border, then when I mouse over or select the activity designer, I see the right selection rectangle much further to the right of my text than I would expect. 

Where is this extra width coming from (it's not in my template) and how can I get rid of it?




5 Answers Found


Answer 1

I tried to adjust the size by changing  the view state  using the ShapeSize and Width keys.  Neither worked, although I noticed  that after I set the ShapeSize to 1,1 when I later looked in the serialized XAML, it got changed to 200, 20 (the Width remained at 1).  I tried also setting a MaxWidth on my root element of template  (e.g. a border) and this did shrink the size down - but the connection rectangle did not observe the MaxWidth, with the right most connection rectangle appearing far to the right of the root element.

I still would like to know what is going on, and how I can work  around the observed behaviour.




Answer 2

maybe you can take a look at



Answer 3

Do you mean the WorkflowElementDesignerDefaultTemplate in Kushal's sample project or something else?  If so, I'm not using Kushal's template  at all.  Having said that, looking at his template, I see the following:

 <Border  x:Uid="ShapeBorder" MinHeight="{TemplateBinding MinHeight}" MinWidth="{TemplateBinding MinWidth}" x:Name="ShapeBorder" CornerRadius="4" >

Border is the root element in his ControlTemplate.  I modified the trigger to set the MinWidth to 0:

           <Style x:Key="FlowchartCollapsedStyle" TargetType="{x:Type swd:ActivityDesigner}">
                    <Trigger Property="ShowExpanded" Value="False">
                        <Setter Property="MinWidth" Value="0"/>
                        <Setter Property="Template" Value="{StaticResource FlowchartDesignerCollapsedTemplate}" />

And that did work!


Answer 4

there is a built in




Answer 5

Ok, thanks.  I'm not sure how I missed it before but MinWidth was what I was looking for and it does work  as advertised.




Is there a way to make an (expanded) FlowChart activity's designer fill the entire workflow designer area (excluding the areas used by expand/collapse links, breadcrumb, workflow shellbar, etc)? 

Depending on the size of the area in which the workflow designer is hosted, there can be a lot of wasted 'white space' around the FlowChart that can't be used for anything by the workflow author.  While the workflow author can resize the FlowChart designer within the workflow designer, it would be nice to have a way to make the workflow designer automically size to fill, at least to the initial size, of the available designer area.  (It might not be great to have this continously resize the FlowChart designer automatically, but at least if it initially fills the free space, that would be nice).






The legend of my chart is docked left and has four columns, the first one is the series indicator colour, the second is the series name and the rest are numbers.

If the contents of the legend are too long for its width, the chart will truncate the text starting from the far right cell, e.g 456789 becomes 456..., however, if the cell becomes too small it only shows 4 without the dots, which is misleading. I attempted setting a minimun size for the legend column, but this stops working in case of legend overflow. Any idea how I can do it? Alternatively is there at least a way to force it to show three dots instead of 4? 

If the legend's width is further reduced the last column is hidden, but there are no dots there to show there are more columns, which is also misleading, especially given legends do show three dots if the bottom rows are hidden. Looking at the Legend class members I can't see a way to set a minimum width on it. Am I missing something?




There are many situations in which I want to make a td use the minimum width necessary. For example, I may have a td that has a span in it, so I cannot determine the width beforehand because I may not know what font (or even what text) will be displayed in the span tag. If I have a table like the following:

<table style="width:100%;" cellspacing="0" cellpadding="0">
       <td style="width:200px;"><img .></td>
       <td><span style="white-space:nowrap;>Unknown Text</span></td>

I want the second td to use the minimum width possible, and have the third td use the remaining space. Is there any way to do this using CSS? If not, what is the best way to do it? Thanks.

Nathan Sokalski


Using the .net 3.5 state machine, I was able to create a "pause" workflow state which can be transitioned to from any state. The "pause" state envelops all other composite states. Once the workflow is in the "pause" state, I recorded the state from which it was transitioned from and then, when the workflow is "released" from the "pause" state, I use the SetState method to transition to the previous state. I'm wondering if there is any easy method using the Flowchart workflow?



I've a list view with a GridView.

I'm creating my column dynamically since it's binded to my dataTable.

currently, the gridViewColumn width is set to Auto, which means that the width of the column is set according to the wider cells.

i want to set a minimum cell width so, if a column is empty it still has a minimum width.

is it possible?

this is my code:

gvcolumn = new GridViewColumn();
            gvcolumn.Header = "full name";
            gvcolumn.DisplayMemberBinding = new Binding("full_name");;


this is my XAML:

<ListView x:Name="searchResultsListView" DockPanel.Dock="Top"  FontSize="12" FlowDirection="RightToLeft">
                                    <ListView.Foreground >
                                        <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                                            <GradientStop Color="#FF000040" Offset="0" />
                                            <GradientStop Color="#FF000040" Offset="1" />
                                    <GridView x:Name="searchResultsGridView"></GridView>





Hi there,


I need to set the minimum dimension of a ScrollBarThumb. The width change with max value set on the scrollbar 

how can i set the minimum width of this element.

I neeed to set a minimum width bigger than the standard one.



I'm creating a bar chart report. And the values range from 120 to 36,000. So when I set the Show Data Labels to TRUE , Everything is fine but I can't see the small numbers in their own part of the bar. The labels are showing up  in 2 or more continuous parts of the bar.

So is there a way to set the minimum bar width so that i can see the numbers well? ( I want to see the number 140 completely in its own part of the bar, but 140 is so small when compared to the large value 36000, I can't see 140 in its own part)




Can anyone point me in the right direction for developing a custom designer for a Flowchart activity? 

In actual fact, the Flowchart control we are using is a custom activity - it's not the regular .NET Flowchart activity, but our own creation with a collection for FlowNodes/etc.  We'd like to put a UI around it now as well ... mimicking the .NET Fllowchart designer.  Is that really possible, or extremely difficult?  It seems there's no real API or anything available for constructing the node connectors, arrows, etc.



I would create a simple "flow chart designer" in Silverlight. I need to connect two controls (eg two rectangles) by a line (eg a LineGeometry with a StartPoint and an EndPoint). This line must have an orthogonal layout.
Is there a way (an algorithm) to define the points for an orthogonal line connector between two point? I've read about "Manhattan algorithm". It is the right way in your opinion? Are there some Silverlight libraries that could do that for me?

Thanks in advance for your help!



Hi, I am using TreeView to display my data in UI. Now my application refreshes every 5 seconds so that it shows the most current data. Is there a way I can save my expanded state or collapsed state of treeview even after window reload? Because if I have a huge amount of data and I take more than 5 seconds to go to desired data, the TreeView just collapses after every 5 seconds with window refresh, and I have to start from scratch.


Hi Everyone,

I want to know how we can change the Node image (in my case  a folder image on collapsed and Opened_Folder image on expanded state) of a Treevire control. That's when I click on the node it's image must be changed into an Opened Folder image and if I collapse it so the image must be changed back to closed folder image. I am dynamically binding my Treeview nodes.

Do we have to do it through Code Behind or through XMAL i.e Styling. I have searched many articles but couldn't find anything usefull. I also viewed    http://blogs.silverlight.net/blogs/justinangel/archive/2008/11/18/silverlight-toolkit-treeview-treeviewitem-amp-hierarchaldatatemplate.aspx

But the code for HasItems and NoItems visual state doesn't seem to be working rather it gives me an exception at comile time.

Kindly help me in this regard.

 Thanks and Regards

Fahad Ali



Some activities, like Flowchart and Pick, have both a collapsed and expanded state for their designers; others like WriteLine have only a single expanded state.  For those that have both an expanded and collapsed state, the collapsed state contains the text 'Double-click to view'.

My questions are:

a) What makes some activity designers have only a single state while others have both an expanded and collapsed state?

b) How would I customize the appearance of a designer in the collapsed state?




The sample methods that show how to expand and collapse activity designers have been causing me a lot of trouble. Firstly the UI controls in the data templates do not exist at design time and so its not possible to write event handlers and so on in the code behind file. Also some third party controls throw exceptions as items they are trying to access dont exist in the visual tree on collapse.

The recommended method is to use a ContentPresenter and then swap its ContentTemplate based on a trigger:

<Stylex:Key="ExpandOrCollapsedStyle"TargetType="{x:Type ContentPresenter}"><SetterProperty="ContentTemplate"Value="{DynamicResource Collapsed}"/><Style.Triggers><DataTriggerBinding="{Binding Path=ShowExpanded}"Value="true"><SetterProperty="ContentTemplate"Value="{DynamicResource Expanded}"/></DataTrigger></Style.Triggers></Style>

 An alternative that seems to work just as well and still allows UI controls to be part of the visual tree at design time is to create two styles:

<Stylex:Key="CollapsedStyle"TargetType="{x:Type Grid}"><SetterProperty="Visibility"Value="Visible"/><Style.Triggers><DataTriggerBinding="{Binding Path=ShowExpanded}"Value="true"><SetterProperty="Visibility"Value="Collapsed"/></DataTrigger></Style.Triggers></Style><Stylex:Key="ExpandedStyle"TargetType="{x:Type Grid}"><SetterProperty="Visibility"Value="Collapsed"/><Style.Triggers><DataTriggerBinding="{Binding Path=ShowExpanded}"Value="true"><SetterProperty="Visibility"Value="Visible"/></DataTrigger></Style.Triggers></Style>

The styles are then applied to two elements that need to be expanded and collapsed:

--grid that shows on collapse
<GridStyle="{DynamicResource CollapsedStyle}"><StackPanel><TextBlockHorizontalAlignment="Center"VerticalAlignment="Center"FontStyle="Italic"Foreground="#FF6D6D6D">Double-click to view</TextBlock></StackPanel></Grid>

--grid that shows on expand
<GridStyle="{DynamicResource ExpandedStyle}">


In a blog post by Matt Winker (http://blogs.msdn.com/mwinkle/archive/2009/10/20/wf4-designer-enhancements-in-vs-2010-beta-2.aspx), he notes that:

"Additionally, you can choose to expand or collapse individual nodes, or go to the “Expand All” command in order to expand out the tree.  One thing to note is that we don’t allow expansion inside of a flowchart because we don’t yet have a mechanism that lets me rearrange all of the items around that newly expanded activity.  "

My question is, will there be a way by the time RTM releases to do expansion within a flow chart?  The flow chart model is what I'll be using exclusively, so I'm quite interesetd in this.

If there will not be support by the time workflow reaches RTM, is there or will there be a way that we can hide the Expand All/Collapse All hyperlinks?

Thank you,


Hi all
Are there any way to lock (RDL/RDLC) report width in Microsoft designer(BI / visualstudio/ reportbuilder) ?
Are there any 3dparty RDL/RDLC designer that support 2008 RDL/RDLC?

thanks alot


I'm trying to find the width and height of a given designer, given a model item.  I have code like this:

if (modelItem.ItemType == typeof(FlowStep))
          action = modelItem.Properties["Action"].Value;
          view = action.View as WorkflowViewElement;
          view = modelItem.View as WorkflowViewElement;
        if (view != null)
          double width = view.ActualWidth;

          double height = view.ActualHeight;


The problem is that the height and width I get this way doesn't match the actual size of the designers, if the zoom is set to something other than 100%.  How do I get the actual width and height of a designer, regardless of the zoom setting?




In VS2008, is it possible to programatically have any control over the outline margin in the editor. For example, in my code:

1. Can I know which regions/ or which lines are collapsed in the editor?

2. Can I listen to any events to receive notifications for expand or collapse of outline regions?

I understand that we can do a few basic things through DTE.ExecuteCommand eg. toggle all outlines, start/stop outlining etc. But is there any COM object or anything which I can get hold of, which can give me more information?


I use Blacklight expander in my Silverlight project and i want to create a Button to expand or collapse all the expander in the same time and change the Button content. The Blakclight control have the property "IsExpanded". Is there a way to do that ?

The Blacklight expander is similar to the Silverlight Toolkit Accordion control.




In most cases, changes made to the model or view state pretty much immediately reflect in the designer UI, assuming there is a corresponding UI representation for the model item or view state.  What I'm doing is using the view state to establish links (in a Flowchart designer) between activity designers.  Normally this works fine.  But occasionally, an exception is thrown saying that a connection cannot be made between two points.


In the event of this exception, I can wrap the statement that throws the exception (in my case, EditingScope.Complete) and retry the logic, this time not specifying the connection points and letting the designer's routing algorithm comes up with its own path.


The problem I'm experience is when I wrap the call (EditingScope.Complete) in a try/catch block that throws the exception and re-do the connection logic, this time not specifying the view state (but still specifying the Next property of a FlowStep, or True/False property of a FlowDecision, etc using the ModelItem.SetValue method), visually a connection is not made between the activities.  But if I manually close the designer and reload it or use the bread crumb navigation to move away from the current designer and then return, the connections visually appear.

I want to be able to programmatically refresh the UI based on the updated model / view state.  I tried a number of things:


Calling UpdateLayoutLayout on the current root designer.  Not surprisingly, this didn't help :) Calling WorkflowDesigner.Load() after flushing the content.  This failed, as I would need to create a whole new instance of the workflow designer which I don't really want to do Called DesignerView.MakeRootDesigner, specifying a different model item.  This worked, but then I need to return to current root designer and remember the scroll positioning, etc, of the current root designer, before navigating to a new one.  Also, there might not be another designer that I can logically make the root designer, even temporarily, so this approach may not always work.

I realize the root of my problem is not that the designer doesn't refresh, but that some connections I try to establish are considered illegal.  In the case where a connection cannot be made based on the points collection I provide, the flowchart designer tries to re-route and fails, throwing the exception. In this case, I let MS take over.  I can't predict when it will fail (it's pretty rare) but when it does I try to handle it in the try/catch fashion.

Any suggestions?




When adding WPF styles through control templates and resourcedictionarys VS2010 throws an InvalidOperationException error in the designer on controls when certain properties are set, that link back to the Visual States. I thought this must be the way i was creating the Visual States (i am using Blend 4.0) but I am also getting the same error, even using the ControlTemplateExamples downloaded from the msdn site.  http://code.msdn.microsoft.com/Project/Download/FileDownload.aspx?ProjectName=wpfsamples&DownloadId=7741

I opened up the solution in VS2010, then opened MainWindow.xaml (split screen - designer and markup)


'System.Windows.Media.Animation.ColorAnimation' animation object cannot be used to animate property 'Foreground' because it is of incompatible type 'System.Windows.Media.Brush'.

... there are 11 errors but the solution builds successfully and runs fine.

If you look at the markup in MainWindow.xaml and the first set of buttons, the first error is linked to the "IsEnabled" property

<Button Margin="8" IsEnabled="False" Content="Disabled" />

Look at the corresponding template in Button.xaml and the VisualState "Disabled" ... if you remove the visual state then the error is removed from the MainWindow.xaml Markup. Looking at the rest of the errors they seem to be linked to visual states on Control Properties that if set on the markup (like IsEnabled, ReadOnly, etc) cause the designer to throw the Invalid Operation Exception.

Hope you can help

Cheers ... Rob. 


<< Previous      Next >>

Microsoft   |   Windows   |   Visual Studio   |   Sharepoint   |   Azure