绘图
再復雜的圖形都是各種簡單圖形的組合,尤其是通過路徑Path強大的功能,可組成相當復雜的圖形;
一般都是在Blend里完成再拷貝到vs里
Line:直線段
Rectangle:矩形
Ellipse:橢圓
Polygon:多邊形,由多段直線段圍成的閉全區域
Polyline:折線(不閉合),由多條首尾相接的直線段組成
Path:路徑(閉合區域),最強大的一個,可由若干直線,圓弧,貝賽爾曲線組成
?
常見屬性:
Stroke 邊線 ?Fill填充
Fill屬性是Brush(刷),
???常有:SolidColorBrush實心畫刷
LinearGradientBrush線性向漸變畫刷
RadialGradientBrush 徑向漸變畫刷
ImageBrush 使用圖片作為填充
DrawingBrush使用矢量圖和位圖填充內容
VisualBrush 形象填充,如拖動控件時的框框
?
控件的變形是與UI元素分離的,方便附加
RenderTransform是呈現變形:只是展現時才變形,真實不會影響到布局,常用到動畫
LayoutTransform是布局變形:用于靜態的變形,耗性能
??<Button?x:Name="button"?Content="Button"?HorizontalAlignment="Left"?Margin="234,107,0,0"?VerticalAlignment="Top"?Width="75"?RenderTransformOrigin="0.5,0.5">
????????????<Button.RenderTransform>
????????????????<TransformGroup>
????????????????????<ScaleTransform/>
????????????????????<SkewTransform/>
????????????????????<RotateTransform?Angle="39.506"/>
????????????????????<TranslateTransform/>
????????????????</TransformGroup>
????????????</Button.RenderTransform>
????????</Button>
?
<Button?x:Name="button"?Content="Button"?HorizontalAlignment="Left"?Margin="234,107,0,0"?VerticalAlignment="Top"?Width="75"?RenderTransformOrigin="0.5,0.5">
????????????<Button.LayoutTransform>
????????????????<TransformGroup>
????????????????????<ScaleTransform/>
????????????????????<SkewTransform/>
????????????????????<RotateTransform?Angle="39.506"/>
????????????????????<TranslateTransform/>
????????????????</TransformGroup>
????????????</Button.LayoutTransform>
????????</Button>
?
?
??
這一篇我們聊聊wpf中的畫刷,在wpf中如果想玩各種花哨,那么如何使用畫刷則是我們的基本功,首先看一下類圖
從圖中可以看出,wpf有5種畫刷和1種自定義畫刷,都是繼承自基類Brush,我們看看基類中有哪些好玩的東西。
這里有3個比較感興趣的屬性,分別屬于”透明度“和”圖像轉換“,好,下面我們一一解說。
?
一:SolidColorBrush(實心畫刷)
? ? 實心畫刷是我們用的最多的,也是最簡單的一個,其實也就是填充色的意思,一個很簡單的例子:
其實這里的Background=Red使用的就是SolidColorBrush,xaml進行解析時,發現Background是Brush類型,剛才我也說了
Brush具有圖形轉換的能力,最后xaml就會通過Transform把”Red"字符串解析成SolidColorBrush,更直觀一點的話,我們可以
用C#代碼來描述。
1 public partial class MainWindow : Window 2 { 3 public MainWindow() 4 { 5 InitializeComponent(); 6 7 button1.Background = new SolidColorBrush(Colors.Red); 8 } 9 }?
二:GradientBrush(梯度畫刷)
如果我們使用過ps或者freehand,我們肯定知道在填充色方面有一個叫做“漸變色”的概念,我們使用的最多的漸變色要么是“線性”的,
要么是“圓形”的,剛好這里對應wpf中的“LinearGradientBrush”和“RadialGradientBrush”。
?
1:?LinearGradientBrush(線性梯度畫刷)
? ? ?線性畫刷也是比較簡單的,一般情況下我們只要設定一個“StartPoint”和“EndPoint”即可。
1 <Window x:Class="WpfApplication2.MainWindow"2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"4 Title="MainWindow" Height="350" Width="525">5 <Canvas>6 <Rectangle Canvas.Left="51" Canvas.Top="187" Height="101" Name="rectangle2" Stroke="Black" Width="325">7 <Rectangle.Fill>8 <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">9 <GradientStop Color="Yellow" Offset="0.5"/> 10 <GradientStop Color="Green" Offset="1"/> 11 </LinearGradientBrush> 12 </Rectangle.Fill> 13 </Rectangle> 14 </Canvas> 15 </Window>這里要注意的就是,我設定的坐標是(0,0),(0,1),我們知道兩點一條直線,這條直線與X軸平行,我們可以看到顏色的分布是垂直于Y軸的,
如果說我們把坐標改為(0,0)(1,1),那么顏色分割線還是與(0,0),(1,1)這條斜線垂直嗎?最后發現,嚴格垂直。
?
2:RadialgradientBrush(圓形梯度畫刷)
? ? 在ps中我們玩”圓形漸變“的時候,只需要設定圓心坐標和X坐標和Y坐標的值就可以畫一個圓形漸變,在wpf中同樣需要這三個元素,
分別對應設Center,RadiusX,RadiusY,當然在wpf中還存在一個“梯度原點“:GradientOrigin。
1 <Window x:Class="WpfApplication3.MainWindow"2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"4 Title="MainWindow" Height="350" Width="525">5 <Grid>6 <Rectangle Height="200" HorizontalAlignment="Left" Margin="128,45,0,0" Name="rectangle1" Stroke="Black" VerticalAlignment="Top" Width="200">7 <Rectangle.Fill>8 <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">9 <RadialGradientBrush.GradientStops> 10 <GradientStop Color="Yellow" Offset="0"/> 11 <GradientStop Color="Red" Offset="0.25"/> 12 <GradientStop Color="Blue" Offset="0.75"/> 13 <GradientStop Color="LimeGreen" Offset="1"/> 14 </RadialGradientBrush.GradientStops> 15 </RadialGradientBrush> 16 </Rectangle.Fill> 17 </Rectangle> 18 </Grid> 19 </Window>三:ImageBrush(圖像畫刷)
? ? ? 這種畫刷也是很有意思的,有時我們在炫時需要用圖片做裝飾,那么此時ImageBrush就可以祝你一臂之力。
1 <Window x:Class="WpfApplication7.MainWindow"2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"4 xmlns:my="clr-namespace:WpfApplication7"5 Title="MainWindow" Height="350" Width="525">6 <Grid>7 <Grid.Background>8 <ImageBrush x:Name="landBrush" ImageSource="C:\Users\Administrator\Desktop\weibo\64512.gif"/>9 </Grid.Background> 10 </Grid> 11 </Window>?
四:VisualBrush(控件畫刷)
? ? ?這種畫刷是作用在控件級別上的,也就是說任何控件都可以作為畫刷,很神奇的說。
1 <Window x:Class="WpfApplication1.MainWindow"2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"4 Title="MainWindow" Height="350" Width="525">5 <Window.Resources>6 <VisualBrush x:Key="test" TileMode="Tile" Opacity="0.8">7 <VisualBrush.Visual>8 <StackPanel>9 <TextBlock Foreground="Gold"> 10 唧唧復唧唧 11 </TextBlock> 12 <TextBlock Foreground="LightBlue"> 13 木蘭開飛機 14 </TextBlock> 15 <TextBlock Foreground="LightGray"> 16 開的什么機 17 </TextBlock> 18 <TextBlock Foreground="Pink"> 19 波音747 20 </TextBlock> 21 </StackPanel> 22 </VisualBrush.Visual> 23 </VisualBrush> 24 </Window.Resources> 25 <Grid> 26 <Button Content="我是超大按鈕" Height="213" HorizontalAlignment="Left" Margin="32,34,0,0" Name="button1" 27 VerticalAlignment="Top" Width="414" Background="{StaticResource ResourceKey=test}"/> 28 </Grid> 29 </Window>五:DrawingBrush(自定義畫刷)
? ? ?最靈活,最復雜的也就是這種自定義畫刷,畢竟wpf不能給我們滿足所有的要求,就必須留一道口子給我們程序員自定義實現。
1 <Window x:Class="WpfApplication4.MainWindow"2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"4 Title="MainWindow" Height="350" Width="525">5 <Window.Resources>6 <DrawingBrush x:Key="test">7 <DrawingBrush.Drawing>8 <DrawingGroup>9 <DrawingGroup.Children> 10 <GeometryDrawing> 11 <!-- 繪制矩形 --> 12 <GeometryDrawing.Geometry> 13 <RectangleGeometry RadiusX="0.2" RadiusY="0.5" 14 Rect="0.02,0.02,0.96,0.96" /> 15 </GeometryDrawing.Geometry> 16 <!-- 矩形填充色 --> 17 <GeometryDrawing.Brush> 18 <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> 19 <GradientStop Color="Green" Offset="0" /> 20 <GradientStop Color="Red" Offset="1" /> 21 </LinearGradientBrush> 22 </GeometryDrawing.Brush> 23 <!-- 矩形邊框 --> 24 <GeometryDrawing.Pen> 25 <Pen Thickness="0.02"> 26 <Pen.Brush> 27 <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> 28 <GradientStop Color="AliceBlue" Offset="0" /> 29 <GradientStop Color="Black" Offset="1" /> 30 </LinearGradientBrush> 31 </Pen.Brush> 32 </Pen> 33 </GeometryDrawing.Pen> 34 </GeometryDrawing> 35 </DrawingGroup.Children> 36 </DrawingGroup> 37 </DrawingBrush.Drawing> 38 </DrawingBrush> 39 </Window.Resources> 40 <Grid> 41 <Button Background="{StaticResource ResourceKey=test}" FontSize="40" Content="Button" Height="113" HorizontalAlignment="Left" Margin="89,80,0,0" Name="button1" VerticalAlignment="Top" Width="292" /> 42 </Grid> 43 </Window>?
轉載于:https://www.cnblogs.com/evemen/p/6239353.html
總結
- 上一篇: webform控件
- 下一篇: 资金博弈大户为负数什么意思