Run.To.The.Hills

Technorati Tags: WPF,Greyscale,BitmapEffect

 

---

[ please see the THIS post about single assembly effects ]

---

Whilst trawling the MSDN forums looking for a solution to a problem i was having (completely unrelated to bitmap effects – i’m easily distracted ) i came across many requests for methods of ‘greying’ out or desaturating images etc. There were a few suggestions about converting to a different bitmap format, but that SMELLS and there was a few other things i came across , including an incorrect implementation that grey scaled the image by averaging the 3 pixels.That will give a grey image, (after all , all three components are set to the same value) its not a true grey scale conversion. A real grey scale conversion requires that the conversion factors for each component is weighted according to how we percieve that colour. For example, we perceive many more shades of green than either red or blue, so the green component of an image should make up proportionally more of the final grey scale than the red and blue components.Anyway, after a little digging, I came across an example project in the SDK that was pretty close to what I required , so I set about butchering it. 3 hours later, the GreyscaleBitmapEffect is the result.This is a true bitmap effect, just like the DropShadow or the Blur or the Outer glow, and can be applied to any element, not just your bitmaps.This means you can now have a trigger on IsEnabled=false that makes your element go grey!Anyway, on to the usage. First download the DLL and the managed library at the end of this article.Next, you’ll need to regsvr32 the Com component, from the command line.copy the DLL into your project folder, go to the command line and type (continue reading…)

I’ve just had the displeasure of burning quite a few hours on a stupid problem with starting animations from a control template using data binding and datatriggers in WPF. I’ve solved it eventually but only after wasting way too long on something I think should have been pretty straight forward.

Anyway, here’s the problem definition.

Write a control to display the state of a variable representing the status of a request to a server. Pretty simple? Well, you would have thought so. But as usual, the ‘lets make it cool’ part of my programmer head got in the way, an I found myself wanting to animate the control.

Ok, nothing amazing, just make it fade up nicely when it changes state, blink while it’s the request is in progress, and fade out when were done. Not to much to ask for!

So, I create a sample application and added the server graphics

This icon represents when the request is downloading information and fades up first, then blinks when at maximum opacity. (Busy)

 

This icon is when the request is completed. It fades out after the Busy icon has been flashing.

 

Lastly, this icon shows when the request failed for whatever reason. Im sure the users aren’t concerned with the inner exception property of the soapexception

 

Anyway, wanting to continue with the distinct separation of concerns for the UI & the internal datamodel I have in my application, I created the control’s template to

(continue reading…)

I have a requirement in the current project to provide a method of converting a title entered in an edit box, into a corresponding code number. The current customers implementation is page based (web style) where you enter words, and click search. after a couple of seconds the results are shown on a page based grid when there are too many results to display. The search also finds ANY of the terms, and doesn’t match on partial words. The time constraints for the telephone operators using this system are quite harsh, and any delay in finding the correct codes is quite a problem.

I think I can provide something much better than the default searching capabilities, which will improve our customers experience, and provide a better service for their clients.

I’ve decided that a real-time incremental search function will give the best results, so given my current project is using .NET 3.5 I decided this was as good a time as any to dive in and figure out how to use LINQ properly. I’ve played with the 101 samples but not really had a chance to apply anything I’ve learned in my own projects.

So, the requirement is to provide incremental matching of multiple partial terms across an XML file with 28,000 nodes, where we’re interested in the title and code elements. I also want to match on all terms entered in the search to narrow the quantity of matches, rather than increasing them.

So, for the first spike, I used an XPath query and a loop to extract the nodes with matching titles. I needed to get a feel for how fast the search would be given we have 28,000 nodes to parse!

 

(continue reading…)

I was having a deep discussion with a friend the other day, about how WPF and Winforms controls can’t overlap on the same surface. It’s not really a big limitation, since WPF is so rich you’d never need a Winform Control on your surface, right?

What if you really , really wanted a nice Google map or a Live! map on your WPF form? well I guess you’re S.O.L. then.

Well, up until now!

Yep, that’s a Microsoft Live map right there on your WPF form. Ok, I know its not overlapping , so you’re thinking I could have faked it.., but I haven’t honest, its just in a <StackPanel> as an example.

Anyway, here’s how it works.

(continue reading…)

As a long time lover of ReSharper, I finally got round to upgrading to the new 3.1 version, but I came across a minor problem after the install, ReSharper wasn’t appearing in the VS2008 IDE .

So after a quick Google it appears you need a specific incantation when you install on a machine with both versions of Visual Studio installed :

msiexec /i ResharperSetup.3.1.Full.VS80.msi VSVERSION=9.0

hey presto, we’re in business. ReSharper appears on the inside VS2008′s menu bar once more!

The next issue I had wasn’t really a problem with resharper but its built in unit test runner didn’t support MbUnit natively. Enter Albert Weinert , who has created a very nice ReSharper plugin to allow you to run your MbUnit tests right in the IDE using ReSharper’s test runner! I don’t think I’m the only one salute you Albert with each press of f5

Albert’s Blog links to the latest version of his DLLs.

Related articles by Zemanta

• 3 Things I Never Knew I Needed
• ReSharper 4.1 Released
• Navigating Xaml Resources with ReSharper

Wow, its been quite a bit since my last post – but I’ve got a good excuse. I’ve been busy soaking up all I can on the Holy trio of WPF/WCF/WWF. There’s just so much to absorb, and I’m already 3+ years behind! (WPF has been around since 2003/4)

Anyway. I’m here now!

Ok, the reflection stuff is getting a bit overdone, and I’ve seen another example of an animating cog,  so not wanting to feel left out i thought I’d add my own reflection example with a minor twist.

Here’s the code :

<Window x:Class=”WindowsApplication1.Window1″
    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation“
    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml“
    Title=”BalmyWin” Height=”480″ Width=”600″>
        <Window.Background>
                <LinearGradientBrush EndPoint=”0.5,1″ StartPoint=”0.5,0″>
      <GradientStop Color=”#FF0000FF” Offset=”1″/>
      <GradientStop Color=”#FF0000DF” Offset=”0.63″/>
      <GradientStop Color=”#FF000082″ Offset=”0.543″/>
      <GradientStop Color=”#FF000000″ Offset=”0″/>
    </LinearGradientBrush>
        </Window.Background>
    <StackPanel>
      <Grid HorizontalAlignment=”Center” VerticalAlignment=”Center” Margin=”0,80,0,0″ Background=”#FF0000AF”>
        <MediaElement x:Name=”balmy” Source=”ballmerwindows.wmv” Width=”320″ Height=”240″  Margin=”5,5,5,5″ TextElement.Foreground=”#FFFFFFFF”/>

      </Grid>
      <Rectangle Width=”320″ Height=”240″ Margin=”5,0,5,5″ >
        <Rectangle.Fill>
          <VisualBrush Visual=”{Binding ElementName=balmy}”/>
        </Rectangle.Fill>
        <Rectangle.RenderTransform>
          <TransformGroup>
            <ScaleTransform ScaleY=”-0.25″/>
            <TranslateTransform Y=”60″ />
            <SkewTransform AngleX=”70″ />
          </TransformGroup>
        </Rectangle.RenderTransform>
        <Rectangle.OpacityMask>
                <LinearGradientBrush EndPoint=”0.515,1.15″ StartPoint=”0.487,0.017″>
                        <GradientStop Color=”#0E000000″ Offset=”0.135″/>
                        <GradientStop Color=”#FFFFFFFF” Offset=”1″/>
                </LinearGradientBrush>
        </Rectangle.OpacityMask>
      </Rectangle>
    </StackPanel>
</Window>

and here’s the result.

To try this out, cut and paste it into XAMLPadX or other XAML editor that allows a window as the root element.

Although in the original example on the WPF/E blog, an image is used for both the graphic and its reflection, and animation rotates both. Thats ok when you have a static image, what if you want to reflect a video? Loading up the video twice is a bit of a resource hog, and then there’s the risk they’ll get out of sync for some reason, plus even a few millisecond delay will give some really odd audio phasing artifacts.

Enter the <VisualBrush> element. This allows you to ‘capture’ the content of a visual tree of pretty much any element in your Xaml. Because the content of a <MediaElement> is a dependency property, anytime the video codec renders a new frame of video data, the visual brush also gets a copy of the surface data.

In addition to a simple inversion, which could be done with a <RelativeTransform> and a Y of -1, i wanted to add a skew transform the the rendered output. i think this gives more realistic cast reflection than a simple reflection about the X axis when you really notice the lack of a true perspective transform.

Anyway, there are two types of transforms you can add to a visual element, layout transforms , and render transforms. A layout transform performs the transformation before the layout engine positions all the controls, so if we were doing a rotation, as the horizontal size of the control increased, the other controls would get pushed around on screen which wouldn’t be too pretty. To avoid that, we use a render transform, which performs the transformation as the last stage of the rendering pipeline, so it doesn’t affect the positions of any of the other controls on screen.

So, we make a RenderTransform that consist of a Translation, a Skew, and a Scale. When we flip the brush, we also need to translate back into a position underneath the video, and we apply a scale to make it look slightly more realistic.

As a final touch we apply a linear gradient over the transformed visualbrush that affects only the reflections opacity mask . This causes the alpha on the visual brushes pixels to decrease the further away we get from the base of the reflection.

Thats about it! There’s no code required, everything is in the one XAML file. The media element can present pretty much any type that has a registered codec, and it will even do animated gifs (although there’s a bug in WPF which doesn’t clear the background of gifs with transparency)

The example also uses the video attached to this blog entry, save it in the same location as the XAML file or you’ll end up with an empty window!

so, happy XAML’ing!

File Attachment: ballmerwindows.wmv (830 KB)

If you’re trying out WPF using Expression Blend conjunction with Devstudio, you might find depending on how you start them up, that the integration isn’t all that clever. Here’s the problem.

Basically, don’t start blend before Devstudio, or Devstudio won’t be able to provide you will full intellisense with your project since it isn’t loaded as a solution. If you add an event handler in blend, Devstudio pops up with that file but thats all, and lets face it, working without intellisense is like having your hands removed at the wrists!

So, the correct sequence is..

1. Open Devstudio first
2. Create a WPF Project within Devstudio (or open an existing project)
3. Now run blend
4. open the ”Solution” file from within blend.

abracadabra…, you get full intellisense in Devstudio, and you can still edit everything within blend.

Note also that Blend doesn’t provide any intellisense yet, and the XML editor isn’t really that good by comparison.

OOPS !
There’s a few things that Devstudio’s XAML visualisation doesn’t cope with either, so get used to see the OOPS screen. Editing XAML inside Devstudio is pretty easy though, and the intellisense even works for enums inside strings for the setting of the XAML tag attributes!

Cool!