Imagebrush is stretching one instance of an image but not another

Question

One of the stranger occurrences I've come across, I have a set of repeatbuttons that use a certain image as a background. Despite the buttons being identical, one is displayed differently. Fully reproducible sample below, along with a number of variations each with different results.

Link to icons:

https://github.com/driftyco/ionicons/blob/master/png/512/plus.png https://github.com/driftyco/ionicons/blob/master/png/512/minus.png

<Grid Margin="0,0,0,0" >
    <StackPanel Orientation="Horizontal" Height="32">
        <StackPanel.Resources>
            <ImageBrush x:Key="plusImage" ImageSource="/Resources/plus.png" />
            <ImageBrush x:Key="minusImage" ImageSource="/Resources/minus.png" />
        </StackPanel.Resources>
        <RepeatButton Width="20"
              Height="20"
              Background="{Binding Source={StaticResource minusImage}}"/>
        <TextBlock Margin="5,0,5,0"
           VerticalAlignment="Top"
           FontWeight="Bold"
           Text="X" />
        <RepeatButton Width="20"
              Height="20"
              Background="{Binding Source={StaticResource plusImage}}"/>
        <Separator Margin="5,0,5,0" Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" />
        <RepeatButton Width="20"
              Height="20"
              Background="{Binding Source={StaticResource minusImage}}"/>
        <TextBlock Margin="5,0,5,0"
           VerticalAlignment="Top"
           FontWeight="Bold"
           Text="Y" />
        <RepeatButton Width="20"
              Height="20"
              Background="{Binding Source={StaticResource plusImage}}"/>
        <Separator Margin="5,0,5,0" Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" />
        <RepeatButton Width="20"
              Height="20"
              Background="{Binding Source={StaticResource minusImage}}"/>
        <TextBlock Margin="5,0,5,0"
           VerticalAlignment="Top"
           FontWeight="Bold"
           Text="Z" />
        <RepeatButton Width="20"
              Height="20"
              Background="{Binding Source={StaticResource plusImage}}"/>
    </StackPanel>
</Grid>

enter image description here

I'm creating a control to control the x, y, z positions of a point. As you can see in the image above, only one of the plus icons appears to be stretched.

Variations:

If I remove Z and the icons associated with it, the last plus icon for Y is NOT stretched
Removing the fontweight from Z makes the plus icon appear normal (not stretched)

What would cause an imagebrush to stretch an image like this?

Try setting [`SnapsToDevicePixels="True"`](https://msdn.microsoft.com/en-us/library/system.windows.uielement.snapstodevicepixels.aspx) or [`UseLayoutRounding="True"`](https://msdn.microsoft.com/en-us/library/system.windows.frameworkelement.uselayoutrounding.aspx) on the RepeatButtons — Clemens, Apr 10 '15 at 20:26
@Clemens UseLayoutRounding fixed the problem, thanks! Go ahead and add it as an answer and I'll accept it. — Brandon, Apr 10 '15 at 20:56

score 0 · Accepted Answer · answered Apr 10 '15 at 21:10

0

You could set the UseLayoutRounding property on the RepeatButtons:

<RepeatButton Width="20" Height="20" UseLayoutRounding="True"
              Background="{Binding Source={StaticResource plusImage}}"/>

answered Apr 10 '15 at 21:10

Clemens

123,504
12
155
268

Imagebrush is stretching one instance of an image but not another

1 Answers1