With images it is sometimes difficult to see the difference between a white and transparent background. Using a DrawingBush in Tile mode can create the known checker background used in applications as Photoshop.
<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.
Posted in Uncategorized
|
Tagged WPF
|
For my Resizer application I wanted a toolbar with image buttons, everything was perfect until I tried to disable the buttons. The first idea was to add a greyscale effect to the button if it was disabled. For a complete black/white icon this didn’t help either but changing the opacity does.
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
Posted in Uncategorized
|
Tagged Resizer, WPF
|
We have updated the Getting Started tutorial and placed it on our Wiki.
Posted in Uncategorized
|
Tagged Vidyano
|
Microsoft changed the default behaviour for scaling images with WPF 4.0/.NET 4.0.
They opted for a faster but less accurate scaling algorithm named Linear instead of the default Fant that was used in WPF 3.0.
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.
I’ve been working on a little project to demo the features of Vidyano.
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.
iRail.be is a website to find train information here in Belgium, it scraped the original complicated website of the NMBS and provided a clean/simple interface to access the information.
More info on the blogpost.
I’m proud to announce that our team has finished our next major version of Vidyano.
Build from scratch to optimize everything for the latest .NET 4.0 release and using all latest features of it (MEF, Rx, …).
The User Interface now uses a MVVM based architecture with our Module/Page system on top of it.
You can download it directly from inside Visual Studio using the Extension Manager or at the Visual Studio Gallery Page.
Read more on our blog.
