Question

I have a UserControl that has a repeating-image background set with the following code:

<UserControl.Background>
    <ImageBrush ImageSource="Resources/image.jpg" Viewport="0,0,32,32" ViewportUnits="Absolute" TileMode="Tile" Stretch="None" AlignmentX="Left" AlignmentY="Top" />
</UserControl.Background>

And it works fine. However, the problem is that the tiled images originate from the top of the control, so that if the control is resized vertically, the newly visible parts of the background seem to come out of the bottom of the control.

I would like the images to be tiled from the bottom to the top rather than the top to the bottom so that upon resizing the control, the newly visible background comes from the top, not the bottom

How can I do this? I have tried setting AlignmentY to Bottom but it didn’t change a thing.

Answer 1

Ok, this may not be what you are looking for, but i found your question very interesting.

I was able to do it horizontally (new images appear from the left, instead of the right).
By setting the “FlowDirection” to “RightToLeft” on your user control, it will do what you require HORIZONTALLY. I have no idea if this is possible vertically. I am still looking into it….

    <Canvas FlowDirection="RightToLeft">
        <Canvas.Background>
            <ImageBrush ImageSource="Resources/image.jpg" Viewport="0,0,32,32" ViewportUnits="Absolute" TileMode="Tile" Stretch="None" AlignmentX="Left" AlignmentY="Bottom" />
        </Canvas.Background>
    </Canvas>

This is the first element of my UserControl, but this “FlowDirection” could be placed on your base element (usually a Grid) at the root of your user control. However, with the canvas, you can be insured that this “flow direction” will not affect any other component in your user control.

Hope this points you in a good direction.

— EDIT —

LOL I can’t believe this works, but it does! Based on my first work, and using a Converter for the canvas’ margin:

Converter:

    [ValueConversion(typeof(double), typeof(Thickness))]
    public class SizeToInverseMarginConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (targetType != typeof(Thickness))
                throw new InvalidOperationException("The target must be of type 'Thickness'");

            double vNewVal = -5000 + (double)value;
            return new Thickness(0, vNewVal, 0, 0);
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotSupportedException();
        }
    }

Then the user control’s content:

<UserControl.Resources>
    <My:SizeToInverseMarginConverter x:Key="s2m" />
</UserControl.Resources>
<Grid x:Name="MainGrid">
    <Canvas FlowDirection="RightToLeft" Margin="{Binding Path=ActualHeight, ElementName=MainGrid, Converter={StaticResource s2m}}">
        <Canvas.Background>
            <ImageBrush ImageSource="Resources/image.jpg" Viewport="0,0,32,32" ViewportUnits="Absolute" TileMode="Tile" Stretch="None" AlignmentX="Left" AlignmentY="Bottom" />
        </Canvas.Background>
    </Canvas>
</Grid>