Silverlight - Expression Blend，如何在屏幕外隐藏组件答案

【问题标题】：Silverlight - Expression Blend, how to hide components off screenSilverlight - Expression Blend，如何在屏幕外隐藏组件
【发布时间】：2011-11-14 16:55:19
【问题描述】：

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

所以我想知道如何在屏幕外隐藏元素？我尝试设置全局偏移量，但根据屏幕分辨率，我仍然可以看到应该隐藏的矩形和圆形。我确实使用边距让它工作，但这意味着我将有巨大的边距来隐藏元素，只是看起来不正确。我不能使用可见性，因为我需要为从按钮下方进入的菜单设置动画。我一直在使用表达式混合 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 将对象移出“基本”状态的查看区域似乎会导致问题。使用边距，实际上解决了这个问题。我不能告诉你为什么……我只是试了一下，它奏效了。

再次感谢

【问题讨论】：

标签： silverlight-4.0 wpf-controls expression-blend

【解决方案1】：

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

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

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

一个警告：Blend 尊重剪辑区域，因此一旦添加它，您将无法再看到“屏幕外”绘制的元素。

【讨论】：