xamlimagebrush

XAML: ImageBrush horizontal tiled

I've searched accross the Internet to solve the follow problem, but unfortunately I didn't found any working solution.

My goal is to have an ImageBrush with an image x-repeating at the bottom of the object which is using the brush. Additional the brush shall have a transparent margin, so the repeated Images shall not "touch" the container's border.

Currently I'm able to repeat an image x- and y-axis (and there I'm stuck ...). That for I use the following XAML:

<ImageBrush 
    x:Key="MandatoryIndicator" 
    ImageSource="image.png" 
    Stretch="None" 
    TileMode="Tile" 
    ViewportUnits="Absolute" 
    Viewport="0,0,16,16" 
    AlignmentY="Bottom"/>

And it Looks like this:

enter image description here

And I like to have it like this:

enter image description here

If you know how I have to modify my brush XAML, that would be great c[~] =)

Solution

  • You may use a VisualBrush with two nested elements like shown below. The outer Border (or some other outer element) is necessary for the transparent margin.

    <VisualBrush Stretch="None" AlignmentX="Left" AlignmentY="Bottom">
    <VisualBrush.Visual>
        <Border Background="Transparent"
                Width="{Binding ActualWidth,
                        RelativeSource={RelativeSource AncestorType=FrameworkElement}}">
            <Rectangle Margin="10" Height="16">
                <Rectangle.Fill>
                    <ImageBrush ImageSource="image.png" TileMode="Tile"
                                Viewport="0,0,16,16" ViewportUnits="Absolute"/>
                </Rectangle.Fill>
            </Rectangle>
        </Border>
    </VisualBrush.Visual>
</VisualBrush>