如何:圆化 RectangleGeometry 的角

更新:2007 年 11 月

若要圆化 RectangleGeometry 的角,请将其 RadiusXRadiusY 属性设置为大于零的值。值越大,矩形的角越圆。

示例

下面的示例演示具有不同的 RadiusXRadiusY 设置的多个 RectangleGeometry 对象。RectangleGeometry 对象使用 Path 元素来显示。

<Page
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="GeoOvwSample.RectangleGeometryRoundedCornerExample">

  <Page.Resources>

    <!-- Create a grid background to highlight the
         coordinate system. -->
    <DrawingBrush x:Key="GridDrawingBrushResource" 
      Viewport="0,0,10,10" 
      ViewportUnits="Absolute" TileMode="Tile">
      <DrawingBrush.Drawing>
        <DrawingGroup>
          <DrawingGroup.Children>
            <GeometryDrawing Brush="White">
              <GeometryDrawing.Geometry>
                <RectangleGeometry Rect="0,0,1,1" />
              </GeometryDrawing.Geometry>
            </GeometryDrawing>
            <GeometryDrawing Geometry="M0,0 L1,0 1,0.1, 0,0.1Z" Brush="#CCCCFF" />
            <GeometryDrawing Geometry="M0,0 L0,1 0.1,1, 0.1,0Z" Brush="#CCCCFF" />
          </DrawingGroup.Children>
        </DrawingGroup>
      </DrawingBrush.Drawing>
    </DrawingBrush>

    <!-- Create a graph paper style border to frame the rectangles. -->
    <Style x:Key="GraphPaperBorderStyle" TargetType="{x:Type Border}">
      <Setter Property="HorizontalAlignment" Value="Left" />
      <Setter Property="Background" 
        Value="{StaticResource GridDrawingBrushResource}" />
      <Setter Property="BorderBrush" Value="Black" />
      <Setter Property="BorderThickness" Value="1" />
      <Setter Property="Margin" Value="10" />
      <Setter Property="Width" Value="190" />
      <Setter Property="Height" Value="90" />
    </Style>
  </Page.Resources>

  <StackPanel Name="MainStackPanel">

    <Border Style="{StaticResource GraphPaperBorderStyle}">
      <Path Stroke="Black" 
        StrokeThickness="1"
        Fill="#99CCCCFF">
        <Path.Data>

          <!-- Create a rectangle without rounded corners.  -->
          <RectangleGeometry
            Rect="20,20,150,50"  />
        </Path.Data>
      </Path>
    </Border>

    <Border Style="{StaticResource GraphPaperBorderStyle}">
      <Path Stroke="Black" 
        StrokeThickness="1"
        Fill="#99CCCCFF">
        <Path.Data>

          <!-- Create a rectangle with rounded corners
             by giving the RectangleGeometry a RadiusX
             and a RadiusY of 10.  -->
          <RectangleGeometry
            Rect="20,20,150,50" RadiusX="10" RadiusY="10" />
        </Path.Data>
      </Path>
    </Border>

    <Border Style="{StaticResource GraphPaperBorderStyle}" >
      <Path Stroke="Black" 
        StrokeThickness="1"
        Fill="#99CCCCFF">
        <Path.Data>

          <!-- Set RadiusX and RadiusY to their maximum values 
             (half the rectangle's width and 
              half the rectangle's height).  -->
          <RectangleGeometry
            Rect="20,20,150,50" RadiusX="75" RadiusY="25"  />
        </Path.Data>
      </Path>
    </Border>

  </StackPanel>
</Page>

带圆角的矩形

具有不同的 RadiusX/RadiusY 设置的矩形

请参见

任务

如何:创建复合形状

如何:使用 PathGeometry 创建形状

概念

Geometry 概述