TileBrush — Przegląd
TileBrush obiekty zapewniają dużą kontrolę nad sposobem malowania obszaru obrazem, Drawing, lub Visual. W tym temacie opisano sposób używania TileBrush funkcji w celu uzyskania większej ImageBrushkontroli nad sposobem malowania obszaru , DrawingBrushlub VisualBrush .
Wymagania wstępne
Aby zrozumieć ten temat, warto zrozumieć, jak używać podstawowych funkcji ImageBrushklasy , DrawingBrushlub VisualBrush . Aby zapoznać się z wprowadzeniem do tych typów, zobacz Obraz z obrazami, rysunkami i wizualizacjami.
Malowanie obszaru za pomocą kafelków
ImageBrush, DrawingBrushto VisualBrush typy TileBrush obiektów. Pędzle kafelków zapewniają dużą kontrolę nad sposobem malowania obszaru za pomocą obrazu, rysunku lub wizualizacji. Na przykład zamiast malować obszar z pojedynczym rozciągniętym obrazem, można malować obszar z serią kafelków obrazów, które tworzą wzór.
Malowanie obszaru za pomocą pędzla kafelka obejmuje trzy składniki: zawartość, kafelek podstawowy i obszar wyjściowy.
Składniki kafelkaBrush z jednym kafelkiem
Składniki kafelkaBrush z elementem TileMode kafelka
Obszar wyjściowy jest obszarem malowanym, takim jak Fill element Ellipse lub BackgroundButton. W następnych sekcjach opisano dwa pozostałe składniki obiektu TileBrush.
Zawartość pędzla
Istnieją trzy różne typy TileBrush i każda farba o innym typie zawartości.
Jeśli szczotka jest elementem ImageBrush, ta zawartość jest obrazem ImageSource Właściwość określa zawartość elementu ImageBrush.
Jeśli szczotka jest elementem DrawingBrush, ta zawartość jest rysunkiem. Właściwość Drawing określa zawartość obiektu DrawingBrush.
Jeśli szczotka jest elementem VisualBrush, ta zawartość jest wizualizacją. Właściwość Visual określa zawartość elementu VisualBrush.
Możesz określić położenie i wymiary TileBrush zawartości przy użyciu Viewbox właściwości , chociaż często należy pozostawić Viewbox zestaw na wartość domyślną. Domyślnie element Viewbox jest skonfigurowany do całkowitego przechowywania zawartości pędzla. Aby uzyskać więcej informacji na temat konfigurowania obiektu Viewbox, zobacz Viewbox stronę właściwości.
Kafelek podstawowy
Zawartość TileBrush jest projektowa na kafelku podstawowym. Właściwość Stretch określa sposób TileBrush rozciągania zawartości w celu wypełnienia kafelka podstawowego. Właściwość Stretch akceptuje następujące wartości zdefiniowane przez Stretch wyliczenie:
None: Zawartość pędzla nie jest rozciągnięta, aby wypełnić kafelek.
Fill: Zawartość pędzla jest skalowana w celu dopasowania do kafelka. Ponieważ wysokość i szerokość zawartości są skalowane niezależnie, oryginalny współczynnik proporcji zawartości może nie zostać zachowany. Oznacza to, że zawartość pędzla może być wypaczona w celu całkowitego wypełnienia kafelka wyjściowego.
Uniform: Zawartość pędzla jest skalowana tak, aby mieściła się całkowicie w obrębie kafelka. Współczynnik proporcji zawartości jest zachowywany.
UniformToFill: Zawartość pędzla jest skalowana tak, aby całkowicie wypełniała obszar wyjściowy przy zachowaniu oryginalnego współczynnika proporcji zawartości.
Na poniższej ilustracji przedstawiono różne Stretch ustawienia.
W poniższym przykładzie zawartość obiektu ImageBrush jest ustawiona tak, aby nie rozciągała się w celu wypełnienia obszaru wyjściowego.
<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.
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;
' 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
Domyślnie element TileBrush generuje pojedynczy kafelek (kafelek podstawowy) i rozciąga ten kafelek w celu całkowitego wypełnienia obszaru wyjściowego. Rozmiar i położenie kafelka podstawowego można zmienić, ustawiając Viewport właściwości i ViewportUnits .
Rozmiar kafelka podstawowego
Właściwość Viewport określa rozmiar i położenie kafelka podstawowego, a ViewportUnits właściwość określa, czy Viewport jest określony przy użyciu współrzędnych bezwzględnych lub względnych. Jeśli współrzędne są względne, są względne względem rozmiaru obszaru wyjściowego. Punkt (0,0) reprezentuje lewy górny róg obszaru danych wyjściowych, a (1,1) reprezentuje prawy dolny róg obszaru danych wyjściowych. Aby określić, że Viewport właściwość używa współrzędnych ViewportUnits bezwzględnych, ustaw właściwość na Absolute.
Na poniższej ilustracji przedstawiono różnicę w danych wyjściowych między wartościami TileBrush względnymi a bezwzględnymi ViewportUnits. Zwróć uwagę, że ilustracje, z których każda przedstawia wzorzec kafelków; W następnej sekcji opisano sposób określania wzorca kafelka.
W poniższym przykładzie obraz jest używany do tworzenia kafelka o szerokości i wysokości 50%. Kafelek podstawowy znajduje się w lokalizacji (0,0) obszaru wyjściowego.
<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.
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;
' 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
W następnym przykładzie ustawiono kafelki ImageBrush 25 na 25 pikseli niezależnych od urządzenia. ViewportUnits Ponieważ są bezwzględne, kafelki ImageBrush są zawsze 25 o 25 pikseli, niezależnie od rozmiaru malowanego obszaru.
<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.
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;
' 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
Zachowanie kładek
Element TileBrush tworzy wzorzec kafelków, gdy jego kafelek podstawowy nie wypełnia całkowicie obszaru wyjściowego, a następnie None jest określony tryb układania kafelków. Gdy kafelek pędzla kafelka nie wypełnia całkowicie obszaru wyjściowego, jego TileMode właściwość określa, czy kafelek podstawowy powinien zostać zduplikowany w celu wypełnienia obszaru wyjściowego, a jeśli tak, jak powinien zostać zduplikowany kafelek podstawowy. Właściwość TileMode akceptuje następujące wartości zdefiniowane przez TileMode wyliczenie:
None: Rysowany jest tylko kafelek podstawowy.
Tile: Kafelek podstawowy jest rysowany, a pozostały obszar jest wypełniany przez powtórzenie kafelka podstawowego, tak aby prawa krawędź jednego kafelka sąsiadowała z lewą krawędzią następnego i podobnie dla dolnej i górnej.
FlipX: Takie same jak Tilekolumny , ale alternatywne kolumny kafelków są przerzucane w poziomie.
FlipY: Takie same jak Tile, ale alternatywne wiersze kafelków są przerzucane w pionie.
Na poniższej ilustracji przedstawiono różne tryby układania płytek.
W poniższym przykładzie obraz jest używany do malowania prostokąta o szerokości 100 pikseli i wysokości 100 pikseli. Ustawiając szczotkę Viewport ustawiono na 0,0,0,25,0,25, kafelek podstawowy pędzla ma być 1/4 obszaru wyjściowego. Szczotka TileMode jest ustawiona na FlipXYwartość . tak, aby wypełniał prostokąt wierszami kafelków.
<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.
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;
' 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
Zobacz też
.NET Desktop feedback
Opinia
Dostępne już wkrótce: W 2024 r. będziemy stopniowo wycofywać zgłoszenia z serwisu GitHub jako mechanizm przesyłania opinii na temat zawartości i zastępować go nowym systemem opinii. Aby uzyskać więcej informacji, sprawdź: https://aka.ms/ContentUserFeedback.
Prześlij i wyświetl opinię dla