Проект Silverlight - Выдвижная панель - Как? - PullRequest
Новая
       6

Проект Silverlight - Выдвижная панель - Как?

4 голосов
/ 18 июня 2010

Я не знаю, что это за функция, но я хотел бы смоделировать ее в своем проекте Silverlight. Я разработчик C # и перехожу в Silverlight и Expression Studio (Blend) для более богатого UX. Допустим, у меня есть некоторые пользовательские элементы управления, и я хотел бы, чтобы они появлялись на экране (вставляются и выходили), как показано на следующем найденном мной сайте:

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

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

Я действительно хочу изучить этот материал, но не знаю, как называются эти «функции»? Например, как называются эти «экраны» в мире xaml? Кроме того, как называется «слайд-ин / аут» в мире xaml? Может кто-нибудь указать мне хорошую статью / технический документ?

Заранее спасибо за любой совет.

1 Ответ

12 голосов
/ 19 июня 2010

Во-первых, Silverlight / WPF действительно хорош в подобных вещах.Ребята из фреймворка отлично поработали над xaml, чтобы быть максимально гибким.

Признается, что прежде чем пытаться выполнить такие вещи, как ResourceDictionaries , Триггеры , Действия , Раскадровки, многое можно получить, Анимация (Ключевой кадр / Двойной ...), Шаблонирование, Стили , но как только вы поймете эти метафоры, их путь станет проще.

Вот пример того, как вы собираете все вместе. 

<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>
...