Silverlight控件中的瓷磚圖片

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>