オールトの雲

[WPF] [XAML] 境界外の図形の欠け

2013年11月11日

　Grid にオブジェクトを置いたとき、Grid 領域外にある図形が欠けることがあります。
　もちろん、Grid の外にはみ出た領域もそうですが、分割した領域からはみ出ても欠けます。

　たとえば、以下のような xaml を記述した場合。
　# Ellipse オブジェクトは、中央の領域(Grid.Column="1" Grid.Row="1")に置いています。

<Grid Width="300" Height="300">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Ellipse Grid.ColumnSpan="1" Grid.RowSpan="1"
             Grid.Column="1" Grid.Row="1"
             Height="300" Width="300"
             Margin="-100,-100,0,0"
             Fill="Red"/>
</Grid>

　すると、こんな感じに表示されます。
　上辺／左辺は領域を超えても表示されますが、下辺／右辺を超えた部分は非表示になります。（クリッピングされる。）

　それでは、上辺／左辺は領域を超えても必ず表示されるのか？、というと、それはそうでもないようで。

　たとえば、以下のような xaml を記述した場合。
　# Path オブジェクトは、中央右下の領域(Grid.Column="2" Grid.Row="2")に置いています。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Path Grid.Column="2" Grid.Row="2"
          Data="M0,0 m0,-50 l50,86.6 -100,0 z" Stroke="Red" Fill="Red"/>
</Grid>

　Path の図形そのものがマイナスの座標を持っているせいなのか