汎用的なグラフィック プロパティ

Opacity プロパティ

Opacity プロパティは、UIElement オブジェクトのアルファ値、 または透明度を制御するものです。 Opacity プロパティには、0 から 1 の間の値を設定できます。 0.0 に近くなるほど、オブジェクトの透明度が高くなります。0 にすると、オブジェクトは完全に見えなくなります。 Opacity のデフォルトは 1.0 であり、完全に不透明です。 以下の例は、2 つの図形に異なる不透明度を設定しています。

[hide XAML]

<Canvas Width="300" Height="300"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   
  <Rectangle Opacity="1.0" Height="100" Width="100" Canvas.Left="30" Canvas.Top="30"
     Stroke="Black" StrokeThickness="10" Fill="SlateBlue"/>
  <Rectangle Opacity="0.6" Height="100" Width="100" Canvas.Left="70" Canvas.Top="70"
     Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
</Canvas>

[hide] [restart]

OpacityMask プロパティ

OpacityMask（不透明度マスク）プロパティは、 UIElement の異なる部分のアルファ値を制御するものです。 たとえば、OpacityMask を使って、要素を右から左に弱めていくことができます。 OpacityMask プロパティは Brush オブジェクトを持ちます。 ブラシは、要素にマッピングされ、ブラシのピクセルのそれぞれがアルファ値として要素の対応するピクセルの不透明度として使われます。 ブラシで与えられた部分が透明であれば、要素も透明になります。

OpacityMask には、どんなブラシを使うこともできますが、 LinearGradientBrush、RadialGradientBrush、 ImageBrush とともに使うのが便利です。

以下の例は、Rectangle オブジェクトに対して LinearGradientBrush を不透明度マスクとして適用しています。

[hide XAML]

<Canvas Width="300" Height="300"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   
  <Rectangle Height="100" Width="100" Canvas.Left="30" Canvas.Top="30"
     Stroke="Black" StrokeThickness="10" Fill="SlateBlue">
    <Rectangle.OpacityMask>
      <LinearGradientBrush>
        <GradientStop Offset="0.25" Color="#00000000"/>
        <GradientStop Offset="1" Color="#FF000000"/>       
      </LinearGradientBrush>
    </Rectangle.OpacityMask>
  </Rectangle>
  
  
</Canvas>

[hide] [restart]

Clip プロパティ

Clip プロパティは、要素の一部のみを描画できるようにします。 Clip プロパティを使うためには、 描画する領域をあらわすための Geometry（形状）オブジェクトが必要です。 提供された Geometry オブジェクトの外にはみ出したものは何も表示されません（“クリップ”されます）。

以下の例は、Ellipse 要素の Clip として RectangleGeometry を使っています。 この結果、Ellipse のうち、RectangleGeometry によって 定義された領域の内側の部分だけが表示されます。 RectangleGeometry の外側の部分はクリップされます。

[hide XAML]

<Canvas Width="300" Height="300"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   
  <Ellipse Height="200" Width="200" Canvas.Left="30" Canvas.Top="30"
     Stroke="Black" StrokeThickness="10" Fill="SlateBlue">
    <Ellipse.Clip>
      <RectangleGeometry Rect="0, 0, 100, 100"/>
    </Ellipse.Clip>
  </Ellipse>
</Canvas>

[hide] [restart]

RenderTransform プロパティ

RenderTransform プロパティは、Transform オブジェクトを 使うことで、要素の回転、傾斜、伸縮、変形（移動）ができるようにします。 以下のリストは、RenderTransform プロパティで使うことができる さまざまな Transform オブジェクトです。

• RotateTransform: オブジェクトを、指定した角度だけ回転する。
• SkewTransform: オブジェクトを、X-軸、Y-軸に沿って指定した分だけ傾斜させる。
• ScaleTransform: オブジェクトを、水平方向・垂直方向に指定した分だけ拡大または縮小させる。
• TranslateTransform: オブジェクトを、水平方向・垂直方向に指定した分だけ移動させる。

さらに、特別な変形指定、TransformGroup があります。 これは、ひとつのオブジェクトに対して、複数の変形していを適用できるようにするものです。

以下の例では、Rectangle 要素に対して、 それぞれの Transform オブジェクトを使って変形させるようすを示しています。

[hide XAML]

<Canvas Width="300" Height="300"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  >
  <Rectangle Height="100" Width="100" Canvas.Left="70" Canvas.Top="10"
      Fill="Black">
    <Rectangle.RenderTransform>
      <RotateTransform Angle="45"/>
    </Rectangle.RenderTransform>
  </Rectangle>
  
  <Rectangle Height="100" Width="100" Canvas.Left="130" Canvas.Top="10"
      Fill="red">
    <Rectangle.RenderTransform>
      <SkewTransform AngleX="30"/>
    </Rectangle.RenderTransform>
  </Rectangle>
  
  <Rectangle Height="100" Width="100" Canvas.Left="10" Canvas.Top="190"
      Fill="blue">
    <Rectangle.RenderTransform>
      <ScaleTransform ScaleX="1.3" ScaleY=".5"/>
    </Rectangle.RenderTransform>
  </Rectangle>
  
  <Rectangle Height="100" Width="100" Canvas.Left="160" Canvas.Top="130"
      Fill="Green">
    <Rectangle.RenderTransform>
      <TransformGroup>
        <RotateTransform Angle="45"/>
        <ScaleTransform ScaleX=".5" ScaleY="1.2"/>
        <SkewTransform AngleX="30"/>
      </TransformGroup>
    </Rectangle.RenderTransform>
  </Rectangle>
  
</Canvas>

[hide] [restart]

次のステップ

次のトピック、イメージ は、ビットマップイメージを表示するための Image 要素の使い方を解説します。