Скользящее всплывающее окно в Silverlight - PullRequest
Новая
       31

Скользящее всплывающее окно в Silverlight

0 голосов
/ 24 августа 2011

У меня есть одно требование для реализации всплывающего окна в Silverlight 4.0, когда пользователь наводит указатель мыши на какой-то элемент управления.И всплывающее окно должно выскользнуть из-под контроля.Я могу показать всплывающее окно.Но не может придать этому скользящий эффект.Пожалуйста, помогите мне.

Заранее спасибо.

1 Ответ

0 голосов
/ 24 августа 2011

Я использовал прямоугольники с тенью для скольжения типа «всплывающие окна».Вы можете отключить фон, если вам нужен модальный тип.

Это использует чистый xaml, но раскадровки можно вызывать из codebehind.

Ссылка на интерактивность 

   xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
 xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" x:Class="SomeProject"

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

 <navigation:Page.Resources>
        <Storyboard x:Name="Storyboard_Enter">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="rectangle">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="520"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Name="Storyboard_GoBack">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="rectangle">
                <SplineDoubleKeyFrame KeyTime="0" Value="520"/>
                <SplineDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </navigation:Page.Resources>

LayoutRoot 

 <Grid x:Name="LayoutRoot">
        <Button x:Name="btnEnter" Content="Enter" HorizontalAlignment="Left" Height="48" Margin="96,88,0,0" VerticalAlignment="Top" Width="144">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseEnter" SourceName="btnEnter">
                    <ei:ControlStoryboardAction Storyboard="{StaticResource Storyboard_Enter}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
        <Rectangle x:Name="rectangle" Fill="#FF393939" Margin="-376,232,0,72" Stroke="Black" RadiusY="25" RadiusX="21" HorizontalAlignment="Left" Width="358" RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <CompositeTransform/>
            </Rectangle.RenderTransform>
            <Rectangle.Effect>
                <DropShadowEffect BlurRadius="15" Color="#FFBABABA"/>
            </Rectangle.Effect>
        </Rectangle>
        <Button x:Name="btnGoBack" Content="Exit" Height="48" Margin="296,88,192,0" VerticalAlignment="Top">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseEnter" SourceName="btnGoBack">
                    <ei:ControlStoryboardAction Storyboard="{StaticResource Storyboard_GoBack}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>

    </Grid>

Это очень грубый пример, но вы должны его получить.началось.

У нас есть «всплывающий» контейнер, находящийся вне поля зрения прямо на самом краю основного холста.

Создавайте раскадровки, чтобы вставить их и сдвинуть назад.

Раскадровки можно вызывать с помощью триггеров на основе xaml или из кода.

...