泥庭

2015年2月26日

Gridからの脱出

Filed under: C#, WPF — タグ: , , , — yone64 @ 12:38 AM
WPFではPanelにControlを配置することになるわけですが、PanelからControlがはみ出しても表示することができます。

例えば、
<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Canvas Background="Ivory" Margin="50">
        <TextBlock Text="abcdefghi" FontSize="100"/>
    </Canvas>
</Window>
という、XAMLだと

キャプチャ

という、実行結果になります。Canvasの背景を「Ivory」にしてるので、文字がCanvas領域をはみ出しているのがわかると思います。
ちなみに、ClipToBoundというプロパティーが用意されていて、これをTrueに設定することで、Panelの大きさの外にはみ出した部分が切り取られます。
<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Canvas Background="Ivory" Margin="50" ClipToBounds="True">
        <TextBlock Text="abcdefghi" FontSize="100"/>
    </Canvas>
</Window>

キャプチャ

ところが、GridではPanelをはみ出して表示することができません。明示的にClipToBoundをFalseにしても、ダメでした。
<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid Background="Ivory" Margin="50" ClipToBounds="False">
        <TextBlock Text="abcdefghi" FontSize="100"/>
    </Grid>
</Window>

キャプチャ

CanvasのClipToBound=”True”の場合と、同じ表示結果になります。
# 決して同じ画像ではありませんw

そういう場合は、Gridの中にCanvasを配置してください。Canvas内部に配置されたControlが親Gridの範囲をも超えて描画されるようになります、
<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid Background="Ivory" Margin="50">
        <Canvas Background="AliceBlue">
            <TextBlock Text="abcdefghi" FontSize="100"/>
        </Canvas>
    </Grid>
</Window>

キャプチャ

コメントする »

まだコメントはありません。

RSS feed for comments on this post. TrackBack URI

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

WordPress.com Blog.

%d人のブロガーが「いいね」をつけました。