点线:
<Grid Margin="15">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Polyline Stroke="Blue" StrokeThickness="10"
StrokeDashArray="1 2"
Points="10,30 60,0 90,40 120,10 350,10" SnapsToDevicePixels="True">
</Polyline>
<TextBlock Grid.Column="1" VerticalAlignment="Center">Dash Pattern "1 2"</TextBlock>
<Polyline Stroke="Blue" StrokeThickness="10" Grid.Row="1"
StrokeDashArray="2 1" SnapsToDevicePixels="True"
Points="10,30 60,0 90,40 120,10 350,10" >
</Polyline>
<TextBlock Grid.Row="1" Grid.Column="1" VerticalAlignment="Center">Dash Pattern "2 1"</TextBlock>
<Polyline Stroke="Blue" StrokeThickness="10" Grid.Row="2"
StrokeDashArray="5 0.2 3 0.2" SnapsToDevicePixels="True"
Points="10,30 60,0 90,40 120,10 350,10" >
</Polyline>
<TextBlock Grid.Row="2" Grid.Column="1" VerticalAlignment="Center">Dash Pattern "5 0.2 3 0.2"</TextBlock>
<Polyline Stroke="Blue" StrokeThickness="10" Grid.Row="3" SnapsToDevicePixels="True"
StrokeDashArray="3 0.5 2"
Points="10,30 60,0 90,40 120,10 350,10" >
</Polyline>
<TextBlock Grid.Row="3" Grid.Column="1" VerticalAlignment="Center">Uneven Dash Pattern "2 0.5 2"</TextBlock>
<Polyline Stroke="Blue" StrokeThickness="10" Grid.Row="4" SnapsToDevicePixels="True"
StrokeDashArray="1 2" StrokeDashCap="Round"
Points="10,30 60,0 90,40 120,10 350,10" >
</Polyline>
<TextBlock Grid.Row="4" Grid.Column="1" VerticalAlignment="Center">Dash Pattern with Rounded Caps</TextBlock>
</Grid>
填充模式:
<Grid ShowGridLines="True" Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Ellipse Fill="Yellow" Stroke="Blue"></Ellipse>
<Ellipse Fill="Yellow" Stroke="Blue" Grid.Column="1" Stretch="Uniform"></Ellipse>
<Ellipse Fill="Yellow" Stroke="Blue" Grid.Column="2" Stretch="UniformToFill "></Ellipse>
<TextBlock Grid.Row="1" TextAlignment="Center">Fill</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="1" TextAlignment="Center">Uniform</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="2" TextAlignment="Center">UniformToFill</TextBlock>
</Grid>
渐变色:
<Rectangle Width="150" Height="100" Margin="5">
<Rectangle.Fill>
<LinearGradientBrush >
<GradientStop Color="Blue" Offset="0"/>
<GradientStop Color="White" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Grid.Column="1" VerticalAlignment="Center" Margin="5">Diagonal Linear Gradient</TextBlock>
<Rectangle Width="150" Height="100" Margin="5" Grid.Row="1">
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color="Blue" Offset="0"/>
<GradientStop Color="White" Offset="0.5" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Grid.Row="1" Grid.Column="1" VerticalAlignment="Center" Margin="5">With 0.5 Offset for White</TextBlock>
<Rectangle Width="150" Height="100" Grid.Row="2" Margin="5">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<GradientStop Color="Blue" Offset="0"/>
<GradientStop Color="White" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Grid.Row="2" Grid.Column="1" VerticalAlignment="Center" Margin="5">Horizontal Linear Gradient</TextBlock>
<Rectangle Width="150" Height="100" Grid.Row="3" Margin="5">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,0.5" SpreadMethod="Reflect">
<GradientStop Color="Blue" Offset="0"/>
<GradientStop Color="White" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Grid.Row="3" Grid.Column="1" VerticalAlignment="Center" Margin="5">Reflected Gradient</TextBlock>
<Rectangle Width="150" Height="100" Grid.Row="4" Margin="5">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Red" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" />
<GradientStop Color="LimeGreen" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Grid.Row="4" Grid.Column="1" VerticalAlignment="Center" Margin="5">Multicolored Gradient</TextBlock>
</Grid>
字体渐变画刷:
<Grid>
<TextBlock Margin="5" FontWeight="Bold" FontSize="65" TextWrapping="Wrap" TextAlignment="Center">
<TextBlock.Text>This text uses a gradient.</TextBlock.Text>
<TextBlock.Foreground>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Red" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" />
<GradientStop Color="LimeGreen" Offset="1.0" />
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
</Grid>
图片画刷:
<Canvas>
<Rectangle Canvas.Left="10" Canvas.Top="10" Width="271" Height="100" Stroke="Black">
<Rectangle.Fill>
<ImageBrush ImageSource="logo.gif" Stretch="None"></ImageBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Canvas.Left="10" Canvas.Top="120" Width="200" Height="200" Stroke="Black">
<Rectangle.Fill>
<ImageBrush ImageSource="logo.gif" Stretch="Uniform"
Viewbox="0.4 0.5 0.2 0.2"></ImageBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
内填充外填充:
<Viewbox HorizontalAlignment="Left">
<Canvas Width="200" Height="400" >
<Polygon Stroke="Blue" StrokeThickness="1" Fill="Yellow" Canvas.Left="10"
Points="15,200 68,70 110,200 0,125 135,125" >
</Polygon>
<Polygon Stroke="Blue" StrokeThickness="1" Fill="Yellow" Canvas.Left="10" Canvas.Top="175"
FillRule="Nonzero"
Points="15,200 68,70 110,200 0,125 135,125" >
</Polygon>
</Canvas>
</Viewbox>
线头:
<Polyline Stroke="Blue" StrokeThickness="15" StrokeEndLineCap="Flat" SnapsToDevicePixels="True"
Points="10,10 30,0 50,20 90,10 200,10" >
</Polyline>
<TextBlock Grid.Column="1">Flat Line Cap</TextBlock>
<Polyline Stroke="Blue" StrokeThickness="15" Grid.Row="1" StrokeEndLineCap="Square" SnapsToDevicePixels="True"
Points="10,10 30,0 50,20 90,10 200,10" >
</Polyline>
<TextBlock Grid.Row="1" Grid.Column="1">Square Line Cap</TextBlock>
<Polyline Stroke="Blue" StrokeThickness="15" Grid.Row="2" StrokeEndLineCap="Round" SnapsToDevicePixels="True"
Points="10,10 30,0 50,20 90,10 200,10" >
</Polyline>
<TextBlock Grid.Row="2" Grid.Column="1">Round Line Cap</TextBlock>
<Polyline Stroke="Blue" StrokeThickness="15" Grid.Row="3" StrokeEndLineCap="Triangle" SnapsToDevicePixels="True"
Points="10,10 30,0 50,20 90,10 200,10" >
</Polyline>
<TextBlock Grid.Row="3" Grid.Column="1">Triangle Line Cap</TextBlock>
线角样式:
<Polyline Stroke="Blue" StrokeThickness="14" StrokeLineJoin="Bevel" SnapsToDevicePixels="True"
Points="10,60 30,10 50,70 90,40" >
</Polyline>
<TextBlock Grid.Column="1" VerticalAlignment="Center">Bevel Line Join</TextBlock>
<Polyline Stroke="Blue" StrokeThickness="14" Grid.Row="1" StrokeLineJoin="Round" SnapsToDevicePixels="True"
Points="10,60 30,10 50,70 90,40" >
</Polyline>
<TextBlock Grid.Row="1" Grid.Column="1" VerticalAlignment="Center">Round Line Join</TextBlock>
<Polyline Grid.Row="2" Stroke="Blue" StrokeThickness="14" StrokeLineJoin="Miter" StrokeMiterLimit="1"
SnapsToDevicePixels="True"
Points="10,60 30,10 50,70 90,40" >
</Polyline>
<TextBlock Grid.Row="2" Grid.Column="1" VerticalAlignment="Center">Miter Line Join</TextBlock>
<Polyline Grid.Row="3" Stroke="Blue" StrokeThickness="14" StrokeLineJoin="Miter" StrokeMiterLimit="3"
SnapsToDevicePixels="True"
Points="10,60 30,10 50,70 90,40" >
</Polyline>
<TextBlock Grid.Row="3" Grid.Column="1" VerticalAlignment="Center">Miter Line Join With Limit of 3</TextBlock>
遮罩:
<Window.Background>
<ImageBrush ImageSource="grandpiano.jpg"></ImageBrush>
</Window.Background>
<Grid Margin="10,50">
<Button Background="Purple" FontSize="14" FontWeight="Bold">
<Button.OpacityMask>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Offset="0" Color="Black"></GradientStop>
<GradientStop Offset="1" Color="Transparent"></GradientStop>
</LinearGradientBrush>
</Button.OpacityMask>
<Button.Content>A Partially Transparent Button</Button.Content>
</Button>
</Grid>
像素对齐抗锯齿:
<TextBlock VerticalAlignment="Center">Not Snapped:</TextBlock>
<Rectangle SnapsToDevicePixels="False" Grid.Column="1"
Margin="10" Height="10" Fill="Red"></Rectangle>
<TextBlock VerticalAlignment="Center" Grid.Row="1">Snapped:</TextBlock>
<Rectangle SnapsToDevicePixels="True" Grid.Column="1" Grid.Row="1"
Margin="10" Height="10" Fill="Red"></Rectangle>
多边形与多边线:
<Canvas>
<Polyline Stroke="Blue" StrokeThickness="5"
Points="10,150 30,140 50,160 70,130 90,170 110,120 130,180 150,110 170,190 190,100 210,240" >
</Polyline>
<Polygon Stroke="Blue" StrokeThickness="5" Fill="Yellow" Canvas.Top="200"
Points="10,150 30,140 50,160 70,130 90,170 110,120 130,180 150,110 170,190 190,100 210,240" >
</Polygon>
</Canvas>
放射线画刷:
<Ellipse Margin="5" Stroke="Black" StrokeThickness="1">
<Ellipse.Fill>
<RadialGradientBrush
RadiusX="1" RadiusY="1" >
<GradientStop Color="White" Offset="0" />
<GradientStop Color="Blue" Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<TextBlock Grid.Column="1" VerticalAlignment="Center" Margin="5">A Radial Gradient</TextBlock>
<Ellipse Margin="5" Grid.Row="1" Stroke="Black" StrokeThickness="1">
<Ellipse.Fill>
<RadialGradientBrush
RadiusX="1" RadiusY="1" GradientOrigin="0.7,0.3"
>
<GradientStop Color="White" Offset="0" />
<GradientStop Color="Blue" Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<TextBlock Grid.Row="1" Grid.Column="1" VerticalAlignment="Center" Margin="5" TextWrapping="Wrap">A Radial Gradient with an Offset Center</TextBlock>
反射画刷:
<TextBox Name="txt" FontSize="30">Here is some reflected text</TextBox>
<Rectangle Grid.Row="1" RenderTransformOrigin="1,0.5">
<Rectangle.Fill>
<VisualBrush Visual="{Binding ElementName=txt}"></VisualBrush>
</Rectangle.Fill>
<Rectangle.OpacityMask>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0.3" Color="Transparent"></GradientStop>
<GradientStop Offset="1" Color="#44000000"></GradientStop>
</LinearGradientBrush>
</Rectangle.OpacityMask>
<Rectangle.RenderTransform>
<ScaleTransform ScaleY="-1"></ScaleTransform>
</Rectangle.RenderTransform>
</Rectangle>
元素旋转:
<StackPanel>
<StackPanel Margin="25" Background="LightYellow">
<Button Padding="5" HorizontalAlignment="Left">
<Button.RenderTransform>
<RotateTransform Angle="35" CenterX="45" CenterY="5" />
</Button.RenderTransform>
<Button.Content>I'm rotated 35 degrees</Button.Content>
</Button>
<Button Padding="5" HorizontalAlignment="Left">I'm not</Button>
</StackPanel>
<StackPanel Margin="25" Background="LightYellow">
<Button Padding="5" HorizontalAlignment="Left">
<Button.LayoutTransform>
<RotateTransform Angle="35" CenterX="45" CenterY="5" />
</Button.LayoutTransform>
<Button.Content>I'm rotated 35 degrees</Button.Content>
</Button>
<Button Padding="5" HorizontalAlignment="Left">I'm not</Button>
</StackPanel>
</StackPanel>
图画旋转:
<Canvas>
<Rectangle Width="80" Height="10" Stroke="Blue" Fill="Yellow"
Canvas.Left="100" Canvas.Top="100">
</Rectangle>
<Rectangle Width="80" Height="10" Stroke="Blue" Fill="Yellow"
Canvas.Left="100" Canvas.Top="100">
<Rectangle.RenderTransform>
<RotateTransform Angle="25" />
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Width="80" Height="10" Stroke="Blue" Fill="Yellow"
Canvas.Left="100" Canvas.Top="100">
<Rectangle.RenderTransform>
<RotateTransform Angle="50" />
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Width="80" Height="10" Stroke="Blue" Fill="Yellow"
Canvas.Left="100" Canvas.Top="100">
<Rectangle.RenderTransform>
<RotateTransform Angle="75" />
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Width="80" Height="10" Stroke="Blue" Fill="Yellow"
Canvas.Left="100" Canvas.Top="100">
<Rectangle.RenderTransform>
<RotateTransform Angle="100" />
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Width="80" Height="10" Stroke="Blue" Fill="Yellow"
Canvas.Left="100" Canvas.Top="300">
</Rectangle>
<Rectangle Width="80" Height="10" Stroke="Blue" Fill="Yellow"
Canvas.Left="100" Canvas.Top="300">
<Rectangle.RenderTransform>
<RotateTransform Angle="25" CenterX="45" CenterY="5" />
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Width="80" Height="10" Stroke="Blue" Fill="Yellow"
Canvas.Left="100" Canvas.Top="300">
<Rectangle.RenderTransform>
<RotateTransform Angle="50" CenterX="45" CenterY="5" />
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Width="80" Height="10" Stroke="Blue" Fill="Yellow"
Canvas.Left="100" Canvas.Top="300">
<Rectangle.RenderTransform>
<RotateTransform Angle="75" CenterX="45" CenterY="5" />
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Width="80" Height="10" Stroke="Blue" Fill="Yellow"
Canvas.Left="100" Canvas.Top="300">
<Rectangle.RenderTransform>
<RotateTransform Angle="100" CenterX="45" CenterY="5" />
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
圆和矩形:
<TextBlock Margin="5,5,0,0">Corner radius of 5.</TextBlock>
<Rectangle Fill="Yellow" Stroke="Blue" RadiusX="5" RadiusY="5"
Width="100" Height="60" Margin="5" HorizontalAlignment="Left">
</Rectangle>
<TextBlock Margin="5,5,0,0">Corner radius of 10.</TextBlock>
<Rectangle Fill="Yellow" Stroke="Blue" RadiusX="10" RadiusY="10"
Width="100" Height="60" Margin="5" HorizontalAlignment="Left"></Rectangle>
<TextBlock Margin="5,5,0,0">Corner radius of 10 (X) and 25 (Y).</TextBlock>
<Rectangle Fill="Yellow" Stroke="Blue" RadiusX="10" RadiusY="25"
Width="100" Height="60" Margin="5" HorizontalAlignment="Left"></Rectangle>
<TextBlock Margin="5,5,0,0">Corner radius of 100 (X) and 60 (Y).</TextBlock>
<Rectangle Fill="Yellow" Stroke="Blue" RadiusX="100" RadiusY="60"
Width="100" Height="60" Margin="5" HorizontalAlignment="Left"></Rectangle>
磁贴模式:
<Grid>
<UniformGrid>
<Rectangle Stroke="Black">
<Rectangle.Fill>
<ImageBrush ImageSource="tile.jpg" TileMode="Tile"
ViewportUnits="Absolute" Viewport="0 0 37 37"></ImageBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Stroke="Black">
<Rectangle.Fill>
<ImageBrush ImageSource="tile.jpg" TileMode="FlipX"
ViewportUnits="Absolute" Viewport="0 0 37 37"></ImageBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Stroke="Black">
<Rectangle.Fill>
<ImageBrush ImageSource="tile.jpg" TileMode="FlipY"
ViewportUnits="Absolute" Viewport="0 0 37 37"></ImageBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Stroke="Black">
<Rectangle.Fill>
<ImageBrush ImageSource="tile.jpg" TileMode="FlipXY"
ViewportUnits="Absolute" Viewport="0 0 37 37"></ImageBrush>
</Rectangle.Fill>
</Rectangle>
</UniformGrid>
<UniformGrid>
<UniformGrid.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="HorizontalAlignment" Value="Center"></Setter>
<Setter Property="VerticalAlignment" Value="Bottom"></Setter>
<Setter Property="FontSize" Value="25"></Setter>
<Setter Property="FontWeight" Value="Bold"></Setter>
<Setter Property="Margin" Value="3"></Setter>
</Style>
</UniformGrid.Resources>
<TextBlock>Tile</TextBlock>
<TextBlock>FlipX</TextBlock>
<TextBlock>FlipY</TextBlock>
<TextBlock>FlipXY</TextBlock>
</UniformGrid>
</Grid>
磁贴类型:
<TextBlock Margin="3">Fixed Tiles</TextBlock>
<Rectangle Grid.Column="1" Stroke="Black">
<Rectangle.Fill>
<ImageBrush ImageSource="tile.jpg" TileMode="Tile"
ViewportUnits="Absolute" Viewport="0 0 37 37"></ImageBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Grid.Row="1" Margin="3">Proportional Tiles</TextBlock>
<Rectangle Grid.Row="1" Grid.Column="1" Stroke="Black">
<Rectangle.Fill>
<ImageBrush ImageSource="tile.jpg" TileMode="Tile"
Viewport="0 0 0.2 0.2"></ImageBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Grid.Row="2" Margin="3">
Proportional Tiles<LineBreak></LineBreak>(no stretch)
</TextBlock>
<Rectangle Grid.Row="2" Grid.Column="1" Stroke="Black">
<Rectangle.Fill>
<ImageBrush ImageSource="tile.jpg" TileMode="Tile" Stretch="None"
Viewport="0 0 0.2 0.2"></ImageBrush>
</Rectangle.Fill>
</Rectangle>
颜色透明:
<StackPanel Margin="5">
<StackPanel.Background>
<ImageBrush ImageSource="celestial.jpg" Opacity="0.7"/>
</StackPanel.Background>
<Button Foreground="White" FontSize="16" Margin="10"
BorderBrush="White" Background="#60AA4030"
Padding="20">A Semi-Transparent Button</Button>
<Label Margin="10" FontSize="18" FontWeight="Bold" Foreground="White">Some Label Text</Label>
<TextBox Margin="10" Background="#AAAAAAAA" Foreground="White" BorderBrush="White">A semi-transparent text box</TextBox>
<Button Margin="10" Padding="25" BorderBrush="White" >
<Button.Background>
<ImageBrush ImageSource="happyface.jpg" Opacity="0.6"
TileMode="Tile" Viewport="0,0,0.1,0.4"/>
</Button.Background>
<StackPanel>
<TextBlock Foreground="#75FFFFFF" TextAlignment="Center"
FontSize="30"
FontWeight="Bold" TextWrapping="Wrap" >Semi-Transparent Layers</TextBlock>
</StackPanel>
</Button>
</StackPanel>
Viewbox:
<TextBlock>The first row of a grid.</TextBlock>
<Viewbox Grid.Row="1" HorizontalAlignment="Left" MaxHeight="500">
<Canvas Width="200" Height="150">
<Ellipse Fill="Yellow" Stroke="Blue" Canvas.Left="10" Canvas.Top="50"
Width="100" Height="50" HorizontalAlignment="Left"></Ellipse>
<Rectangle Fill="Yellow" Stroke="Blue" Canvas.Left="30" Canvas.Top="40"
Width="100" Height="50" HorizontalAlignment="Left"></Rectangle>
</Canvas>
</Viewbox>
视觉画刷:
<StackPanel Margin="3">
<Button Name="cmd" Margin="3" Padding="5">Is this a real button?</Button>
<Rectangle Margin="3" Height="{Binding ElementName=cmd,Path=ActualHeight}">
<Rectangle.Fill>
<VisualBrush Visual="{Binding ElementName=cmd}"></VisualBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Margin="3" Height="50">
<Rectangle.Fill>
<VisualBrush Visual="{Binding ElementName=cmd}"></VisualBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Margin="3" Height="150">
<Rectangle.Fill>
<VisualBrush Visual="{Binding ElementName=cmd}"></VisualBrush>
</Rectangle.Fill>
</Rectangle>
</StackPanel>