Silverlight - Expression Blend, how to hide components off screen - silverlight-4.0

Question

I have been creating a menu which when you click a button it slides out and click it again it slides in. A bit like the way the android menu system works, although you dont drag this you just click it.
So I was wondering how do you hide an element off screen? I have tried setting the global offset, but depending on the screen resolution I can still see rectangles and circles which should be hidden. I did get it to work using margins, but it meant i would have huge margins to hide elements, just didnt seem correct. I cant use visibility, because i need to animate the menu coming in from below the button. I have been using expression blend 4.
Any help would be great?
Well I solved one of the problems. I managed to hide the components off screen by aligning them to the bottom or to the left and then changing the render transform value to hide them off screen. My new problem is when i click the eclipse button a rectangle should fill the whole background but it only fills a portion off it.
Hi, thanks for the reply Joel, I actually found that by setting the width and height of the design view worked. But on different resolutions i could see this not working. My code for this is...
Xaml:
<UserControl.Resources>
<Style x:Key="ButtonStyle1" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Ellipse x:Name="ellipse" Fill="#FF8D5216" Stroke="Black"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid Margin="0" Background="Transparent" Height="384" VerticalAlignment="Bottom">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.3"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Move">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="BlackBoarder">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Thickness>0</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To="20" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="BaseBoarder" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Down"/>
<VisualState x:Name="SlideAcross"/>
<VisualState x:Name="SlideBack"/>
<VisualState x:Name="FlipForward">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="BlackBoarder" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="BlackBoarder" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="180" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="BlackBoarder" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="180" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="FlipBack">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="BlackBoarder" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="BlackBoarder" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="grid" Height="400" VerticalAlignment="Bottom" Background="Orange" RenderTransformOrigin="0.5,0.5" Margin="0,0,0,-21">
<Grid.Projection>
<PlaneProjection/>
</Grid.Projection>
<Grid.RenderTransform>
<CompositeTransform TranslateY="360"/>
</Grid.RenderTransform>
<Rectangle x:Name="MovingButtonTab" Fill="Black" Height="15" Margin="0,-14,0,0" Stroke="Black" VerticalAlignment="Top" HorizontalAlignment="Center" Width="250" MouseLeftButtonDown="ButtonTab_MouseLeftButtonDown"/>
<Rectangle x:Name="BlackBoarder" Fill="Gray" Margin="0" Stroke="Black" RenderTransformOrigin="0.5,0.5">
<Rectangle.Projection>
<PlaneProjection/>
</Rectangle.Projection>
<Rectangle.RenderTransform>
<CompositeTransform/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="TitleRect" Fill="Black" Height="20" Margin="0" Stroke="Black" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5" />
<sdk:Label Height="20" Margin="0" Width="219" Content="" Background="Orange" Foreground="White" VerticalAlignment="Top" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5"/>
</Grid>
<Rectangle x:Name="BaseBoarder" Fill="Gray" Height="20" Stroke="Black" VerticalAlignment="Bottom"/>
So i'm guessing on the main parent grid view I should add the xaml:
<RectangleGeometry Rect="0,0,640,480" />
And just adjust the numbers to the desired size? Would this still have the same problem of not working on all resolutions though?
Also, my control that I have created isn't transparent, even though i have set the parent grid to "transparent" it still has a "white" background. Basically it fills the screen by the height that the menu bar can reach even before the user clicks on it. Is there away round this?
I solved the solution of the white background. Using RenderTransform to move the object off the viewing area in the "Base" state seems to cause the issue. Using margins, actually solves the issue. I can't tell you why though... I just tried it out and it worked.
Thanks Again

Answer 1

In Silverlight, you need to add a Clipping Region to your base container.
<Grid>
<Grid.Clip>
<RectangleGeometry Rect="0,0,640,480" />
</Grid.Clip>
// other content
</Grid>
You'll need to modify the Rect paramteres or add some binding to match your application.
One caveat: Blend respects the Clipping Region, so once you add it you won't be able to see the elements that are drawn "offscreen" anymore.