Silverlight - Expression Blend, как скрыть компоненты за экраном - PullRequest
0 голосов
/ 10 ноября 2011

Я создавал меню, которое, когда вы нажимаете кнопку, она выдвигается и снова щелкает по ней, а затем снова вставляется. Немного похоже на то, как работает система меню Android, хотя вы не перетаскиваете ее, вы просто щелкаете по ней.

Так мне было интересно, как скрыть элемент за экраном?Я попытался установить глобальное смещение, но в зависимости от разрешения экрана я все еще вижу прямоугольники и круги, которые должны быть скрыты.Я заставил его работать, используя поля, но это означало, что у меня будут огромные поля, чтобы скрыть элементы, просто это не выглядело правильно.Я не могу использовать видимость, потому что мне нужно анимировать меню, идущее снизу кнопки.Я использовал выражение смесь 4.

Любая помощь будет здорово?

Ну, я решил одну из проблем.Мне удалось скрыть компоненты за пределами экрана, выровняв их снизу или слева, а затем изменив значение преобразования, чтобы скрыть их за пределами экрана.Моя новая проблема - когда я нажимаю кнопку затмения, прямоугольник должен заполнить весь фон, но он заполняет только часть от него.

Привет, спасибо за ответ, Джоэл, я на самом деле обнаружил, что установив ширину и высоту дизайна, сработалНо на разных разрешениях я мог видеть, что это не работает.Мой код для этого ... 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 для перемещения объекта за пределы области просмотра в состоянии «База», кажется, вызывает проблему.Использование полей фактически решает проблему.Хотя я не могу сказать, почему ... Я просто попробовал, и это сработало.

Еще раз спасибо

1 Ответ

4 голосов
/ 11 ноября 2011

В Silverlight вам нужно добавить регион обрезки в ваш базовый контейнер.

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

Вам необходимо изменить параметры Rect или добавить привязку, соответствующую вашему приложению.

Одно предостережение: Blend учитывает область отсечения, поэтому после ее добавления вы больше не сможете видеть элементы, нарисованные за кадром.

...