Question

警告：Silverlight / WPF n00b

我刚刚开始关注Silverlight。很明显，与WPF不同，Silverlight中的画笔不能平铺。我想在网格控件中平铺图形。图像基本上是每个网格单元格。每个控件可以使用多个画笔，还是应该使用大量的图像控件，或者？

提前致谢。

Answer 1

看一下这个链接......

Silverlight 3.0: Tile Effect with a Pixel Shader

Answer 2

我不得不坚持使用SL 2进行这个项目，所以不幸的是着色器不是一个选择。我的控件有一个相当严格的预定尺寸，所以我手动将图形平铺到更大的画布上。

Answer 3

到目前为止，我发现的最好方法是从微软的“JetPack”主题中窃取控制权。

它作为项目模板的一部分，做得非常好。只需设置SourceUri属性，就可以了。

这是来源 -

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 4

如果所需的图块是基本几何图案，则另一个选项是使用重复的GradientBrushes获得创意。

水平1px条纹......

<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>

Silverlight控件中的平铺图像

4 个答案: