3

以下のコードには、グリッドの中央の列にボタンがある単純なグリッドが含まれています。ボタンの幅は (意図的に) 配置されている列よりも大きくなっています。ボタンの左側の部分が表示され、右側の部分は表示されないことに注意してください。左右のボタン部分を非表示にするにはどうすればよいですか? ボタンの右側の部分は、右側のグリッド列の z-下にありますが、ボタンの左側の部分は、左側のグリッド列の z-上にあります。左のボタン部分も左のグリッド列で非表示にする必要があります。

これは、一種の「フィルム ストリップ」をアニメーション化しようとしている XAML の簡略化されたバージョンです。フィルムは、左右のグリッド列の Z 軸下、中央部分の Z 軸上に配置する必要があります。アニメーションはうまく機能しますが、左側のグリッド列によって「カバー」されている必要があるため、ユーザーはしばらくの間、左側のコントロールを表示する必要はありません。

<Grid x:Name="LayoutRoot">
    <Border Background="Yellow" x:Name="ContentBorder">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="40"/>
                <ColumnDefinition />
                <ColumnDefinition Width="40"/>
            </Grid.ColumnDefinitions>

            <Grid Grid.Column="1" >
                <Button Content="Button" Margin="-20, 0, 0, 0" Width="240" Height="33"/>
            </Grid>
        </Grid>
    </Border>
</Grid>

4

1 に答える 1

3

ClipToBounds を追加してみてください

<Grid x:Name="LayoutRoot">
    <Border Background="Yellow" x:Name="ContentBorder">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="40"/>
                <ColumnDefinition />
                <ColumnDefinition Width="40"/>
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="1" ClipToBounds="True" >
                <Button Content="Button" Margin="-20, 0, 0, 0" Width="240" Height="33"/>
            </Grid>
        </Grid>
    </Border>
</Grid>
于 2011-01-30T19:45:27.733 に答える