■ ListBox 엘리먼트 : 선택한 Icon 항목을 크게 만드는 애니메이션 설정하기

----------------------------------------------------------------------------------------------------

<ListBox HorizontalAlignment="Center">

    <ListBox.Resources>

        <SolidColorBrush

            x:Key="{x:Static SystemColors.HighlightBrushKey}"

            Color="Transparent" />

        <Style TargetType="Image">

            <Setter Property="Width" Value="45"    />

            <Setter Property="Height" Value="45"   />

            <Setter Property="Margin" Value="0"    />

            <Setter Property="Cursor" Value="Hand" />

        </Style>

    </ListBox.Resources>

    <ListBox.Template>

        <ControlTemplate>

            <StackPanel

                Orientation="Horizontal"

                IsItemsHost="True" />

        </ControlTemplate>

    </ListBox.Template>

    <ListBox.ItemContainerStyle>

        <Style>

            <Setter

                Property="ListBoxItem.VerticalAlignment"

                Value="Bottom" />

            <Style.Triggers>

                <EventTrigger RoutedEvent="ListBoxItem.MouseEnter">

                    <BeginStoryboard>

                        <Storyboard>

                            <DoubleAnimation

                                Storyboard.TargetProperty="Content.Height"

                                Duration="0:0:0.3"

                                To="70" />

                            <DoubleAnimation

                                Storyboard.TargetProperty="Content.Width"

                                Duration="0:0:0.3"

                                To="70" />

                        </Storyboard>

                    </BeginStoryboard>

                </EventTrigger>

                <EventTrigger RoutedEvent="ListBoxItem.MouseLeave">

                    <BeginStoryboard HandoffBehavior="Compose">

                        <Storyboard >

                            <DoubleAnimation

                                Storyboard.TargetProperty="Content.Height"

                                Duration="0:0:0.3"

                                To="45" />

                            <DoubleAnimation

                                Storyboard.TargetProperty="Content.Width"

                                Duration="0:0:0.3"

                                To="45" />

                        </Storyboard>

                    </BeginStoryboard>

                </EventTrigger>

                <EventTrigger RoutedEvent="ListBoxItem.MouseUp">

                    <BeginStoryboard>

                        <Storyboard

                            Storyboard.TargetProperty="Content.Margin"

                            AutoReverse="True"

                            RepeatBehavior="2x">

                                <ThicknessAnimation

                                    Duration="0:0:0.2"

                                    To="0,0,0,10" />

                        </Storyboard>

                    </BeginStoryboard>

                </EventTrigger>

            </Style.Triggers>

        </Style>

    </ListBox.ItemContainerStyle>

    <Image Source="Fish.ico"         />

    <Image Source="apps.ico"         />

    <Image Source="Aquisition Al.ico"/>

    <Image Source="Butterflying.ico" />

    <Image Source="computer.ico"     />

    <Image Source="Duck.ico"         />

    <Image Source="empty.ico"        />

    <Image Source="favorites.ico"    />

    <Image Source="Firefox.ico"      />

    <Image Source="Font Manager.ico" />

    <Image Source="Hank.ico"         />

    <Image Source="Mozilla.ico"      />

</ListBox>

----------------------------------------------------------------------------------------------------

Posted by 사용자 icodebroker

댓글을 달아 주세요