在Silverlight中滑動彈出窗口

Question

當用戶將鼠標懸停在某些控件上時，我需要在Silverlight 4.0中實現彈出窗口。彈出窗口應該從控件中滑出。我可以顯示一個彈出窗口。但不能給它一個滑動效果。請幫助我。

在此先感謝。

Answer 1

我一直在使用帶陰影的矩形來滑動類型「彈出窗口」。如果您需要模式類型，您可以禁用背景。

這是使用純xaml，但故事板可以從代碼隱藏中調用。

參考交互

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的觸發器或代碼隱藏進行調用。