none
Change custom Activity Icon

    Question

  • How do I change the Icon in the upper left corner of my custom activity?  Can anyone point me to a an example that has a custom Icon, I have never seen one which didn't use the default.

    Saturday, November 14, 2009 4:19 AM

Answers

  • Mike, 

    If I understand your question correctly basically you don't know how to set the Icon.

    "Icon" is a property on the main <sap:ActivityDesigner> element of the designer and it's of type "DrawingBrush". 
    If you want to set an image (BMP, JPG...) as the Icon, just add this XAML exactly after the starting element of the designer:

      <sap:ActivityDesigner.Icon>
            <DrawingBrush>
                <DrawingBrush.Drawing>
                    <ImageDrawing>
                        <ImageDrawing.Rect>
                            <Rect Location="0,0" Size="16,16" ></Rect>
                        </ImageDrawing.Rect>
                        <ImageDrawing.ImageSource>
                            <BitmapImage UriSource="D:\Public\Foto\IMG_2560.JPG" ></BitmapImage>
                        </ImageDrawing.ImageSource>
                    </ImageDrawing>
                </DrawingBrush.Drawing>
            </DrawingBrush>
        </sap:ActivityDesigner.Icon>

    Obviously, change the UriSource to match your Icon/Bitmap. If you want to apply a WPF DrawingBrush, design the Icon with Expression Designer and copy/paste XAML/ResourceDicrionary and use it.

    If you want to set a vectorial drawing, like I do:

      <sap:ActivityDesigner.Icon>
            <DrawingBrush>
                    <DrawingBrush.Drawing>
                        <DrawingGroup>
                            <DrawingGroup.Children>
                                <GeometryDrawing Geometry="F1 M 35,-124C 45.2172,-124 53.5,-115.717 53.5,-105.5C 53.5,-95.2827 45.2173,-86.9999 35,-86.9999C 24.7827,-86.9999 16.5,-95.2827 16.5,-105.5C 16.5,-115.717 24.7828,-124 35,-124 Z ">
                                    <GeometryDrawing.Pen>
                                        <Pen Thickness="0.32" LineJoin="Round" Brush="#57008898"/>
                                    </GeometryDrawing.Pen>
                                    <GeometryDrawing.Brush>
                                        <RadialGradientBrush RadiusX="0.5" RadiusY="0.5" Center="0.71625,0.283751" GradientOrigin="0.71625,0.283751">
                                            <RadialGradientBrush.GradientStops>
                                                <GradientStop Color="#57FFFFFF" Offset="0.0104712"/>
                                                <GradientStop Color="#5712C5DB" Offset="0.65445"/>
                                                <GradientStop Color="#5714C5DB" Offset="0.654727"/>
                                                <GradientStop Color="#5717C6DB" Offset="0.905759"/>
                                                <GradientStop Color="#5711A5B7" Offset="1"/>
                                            </RadialGradientBrush.GradientStops>
                                            <RadialGradientBrush.RelativeTransform>
                                                <TransformGroup/>
                                            </RadialGradientBrush.RelativeTransform>
                                        </RadialGradientBrush>
                                    </GeometryDrawing.Brush>
                                </GeometryDrawing>
                            </DrawingGroup.Children>
                        </DrawingGroup>
                    </DrawingBrush.Drawing>
            </DrawingBrush>
        </sap:ActivityDesigner.Icon>

    Hope it helps now :)


    Adriano
    Thursday, November 19, 2009 11:02 PM

All replies

  • Hi Mike, if you wrote your own Designer you can place your custom resource defining hte Icon directly on the <sap:ActivityDesigner> element, property "Icon", see example below that works for me:

    <sap:ActivityDesigner x:Class="MyActivityDesigner"

     

     

    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"

     

     

    Icon="{StaticResource ResourceKey=MyIcon}"

    >

     

     

     

    <sap:ActivityDesigner.Resources>

     

     

     

    <DrawingBrush x:Key="MyIcon" Stretch="UniformToFill">

     

     

     

    <DrawingBrush.Drawing>

     

     

     

    <DrawingGroup>

     

     

     

    ... bla bla bla.


    Hope it helps,


    Adriano
    Monday, November 16, 2009 10:53 PM
  • Sorry Mike, I was wrong on the kind of Resource. {StaticResource} works in this case only after definitng hte resource. The WPF designer is able to get the resources looking forward... seems... while at runtime it is not possible.

    In order to make the code above work you should use {DynamicResource} instead.

    Hope it helps,


    Adriano
    Monday, November 16, 2009 11:09 PM
  • The Icon there is expecting a Type: DrawingBrush.  I find it impossible to believe that the Icon can't be set in a designer but rather can only be set via runtime code.  I must be missing something obvious.  This seems like an incredibly simple and obvious issue.

    Tuesday, November 17, 2009 12:12 AM
  • Exactly, if you look at the code Above, we use a resource binding {StaticResource MyIcon} where you should actually use {DynamicResource MyIcon}. If you look at the XAML the Resource "MyIcon" is defined on <sap:ActivityDesigner.Resources> exactly as you like it to be... a DrawingBrush.

    And this is all done at design-time.

    Hope it helps,


    Adriano
    Tuesday, November 17, 2009 8:38 AM
  • I feel like I'm so close I must be tripping over this but I'm still not seeing it.  Do I need to create this .xaml in Expression or how is this Resource section created from the designer ie how do I get this Icon added as you are showing in the sample.
    Thursday, November 19, 2009 7:09 PM
  • Hi Mike, you need to create a new designr for your own Activity. If you do:
     [Add new Item...] --> [Workflow] --> [Actrivity Designer]

    Then it creates the requires files and XAML file for you. There you can add your own Activity Designer by replacing the Icon, too. Obviously you can also add other WPF elements and so on.

    Obviously you should "bind" your Custom Activity with your designer. You can do that 2 ways. One is exposing WPF Designer metadata through AttributeTableBuilder, the other (simpler) is by decorating your custom activity class with teh "<Designer()>" attribute, specifying the type of your designer.

    However, download the Workflow Foundation Training Kit for Beta 2 and look into the samples, there you find a lot of sample code on this.

    Hope it helps,
    Cheers




    Adriano
    Thursday, November 19, 2009 8:52 PM
  • Please bear with me, I appreciate to no end your efforts.   I have done all this.  I have my own designer and its bound and everything is peachy... except I have no clue how to change the icon.  I have not found a single example activity with a non-default icon.  When I click on the Properties for my xaml I see and Icon property, it has a drop down with a single square with a line through it.  I can not figure out how to add an icon to this drop down.  Adding Icon resources to my project does not link them here, so there is clearly additional or different steps required.

    Thursday, November 19, 2009 9:18 PM
  • Mike, 

    If I understand your question correctly basically you don't know how to set the Icon.

    "Icon" is a property on the main <sap:ActivityDesigner> element of the designer and it's of type "DrawingBrush". 
    If you want to set an image (BMP, JPG...) as the Icon, just add this XAML exactly after the starting element of the designer:

      <sap:ActivityDesigner.Icon>
            <DrawingBrush>
                <DrawingBrush.Drawing>
                    <ImageDrawing>
                        <ImageDrawing.Rect>
                            <Rect Location="0,0" Size="16,16" ></Rect>
                        </ImageDrawing.Rect>
                        <ImageDrawing.ImageSource>
                            <BitmapImage UriSource="D:\Public\Foto\IMG_2560.JPG" ></BitmapImage>
                        </ImageDrawing.ImageSource>
                    </ImageDrawing>
                </DrawingBrush.Drawing>
            </DrawingBrush>
        </sap:ActivityDesigner.Icon>

    Obviously, change the UriSource to match your Icon/Bitmap. If you want to apply a WPF DrawingBrush, design the Icon with Expression Designer and copy/paste XAML/ResourceDicrionary and use it.

    If you want to set a vectorial drawing, like I do:

      <sap:ActivityDesigner.Icon>
            <DrawingBrush>
                    <DrawingBrush.Drawing>
                        <DrawingGroup>
                            <DrawingGroup.Children>
                                <GeometryDrawing Geometry="F1 M 35,-124C 45.2172,-124 53.5,-115.717 53.5,-105.5C 53.5,-95.2827 45.2173,-86.9999 35,-86.9999C 24.7827,-86.9999 16.5,-95.2827 16.5,-105.5C 16.5,-115.717 24.7828,-124 35,-124 Z ">
                                    <GeometryDrawing.Pen>
                                        <Pen Thickness="0.32" LineJoin="Round" Brush="#57008898"/>
                                    </GeometryDrawing.Pen>
                                    <GeometryDrawing.Brush>
                                        <RadialGradientBrush RadiusX="0.5" RadiusY="0.5" Center="0.71625,0.283751" GradientOrigin="0.71625,0.283751">
                                            <RadialGradientBrush.GradientStops>
                                                <GradientStop Color="#57FFFFFF" Offset="0.0104712"/>
                                                <GradientStop Color="#5712C5DB" Offset="0.65445"/>
                                                <GradientStop Color="#5714C5DB" Offset="0.654727"/>
                                                <GradientStop Color="#5717C6DB" Offset="0.905759"/>
                                                <GradientStop Color="#5711A5B7" Offset="1"/>
                                            </RadialGradientBrush.GradientStops>
                                            <RadialGradientBrush.RelativeTransform>
                                                <TransformGroup/>
                                            </RadialGradientBrush.RelativeTransform>
                                        </RadialGradientBrush>
                                    </GeometryDrawing.Brush>
                                </GeometryDrawing>
                            </DrawingGroup.Children>
                        </DrawingGroup>
                    </DrawingBrush.Drawing>
            </DrawingBrush>
        </sap:ActivityDesigner.Icon>

    Hope it helps now :)


    Adriano
    Thursday, November 19, 2009 11:02 PM
  • Your awesome. Thank you very much.
    Friday, November 20, 2009 12:08 AM
  • You're welcome Mike,
    Cheers

    Adriano
    Friday, November 20, 2009 8:02 AM