Silverlight Project - 슬라이드 인 및 아웃 패널 - 어떻게?

Question

정확히이 기능이 무엇인지 모르겠지만 Silverlight 프로젝트에서이 기능을 시뮬레이션하고 싶습니다. 나는 C# 개발자이며 풍부한 UX 용 Silverlight 및 Expression Studio (Blend)로 옮겨 가고 있습니다. 하나는 클릭과 같이 메뉴에서

http://www.templatemonster.com/silverlight-templates/28722.html

:이 전 일부 사용자 컨트롤을 가지고 내가 찾은 다음 사이트에서와 같이 (교체 아웃 슬라이드와) 화면에 와서 그들에게하고 싶은 말을하자 메뉴 항목을 선택하면 '화면'이 왼쪽으로 슬라이드 한 다음 새로운 '화면'이 왼쪽에서 오른쪽으로 슬라이드됩니다.

정말이 물건을 배우고 싶지만이 '기능'이 무엇인지 불리지 못합니까? 예를 들어 xaml에서 호출되는 '화면'은 무엇입니까? 또한 xaml에서 '슬라이드 인/아웃'이란 무엇입니까? 누군가 나를 좋은 기사/백서로 안내 할 수 있습니까?

미리 조언 해 주셔서 감사합니다.

Answer 1

첫 번째로 Silverlight/WPF는 입니다. 실제로이 종류의 물건에 좋은입니다. 프레임 워크 사람들은 가능한 한 유연하게 작업 엔지니어링 xaml을 훌륭하게 해냈습니다.

admittingly이 ResourceDictionaries, Triggers, Actions, Storyboards, 애니메이션 같은 것들 (키 프레임/Double ...), 템플릿 생성, Styles 의 이러한 종류의 시도하기 전에 얻을 수있는 많은입니다 만 말했다되고 당신은 이러한 은유의를 일단 편한 방법.

일부 프라이머로 런 다운을 강조합니다.

• Keyframe animation
  이 대부분 패널이 Heres는 '열기'/ '폐쇄'

샘플 모습입니다 어느

Visual States을 조율하기 위해 일부

Triggers and Actions로에 의존 것입니다 이 물건들을 모으고있어.

<Grid x:Name="LayoutRoot"> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup x:Name="CentrePanelStates"> 
      <VisualStateGroup.Transitions> 
       <VisualTransition GeneratedDuration="00:00:00"> 
        <Storyboard> 
         <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="grid" Storyboard.TargetProperty="(FrameworkElement.Width)"> 
          <EasingDoubleKeyFrame KeyTime="00:00:00" Value="350"/> 
         </DoubleAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualTransition> 
       <VisualTransition GeneratedDuration="00:00:00.3000000" To="Open"> 
        <Storyboard> 
         <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid" Storyboard.TargetProperty="(FrameworkElement.Width)"> 
          <EasingDoubleKeyFrame KeyTime="00:00:00" Value="350"> 
           <EasingDoubleKeyFrame.EasingFunction> 
            <PowerEase EasingMode="EaseIn"/> 
           </EasingDoubleKeyFrame.EasingFunction> 
          </EasingDoubleKeyFrame> 
          <EasingDoubleKeyFrame KeyTime="00:00:00.6000000" Value="800"> 
           <EasingDoubleKeyFrame.EasingFunction> 
            <QuarticEase EasingMode="EaseInOut"/> 
           </EasingDoubleKeyFrame.EasingFunction> 
          </EasingDoubleKeyFrame> 
         </DoubleAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualTransition> 
       <VisualTransition From="Open" GeneratedDuration="00:00:00.3000000" To="Closed"> 
        <VisualTransition.GeneratedEasingFunction> 
         <BounceEase EasingMode="EaseOut"/> 
        </VisualTransition.GeneratedEasingFunction> 
        <Storyboard> 
         <DoubleAnimation Duration="00:00:00.6000000" Storyboard.TargetName="grid" Storyboard.TargetProperty="(FrameworkElement.Width)" BeginTime="00:00:00"> 
          <DoubleAnimation.EasingFunction> 
           <QuarticEase EasingMode="EaseInOut"/> 
          </DoubleAnimation.EasingFunction> 
         </DoubleAnimation> 
        </Storyboard> 
       </VisualTransition> 
      </VisualStateGroup.Transitions> 
      <VisualState x:Name="Open"> 
       <Storyboard> 
        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="grid" Storyboard.TargetProperty="(FrameworkElement.Width)"> 
         <EasingDoubleKeyFrame KeyTime="00:00:00" Value="800"/> 
        </DoubleAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualState> 
      <VisualState x:Name="Closed"/> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
    <Rectangle VerticalAlignment="Stretch" 
       HorizontalAlignment="Stretch" 
       Fill="#A1808080" /> 
    <Grid Name="CentrePanel" VerticalAlignment="Center" HorizontalAlignment="Center" Width="800" Height="500"> 
     <Border CornerRadius="3" 
       Background="LightGray" HorizontalAlignment="Left"> 
      <Grid x:Name="grid" Width="350" Margin="2"> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="*" /> 
        <RowDefinition Height="40" /> 
       </Grid.RowDefinitions> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="350" /> 
        <ColumnDefinition Width="*" /> 
       </Grid.ColumnDefinitions> 

       <Rectangle Fill="Beige" /> 
       <Rectangle Grid.Column="1" Fill="#FFDDDCF5" /> 

       <Button 
        Content="Close" 
        Width="79" 
        HorizontalAlignment="Left" Margin="94,130,0,0" Height="33" VerticalAlignment="Top" > 
        <i:Interaction.Triggers> 
         <i:EventTrigger EventName="Click"> 
          <ic:GoToStateAction StateName="Closed"/> 
         </i:EventTrigger> 
        </i:Interaction.Triggers> 
       </Button> 

       <Button Content="Open" Width="81" 
        HorizontalAlignment="Left" Margin="92,85,0,0" Height="32" VerticalAlignment="Top" > 
        <i:Interaction.Triggers> 
         <i:EventTrigger EventName="Click"> 
          <ic:GoToStateAction StateName="Open"/> 
         </i:EventTrigger> 
        </i:Interaction.Triggers> 
       </Button> 
      </Grid> 

     </Border> 
    </Grid>   


</Grid>