none
How to design the collapsed view of my custom ActivityDesigner RRS feed

  • Question

  • The built-in designers of activities like Sequence can be collapsed to a more compact view (the activities canvass/WorkflowItemPresenter is hidden) and expanded to the complete view. In my custom activity designer, the collapse button is there (at right top) but apparently nothing happens if I click it. The custom activity designer basically has a list of labels and ExpressionTextBox'es. I want it to be able to  collapse to just showing the title bar (like the Delay activity). Is this possible?
    Friday, October 7, 2011 2:15 AM

Answers

  • There are a lot of different ways to do this.  My preferred approach is to define two styles for grids.  The styles control the visibility of the grids based on the expanded/collapsed state of the designer.

    Hopefully this will make it more clear, it is the Xaml that I use to re skin the Delay activity:

    <sap:ActivityDesigner x:Class="TSActivites.Design.Reskins.DelayReskin"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sap="clr-namespace:System.Activities.Presentation;assembly=System.Activities.Presentation"
        xmlns:sapv="clr-namespace:System.Activities.Presentation.View;assembly=System.Activities.Presentation"
        xmlns:sapc="clr-namespace:System.Activities.Presentation.Converters;assembly=System.Activities.Presentation"
                          xmlns:System="clr-namespace:System;assembly=mscorlib">
        <sap:ActivityDesigner.Resources>
            <sapc:ArgumentToExpressionConverter x:Key="ArgumentToExpressionConverter" />
            <Style x:Key="CollapsedStyle" TargetType="{x:Type Grid}">
                <Setter Property="Visibility" Value="Visible"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Path=ShowExpanded}" Value="true">
                        <Setter Property="Visibility" Value="Collapsed"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
            <Style x:Key="ExpandedStyle" TargetType="{x:Type Grid}">
                <Setter Property="Visibility" Value="Collapsed"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Path=ShowExpanded}" Value="true">
                        <Setter Property="Visibility" Value="Visible"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
    
        </sap:ActivityDesigner.Resources>
        <Grid>
            <Grid Style="{StaticResource CollapsedStyle}">
            </Grid>
            <Grid Style="{StaticResource ExpandedStyle}">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <TextBlock Grid.Row="0" Margin="0,5,0,5" HorizontalAlignment="Left">Enter a TimeSpan Expression</TextBlock>
                <sapv:ExpressionTextBox Grid.Row="1" HintText="Delay Time"  Margin="0,5,0,5" MaxLines="1" Expression="{Binding Path=ModelItem.Duration, Mode=TwoWay, Converter={StaticResource ArgumentToExpressionConverter}, ConverterParameter=In}" OwnerActivity="{Binding Path=ModelItem}" ExpressionType="{x:Type System:TimeSpan}"/>
            </Grid>
        </Grid>
    </sap:ActivityDesigner>
    
    


    Friday, October 7, 2011 2:56 AM
  • Frank's approach should work, or you can also use two different data templates:

    <sap:ActivityDesigner x:Class="ActivityLibrary.Designer.MyActivityDesigner"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:s="clr-namespace:System;assembly=mscorlib"
        xmlns:sapc="clr-namespace:System.Activities.Presentation.Converters;assembly=System.Activities.Presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sap="clr-namespace:System.Activities.Presentation;assembly=System.Activities.Presentation"
        xmlns:sapv="clr-namespace:System.Activities.Presentation.View;assembly=System.Activities.Presentation"
        Collapsible="True">
        <sap:ActivityDesigner.Resources>
            <ResourceDictionary>
                <sapc:ArgumentToExpressionConverter
                    x:Key="ArgumentToExpressionConverter" />
                <DataTemplate x:Key="ShowAsCollapsed">
                    <TextBlock>Expand to edit properties</TextBlock>
                </DataTemplate>
                <DataTemplate x:Key="ShowAsExpanded">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
    
                        <TextBlock Text="Anything" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center"/>
                        <sapv:ExpressionTextBox HintText="Anything" Grid.Row="0" Grid.Column="1" MaxWidth="150" Margin="5"
                                    OwnerActivity="{Binding Path=ModelItem}"
                                    Expression="{Binding Path=ModelItem.Anything, Mode=TwoWay, Converter={StaticResource ArgumentToExpressionConverter}, ConverterParameter=In}"
                                    ExpressionType="s:String" />
                       
                    </Grid>
                </DataTemplate>
                <Style x:Key="StyleWithCollapse" TargetType="{x:Type ContentPresenter}">
                    <Setter Property="ContentTemplate"
                            Value="{DynamicResource ShowAsExpanded}"/>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding Path=ShowExpanded}" Value="False">
                            <Setter Property="ContentTemplate"
                                    Value="{DynamicResource ShowAsCollapsed}"/>
                        </DataTrigger>
                    </Style.Triggers>                        
                </Style>
            </ResourceDictionary>
        </sap:ActivityDesigner.Resources>
    
        <Grid>
            <ContentPresenter Style="{DynamicResource StyleWithCollapse}"
                              Content="{Binding}"/>
    
        </Grid>
    </sap:ActivityDesigner>
    

     


    Life is simple.
    • Edited by Firen Friday, October 7, 2011 3:16 PM
    • Proposed as answer by LeoTangModerator Wednesday, October 12, 2011 1:03 AM
    • Marked as answer by LeoTangModerator Monday, October 17, 2011 1:41 AM
    Friday, October 7, 2011 3:10 PM

All replies

  • There are a lot of different ways to do this.  My preferred approach is to define two styles for grids.  The styles control the visibility of the grids based on the expanded/collapsed state of the designer.

    Hopefully this will make it more clear, it is the Xaml that I use to re skin the Delay activity:

    <sap:ActivityDesigner x:Class="TSActivites.Design.Reskins.DelayReskin"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sap="clr-namespace:System.Activities.Presentation;assembly=System.Activities.Presentation"
        xmlns:sapv="clr-namespace:System.Activities.Presentation.View;assembly=System.Activities.Presentation"
        xmlns:sapc="clr-namespace:System.Activities.Presentation.Converters;assembly=System.Activities.Presentation"
                          xmlns:System="clr-namespace:System;assembly=mscorlib">
        <sap:ActivityDesigner.Resources>
            <sapc:ArgumentToExpressionConverter x:Key="ArgumentToExpressionConverter" />
            <Style x:Key="CollapsedStyle" TargetType="{x:Type Grid}">
                <Setter Property="Visibility" Value="Visible"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Path=ShowExpanded}" Value="true">
                        <Setter Property="Visibility" Value="Collapsed"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
            <Style x:Key="ExpandedStyle" TargetType="{x:Type Grid}">
                <Setter Property="Visibility" Value="Collapsed"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Path=ShowExpanded}" Value="true">
                        <Setter Property="Visibility" Value="Visible"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
    
        </sap:ActivityDesigner.Resources>
        <Grid>
            <Grid Style="{StaticResource CollapsedStyle}">
            </Grid>
            <Grid Style="{StaticResource ExpandedStyle}">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <TextBlock Grid.Row="0" Margin="0,5,0,5" HorizontalAlignment="Left">Enter a TimeSpan Expression</TextBlock>
                <sapv:ExpressionTextBox Grid.Row="1" HintText="Delay Time"  Margin="0,5,0,5" MaxLines="1" Expression="{Binding Path=ModelItem.Duration, Mode=TwoWay, Converter={StaticResource ArgumentToExpressionConverter}, ConverterParameter=In}" OwnerActivity="{Binding Path=ModelItem}" ExpressionType="{x:Type System:TimeSpan}"/>
            </Grid>
        </Grid>
    </sap:ActivityDesigner>
    
    


    Friday, October 7, 2011 2:56 AM
  • Frank's approach should work, or you can also use two different data templates:

    <sap:ActivityDesigner x:Class="ActivityLibrary.Designer.MyActivityDesigner"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:s="clr-namespace:System;assembly=mscorlib"
        xmlns:sapc="clr-namespace:System.Activities.Presentation.Converters;assembly=System.Activities.Presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sap="clr-namespace:System.Activities.Presentation;assembly=System.Activities.Presentation"
        xmlns:sapv="clr-namespace:System.Activities.Presentation.View;assembly=System.Activities.Presentation"
        Collapsible="True">
        <sap:ActivityDesigner.Resources>
            <ResourceDictionary>
                <sapc:ArgumentToExpressionConverter
                    x:Key="ArgumentToExpressionConverter" />
                <DataTemplate x:Key="ShowAsCollapsed">
                    <TextBlock>Expand to edit properties</TextBlock>
                </DataTemplate>
                <DataTemplate x:Key="ShowAsExpanded">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
    
                        <TextBlock Text="Anything" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center"/>
                        <sapv:ExpressionTextBox HintText="Anything" Grid.Row="0" Grid.Column="1" MaxWidth="150" Margin="5"
                                    OwnerActivity="{Binding Path=ModelItem}"
                                    Expression="{Binding Path=ModelItem.Anything, Mode=TwoWay, Converter={StaticResource ArgumentToExpressionConverter}, ConverterParameter=In}"
                                    ExpressionType="s:String" />
                       
                    </Grid>
                </DataTemplate>
                <Style x:Key="StyleWithCollapse" TargetType="{x:Type ContentPresenter}">
                    <Setter Property="ContentTemplate"
                            Value="{DynamicResource ShowAsExpanded}"/>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding Path=ShowExpanded}" Value="False">
                            <Setter Property="ContentTemplate"
                                    Value="{DynamicResource ShowAsCollapsed}"/>
                        </DataTrigger>
                    </Style.Triggers>                        
                </Style>
            </ResourceDictionary>
        </sap:ActivityDesigner.Resources>
    
        <Grid>
            <ContentPresenter Style="{DynamicResource StyleWithCollapse}"
                              Content="{Binding}"/>
    
        </Grid>
    </sap:ActivityDesigner>
    

     


    Life is simple.
    • Edited by Firen Friday, October 7, 2011 3:16 PM
    • Proposed as answer by LeoTangModerator Wednesday, October 12, 2011 1:03 AM
    • Marked as answer by LeoTangModerator Monday, October 17, 2011 1:41 AM
    Friday, October 7, 2011 3:10 PM
  • Both approaches work, the only reason I prefer the first one is that I switch the Style names in the editor and actually see the Expanded view as I work on it...of course I occasionally forget to switch the values back which has amusing results at runtime ;)
    Friday, October 7, 2011 3:34 PM