WPF之绘图

最新推荐文章于 2024-05-02 16:52:59 发布

腾飞大侠

最新推荐文章于 2024-05-02 16:52:59 发布

阅读量778

点赞数

分类专栏： WPF

本文链接：https://blog.csdn.net/happyyftk/article/details/17031489

版权

WPF 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

点线：

  <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>