0

So whenever I am working with the application in the design window and I am zoomed in, the image is not blurry at all enter image description here

However as soon as I run the application it looks like this. It gets very pixelated and I have no idea why.

enter image description here

Here is the XAML code for the button

    <Button  Margin="10,0,0,0" Style="{DynamicResource RoundedButtonStyle}" Width="100" Height="30" HorizontalAlignment="Left">
        <Grid>
            <Image UseLayoutRounding="True" IsHitTestVisible="False" Height="20" Width="20" VerticalAlignment="Center" HorizontalAlignment="Left" Source="Resources/addButton.png" />
            <TextBlock IsHitTestVisible="False" Margin="20,0,0,1" VerticalAlignment="Center" Foreground="#9e9e9e">Add Product</TextBlock>
        </Grid>
    </Button>

And the Template

    <Setter Property="Background" Value="#2d2d30"/>
        <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border CornerRadius="5" Background="{TemplateBinding Background}" BorderThickness="1" Padding="2">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="#686868"/>
        </Trigger>
    </Style.Triggers>
</Style>

And the original image that I am using. enter image description here

3
  • 1
    Your original image is 128x128 and the image dimensions you specify are 10x10. This probably has something to do with it. Try setting the image dimensions to the actual image dimensions and verify if it still does that during runtime.
    – Sach
    Jul 24, 2018 at 17:21
  • Instead of using a pixel image in WPF, use a symbol from a font. Character &#60616; from "Segoe MDL2 Assets" is the same symbol. In contrast to your pnf image it scales perfectly.
    – gdir
    Jul 24, 2018 at 17:27
  • If I remember correctly "Segoe MDL2 Assets" is only available in Windows 10. Older Windows version had "Segoe UI Symbols" instead with a smaller character set. Can't test that anymore.
    – gdir
    Jul 24, 2018 at 17:31

3 Answers 3

2

You shouldn't be using a bitmap icon at all.

Either use a symbol from a font

<Button Width="100" Height="30">
    <StackPanel Orientation="Horizontal">
        <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text="&#60616;"/>
        <TextBlock VerticalAlignment="Center" Text=" Add Product"/>
    </StackPanel>
</Button>

or a Path with a vector drawing:

<Button Width="100" Height="30">
    <StackPanel Orientation="Horizontal">
        <Path Stroke="Black" StrokeThickness="1.5"
              StrokeStartLineCap="Round" StrokeEndLineCap="Round">
            <Path.Data>
                <GeometryGroup>
                    <EllipseGeometry Center="9,9" RadiusX="9" RadiusY="9"/>
                    <LineGeometry StartPoint="5,9" EndPoint="13,9"/>
                    <LineGeometry StartPoint="9,5" EndPoint="9,13"/>
                </GeometryGroup>
            </Path.Data>
        </Path>
        <TextBlock VerticalAlignment="Center" Text=" Add Product"/>
    </StackPanel>
</Button>
1

I think you should try out different RenderOptions.BitmapScalingModes (as mentioned here)

 <Button  Margin="10,0,0,0" Style="{DynamicResource RoundedButtonStyle}" Width="100" Height="30" HorizontalAlignment="Left">
        <Grid>
            <Image UseLayoutRounding="True" IsHitTestVisible="False" Height="20" Width="20" VerticalAlignment="Center" HorizontalAlignment="Left" Source="Resources/addButton.png"
RenderOptions.BitmapScalingMode="Fant"
 />
            <TextBlock IsHitTestVisible="False" Margin="20,0,0,1" VerticalAlignment="Center" Foreground="#9e9e9e">Add Product</TextBlock>
        </Grid>
    </Button>

For images with low color count (like in your case), NearestNeighbour works the best.

0

In the XAML the Height and the Width of the image are set to 20 and the size of the original image is 128 by 128. So WPF has to scale the image down quite a bit. That will result in a pixelated/rough image (especially with round shapes)

Solution: recreate the image in its correct size (20x20).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.