More info

We uploaded some videos to show some of the features.

More info

More info…

<DrawingBrush>
    <DrawingBrush.Drawing>
        <DrawingGroup>
            <GeometryDrawing Brush="White">
                <GeometryDrawing.Geometry>
                    <RectangleGeometry Rect="0,0,10,10" />
                </GeometryDrawing.Geometry>
            </GeometryDrawing>
            <GeometryDrawing Brush="LightGray">
                <GeometryDrawing.Geometry>
                    <GeometryGroup>
                        <RectangleGeometry Rect="0,0,5,5" />
                        <RectangleGeometry Rect="5,5,5,5" />
                    </GeometryGroup>
                </GeometryDrawing.Geometry>
            </GeometryDrawing>
        </DrawingGroup>
    </DrawingBrush.Drawing>
</DrawingBrush>

Which will give the following effect if used as the background property.

Save/Clear disabled because there are no images

All buttons enabled

MouseOver Save button

    <Style TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Margin="1">
                        <Rectangle x:Name="OuterBorder" RadiusY="2" RadiusX="2" Visibility="Collapsed"/>
                        <Rectangle x:Name="Bg" Fill="{TemplateBinding Background}" Margin="1" RadiusY="1" RadiusX="1" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="1" Visibility="Collapsed"/>
                        <Rectangle x:Name="InnerBorder" Margin="2" Visibility="Collapsed"/>
                        <ContentPresenter Margin="5" VerticalAlignment="Center" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Visibility" TargetName="OuterBorder" Value="Visible"/>
                            <Setter Property="Visibility" TargetName="Bg" Value="Visible"/>
                            <Setter Property="Visibility" TargetName="InnerBorder" Value="Visible"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Effect">
                                <Setter.Value>
                                    <effects:GreyscaleEffect />
                                </Setter.Value>
                            </Setter>
                            <Setter Property="Opacity" Value=".5" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

And the following .fx code is used for the greyscale effect.

sampler2D  ImageSampler : register(S0);  //take ImageSampler from S0 register. 

// 'uv' vector from TEXCOORD0 semantics is our texture coordinate, two floating point numbers in the range 0-1.
float4 PS( float2 uv : TEXCOORD) : COLOR
{
    float4 color = tex2D( ImageSampler, uv); // get the color of texture at the current point
    color.rgb = dot(color.rgb, float3(0.3, 0.59, 0.11)); //compose correct luminance value
    return color;
}

Browse the latest source

You can change this behaviour using the RenderOptions.BitmapScalingMode attached property.

<Image Source="Image.png"
    RenderOptions.BitmapScalingMode="HighQuality" />

Microsoft recommends to only use HighQuality if the image’s scaled size will be less that 30-50% of the original size.

The Resizer application will always use HighQuality so that it gives the best image quality for any image.

Using the attached property on images scaled in code using DrawingVisual/RenderTargetBitmap requires a bit of special code.

private static BitmapFrame CreateResizedImage(ImageSource source, int width, int height, int margin)
{
    var rect = new Rect(margin, margin, width - margin * 2, height - margin * 2);

    var group = new DrawingGroup();
    RenderOptions.SetBitmapScalingMode(group, BitmapScalingMode.HighQuality);
    group.Children.Add(new ImageDrawing(source, rect));

    var drawingVisual = new DrawingVisual();
    using (var drawingContext = drawingVisual.RenderOpen())
        drawingContext.DrawDrawing(group);

    var resizedImage = new RenderTargetBitmap(
        width, height,         // Resized dimensions
        96, 96,                // Default DPI values
        PixelFormats.Default); // Default pixel format
    resizedImage.Render(drawingVisual);

    return BitmapFrame.Create(resizedImage);
}

Width and height contains the margin already, so if the image is scaled to 300px with a margin of 10px then the method will be called with width = 320px and margin = 10px. We can use the DrawingGroup to set the BitmapScalingMode and then add the ImageDrawing to it.

It’s used internally to generate the thumbnails for our Wiki. The source code is available on codeplex and the application is deployed as click-once.

I’ll be talking about the specific Vidyano features and the resizing part with WPF 4 in the next blog posts.

More info on the blogpost.