locked
Blury Images when used inside a static resource style RRS feed

  • Question

  • I have made a style for a button and part of that style is to have an image in it
    I dragged an image onto blend, made sure it was set to the right width and height (as by default it was wrong for some reason), built the project to look at the image and it looked fine
    I then copied the image xaml code into a static resource style for a button in my app.xaml, ran the project and the image is appearing blured.
    I made another image using the same style but it was a different size and the image cam through fine which is odd as its not set to stretch or anything.
    the button code is as follows
    <Image Height="16" HorizontalAlignment="Left" Margin="10,0,0,0" VerticalAlignment="Center" Width="16" Source="../../Images/Icons/Small/Page.png" Stretch="None"/> 

    an example of what im talking about is:
     
    As you can see, the buttons on the left are blurred where the button on the right is fine, the only difference is the size of the button (the one on the right is in the mouse over state, thats y its blue)

    anyone else had this issue or know what im doing wrong?
    the full style from my app.xaml is below

            <Style x:Key="NavGroupButton" TargetType="Button">  
                <Setter Property="Template">  
                    <Setter.Value> 
                        <ControlTemplate TargetType="Button">  
                            <Grid x:Name="RootElement" Background="White" > 
                                <Grid.Resources> 
     
                                    <Storyboard x:Key="MouseOver State">  
                                        <ColorAnimation Duration="0:0:0" Storyboard.TargetName="BrushFill" Storyboard.TargetProperty="Color" To="#FFced6dc" /> 
                                        <ColorAnimation Duration="0:0:0" Storyboard.TargetName="BrushStroke" Storyboard.TargetProperty="Color" To="#FFa3c2d9" /> 
                                    </Storyboard> 
     
                                    <Storyboard x:Key="Normal State"/>  
     
                                    <Storyboard x:Key="Disabled State">  
                                        <ColorAnimation Duration="0:0:0" Storyboard.TargetName="BrushFill" Storyboard.TargetProperty="Color" To="#FF1e82cf" /> 
                                        <ColorAnimation Duration="0:0:0" Storyboard.TargetName="BrushStroke" Storyboard.TargetProperty="Color" To="#FF1e82cf" /> 
                                    </Storyboard> 
     
                                    <Storyboard x:Key="Pressed State">  
                                        <ColorAnimation Duration="0:0:0" Storyboard.TargetName="BrushFill" Storyboard.TargetProperty="Color" To="#FFa3c2d9" /> 
                                        <ColorAnimation Duration="0:0:0" Storyboard.TargetName="BrushStroke" Storyboard.TargetProperty="Color" To="#FF1e82cf" /> 
                                    </Storyboard> 
                                </Grid.Resources> 
     
     
                                <Rectangle HorizontalAlignment="Stretch" Margin="1,0,1,1" VerticalAlignment="Stretch" x:Name="ButtonRectangle">  
                                    <Rectangle.Fill> 
                                        <SolidColorBrush x:Name="BrushFill" Color="#FFDDDDDD" /> 
                                    </Rectangle.Fill> 
                                    <Rectangle.Stroke> 
                                        <SolidColorBrush x:Name="BrushStroke" Color="#FFDDDDDD" /> 
                                    </Rectangle.Stroke> 
                                </Rectangle> 
                                <ContentPresenter x:Name="ButtonText" Content="{TemplateBinding Content}" HorizontalAlignment="Stretch" Margin="35,0,8,0" TextWrapping="Wrap" FontFamily="Arial" FontWeight="Bold" FontSize="12" VerticalAlignment="Center"></ContentPresenter> 
                                <Image Height="16" HorizontalAlignment="Left" Margin="10,0,0,0" VerticalAlignment="Center" Width="16" Source="../../Images/Icons/Small/Page.png" Stretch="None"/>  
     
                            </Grid> 
     
                        </ControlTemplate> 
                    </Setter.Value> 
                </Setter> 
            </Style> 
    Sunday, April 20, 2008 10:36 AM

Answers

  • Kris,

    Working with bitmaps in WPF that need crisp lines (like your Page.png) can be tricky. 

    Per Pixel Snapping in WPF Applications:

    Because of the dpi independent nature of WPF, bitmap based UI can have undesired presentation results. Anti-aliased scenes can blur an image due to fractional-pixel alignment issues. This is particularly true for images that contain high frequency changes such as single pixel lines with contrasting elements adjacent to them (such as alternating black and white lines).

    Unfortunately, simply adjusting the container object's size does not guarantee device pixel alignment. The entire layout of an application can have an affect on the alignment of the image. The display dots per inch (dpi) also affects image alignment...High frequency images should be avoided whenever possible in Windows Presentation Foundation (WPF) applications. 

    Dwayne Need also has a blog post about blurry bitmaps in WPF applications. 

    Best regards,

    Jonathan - MSFT
    This posting is provided "AS IS" with no warranties and confers no rights
    Tuesday, April 22, 2008 8:56 PM

All replies

  • One thing i tried which kind of fixed it was to set the images vertical allignment to the top and then use its margin to push it down so it looked like it was centered in the grid, that approach is fine for this button as the button will always be the same size but it will be an issue if you really need the button to be actually vertically center alligned.
    Sunday, April 20, 2008 10:39 AM
  • Howdy Kris,

    I understand you are using an image here and I had issues similar a while back which was caused by margins of the image element.

    I switched all my images out for XAML resources to keep from having these issues again, and now all my project resources are done that way.

    Just thought it may be an option to consider in future.


    Cheers


    Learn Expression Blend at learnexpressionstudio.com
    Monday, April 21, 2008 11:39 PM
    Moderator
  • Kris,

    Working with bitmaps in WPF that need crisp lines (like your Page.png) can be tricky. 

    Per Pixel Snapping in WPF Applications:

    Because of the dpi independent nature of WPF, bitmap based UI can have undesired presentation results. Anti-aliased scenes can blur an image due to fractional-pixel alignment issues. This is particularly true for images that contain high frequency changes such as single pixel lines with contrasting elements adjacent to them (such as alternating black and white lines).

    Unfortunately, simply adjusting the container object's size does not guarantee device pixel alignment. The entire layout of an application can have an affect on the alignment of the image. The display dots per inch (dpi) also affects image alignment...High frequency images should be avoided whenever possible in Windows Presentation Foundation (WPF) applications. 

    Dwayne Need also has a blog post about blurry bitmaps in WPF applications. 

    Best regards,

    Jonathan - MSFT
    This posting is provided "AS IS" with no warranties and confers no rights
    Tuesday, April 22, 2008 8:56 PM