Silverlight - Expression Blend，如何隐藏屏幕外的组件

Question

我一直在创建一个菜单，当你单击一个按钮时，它会滑出，再次单击它，它会滑入。有点像android菜单系统的工作方式，尽管你不拖动它，你只需单击它。

所以我想知道如何隐藏屏幕外的元素？我尝试设置全局偏移，但根据屏幕分辨率，我仍然可以看到应该隐藏的矩形和圆形。我确实使用边距让它工作，但这意味着我将有巨大的边距来隐藏元素，只是看起来不正确。我无法使用可见性，因为我需要对来自按钮下方的菜单进行动画处理。我一直在使用 Expression Blend 4。

有什么帮助会很好吗？

好吧，我解决了其中一个问题。我设法将组件隐藏在屏幕之外，方法是将它们对齐到底部或左侧，然后更改渲染变换值以将它们隐藏在屏幕之外。我的新问题是，当我单击 eclipse 按钮​​时，一个矩形应该填充整个背景，但它只填充它的一部分。

你好，感谢乔尔的回复，我实际上发现通过设置设计视图的宽度和高度是有效的。但在不同的分辨率下我可以看到这不起作用。我的代码是... 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"/>

所以我猜测在主父网格视图上我应该添加 xaml：

<RectangleGeometry Rect="0,0,640,480" /> 

并且只需将数字调整到所需的大小？但这是否仍然存在无法处理所有分辨率的相同问题？

另外，我创建的控件不是透明的，即使我已将父网格设置为“透明”，它仍然具有“白色”背景。基本上，它会在用户单击菜单栏之前就按照菜单栏可以达到的高度填充屏幕。这附近还有远吗？

我解决了白色背景的解决方案。使用 RenderTransform 将对象移出“基本”状态的查看区域似乎会导致问题。使用边距实际上可以解决问题。但我不能告诉你为什么......我只是尝试了一下并且成功了。

再次感谢

Answer 1

在 Silverlight 中，您需要将剪切区域添加到基本容器中。

<Grid>
    <Grid.Clip>
        <RectangleGeometry Rect="0,0,640,480" />
    </Grid.Clip>
    // other content
</Grid>

您需要修改 Rect 参数或添加一些绑定以匹配您的应用程序。

需要注意的是：Blend 尊重剪切区域，因此一旦添加它，您将无法再看到“屏幕外”绘制的元素。