Expression Blend and Design

The team blog of the Expression Blend and Design products.

  • Expression Blend and Design

    Opening Blend 3 Projects without Actually Having Blend Installed

    • 6 Comments

    Since we released our preview at MIX, there have been a fair number of questions revolving around how a WPF or Silverlight project that uses Blend-specific features will work when opened on a machine that does not have Blend installed. For example, one Blend-specific feature that we have talked about extensively is Behaviors. The Behaviors runtime components are provided to you by Blend, and today, there is no way of being able to author or build a project that uses them without having Blend installed.

    To help address this concern, we have been working on creating the Expression Blend 3 SDK. The Blend 3 SDK is a free (and lightweight) installer that places common components such as Behaviors into a general location that other applications like Visual Studio can access. This gives you the ability to open and edit projects created or modified by Blend without having to have Blend installed on your computer.

    Before wrapping up this post, I should emphasize that you will only need the Blend 3 SDK to open projects that contain some runtime component that is Blend specific and you do not have Blend 3 installed. That means you can open a cool Behaviors project or even write your own behaviors using just Visual Studio and not having Blend installed on your machine.

    Cheers!
    Kirupa

  • Expression Blend and Design

    Link Round-Up: Behaviors-Related Posts

    • 2 Comments

    In the past couple of weeks, there have been a great number of great blog posts on Behaviors, and since Behaviors are one of those things where writing them is not as straightforward as using them, I figure I will take this opportunity to point you all to blog posts I’ve found.

    If you’ve written about Behaviors and would like to be listed here, please comment below and I will look into adding you up as well.

    Cheers!
    Kirupa :)

  • Expression Blend and Design

    Thinking Outside the XAP – Blend 3 and Support for Web Sites!

    • 6 Comments

    One of the features that we added in Expression Blend 3 is the ability for you to create Silverlight projects that come associated with a Web site. In this brief post I will jump between describing why this is useful and how Blend provides access to it.

    Let’s start with the easy part. You can access it directly via the New Project dialog where we created a Silverlight 3 Application + Website project template:

     image

    Once you create your new project using this template, you have successfully used this new feature! For the most part, nothing really should seem or feel different for you, for this feature is more about what we do behind the scenes. There are a few exceptions. One immediate difference that you may notice is that your solution now contains a node for your Web site along with your Silverlight application:

    image

    There are several reasons why we decided to create this Web site project by default. The main reason is that you get all of the benefits of building a traditional Silverlight application where all of the content you incorporate gets embedded into your XAP and downloaded by default when your page loads. What is new, though, is that you also get the added benefit of being able to load content on demand using your own loading and preloading mechanism. That functionality is provided for you via Blend’s support for Web sites.

    If I had to visualize this, it would look as follows:

    xapDataMapping

    You build your XAPs like always (Silverlight Project), but you have the added bonus of being able to think outside the XAP (Web Site Project). When you hit F5 to build and preview your application, the XAP gets built, copied into the right location on your website, and the HTML page that already exists loads and gives you a preview. We do not re-generate the HTML file each time you build, so this means you can customize your HTML page without worrying about your changes getting overwritten the next time you build.

    Beyond just changes to how your projects behave and build, we added some extra functionality to make it possible for you to easily reference and visualize on the artboard the content from either your Silverlight Application or your Web Site without having to write XAML manually.

    If you have images that live in both your Silverlight application and Web Site, our path picker for an Image control’s Source property displays the images from both locations:

    sitedifferentiator

    This is significantly different from what we’ve had in Expression Blend 2 SP1. While you could always open a solution authored in Visual Studio that contained both a Silverlight Application and a Web Site (my article describes that to a certain detail), hitting F5 in Blend would be unpredictable. You also didn’t have the extra support for treating all assets as being equal despite where they are being loaded from.

    Let us know what you think of this feature. This features was designed to seamlessly blend into your workflow and “just work”, but if you had any ideas or suggestions on what more can be done or things you think we should change, feel free to comment below to let us know.

    Cheers!
    Kirupa :)

  • Expression Blend and Design

    Deep Zoom Composer Updated to Support Publishing to DeepZoomPix!

    • 17 Comments

    Hi everyone,
    We have just released another preview of Deep Zoom Composer, and you can download it from the following location:


    dzcicon Download Deep Zoom Composer

    As always, please uninstall all existing versions of Deep Zoom Composer before installing the new version.

    Quick Intro to DeepZoomPix
    This release coincides with the recent launch of the DeepZoomPix technology preview: http://deepzoompix.com/default.aspx If you haven’t seen DeepZoomPix, it is a technology demo where you can upload and view your images using the Deep Zoom technology found in Silverlight:

    dzp_ss2

    A key part of DeepZoomPix is the viewer through which you can browse and interact with your images. Within the viewer, you have the ability to dynamically change how your images are arranged, play a slideshow, view a thumbnail of all images, as well as tag/filter:

    filtering_ability

    There are a lot of cool things you can do in DeepZoomPix, and you can learn more about DeepZoomPix by reading their FAQ as well watching a video interview with Rado and Matt on how the site was actually created. Janete will have a blog post with more information on DeepZoomPix in the near future.

    Deep Zoom Composer and DeepZoomPix
    As many of you know, not too long ago, we added the ability for you to be able to publish your photos online to PhotoZoom. Based on a lot of requests and feedback many of you have provided about PhotoZoom and the integration with Deep Zoom Composer, we closely followed the evolution of PhotoZoom into DeepZoomPix and were excited to help make Deep Zoom Composer work better with the new service.

    The biggest change is that Deep Zoom Composer will only allow you to upload to DeepZoomPix:

    dzp_ss

    The workflow and the UI are largely the same, so if you have used the PhotoZoom functionality before, everything should look familiar to you with the exception of a few name changes.

    Our primary motivation for moving to DeepZoomPix was to address the large amount of feedback many of you provided us about PhotoZoom. We hope you all find DeepZoomPix to be more reliable and more fun to use.

    Do note that DeepZoomPix is just a technology demo. It is something that we are only planning on keeping until the end of the year (Dec 31st), and after that, we are not sure what will happen to the service. Please do not use this location as a permanent storage location for your photos.

    Before I wrap up this post, a huge thanks to Matt (who you can see in the video interview above) for helping unwind some gnarly technical issues associated with changing Deep Zoom Composer to use DeepZoomPix.

    As always, please send us  your feedback by posting on the forums or commenting below.

    Cheers!
    Kirupa & Janete

  • Expression Blend and Design

    Creating and Editing Gradients in Expression Blend 3 Preview

    • 6 Comments

    One of our goals for Expression Blend 3 is to provide better tools and user experience for visual designers. At a high level, we prioritized features that allow the designer to keep their focus on the artboard more often. This translated into an improved selection model, predictable layout, familiar and efficient keyboard shortcuts and a flexible and powerful gradient editing experience. This blog post is the first in a series that will highlight features and improvements targeted to the visual designer. Let’s start with the new gradient editing tools. The UI is subject to change for the final release but this overview should give you an idea of the features available in the Preview.

    GradientToolUI

    For Blend 3 we have separated out the Brush Transform tool into two different tools, Gradient and Brush Transform. The Gradient tool allows you to create and edit the properties of linear (LinearGradientBrush) and radial (RadialGradientBrush) gradients on the artboard. The Brush Transform tool allows you to transform any brush type by modifying the translation, rotation, scale and skew. These values are stored as a part of the RelativeTransform property on the brush. Separating out these tools gives you greater control and predictability of which properties are edited, creates cleaner XAML, and makes it easier to animate and bind gradient properties.

    All you have to do to create a gradient is select the Gradient tool in the Toolbar or press the ‘G’ keyboard shortcut and click and drag to define the start and end points.  This creates a gradient for the selected object and sets start and end point to the same positions that you clicked and released the mouse.

    The Gradient tool adorner shows the start point, end point, individual stops and the selected stop. Now you can use the adorners to edit the start (StartPoint) and end (EndPoint) of the gradient by rotating and dragging the adorner. To add a new stop press Alt and click anywhere on the line (Note: In the final release you will not have to press Alt, just click and release). To change the position of a gradient stop (Offset) just click and drag it along the line. To remove a gradient stop click and drag it off the line. To edit the color just double click on the stop and a color picker is displayed where you can select a color for the stop.

    ColorPopup

    Another really useful feature for editing gradients is the Gradient eyedropper. This is located in the color editor in the Brushes panel when you have an object with a gradient selected.

    GradientEyedropperUI

    Just select the Gradient eyedropper and click and drag anywhere inside or outside of Blend to grab a gradient.  For example, if I have a picture displayed in my browser with a nice gradient I can easily apply this gradient to my shape using the Gradient eyedropper by clicking and dragging:

    selecting_my_gradient

    Once the gradient has been selected, you will notice that your selected element in Blend now features the range of colors you selected earlier:

    selected_gradient

    The range of colors I picked in the above example was pretty simple, so you are able to see the four gradient stops and the colors they represent. For more complicated source images, you may have stops that are located close to each other. To adjust these stops, just zoom in to create more visual space between the stops on the artboard so that it is easier to select and edit them.

    Closing Tips
    By using the Gradient eyedropper, it can be easy to get some pretty complex gradients. Have you ever wondered how to reset the gradient back to the black to white default?  Blend uses the gradient from the object that was last selected. 

    1. Set your object to No brush in the Brushes panel.
    2. Select none by clicking on an empty area of the artboard or pressing Ctrl + Shift + A.
    3. Select your object and then select the Gradient brush tab.

    There are also a few additions in the Brushes panel that will help you create and edit gradients.

    • Use the Offset editor to specify a value numerically.
    • Reverse the order of your gradient stops with the Reverse gradient stops button.
    • Select the previous or next gradient stop using the gradient stop iterator. This is useful for selecting stops when you have two stops with the same or very similar values.
    • Hover over a stop to get a tooltip of its offset and color value.

    Finally, there is also an Advanced properties section for the Brushes panel that includes other brush properties like MappingMode, SpreadMethod and RelativeTransform:

    brushesPanel2

    Well, that’s the overview of the new gradient editing features in Expression Blend 3 Preview! I hope you find it easier to work with gradients.

    Joanna

  • Expression Blend and Design

    Behaviors Under the Hood – API Details and Constraining the Type

    • 13 Comments

    Jeff Kelly is back with Part II of his behaviors triple-feature. This time, he focuses on more details and provides some examples of a simple behavior, trigger, and action  - Kirupa

    Behaviors and triggers are set on objects in XAML via an attached property, Interactions.Behaviors or Interactions.Triggers respectively. When created via XAML, the IAttachedObject interface is invoked behind-the-scenes to automatically associate your triggers, actions and behaviors with the objects they are attached to in the XAML. It is also possible to call the IAttachedObject members directly from code, although the XAML syntax for these operations is typically sufficient.

    image

    ( Example XAML snippet of a Trigger and Action )

    The heart of the behaviors API is the IAttachedObject interface. This interface provides three things: the ability to attach to a specified object, the ability to detach from any object you may be attached to and a property that provides the object to which the IAttachedObject object is currently attached to.
    Triggers, action and behaviors all implement IAttachedObject. Additionally, each exposes two virtual functions: OnAttached and OnDetaching, which are called in response to the object being attached or detached to another object. Derived classes typically override these functions to hook/unhook event handlers, initialize state or release resources, and so forth.

    A basic behavior has nothing more than what we’ve already described: an OnAttached and OnDetaching virtual and an AssociatedObject property. Depending on the desired behavior, the author may implement their behavior as a black-box, or they may choose to expose relevant properties to configure the operation of a specific instance of a behavior. One additional bit of functionality that is exposed by behaviors and specially tooled by Blend 3 are ICommand properties of behaviors. ICommand properties exposed on behaviors allow users of the behavior a way to interact with a behavior in configurable ways that will be explored in more detail in a future post.

    The base class for creating a trigger is the TriggerBase class. The main addition to the basic API that Triggers introduce is the inherited InvokeActions method. A trigger typically hooks up event handlers or initializes some internal mechanism that will be used to determine when to fire (a timer, gesture engine, etc). Once a trigger has determined it is ready to fire, the author simply calls the inherited InvokeActions method and all Actions associated with that trigger will be invoked. This method accepts a parameter as an argument that will be passed to all Actions: this mechanism can be used to pass data between your triggers and your actions, such as EventArgs, or can be set to null and ignored.

    Actions have the same basic API extensions as Triggers and Actions, but also require the author to implement the abstract Invoke method. This method is called when the action is invoked, and the functionality of the action should be implemented there. The base class for creating an action is TriggerAction.

    One nice component of the API is the differences between Silverlight and WPF are minimal. A behavior written for one platform will need only changes to platform-specific code used in its implementation to compile against the other platform; the behavioral APIs are the same between platforms.

    Type Constraints
    When creating a trigger, action or behavior, you need to specify a type constraint. This will control the types that your type may be attached to and is particularly useful if you are assuming the existence of a specific event or property on your AssociatedObject. The type constraint is specified as a generic type argument provided to the base class in your class definition. For instance, if you want to write an action that only applies on types derived from Rectangle, you would define it as:

    class MyRectangleAction : TriggerAction<Rectangle>

    Note:
    Your constraint type must derive from DependencyObject. If you don’t have a specific constraint, you should specify DependencyObject in the generic field of your derivative class definition.

    image


    Some Simple Examples
    To wrap up this post, let’s look at some sample behaviors, actions, and triggers. Let’s start with a simple example of a behavior:

    image

    A simple trigger would look as follows:

    image

    Finally, here is a simple action:

    image

    This post was a mix between concepts and details. In a future post, I will dive into even more detail on how to write some of these behaviors.

    Thanks,
    Jeff

  • Expression Blend and Design

    Round-Up of Blog Posts (and other Activities) by the Expression Blend Team!

    • 3 Comments

    It’s been a week since MIX09 started, and since then, many of us Blenders have been busy writing blog posts describing the various new features from Expression Blend 3 in greater detail. This post will point you to those posts:

    Blend 3 Overview:

    Blend 3 Features:

    If you have written any cool blog posts relating to Blend 3, please comment below and I will have another round-up in the near future…hopefully including a link to your post as well.

    Cheers!
    Kirupa :)

  • Expression Blend and Design

    An Introduction to Behaviors, Triggers, and Actions

    • 11 Comments

    The following post is written by Jeff Kelly, one of the developers who worked extensively on both the behaviors runtime as well as the UI inside Blend that makes behaviors easier to use! In this post, he will provide an overview of the three components that make up what we collectively call “Behaviors” in the Expression Blend 3 Preview  - Kirupa

    One of the major goals of Blend 3 is to make it easier to build interactivity into your applications. In Blend 3, we’ve introduced several new concepts that make writing and reusing interactivity easier than ever before. By writing triggers, actions and behaviors, developers can provide functionality that is cleanly encapsulated and reusable by both developers and designers. Likewise, designers are empowered to add a new level of interactive functionality to their work without ever having to touch a code file.

    Triggers and Actions
    To anyone familiar with WPF, triggers and actions should sound familiar. Blend 3 introduces a similar model, extends support to Silverlight as well as WPF, and allows you to write your own triggers and actions - opening a whole new world of possibilities for what kinds of functionality you can create and reuse in your own applications. Let’s look at what triggers and actions are at a conceptual level, and then dive a little deeper into the basics of the API.

    An action is an object that can be invoked to perform an operation. If you think that sounds pretty vague, you’re right. The scope of an action is not constrained: if you can write the code to do something, you could write an action to do the same thing. That said, actions are best written to perform operations that are largely atomic in nature. That is, actions work best when they don’t rely on external state that needs to be persisted between invocations of the action, and that don’t have any dependencies on other actions existing or running in a particular order relative to their invocation.

    Good actions

    • Change a property
    • Call a method
    • Open a window
    • Navigate to a page
    • Set focus

    Actions aren’t particularly useful on their own: they provide functionality to do something, but no way to activate that functionality. In order to invoke an action, we need a trigger. Triggers are objects that contain one or more actions and invoke those actions in response to some stimulus. One very common trigger is one that fires in response to an event (an EventTrigger). Other examples might include a trigger that fires on a timer, or a trigger that fires when an unhandled exception is thrown.

    One important thing to note is that triggers and actions are generally meant to be used together arbitrarily. In other words, you should avoid writing an action that makes assumptions about the type of trigger that invokes it, or a trigger that makes assumptions about the actions that belong to it. If you find yourself needing a tight coupling between a trigger and action, you should instead consider a behavior. Speaking of which….

    Behaviors
    Whereas the concepts of triggers and actions have been previously established in an earlier incarnation in WPF, the concept of a behavior is a new one. At a glance, a behavior looks similar to an action: a self-contained unit of functionality. The main difference is that actions expect to be invoked, and when invoked, they will perform some operation. A behavior does not have the concept of invocation; instead, it acts more as an add-on to an object: optional functionality that can be attached to an object if desired. It may do certain things in response to stimulus from the environment, but there is no guarantee that the user can control what this stimulus is: it is up to the behavior author to determine what can and cannot be customized.

    As an example, consider a behavior that allows me to drag the object the behavior is attached to around with the mouse. I need to listen to the mouse down, mouse move, and mouse up events on the attached object. In response to the mouse down, I’ll record the mouse position, hook up the mouse move and mouse up handlers and capture the mouse input. On mouse move, I’ll update the position of the object as well as the mouse position. On mouse up, I’ll release mouse capture and unhook my mouse move and mouse down handlers.

    My first inclination might be to try and use EventTriggers for each of these events, and write a StartDragAction, MoveDragAction and StopDragAction to invoke in each case. However, it soon becomes apparent that this scenario is not well-addressed by actions: I need to store state between invocations (previous mouse position and the state of the drag), and the operation isn’t atomic. Instead, I can write a behavior that wraps the exact functionality outlined above into a reusable component.

    Conclusion
    Hopefully this post gives you an overview of what makes up a Behavior – the catch all word we use for behaviors, actions, and triggers. In my next post, I will describe the API a bit more and provide some code snippets on how to write each of the behavior components.

    Thanks,
    Jeff

  • Expression Blend and Design

    A Look at SketchFlow

    • 7 Comments

    Christian Schormann has written a nice article on SketchFlow, so be sure to check it out at the following link: http://electricbeach.org/?p=145

    Cheers!
    Kirupa :)

  • Expression Blend and Design

    Download Expression Blend 3 Preview!

    • 22 Comments

    Hi everyone,
    To follow up on our announcements made today at MIX 09, we are excited to provide a preview of Expression Blend 3:


    blendicon_3 Download Expression Blend 3 Preview

    Expression Blend 3 Preview includes a lot of cool new features, and if you are attending MIX, the sessions we listed in our earlier post will give you a chance to see some of the new features in action. Once the sessions become available online, we will post them on this blog as well. Besides just the sessions, in the upcoming days, weeks, and months, this blog will also provide a detailed look at the various features Expression Blend 3 Preview contains from the various team members who were involved with their design and development.

    Send us your Feedback
    We would also love to hear from you on what you like about our preview and what you would like to see improved. Feel free to comment on the individual blog posts or post on the Expression Blend Forum!

    Cheers!
    Expression Blend Team

    Note: The SketchFlow feature demoed at the keynote is not available in this preview, but we do hope to get that feature into your hands in an upcoming release.

  • Expression Blend and Design

    Meet Members of the Expression Blend, Design, and DZC Teams at Mix 09!

    • 2 Comments

    Mix 09 this year is going to be pretty interesting – especially if you are an Expression Blend aficionado. You can see the full session information for all Expression Sessions here: https://content.visitmix.com/2009/sessions/?categories=Expression

    The following are just the Expression Blend sessions chosen from the above list:

     blendSessionsList

    Besides the speakers listed above, Lutz Roeder and I will be there as well. If you happen to stop by any of the above sessions, feel free to chat with any of us. We enjoy the company!

    Cheers,
    Kirupa :-)

  • Expression Blend and Design

    "Page Cannot Be Found" Issue when Previewing via Expression Blend

    • 4 Comments

    When you preview a Silverlight application in Expression Blend, we run the ASP.NET Web Development server in the background to preview your content in an environment that emulates a real-world web server:

    aspDevServer

    On March 9, a signature update to Windows Defender and Microsoft Forefront Security was released that modified your system’s hosts file to address a vulnerability. One of the side effects of this update was that an entry for localhost may have been removed from your hosts file.

    This means that, when you preview your application using the ASP.NET Development Server, your browser will simply show a “Page cannot be displayed” (or equivalent) message.

    To fix this problem, open C:\Windows\System32\drivers\etc\hosts in Notepad, and add the following entry:

    127.0.0.1       localhost

    For example, here is what my hosts file looks like (as Lucas pointed out in the comments, if you are not running Windows 7, the below lines may not be commented out):

    hostsFile

    A subsequent signature update to both Windows Defender and and Forefront Client Security, released on the same day as the earlier update, should not cause this problem.

    The original source for this information comes from the Visual Web Developer Team’s blog post on this topic.

    Cheers!
    Kirupa :)

  • Expression Blend and Design

    Deep Zoom Composer – February 2009 Preview Released

    • 46 Comments

    Hi everyone,
    We have just released another update to Deep Zoom Composer, and you can download it from the following location:


    dzcicon Download Deep Zoom Composer

    The application itself contains only fixes to issues that you have reported (slightly better memory utilization, a fix for PNG transparency), but the DeepZoomTools.dll library has gone through some significant improvements. In a nutshell, if you had images that did not work properly in the earlier version of Deep Zoom Composer, you should find that most of those images should work now.

    I will blog about the improvements to the Deep Zoom Tools shortly.

    Thanks,
    Kirupa & Janete

  • Expression Blend and Design

    What Would you Like to See in Future Releases of Deep Zoom Composer?

    • 33 Comments

    Hi everyone,
    After a bit of a break, we are currently getting the next preview of Deep Zoom Composer ready. While that is going through the final leg of the release process, I was wondering what you would like to see in future releases of Deep Zoom Composer?

    Based on the great feedback many of you have provided on my earlier question of a similar sort, I have no doubt that you all will be forthcoming with your opinions on what works, what doesn’t, and what you like to see in future releases.

    Thanks,
    Kirupa :)

  • Expression Blend and Design

    Meet Members of the Blend and Design Teams at MIX

    • 3 Comments

    As many of you know, MIX is Microsoft’s design-focused conference held in Las Vegas near the beginning of each year. Last year, the focus was all about Silverlight 2. Looking through the list of sessions posted so far, the buzz seems to be around Silverlight 3.

    A group of us from the Expression Blend and Design teams will be there, so if you are going to be in the Venetian, feel free to drop by any of the Expression sessions and chat with us. We would love to hear from you.

    If you are undecided on attending, there is a discount if you register by February 14th, so click here.

    Cheers!
    Kirupa :-)

  • Expression Blend and Design

    A UserControl base class for Visual State Manager

    • 4 Comments

    As you know, Visual State Manager is a Silverlight 2 (and WPF Toolkit) platform feature that makes it easy to define a control’s visual states and to perform the transitions between states. In the case of a templated control (such as Button, CheckBox, etc) you need only fill in the states advertised by the control (using Blend’s States pane), and the control itself will take care of performing the transitions at the right time. But if you’re writing your own UserControl then you need to add your own states to the control and you also need to know how to handle events and call VisualStateManager.GoToState() to transition between your states. Attached to this blog post is a base class that I hope will get you off to a good start. Basically you can derive your own UserControl from this class and override some methods and hopefully that will have saved you some work.

    First, download and extract the StatefulUserControlBase.cs source code file from the following location:


    folderfiles Download StatefulUserControlBase.cs
    folderfiles VSMTour Sample

    Once you’ve downloaded and extracted the source code file (StatefulUserControlBase.cs) you can try out the following steps.

    1. Launch Blend 2 SP1, create a new Silverlight 2 project named VSMTour.
       
    2. Add a new UserControl named CheckBoxUC, build, and create an instance of CheckBoxUC in Page.xaml.
       
    3. Add an existing item to the project and navigate to the StatefulUserControlBase.cs file you downloaded and extracted.
       
    4. Open CheckBoxUC.xaml and add the elements you feel are necessary to represent a checkbox: at a minimum, just a checkmark and a label.
       
    5. Add a new state group named CommonStates containing the states Normal, MouseOver, Pressed and Disabled. Add a new state group named CheckStates containing the states Unchecked and Checked.
       
    6. In CheckBoxUC.xaml.cs add a using directive for the BlendHelpers namespace (using BlendHelpers;) and replace the class definition with the following:

    public partial class CheckBoxUC : BlendHelpers.StatefulUserControlBase
    {
        CheckTwoStatesEnum _checkState = CheckTwoStatesEnum.Unchecked;
    
        public CheckBoxUC()
        {
            // Required to initialize variables
            InitializeComponent();
        }
    
        protected override void UserControl_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
        {
            if (IsEnabled)
            {
                _checkState = (CheckTwoStatesEnum)(1 - (int)_checkState);
            }
    
            base.UserControl_MouseLeftButtonUp(sender, e);
        }
    
        protected override void UpdateState()
        {
            InternalGoToState(_checkState.ToString());
            base.UpdateState();
        }
    }

    1. In CheckBoxUC.xaml, in the XAML editor, add the following attribute to the root xml element:
      xmlns:BlendHelpers="clr-namespace:BlendHelpers"
       
    2. In CheckBoxUC.xaml change the type of the root element from UserControl to BlendHelpers:StatefulUserControlBase.
       
    3. Build and run.

    You now have a functioning two-state checkbox in the form of a UserControl. All you need to do next is to define the states as you would for the built-in CheckBox control. Naturally you won’t want to reproduce the built-in controls with your own UserControls, but now you know how to extend the base class you’ll be ready to do something more practical.
     
    A completed sample is also provided.
     
    -Steve

  • Expression Blend and Design

    Creating Falling Snow in Silverlight!

    • 17 Comments

    Exactly a year ago (plus one day…but who’s counting?!), I posted a sample WPF application that simulates falling snow. Since Silverlight 2 was released since then, below you will find a Silverlight version of a similar falling snow effect:

    Get Microsoft Silverlight

    Just click on the Let It Snow banner to cause 200 snowflakes to start falling. Feel free to use this for your own projects, and the source files have been provided below:


    folderfiles Download Falling Snow Source

    For your own projects, the only thing you may want to tweak is the width and height of your application. Currently, everything is hard coded to a width and height of 500px by 300px respectively, but if you decide to change the size, be sure to open Page.xaml.cs and change the dimensions provided:

    private void PopulateSnowFlakes()
    {
       for (int i = 0; i < 200; i++)
       {
          SnowFlake snowFlake = new SnowFlake();

          // 500 and 300 is the width/height of the application
          snowFlake.SetInitialProperties(500, 300);
          LayoutRoot.Children.Add(snowFlake);
       }
    }

    Besides that, everything else should be pretty straightforward. If you have any questions, feel free to leave them below.

    Cheers!
    Kirupa

  • Expression Blend and Design

    Holiday Savings – Add Expression Blend 2 to Your Design Tool Set

    • 10 Comments

    Hi everyone. The following post is written by Renee Yong, Marketing Manager for Expression. I hope you find the content interesting!
    -- Kirupa


    blend50

    For a limited time, customers in the United States can shop the Microsoft Online Store for Microsoft Expression Blend,  Expression Studio and Expression Web and get 50% off.

    Chances are good that you qualify for the Upgrade pricing if you have any existing web design or creative software, or Microsoft Office software, including any ONE of the following:

    • A licensed copy of an earlier version of Expression Web
    • Adobe Creative Suite (any version)
    • Adobe/Macromedia Flash or Director (any version)
    • Adobe/Macromedia Dreamweaver (any version)
    • Adobe GoLive (any version)
    • Microsoft Office (any version)
    • Microsoft FrontPage (any version)
    • Quark QuarkXPress (any version)

    [Note: Pricing and specials are set on a locale-by-locale basis.  This deal applies only to US customers of the Microsoft Online Store and is valid only for a limited time.]

  • Expression Blend and Design

    Deep Zoom Composer has been Updated: Documentation and Bug Fixes!

    • 12 Comments

    Yesterday, we released another update to Deep Zoom Composer, and you can download it from the following location:


    dzcicon Download Deep Zoom Composer

    NOTE: Please uninstall any older versions of Deep Zoom Composer prior to installing this new version.

    This release was really about fixing the bugs that many of you have found as well as addressing some major shortcomings in the app. One of the biggest shortcomings was the lack of comprehensive and updated documentation….until now!

    Updated Documentation
    Thanks to some great work by Chris Lohr and his team, Deep Zoom Composer has some really informative (and nifty-looking) documentation in the form of a User Guide:

    dzc_userGuide2 

    The User Guide covers topics ranging from what Deep Zoom is to how to actually use Deep Zoom Composer to create your own content.

    You can access the User Guide inside Deep Zoom Composer by going to Help | User Guide or by pressing F1.

    Random Trivia
    The photographs used as examples inside the user guide were taken by Chris himself.

    Improved Memory Handling
    One of the areas we have made and continue to make investments in is memory usage. Dealing with many high-resolution images on an interactive design surface is a challenge, but Deep Zoom Composer should now allow you to compose more images than you could in the past. We aren’t quite there yet, so expect future releases to address them in greater detail.

    Improved Project Support
    For the past few releases, we made some major changes to our project structure and how the DZPRJ files are written and opened. Unfortunately, for some of you, those changes meant your older projects were no longer opening. We have tried to fix as many of those incompatibilities in this release, and a big thanks to all of you who have have e-mailed us your projects for testing.

    If you find that your projects are still not opening, we apologize. To help us out, do e-mail your .dzprj files to kirupac[at]microsoft.com to aid in troubleshooting.

    Updated Seadragon Ajax Templates
    In our previous release, you got to use Deep Zoom Composer to export your content to Seadragon Ajax. The approach that was used then was to have you upload the JS libraries along with your images to the server. That was a bit messy. In this release, we are deferring all JS downloading to the Live Labs team’s seadragon.com server itself, so you will no longer have to upload a large quantity of JS files.

    Numerous Little Fixes
    Besides the major changes listed above, we made many little tweaks that are too many to publish and list here. Some of them are bigger such as using an updated version of DeepZoomTools.dll, and some of them are less big like the numerous wording and string changes made.

    If you have any questions or comments, feel free to comment below or post on our forums :)

    Cheers!
    Janete, Kirupa

  • Expression Blend and Design

    Hello DeepZoomTools.DLL : Deep Zoom Image Tile Generation Made Easy

    • 43 Comments

    In our most recent release of Deep Zoom Composer, one of the major changes we made was to change how we generated the image tiles both for designing as well as exporting your Deep Zoom Content. In the past, ever since our first release at MIX, our image encoding was done using a combination of SparseImageTool.exe and ImageTool.exe command line tools. Starting with this release, we have retired those tools and have shifted to a preview version of a .NET based DLL that provides image generation capabilities.

    If you look inside your Deep Zoom Composer installation folder, which is by default, [Program Files]\Microsoft Expression\Deep Zoom Composer, you will see a file called DeepZoomTools.dll:

     dztoolsPNG

    This DLL contains all of the functionality needed for you to generate image tiles for compositions and collections. The classes and methods that you can use are as follows:

    public enum ImageFormat { Jpg, Png, Wdp };

    public class Image
        public Image(string path)
        public double MaxViewportWidth
        public double MinViewportWidth
        public string Path
        public Point ViewportOrigin
        public double ViewportWidth

    public class ImageCreator
        public ImageCreator()
        public double ImageQuality
        public int TileSize
        public int TileOverlap
        public ImageFormat TileFormat
        public bool CopyMetadata
        public void Create(string source, string destination)

    public class CollectionCreator
        public CollectionCreator()
        public double ImageQuality
        public int TileSize
        public int MaxLevel
        public ImageFormat TileFormat
        public bool CopyMetadata
        public void Create(ICollection<Image> images, string destination)
        public void Create(ICollection<string> images, string destination)

    public class SparseImageCreator
        public double ImageQuality
        public int TileSize
        public int TileOverlap
        public ImageFormat TileFormat
        public Color BackgroundColor
        public bool CopyMetadata
        public void Create(ICollection<Image> images, string destination)

    The API should be pretty straightforward. A DeepZoomTools.Image is the internal notion of a Deep Zoom image, and it contains all of the information such as the viewport widths, path to source image, origin, etc. ImageCreator is used to define an image and write the image tiles to disk. CollectionCreator and SparseImageCreator take a list of image paths and write the image tiles to disk.

    When I was playing with this, the one thing that confused me was what CollectionCreator expected as its “image path”. It isn’t a string of paths to raw JPG, PNG, etc. files. It is actually a path to the Deep Zoom Image created via ImageCreator/SparseImageCreator. SparseImageCreator does take in a list of paths to the source image, so passing in a list of image files will work for generating sparse images (aka Compositions).

    Do note that this DLL is a pre-release version, and the Live Labs team will decide when and how to more formally release this in the future. Even though Deep Zoom Composer uses this same DLL, there may be future releases of this DLL that are independent of Deep Zoom Composer releases.

    Thanks,
    Kirupa

  • Expression Blend and Design

    Deep Zoom Composer Updated: Seadragon Ajax Support, New API, and more!

    • 24 Comments

    Today, we released another update to Deep Zoom Composer, and you can download it from the following location:


    dzcicon Download Deep Zoom Composer

    NOTE:
    Be sure to uninstall any earlier versions of Deep Zoom Composer before attempting to install our new version.

    Most of the work in this release has been under the hood to fix bugs and usability issues, but we did add a few features that you may find cool to use!

    Seadragon Ajax Support
    One of the biggest changes we made was to revamp our Export UI and provide you with the option of exporting your composition as a Seadragon Ajax project:

     image

    If you haven’t heard about Seadragon Ajax before, it is a JavaScript-based implementation of the Deep Zoom functionality found in Silverlight. You can read more about Seadragon Ajax and the difference between this and Deep Zoom at Lutz Gerhard’s blog.

    New and Improved API
    Something that we’ve mentioned in the past is that we want to make it easier for all of you to integrate Deep Zoom tiling functionality into your own applications. In the past, you only had access to the command-line tools SparseImageTool.exe and ImageTool.exe.

    In this release, we are moving away from the command-line tools and moving to a .NET/managed DLL that you can more easily integrate into your applications. I will be sharing more details on this DLL in a future posting, but all of Deep Zoom Composer now uses this DLL for its internal treatment of tiled images. One nice benefit of this is that you get better reliability and performance when importing and exporting images!

    Updated Project Templates
    In the past, we really haven’t given our project templates much attention. We are changing that with this release with more useable templates for both Silverlight and Seadragon Ajax:

    slTemplate

    The revised templates contain bug fixes and usability issues that many of you have given us feedback on.

    Numerous Bug Fixes
    We deviated a bit from what we said last time that future releases will focus more on under-the-hood changes. The changes you see today are things that many of you had asked us about, so even though we are continuing to invest in stability and performance, do feel free to send us more suggestions. Some oft-asked features may find their way into a future version.

    Thanks To..
    As always, each Deep Zoom Composer release is a collaborative effort from individual from across Microsoft. A large part of this release relied on the efforts of Dan Cory, Melinda Minch, Lutz Gerhard, Avi Dunn , and other colleagues in Live Labs!

    Cheers!
    Celso Gomes, Christian Schormann, Janete Perez, Kirupa Chinnathambi

  • Expression Blend and Design

    2.5D UserControl for Silverlight 2

    • 9 Comments

    2.5D (two-and-a-half D) is a way of using 2D objects to give a very convincing illusion of 3D. I’ve provided an implementation that has no lighting, materials, lines or polygons. But it does enable you to locate 2D (that is, flat) objects at x,y,z coordinates and place the camera where you want it. The implementation then projects the objects onto the camera, scaling and translating them appropriately, and handles mouse input to move the camera.

    You can see a small example demonstrating this below:

    Get Microsoft Silverlight

    Holding the left mouse button and moving the mouse rotates the camera; holding down Ctrl zooms; holding down Shift adjusts the field of view.

    Often, rotation causes an object to come in front of another, in terms of their distance from the camera. So each time it draws the scene, the implementation calculates the distance of each object from the camera and then sorts and draws them from back to front. It also culls (that is, removes from the scene) any object behind the camera. Other frills this implementation has are a kind of depth-of-field effect and a fog effect. The depth-of-field effect can be seen whenever an object gets very close to the camera: in this case its opacity falls off exponentially. The fog effect causes the saturation of distant objects to reduce, and their brightness to increase, so that they appear to be melting into fog or haze.

    Anyway, you can download the source for the above project from the following location:


    folderfiles Download 2.5D User Control Source

    You can use Expression Blend 2 SP1 and Visual Studio 2008 to dive into the app and see how

    TwoAndAHalfDUC (the first class in the file TwoAndAHalfDUC.cs) is a UserControl base class from which you can derive your own classes. In that same file you will find the CubeUC class that derives from TwoAndAHalfDUC to provide an example of what to do. All you need to do is provide an override of the InitializeSprites method that creates and initializes a number of TwoAndAHalfDSprite objects.

    The base class always draws the sprites as colored circles (and of course it does this from any viewing angle so the objects behave as spheres would) but you can amend that behavior so that other 2D objects are used. I tried TextBlocks (and scaled them via their RenderTransform) and the result was very interesting.

    Enjoy!

    Steve

  • Expression Blend and Design

    PDC 2008 Session – Microsoft Expression Blend: Tips and Tricks

    • 4 Comments

    If you were unable to attend the PDC this year, don’t worry! Because all of the sessions have been recorded and posted online for you to view at your leisure, you won’t miss out on much. One session that my be of particular interest to you is Pete Blois’s and Doug Olson’s talk about Expression Blend:

    exprblend

    You can view the talk online by clicking the following link: http://channel9.msdn.com/pdc2008/PC47/

    The above link also contains downloadable versions of the video along with the PowerPoint slide deck Pete and Doug used to give their talk.

    Pete and Celso’s Twitter App
    A part of the session focused on how a designer can have a large impact on the look and feel of an application without having to write a lot of code or interfering with the core logic of the application. To highlight this, Pete showed off a Silverlight 2-based Twitter app that he wrote originally:

    peteVersion

    Celso Gomes, one of the designers on our team, took Pete’s application and decided to style it to look as follows:

    celsoVersion

    The functionality is the same, but the way the application looks is vastly different. The static screenshots don’t do Celso’s version justice. If you watch the session, you will see subtle transitions and rollover effects that are pretty cool and give the application a more polished feel.

    To try out this Twitter application for yourself, download the source files below:


    folderfiles Download Twitter Source

    You can use Expression Blend 2 SP1 and Visual Studio 2008 to dive into the app and see how Celso and Pete designed and developed the application.

    Cheers!
    Kirupa

  • Expression Blend and Design

    Blend 2 SP1 + WPF Toolkit = Visual State Manager for WPF

    • 20 Comments

    The Blend 2 Service Pack 1 contains a secret ingredient that can be activated by installing the WPF Toolkit and then setting a Registry value. In a nutshell, this ingredient is Visual State Manager support for Windows Presentation Foundation projects. As you know, Visual State Manager is built into Silverlight 2 but the WPF Toolkit gives you an early peek into the future of VSM-for-WPF.

    The WPF Toolkit is a collection of WPF features and components that are being made available outside of the normal .NET Framework ship cycle. The WPF Toolkit not only allows users to get new functionality more quickly, but allows an efficient means for giving feedback to the product team.

    Once you have the Blend 2 Service Pack 1 installed, here are the steps you need to follow to get to the VSM-for-WPF goodness:

    1. Install the WPF Toolkit from http://www.codeplex.com/wpf/Release/ProjectReleases.aspx?ReleaseId=15598
       
    2. Create the following registry value and make it non-zero. The value should be of type DWORD. Or run the appropriate .REG file attached to this post (or by clicking here).
       
      • 32 bit OS : HKLM/Software/Microsoft/Expression/Blend/EnableVSM
         
      • 64 bit OS : HKLM/Software/Wow6432Node/Microsoft/Expression/Blend/EnableVSM
         
    3. If Blend was running during the previous step then restart it.
       
    4. Create a new WPF project.
       
    5. Add %Program Files%\WPF\WPF Toolkit\...\WPFToolkit.dll to the References folder (Right-click the References node in Project, then click Add Reference…).
       
    6. Close and reopen Window1.xaml. The States pane will now appear for the project.

    Here are some VSM resources to get you going: http://blogs.msdn.com/expression/archive/2008/07/11/more-articles-on-visual-state-manager.aspx

    Even though the built-in WPF controls (such as Button and CheckBox) weren’t designed with VSM in mind, the toolkit works some event interception magic that means your Visual States are applied provided they’re given the standard names such as Normal, MouseOver, Pressed, Disabled, Unchecked, Checked and so on. You can also use VSM-for-WPF to add interactivity to new custom controls you author yourself, although be aware that Blend will not read any default VisualState information out of the default template. And of course you can also add VSM interactivity to UserControls.

    We hope you have fun!

    -Steve

  • Expression Blend and Design

    Simulating Sample Data in Blend 2 SP1

    • 7 Comments

    Using sample data can make designing your Silverlight 2 applications more predictable. Given some data, you have a lot of flexibility in designing around this data in Expression Blend. The challenge is that there are are many cases where you simply won’t be able to see your data on the design surface. Think of an example where some data is displayed only after you query a web service. One way around this would be to hard-code the data to display. The problem is that this leaves you with extra work in the end to make sure you switch out your hard-coded data with real data.

    In this post, I will show you some code for a workaround where you can have sample data on the design surface while still retaining your ability to have live data when you are testing your actual app in the browser:

    public class Member
    {
          public string FullName { get; set; }
          public double Delta { get; set; }
          public int Status { get; set; }
    }
    
    public class MyData
    {
          public ObservableCollection Members { get; private set; }
    
          public MyData()
          {
                this.Members = new ObservableCollection();
                
                bool designTime = (System.Windows.Browser.HtmlPage.IsEnabled == false);
                if (designTime)
                {
                      this.LoadDesignTimeData();
                }
                else
                {
                      // TODO: runtime
                }
          }
    
          private void LoadDesignTimeData()
          {
                this.Members.Add(new Member() { FullName = "Bunda3", 
    Delta = -2.39,
    Status = 0 }); this.Members.Add(new Member() { FullName = "SneakerHead",
    Delta = 14.92,
    Status = 1 }); this.Members.Add(new Member() { FullName = "NobodyMan",
    Delta = -4.62,
    Status = 3 }); } }

    The corresponding XAML will look like the following:

     <UserControl.Resources>
          <DesignTimeData:MyData x:Key="MyDataDS" d:IsDataSource="True"/>
                <DataTemplate x:Key="MembersTemplate">
                <StackPanel>
                      <TextBlock Text="{Binding Path=Delta}"/>
                      <TextBlock Text="{Binding Path=FullName}"/>
                      <TextBlock Text="{Binding Path=Status}"/>
                </StackPanel>
          </DataTemplate>
    </UserControl.Resources>
     
    <Grid Background="White">
          <ListBox ItemTemplate="{StaticResource MembersTemplate}" 
          ItemsSource="{Binding Mode=OneWay, 
                        Path=Members, 
                        Source={StaticResource MyDataDS}}"/>
    </Grid>

    The code I have pasted above should be pretty self-explanatory. What I am doing is checking to see if I am currently editing this XAML file in Expression Blend. For Silverlight, you can do that by checking your HtmlPage.IsEnabled boolean property.

    If I am currently in Expression Blend, I pull in data from my sample data class, MyData. This allows me to edit my data template and style my data easily. When I preview this application in the browser, because HtmlPage.IsEnabled will be set to true, you will not see the sample data. Instead, you would see real data!

    - Evgeny

Page 3 of 9 (217 items) 12345»