Question

I am using Silverlight and eventually Silverlight for the Phone.

What I am trying to do is create a bordered container which contains children controls. The children controls should not be visible when outside the bounds of the grid control.

Is this possible? I know I can create a clip from path, but is this the only way.

I did use a scroll container, which seemed to work…. somewhat.

This is the xaml. What I am expecting is the second button not be visible when the app is runing.

<Grid x:Name="LayoutRoot" Background="White" >
    <Grid HorizontalAlignment="Left" VerticalAlignment="Top" Height="197" Width="241" d:LayoutOverrides="HorizontalAlignment, VerticalAlignment">
        <Button Content="Button" Margin="25,42,101,81"/>
        <Button Content="Button" Height="76" Margin="25,0,63,-83" VerticalAlignment="Bottom"/>
    </Grid>
</Grid>

Answer 1

I found a work around but would love to use another solution. I used a scrollviewer and hide the scrollbars. This seems like a heavy solution, but will work for the time being. I definately will need to find something lighter weight when I move this to Windows Phone 7.

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" xmlns:System="clr-namespace:System;assembly=mscorlib" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" mc:Ignorable="d"
x:Class="SilverlightApplication2.MainPage"
Width="640" Height="480">
<Grid x:Name="LayoutRoot" Background="White" >
    <ScrollViewer x:Name="scrollViewer" Margin="0,0,158,0" VerticalScrollBarVisibility="Disabled" Height="123" VerticalAlignment="Top">
        <Grid x:Name="grid" VerticalAlignment="Top" MaxWidth="169" MaxHeight="145" Height="141" RenderTransformOrigin="0.5,0.5">
            <Grid.RenderTransform>
                <CompositeTransform/>
            </Grid.RenderTransform>
            <Button Content="Button" Margin="25,42,0,60" HorizontalAlignment="Left" Width="71"/>
            <Button Content="Button" Height="76" Margin="25,0,0,-83" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="81"/>
        </Grid>
    </ScrollViewer>
</Grid>