Silverlight控件中的平铺图像

Question

I'm just starting looking at Silverlight. It just became apparent that brushes are not tile-able in Silverlight, unlike WPF. I'd like to tile a graphic in a grid control. The image is basically tile able per grid cell. Can a use multiple brushes per control, or should I use lots of image controls, or?

Answer 1

I had to stick with SL 2 for this project, so unfortunately shaders were not an option. My control had a fairly strict predetermined size, so I manually tiled the graphic onto a larger canvas.

Answer 2

The best way I've found thus far is to steal the control from Microsofts 'JetPack' theme.

It comes as part of the project template and does a pretty good job. Just set the SourceUri property and you're good to go.

Here's the source -

public class TiledBackground : UserControl
{
    private Image tiledImage = new Image();
    private BitmapImage bitmap;
    private int lastWidth, lastHeight = 0;
    private WriteableBitmap sourceBitmap;

    public TiledBackground()
    {
        // create an image as the content of the control
        tiledImage.Stretch = Stretch.None;
        this.Content = tiledImage;

        // no sizechanged to override
        this.SizeChanged += new SizeChangedEventHandler(TiledBackground_SizeChanged);
    }

    void TiledBackground_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        UpdateTiledImage();
    }

    private void UpdateTiledImage()
    {
        if (sourceBitmap != null)
        {
            int width = (int)Math.Ceiling(this.ActualWidth);
            int height = (int)Math.Ceiling(this.ActualHeight);

            // only regenerate the image if the width/height has grown
            if (width < lastWidth && height < lastHeight) return;
            lastWidth = width;
            lastHeight = height;

            WriteableBitmap final = new WriteableBitmap(width, height);

            for (int x = 0; x < final.PixelWidth; x++)
            {
                for (int y = 0; y < final.PixelHeight; y++)
                {
                    int tiledX = (x % sourceBitmap.PixelWidth);
                    int tiledY = (y % sourceBitmap.PixelHeight);
                    final.Pixels[y * final.PixelWidth + x] = sourceBitmap.Pixels[tiledY * sourceBitmap.PixelWidth + tiledX];
                }
            }

            tiledImage.Source = final;
        }
    }

    #region SourceUri (DependencyProperty)

    /// <summary>
    /// A description of the property.
    /// </summary>
    public Uri SourceUri
    {
        get { return (Uri)GetValue(SourceUriProperty); }
        set { SetValue(SourceUriProperty, value); }
    }
    public static readonly DependencyProperty SourceUriProperty =
        DependencyProperty.Register("SourceUri", typeof(Uri), typeof(TiledBackground),
        new PropertyMetadata(null, new PropertyChangedCallback(OnSourceUriChanged)));

    private static void OnSourceUriChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        ((TiledBackground)d).OnSourceUriChanged(e);
    }

    protected virtual void OnSourceUriChanged(DependencyPropertyChangedEventArgs e)
    {
        bitmap = new BitmapImage(e.NewValue as Uri);
        bitmap.CreateOptions = BitmapCreateOptions.None;
        bitmap.ImageOpened += new EventHandler<RoutedEventArgs>(bitmap_ImageOpened);
    }

    void bitmap_ImageOpened(object sender, RoutedEventArgs e)
    {
        sourceBitmap = new WriteableBitmap(bitmap);
        UpdateTiledImage();
    }

    #endregion
}

HTH.

Answer 3

If the desired tile is a basic geometric pattern, another option is to get creative with repeating GradientBrushes.

Horizontal 1px stripes...

<LinearGradientBrush EndPoint="0,16" StartPoint="0,0" MappingMode="Absolute" SpreadMethod="Repeat">
    <GradientStop Color="Black" Offset="0"/>
    <GradientStop Color="Black" Offset="0.062"/>
    <GradientStop Offset="0.0625"/>
</LinearGradientBrush>