WPF繪圖的工程應用:為按鈕或自定義按鈕新增向量圖作為背景,該向量圖來自Blend或Design設計的Path資料。
阿新 • • 發佈:2018-12-12
例1 :Button+Drawing繫結+GeometryDrawing
功能描述:為Button新增簡單的向量圖作為背景。
<Window x:Class="Drawing.Drawings" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Drawings" Height="300" Width="600" > <Window.Resources> <GeometryDrawing x:Key="Drawing" Brush="Yellow" > <GeometryDrawing.Pen> <Pen Brush="Blue" Thickness="3"></Pen> </GeometryDrawing.Pen> <GeometryDrawing.Geometry> <PathGeometry> <PathFigure IsClosed="True" StartPoint="10,100"> <LineSegment Point="100,100" /> <LineSegment Point="100,50" /> </PathFigure> </PathGeometry> </GeometryDrawing.Geometry> </GeometryDrawing> </Window.Resources> <StackPanel Orientation="Horizontal" Margin="5"> <Button Width="30" Height="30"> <Image> <Image.Source> <DrawingImage Drawing="{StaticResource Drawing}"> </DrawingImage> </Image.Source> </Image> </Button> </StackPanel> </Window>
效果圖:
例1 :Button+Content繫結+Canvas+Path資料
功能描述:為Button新增複雜的向量圖作為背景。
<Window x:Class="Drawing.Drawings" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Drawings" Height="300" Width="600" > <Window.Resources> <Canvas x:Shared="False" x:Key="Drawing2" HorizontalAlignment="Center" Height="33.7549" UseLayoutRounding="False" VerticalAlignment="Center" Width="43.5"> <Path Data="F1M22.75,0L19.15,5.251 0,5.25 0,28.504 0.75,28.504 7.501,10.501 35.255,10.501 35.255,0z" Fill="White" Height="28.504" Canvas.Left="0.75" Canvas.Top="0.75" Width="35.255"/> <Path Clip="M0,0L43.505,0 43.505,33.755 0,33.755z" Data="M19.1,5.251C14.544,5.251 5.2,5.239 0.75,5.251 0.485,5.251 0,5.736 0,6.001L0,33.755 36.755,33.755 43.505,11.251 36.755,11.251 36.755,0 24,0C22.204,0,20.895,5.251,19.1,5.251 M24.4,0.751L35.254,0.751C35.519,0.751,36.005,1.235,36.005,1.501L36.005,11.251C36.005,11.251 15.263,11.239 8.251,11.251 7.729,11.252 6.656,12.614 6.356,13.052 3.981,16.521 1.5,29.254 1.5,29.254L0.75,29.254 0.75,6.751C0.75,6.486,1.235,6.001,1.5,6.001L19.8,6.001C21.595,6.001,22.604,0.751,24.4,0.751" Fill="#FFECBF7C" Height="33.755" Canvas.Left="0" Canvas.Top="0" Width="43.5"/> </Canvas> </Window.Resources> <StackPanel Orientation="Horizontal" Margin="5"> <Button Width="122" Height="52" Content="{StaticResource Drawing2}"/> </StackPanel> </Window>
效果圖: