WPF学习笔记

WPF学习笔记


画刷

<h3>不同类型画刷的XAML示例及解释</h3> <p>下面我们展示了在XAML中常用的几种画刷,包括颜色画刷、线性渐变画刷、径向渐变画刷、图片画刷、几何画刷、Visual画刷和BitmapCache画刷。</p> <h4>1. 颜色画刷(SolidColorBrush)</h4> <p><strong>描述</strong>: 使用纯色填充区域。</p> <pre><code class="language-xml">&amp;lt;Border Width=&amp;quot;300&amp;quot; Height=&amp;quot;180&amp;quot;&amp;gt; &amp;lt;Border.Background&amp;gt; &amp;lt;SolidColorBrush Color=&amp;quot;Yellow&amp;quot;&amp;gt;&amp;lt;/SolidColorBrush&amp;gt; &amp;lt;/Border.Background&amp;gt; &amp;lt;Border.BorderBrush&amp;gt; &amp;lt;SolidColorBrush Color=&amp;quot;Red&amp;quot;&amp;gt;&amp;lt;/SolidColorBrush&amp;gt; &amp;lt;/Border.BorderBrush&amp;gt; &amp;lt;/Border&amp;gt;</code></pre> <h4>2. 线性渐变画刷(LinearGradientBrush)</h4> <p><strong>描述</strong>: 使用线性渐变颜色填充区域,可以指定多个渐变点。</p> <pre><code class="language-xml">&amp;lt;Border Width=&amp;quot;300&amp;quot; Height=&amp;quot;180&amp;quot;&amp;gt; &amp;lt;Border.Background&amp;gt; &amp;lt;LinearGradientBrush StartPoint=&amp;quot;1,0&amp;quot; EndPoint=&amp;quot;0,1&amp;quot;&amp;gt; &amp;lt;GradientStop Color=&amp;quot;Red&amp;quot; Offset=&amp;quot;0&amp;quot;&amp;gt;&amp;lt;/GradientStop&amp;gt; &amp;lt;GradientStop Color=&amp;quot;Green&amp;quot; Offset=&amp;quot;0.3&amp;quot;&amp;gt;&amp;lt;/GradientStop&amp;gt; &amp;lt;GradientStop Color=&amp;quot;Pink&amp;quot; Offset=&amp;quot;0.6&amp;quot;&amp;gt;&amp;lt;/GradientStop&amp;gt; &amp;lt;GradientStop Color=&amp;quot;Yellow&amp;quot; Offset=&amp;quot;1&amp;quot;&amp;gt;&amp;lt;/GradientStop&amp;gt; &amp;lt;/LinearGradientBrush&amp;gt; &amp;lt;/Border.Background&amp;gt; &amp;lt;/Border&amp;gt;</code></pre> <h4>3. 镜像渐变画刷(RadialGradientBrush)</h4> <p><strong>描述</strong>: 使用径向渐变颜色从中心向外扩展填充区域。</p> <pre><code class="language-xml">&amp;lt;Border Width=&amp;quot;300&amp;quot; Height=&amp;quot;180&amp;quot;&amp;gt; &amp;lt;Border.Background&amp;gt; &amp;lt;RadialGradientBrush Center=&amp;quot;0.5 0.2&amp;quot; GradientOrigin=&amp;quot;0.5 0.2&amp;quot; RadiusX=&amp;quot;0.5&amp;quot; RadiusY=&amp;quot;1&amp;quot;&amp;gt; &amp;lt;GradientStop Color=&amp;quot;Red&amp;quot; Offset=&amp;quot;0&amp;quot;&amp;gt;&amp;lt;/GradientStop&amp;gt; &amp;lt;GradientStop Color=&amp;quot;Green&amp;quot; Offset=&amp;quot;0.3&amp;quot;&amp;gt;&amp;lt;/GradientStop&amp;gt; &amp;lt;GradientStop Color=&amp;quot;Pink&amp;quot; Offset=&amp;quot;0.6&amp;quot;&amp;gt;&amp;lt;/GradientStop&amp;gt; &amp;lt;GradientStop Color=&amp;quot;Yellow&amp;quot; Offset=&amp;quot;1&amp;quot;&amp;gt;&amp;lt;/GradientStop&amp;gt; &amp;lt;/RadialGradientBrush&amp;gt; &amp;lt;/Border.Background&amp;gt; &amp;lt;/Border&amp;gt;</code></pre> <h4>4. 图片画刷(ImageBrush)</h4> <p><strong>描述</strong>: 使用图像填充区域。</p> <pre><code class="language-xml">&amp;lt;Border Width=&amp;quot;180&amp;quot; Height=&amp;quot;180&amp;quot; CornerRadius=&amp;quot;90&amp;quot;&amp;gt; &amp;lt;Border.Background&amp;gt; &amp;lt;ImageBrush ImageSource=&amp;quot;/画刷/test.png&amp;quot; Stretch=&amp;quot;Fill&amp;quot;&amp;gt;&amp;lt;/ImageBrush&amp;gt; &amp;lt;/Border.Background&amp;gt; &amp;lt;/Border&amp;gt;</code></pre> <h4>5. 雪碧图(Sprite图——ImageBrush)</h4> <p><strong>描述</strong>: 使用雪碧图(Sprite图)填充区域,可以调整视口和视箱。</p> <pre><code class="language-xml">&amp;lt;Border Width=&amp;quot;180&amp;quot; Height=&amp;quot;180&amp;quot; CornerRadius=&amp;quot;90&amp;quot;&amp;gt; &amp;lt;Border.Background&amp;gt; &amp;lt;ImageBrush ImageSource=&amp;quot;/画刷/slices.png&amp;quot; Viewport=&amp;quot;0,0,250,250&amp;quot; ViewportUnits=&amp;quot;Absolute&amp;quot; Viewbox=&amp;quot;0 0 1 1&amp;quot;&amp;gt;&amp;lt;/ImageBrush&amp;gt; &amp;lt;/Border.Background&amp;gt; &amp;lt;/Border&amp;gt;</code></pre> <h4>6. 几何画刷(DrawingBrush)</h4> <p><strong>描述</strong>: 使用几何图形填充区域。</p> <pre><code class="language-xml">&amp;lt;Border Width=&amp;quot;180&amp;quot; Height=&amp;quot;180&amp;quot; CornerRadius=&amp;quot;90&amp;quot;&amp;gt; &amp;lt;Border.Background&amp;gt; &amp;lt;DrawingBrush&amp;gt; &amp;lt;DrawingBrush.Drawing&amp;gt; &amp;lt;GeometryDrawing Brush=&amp;quot;Yellow&amp;quot;&amp;gt; &amp;lt;GeometryDrawing.Pen&amp;gt; &amp;lt;Pen Thickness=&amp;quot;1&amp;quot; Brush=&amp;quot;red&amp;quot;&amp;gt;&amp;lt;/Pen&amp;gt; &amp;lt;/GeometryDrawing.Pen&amp;gt; &amp;lt;GeometryDrawing.Geometry&amp;gt; &amp;lt;GeometryGroup&amp;gt; &amp;lt;LineGeometry StartPoint=&amp;quot;0 0&amp;quot; EndPoint=&amp;quot;20 20&amp;quot;&amp;gt;&amp;lt;/LineGeometry&amp;gt; &amp;lt;LineGeometry StartPoint=&amp;quot;20 40&amp;quot; EndPoint=&amp;quot;70 120&amp;quot;&amp;gt;&amp;lt;/LineGeometry&amp;gt; &amp;lt;/GeometryGroup&amp;gt; &amp;lt;/GeometryDrawing.Geometry&amp;gt; &amp;lt;/GeometryDrawing&amp;gt; &amp;lt;/DrawingBrush.Drawing&amp;gt; &amp;lt;/DrawingBrush&amp;gt; &amp;lt;/Border.Background&amp;gt; &amp;lt;/Border&amp;gt;</code></pre> <h4>7. Visual画刷(VisualBrush)</h4> <p><strong>描述</strong>: 使用现有的Visual实现与其类似的内容填充区域。</p> <pre><code class="language-xml">&amp;lt;TextBlock Height=&amp;quot;80&amp;quot; Width=&amp;quot;120&amp;quot; Name=&amp;quot;tb&amp;quot; Text=&amp;quot;120&amp;quot;&amp;gt;&amp;lt;/TextBlock&amp;gt; &amp;lt;Border Height=&amp;quot;80&amp;quot; Width=&amp;quot;120&amp;quot; RenderTransformOrigin=&amp;quot;0.5 0.5&amp;quot;&amp;gt; &amp;lt;Border.Background&amp;gt; &amp;lt;VisualBrush Visual=&amp;quot;{Binding ElementName=tb}&amp;quot;&amp;gt;&amp;lt;/VisualBrush&amp;gt; &amp;lt;/Border.Background&amp;gt; &amp;lt;Border.RenderTransform&amp;gt; &amp;lt;RotateTransform Angle=&amp;quot;180&amp;quot;&amp;gt;&amp;lt;/RotateTransform&amp;gt; &amp;lt;/Border.RenderTransform&amp;gt; &amp;lt;/Border&amp;gt;</code></pre> <h4>8. 位图缓存画刷(BitmapCacheBrush)</h4> <p><strong>描述</strong>: 使用位图缓存进行优化后的显示。</p> <pre><code class="language-xml">&amp;lt;Border Width=&amp;quot;180&amp;quot; Height=&amp;quot;180&amp;quot; CornerRadius=&amp;quot;90&amp;quot;&amp;gt; &amp;lt;Border.Background&amp;gt; &amp;lt;BitmapCacheBrush Target=&amp;quot;{Binding ElementName=tb}&amp;quot;&amp;gt; &amp;lt;BitmapCacheBrush.BitmapCache&amp;gt; &amp;lt;BitmapCache RenderAtScale=&amp;quot;10&amp;quot;&amp;gt;&amp;lt;/BitmapCache&amp;gt; &amp;lt;/BitmapCacheBrush.BitmapCache&amp;gt; &amp;lt;/BitmapCacheBrush&amp;gt; &amp;lt;/Border.Background&amp;gt; &amp;lt;/Border&amp;gt;</code></pre> <hr />

页面列表

ITEM_HTML