Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > WPF и Silverlight > [Silverlight 2.0] Storyboard


Автор: Mymik 22.9.2008, 19:38
Никак не могу разобраться как подвесить анимацию с помощью этой Storyboard. 
Расскажите, покажите на пальцах, плиззз.

Конкретно интересует ListBox и подвесить анимацию на Selected к нему.  Пускай даже самую простую -- изменить Background.
Как это сделать? расскажите! 

Автор: Mymik 23.9.2008, 14:37
Посколько никто не ответил. То как обычно приходится отвечать самому себе smile
ВотЬ собственно чего я нарыл. В silverlight 2.0 обычное использование StoryBoard не вызывается автоматически. Как я понял, это все из-за того что появился VisualStateManager. 
Вот собственно с помощью него мы и будем создавать наш МегаРульный контрол поддерживающий анимацию smile
В Page.xaml мы как обычно имеем просто
Код

<ListBox ItemsSource="{Binding}" Style="{StaticResource MyListBox}" ItemContainerStyle="{StaticResource DataListBoxItem}">
</ListBox>

А вот в App.xaml мы уже имеем нечно более крутое smile И для того чтобы это все работало, нам надо подключить namespace в xaml (в самой сборки он по умолчанию уже есть, так что лишнего трафика не стоит бояться). 
Код

xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"   
          
А вот и кусочек App.xaml
Код

<!-- Банально убираем всякие бордюры и всякую дрянь от ListBox'а -->
<Style x:Name="DataListBox" TargetType="ListBox">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBox">
                <Grid Width="{TemplateBinding Width}">
                    <ItemsPresenter/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<!-- А вот тут начинается самое интересное :) тут начинается написание темплейта для ListBoxItem -->
<Style x:Key="DataListBoxItem" TargetType="ListBoxItem">
    <Setter Property="BorderThickness" Value="2" />
    <Setter Property="Padding" Value="5,5,0,2" />
    <Setter Property="Margin" Value="0,3,0,0"/>
    <Setter Property="Template" >
        <Setter.Value>
            <ControlTemplate TargetType="ListBoxItem">
                <Grid>
                    <!-- Вот эта строчка подчеркивается студией и пишется что нету VisualStateGroups, но вы не верьте! все прекрасно компилируется -->
                    <vsm:VisualStateManager.VisualStateGroups>
                        <!-- Как я понял, состояния тут делятся на группы, какие есть состояния и группы надо смотреть в MSDN для каждого контрола отдельно -->
                        <vsm:VisualStateGroup x:Name="SelectionStates">
                            <!-- А вот и наш обработчик состояния -->
                            <vsm:VisualState x:Name="Selected">
                                <Storyboard>
                                    <!-- Вот тут идут всякие методы анимации. Вообще я так и не нашел полный список этих вот событий. Думаю он есть только в Blend студии или кто там занимается анимацией? я просто руками все это писал. Кстати.  Storyboard.TargetName="iSelected" ищит контрол по Name по всем нижним уровням контрола. Но из C# я так и не нашел метод, который бы находил контрол по имени. Плохо они как-то сделали :( -->
                                    <ColorAnimation Storyboard.TargetName="DataListBorder" Storyboard.TargetProperty="Color" Duration="0" To="#5c5c5c" />
                                    <ColorAnimation Storyboard.TargetName="DataListBackground" Storyboard.TargetProperty="Color" Duration="0" To="#343537" />
                                </Storyboard>
                            </vsm:VisualState>
<!-- А вот и наше состояние когда мы не определены -->
                            <vsm:VisualState x:Name="Unselected">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="DataListBorder" Storyboard.TargetProperty="Color" Duration="0" To="#454547" />
                                    <ColorAnimation Storyboard.TargetName="DataListBackground" Storyboard.TargetProperty="Color" Duration="0" To="#393a3c" />
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>
                    <!-- Ну тут ничего интересного, всего ли забираем стили -->
                    <Border BorderThickness="{TemplateBinding BorderThickness}" 
                    
                    Padding="{TemplateBinding Padding}" 
                    Margin="{TemplateBinding Margin}"
                    Width="468"
                    >
                    <Border.BorderBrush>
                        <!-- А вот и наши Property который должны меняться. а значение x:Name и есть значение которое надо подставляться в  Storyboard.TargetName="DataListBorder" -->
                        <SolidColorBrush x:Name="DataListBorder" Color="#454547" Opacity="1" />
                    </Border.BorderBrush>
                    <Border.Background>
                        <SolidColorBrush x:Name="DataListBackground" Color="#393a3c" Opacity="1" />
                    </Border.Background>
                        <ContentPresenter>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="348" />
                                <ColumnDefinition Width="68" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="26" />
                            </Grid.RowDefinitions>

                            <StackPanel Grid.Column="0" Grid.Row="0" VerticalAlignment="Center">
                                <TextBlock Style="{StaticResource SimpleText}" Text="{Binding Name}" />
                            </StackPanel>
                            <StackPanel Grid.Column="1" Grid.Row="0" VerticalAlignment="Center">
                                <TextBlock Style="{StaticResource LogoPreview}" Text="Details" />
                        </StackPanel>
                        </Grid>
                    </ContentPresenter>
                </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>


собственно вот и все... и нет тут ничего такого военного smile просто разбираться в этом когда тебе надо сдавать по этому уже работающий проект это smile . А так вообще забавная штука, но не скажу что хорошая. Надеюсь что в полной версии Silverlight 2.0 будет на порядок больше контролов. А возможности уже существующих контролов доведут до ума smile.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)