نظرة عامة حول TileBrush

مقالة
11/01/2010

TileBrush تزودك الكائنات بقدر كبير من التحكم في كيفية تلوين منطقة بصورة ما،Drawing, أوVisual. هذا الموضوع يوصف كيفية استخدام TileBrush ميزات للحصول على المزيد من التحكم في كيفية ImageBrush ، DrawingBrush, أو VisualBrush سيرسم منطقة.

يشتمل هذا الموضوع على الأقسام التالية.

المتطلبات الأساسية
طلاء منطقة بتجانب
محتوى الفرشاة
التجانب الأساسي‬
موضوعات ذات صلة

المتطلبات الأساسية

لفهم هذا الموضوع يكون من المفيد فهم كيفية استخدام الميزات الأساسية ImageBrush ، DrawingBrush, أو VisualBrush فئة. للحصول على مقدمة لهذه الأنواع, راجع رسم صور و رسومات و صور.

طلاء منطقة بتجانب

ImageBrush ،DrawingBrush ، يتمVisualBrush تكون أنواعTileBrush الكائنات. تزودك فرش التجانب بقدر كبير من التحكم في كيفية تلوين منطقة بصورة أو رسم أو مرئي. على سبيل المثال، بدلاً من مجرد تلوين منطقة بصورة موسعة مفردة ، يمكنك تلوين المنطقة بسلسلة من الصور المتجانبة التي تنشئ نقش.

تلوين منطقة بفرشاة تجانب تتضمن ثلاثة مكونات: المحتوى ، التجانب الأساسي و منطقة الإخراج.

مكونات TileBrush بجانب واحد

مكونات TileBrush

مكونات TileBrush بجانب TileMode

مكونات TileBrush متجانبة

منطقة الإخراج هي المنطقة التي يتم تلوينها , مثل Fill من Ellipse أو Background من Button. تصف المقاطع التالية المكونات الأخرى ل TileBrush.

محتوى الفرشاة

هناك ثلاثة أنواع مختلفة من TileBrush و كل يرسم بنوع مختلف من المحتوى.

إذا كانت الفرشاة ImageBrush ، هذا المحتوى صورة ImageSource خاصية تحيد محتويات ImageBrush.
إذا كانت الفرشاة DrawingBrush ، هذا المحتوى رسم. Drawing: الخاصية تقوم بتعيين محتوى DrawingBrush.
إذا كانت الفرشاة VisualBrush ، هذا المحتوى مرئي. Visual: الخاصية تقوم بتعيين محتوى VisualBrush.

يمكنك تحديد موضع وأبعاد TileBrush المحتوى باستخدام Viewbox خاصية ، على الرغم من أنه من الشائع أن تترك Viewbox تعيين إلى قيمته الافتراضية. افتراضياً، Viewbox يتم تكوينه بشكل كامل ليحتوي على المحتويات الخاصة للفرشاة. للحصول على مزيد من المعلومات حول تكوين Viewbox , راجع صفحة خاصية Viewbox .

التجانب الأساسي‬

TileBrush ايوجه المحتوى الخاص به إلى تجانب أساسي. خاصيةStretch تتحكم بكيفية TileBrush يتمدد المحتوى لتعبئة التجانب الأساسي. خاصية Stretch تقبل القيم التالية المعرّفة من قِبل Stretch التعداد:

None: لم يتم تمديد محتوى الفرشاة لتعبئة التجانب.
Fill: محتوى الفرشاة يتم إعادة تحجيمه لملأ التجانب. لأن الارتفاع و العرض في المحتوى يتم تحجيمهم مستقلين، نسبة العرض إلى الارتفاع الأصلي للمحتوى قد لا يتم الاحتفاظ بها. المحتوى الخاص بالفرشاة قد يكون مشوه لتعبئة بشكل كامل إخراج التجانب.
Uniform: يتم تحجيم المحتوى الخاص بالفرشاة و بالتالي يتم احتواؤها بشكل كامل ضمن التجانب. تتم المحافظة على نسبة العرض إلى الارتفاع للمحتوى الموجود.
UniformToFill: يتم تحجيم المحتوى الخاص بالفرشاة بحيث تملأ بشكل كامل منظقة الإخراج مع الاحتفاظ بنسبة العرض إلى الارتفاع للمحتوى الأصلي .

يوضح الشكل التالي Stretch الإعدادات المختلفة.

إعدادات توسيع TileBrush مختلفة

في المثال التالي محتوى ImageBrushيتم تعيينه بحيث لا يتمدد لتعبئة منظقة الإخراج.

<Rectangle
  Width="125" Height="175"
  Stroke="Black"
  StrokeThickness="1"
  Margin="0,0,5,0">
  <Rectangle.Fill>
    <ImageBrush 
      Stretch="None"
      ImageSource="sampleImages\testImage.gif"/>
  </Rectangle.Fill>
</Rectangle>

            ' Create a rectangle.
            Dim myRectangle As New Rectangle()
            With myRectangle
                .Width = 125
                .Height = 175
                .Stroke = Brushes.Black
                .StrokeThickness = 1
                .Margin = New Thickness(0, 5, 0, 0)
            End With

            ' Load the image.
            Dim theImage As New BitmapImage(New Uri("sampleImages\testImage.gif", UriKind.Relative))
            Dim myImageBrush As New ImageBrush(theImage)

            ' Configure the brush so that it
            ' doesn't stretch its image to fill
            ' the rectangle.
            myImageBrush.Stretch = Stretch.None

            ' Use the ImageBrush to paint the rectangle's background.
            myRectangle.Fill = myImageBrush

// Create a rectangle.
Rectangle myRectangle = new Rectangle();
myRectangle.Width = 125;
myRectangle.Height = 175;
myRectangle.Stroke = Brushes.Black;
myRectangle.StrokeThickness = 1;
myRectangle.Margin = new Thickness(0,5,0,0);

// Load the image.
BitmapImage theImage = 
    new BitmapImage(
        new Uri("sampleImages\\testImage.gif", UriKind.Relative));   
ImageBrush myImageBrush = new ImageBrush(theImage);

// Configure the brush so that it
// doesn't stretch its image to fill
// the rectangle.
myImageBrush.Stretch = Stretch.None;

// Use the ImageBrush to paint the rectangle's background.
myRectangle.Fill = myImageBrush;

افتراضياً، TileBrush يقوم بإنشاء جانب واحد (التجانب الأساسي) و يقوم بتمديد هذه القطعة لتعبئة بشكل كامل منظقة الإخراج. يمكنك تغيير حجم وموضع التجانب الأساسي بواسطة إعداد Viewport و ViewportUnits خصائص.

حجم التجانب الأساسي

Viewport خاصية تحدد حجم وموضع التجانب الأساسي و ViewportUnits خاصية تحدد ما إذا كان Viewport يتم تعيينها باستخدام إحداثيات مطلقة أو نسبية. إذا كانت الإحداثيات نسبية, تكون نسبية إلى حجم منطقة الإخراج. تمثل النقطة (0,0) في الركن الأيسر العلوي من منطقة الإخراج و (1,1) تمثل الأسفل اليمين الزاوية من منطقة الإخراج. لتحديد Viewport تستخدم الخاصية تستخدم إحداثيات مطلقة قم بتعيين ViewportUnits الخاصية إلى Absolute.

يبين الرسم التوضيحي التالي الفرق في الإخراج بين TileBrush مع النسبية مقابل المطلقة ViewportUnits. لاحظ أن كل الرسومات التوضيحية تعرض نقش متجانب; يصف المقطع التالي كيفية تحديد نقش التجانب.

وحدات منافذ العرض المطلقة والنسبية

في المثال التالي، يتم استخدام صورة لإنشاء تجانب له عرض وارتفاع 50 %. التجانب الأساسي يقع في (0,0) من منطقة الإخراج.

<Rectangle
 Width="50" Height="100">
  <Rectangle.Fill>

    <!-- Paints an area with 4 tiles. -->
    <ImageBrush ImageSource="sampleImages\cherries_larger.jpg"
      Viewport="0,0,0.5,0.5"
      ViewportUnits="RelativeToBoundingBox" 
      TileMode="Tile" />
  </Rectangle.Fill>
</Rectangle>

' Create a rectangle.
Dim myRectangle As New Rectangle()
myRectangle.Width = 50
myRectangle.Height = 100

' Load the image.
Dim theImage As New BitmapImage(New Uri("sampleImages\cherries_larger.jpg", UriKind.Relative))
Dim myImageBrush As New ImageBrush(theImage)

' Create tiles that are 1/4 the size of 
' the output area.
myImageBrush.Viewport = New Rect(0, 0, 0.25, 0.25)
myImageBrush.ViewportUnits = BrushMappingMode.RelativeToBoundingBox

' Set the tile mode to Tile.
myImageBrush.TileMode = TileMode.Tile

' Use the ImageBrush to paint the rectangle's background.
myRectangle.Fill = myImageBrush

// Create a rectangle.
Rectangle myRectangle = new Rectangle();
myRectangle.Width = 50;
myRectangle.Height = 100;

// Load the image.
BitmapImage theImage = 
    new BitmapImage(
        new Uri("sampleImages\\cherries_larger.jpg", UriKind.Relative));   
ImageBrush myImageBrush = new ImageBrush(theImage);

// Create tiles that are 1/4 the size of 
// the output area.
myImageBrush.Viewport = new Rect(0,0,0.25,0.25);
myImageBrush.ViewportUnits = BrushMappingMode.RelativeToBoundingBox;

// Set the tile mode to Tile.
myImageBrush.TileMode = TileMode.Tile;

// Use the ImageBrush to paint the rectangle's background.
myRectangle.Fill = myImageBrush;

المثال التالي يقوم بإعداد تجانب ImageBrush إلى 25 في 25 بكسل مستقل عن الجهاز . لأن ViewportUnits مطلق ImageBrush الإطارات المتجانبة بشكل دائم 25 في 25 بكسل بغض النظر عن حجم المنطقة الملونة.

<Rectangle
 Width="50" Height="100">
  <Rectangle.Fill>

    <!-- Paints an area with 25 x 25 tiles. -->
    <ImageBrush ImageSource="sampleImages\cherries_larger.jpg"
      Viewport="0,0,25,25"
      ViewportUnits="Absolute" 
      TileMode="Tile" />
  </Rectangle.Fill>
</Rectangle>

' Create a rectangle.
Dim myRectangle As New Rectangle()
myRectangle.Width = 50
myRectangle.Height = 100

' Load the image.       
Dim theImage As New BitmapImage(New Uri("sampleImages\cherries_larger.jpg", UriKind.Relative))
Dim myImageBrush As New ImageBrush(theImage)

' Create tiles that are 25 x 25, regardless of the size
' of the output area.
myImageBrush.Viewport = New Rect(0, 0, 25, 25)
myImageBrush.ViewportUnits = BrushMappingMode.Absolute

' Set the tile mode to Tile.
myImageBrush.TileMode = TileMode.Tile

' Use the ImageBrush to paint the rectangle's background.
myRectangle.Fill = myImageBrush

// Create a rectangle.
Rectangle myRectangle = new Rectangle();
myRectangle.Width = 50;
myRectangle.Height = 100;

// Load the image.       
BitmapImage theImage =
    new BitmapImage(
        new Uri("sampleImages\\cherries_larger.jpg", UriKind.Relative));
ImageBrush myImageBrush = new ImageBrush(theImage);

// Create tiles that are 25 x 25, regardless of the size
// of the output area.
myImageBrush.Viewport = new Rect(0, 0, 25, 25);
myImageBrush.ViewportUnits = BrushMappingMode.Absolute;

// Set the tile mode to Tile.
myImageBrush.TileMode = TileMode.Tile;

// Use the ImageBrush to paint the rectangle's background.
myRectangle.Fill = myImageBrush;

سلوك التجانب

TileBrush ينتج عنه نقش متجانب عندما لا تتم تعبئة بشكل كامل منطقة الإخراج بالتجانب الأساسي و وضع تجانب أخر ثم None يتم تحديده. عندما لا يتم بشكل كامل تعبئة تجانب تجانب الفرشاة لمنطقة الإخراج, TileMode تحدد الخاصية ما إذا كان تكرار التجانب الأساسي لتعبئة منطقة الإخراج و إذا كان الأمر كذلك، كيفية تكرار التجانب الأساسي. خاصية TileMode تقبل القيم التالية المعرّفة من قِبل TileMode التعداد:

None: يتم رسم قاعدة التجانب فقط.
Tile: يتم رسم التجانب الأساسي و ملئ المنطقة المتبقية بتكرار التجانب الأساسي بحيث تكون الحافة اليسرى من تجانب واحد قريب من الحافة اليسرى من التالية و نفسها للسفلي و العليا.
FlipX: نفسTile ، ولكن يتم عكس الأعمدة البديلة من الإطارات المتجانبة أفقياً.
FlipY: نفسTile ، ولكن يتم عكس الصفوف البديلة من الإطارات المتجانبة رأسياً.
FlipXY: تركيبةFlipX وFlipY.

الصورة التالية توضح أوضاع التجانب المختلفة.

إعدادات TileModeمختلفة لـ TileBrush

في المثال التالي، يتم استخدام صورة لرسم مستطيل عرضه 100 بكسل و طوله 100 بكسل. بواسطة تعيين الفرشاة Viewport قد تم تعيينه إلى 0,0,0.25,0.25 ، يتم إجراء التجانب الأساسي الخاص بالفرشاة لتكون 1/4 من منطقة الإخراج. اسم الفرشاة TileModeهو التعيين إلى FlipXY. حيث يقوم بتعبئة المستطيل بصفوف من المربعات.

<Rectangle
 Width="100" Height="100" >
  <Rectangle.Fill>
    <ImageBrush ImageSource="sampleImages\triangle.jpg"
      Viewport="0,0,0.25,0.25" 
      TileMode="FlipXY"
      />
  </Rectangle.Fill>    
</Rectangle>

' Create a rectangle.
Dim myRectangle As New Rectangle()
myRectangle.Width = 100
myRectangle.Height = 100

' Load the image.
Dim theImage As New BitmapImage(New Uri("sampleImages\triangle.jpg", UriKind.Relative))
Dim myImageBrush As New ImageBrush(theImage)

' Create tiles that are 1/4 the size of 
' the output area.
myImageBrush.Viewport = New Rect(0, 0, 0.25, 0.25)

' Set the tile mode to FlipXY.
myImageBrush.TileMode = TileMode.FlipXY

' Use the ImageBrush to paint the rectangle's background.
myRectangle.Fill = myImageBrush

// Create a rectangle.
Rectangle myRectangle = new Rectangle();
myRectangle.Width = 100;
myRectangle.Height = 100;

// Load the image.
BitmapImage theImage = 
    new BitmapImage(
        new Uri("sampleImages\\triangle.jpg", UriKind.Relative));   
ImageBrush myImageBrush = new ImageBrush(theImage);

// Create tiles that are 1/4 the size of 
// the output area.
myImageBrush.Viewport = new Rect(0,0,0.25,0.25);

// Set the tile mode to FlipXY.
myImageBrush.TileMode = TileMode.FlipXY;

// Use the ImageBrush to paint the rectangle's background.
myRectangle.Fill = myImageBrush;

راجع أيضًا:

مشاركة عبر

نظرة عامة حول TileBrush

المتطلبات الأساسية

طلاء منطقة بتجانب

محتوى الفرشاة

التجانب الأساسي‬

حجم التجانب الأساسي

سلوك التجانب

راجع أيضًا:

المرجع

المبادئ

موارد أخرى

الموارد الإضافية