Анимация пути. Polygon. WPF

265

12 декабря 2017, 16:43

Имеется ListView с переопределенным ItemTemplate.

     <ListView.ItemTemplate>
            <DataTemplate>
                <Border Background="LightGray" Padding="10">
                    <StackPanel>
                        <DockPanel LastChildFill="False">
                            <TextBlock DockPanel.Dock="Left"/>
                          <Polygon DockPanel.Dock="Right"
                                 Fill="Yellow" Stroke="Black" 
                                 Width="20" Height="20" 
                                 StrokeThickness="1.5" Stretch="Fill"
                                 Points="9,2 11,7 17,7 12,10 14,15 9,12 4,15 6,10 1,7 7,7"
                                 Visibility="Hidden" Name="Cap"/>
                        </DockPanel>
                        <TextBlock DockPanel.Dock="Bottom"/>
                    </StackPanel>
                </Border>
                <DataTemplate.Triggers>
                    <DataTrigger Binding="{Binding IsCaptain}" Value="true">
                        <Setter Property="Visibility" Value="Visible" TargetName="Cap" />
                    </DataTrigger>
                </DataTemplate.Triggers>
            </DataTemplate>
        </ListView.ItemTemplate>

Необходимо используя анимацию пути передвинуть Polygon из одного конца, в другой, пока не встретится текст. (или оставить на месте)

Непонятно как обратится к Polygon(чтобы задать Storyboard.TargetProperty, учитывая что он вложен в DockPanel, который в свою очередь вложен в StackPanel.) Возможно можно через {Binding Elementname}, но я не уверен.

Ну и собственно идейно не понятно каким образом его перемещать. Можно засунуть внутри Canvas и от Left к Right перемещать, но может есть варианты проще? Возможно, можно менять св-во DockPanel.Dock у Polygon и тогда он как раз сместится до TextBox?

P.S. В xaml коде убрал все лишние привязки, св-ва и тд, чтобы не мешались.

Answer 1

Ну на самом деле всё не так уж и сложно.

Просто нужно немного поменять лэйаут, чтобы было возможно санимировать какое-нибудь свойство.

Итак, делаем следующий лэйаут:

Текст, выровненный влево.
Пустая распорка шириной в ширину звёздочки, выровненная вправо.
Оставшуюся область занимает Canvas
Внутри канваса помещается наша звёздочка, у которой левая граница установлена на ширину канваса. Это значит, что звёздочка будет свисать на место распорки.

Теперь можно анимировать левую границу канваса от его значения до нуля.

Пишем!

<ListView.ItemTemplate>
    <DataTemplate>
        <Border Background="LightGray" Padding="10">
            <StackPanel>
                <DockPanel LastChildFill="True">
                    <TextBlock DockPanel.Dock="Left" Text="{Binding Name}"
                               Margin="0,0,10,0"/>
                    <Grid Width="20" DockPanel.Dock="Right"/>
                    <Canvas Visibility="Hidden" Name="Cap">
                        <Polygon Fill="Yellow" Stroke="Black" 
                                 Width="20" Height="20" 
                                 StrokeThickness="1.5" Stretch="Fill"
                                 Points="9,2 11,7 17,7 12,10 14,15 9,12 4,15 6,10 1,7 7,7">
                            <Polygon.Style>
                                <Style TargetType="Polygon">
                                    <Setter Property="Canvas.Left"
                                            Value="{Binding ActualWidth, ElementName=Cap}"/>
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding IsSelected,
                                            RelativeSource={RelativeSource FindAncestor, AncestorType=ListViewItem}}">
                                            <DataTrigger.Value>
                                                <sys:Boolean>True</sys:Boolean>
                                            </DataTrigger.Value>
                                            <DataTrigger.EnterActions>
                                                <BeginStoryboard>
                                                    <Storyboard>
                                                        <DoubleAnimation To="0"
                                                             Storyboard.TargetProperty="(Canvas.Left)"
                                                             Duration="0:0:0.3"/>
                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </DataTrigger.EnterActions>
                                            <DataTrigger.ExitActions>
                                                <BeginStoryboard>
                                                    <Storyboard>
                                                        <DoubleAnimation
                                                            Storyboard.TargetProperty="(Canvas.Left)"
                                                            Duration="0:0:0.3"/>
                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </DataTrigger.ExitActions>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </Polygon.Style>
                        </Polygon>
                    </Canvas>
                </DockPanel>
                <TextBlock DockPanel.Dock="Bottom" Text="{Binding Team}"/>
            </StackPanel>
        </Border>
        <DataTemplate.Triggers>
            <DataTrigger Binding="{Binding IsCaptain}" Value="true">
                <Setter Property="Visibility" Value="Visible" TargetName="Cap" />
            </DataTrigger>
        </DataTemplate.Triggers>
    </DataTemplate>
</ListView.ItemTemplate>

Результат: