1

Имеется 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 коде убрал все лишние привязки, св-ва и тд, чтобы не мешались.

введите сюда описание изображения

7
  • А можно картинку? А то непонятно, что вы хотите перемещать и куда.
    – VladD
    11 дек 2017 в 15:56
  • Можно. Обновил пост.
    – TorSen
    11 дек 2017 в 15:59
  • Ага, и нужно, чтобы звёздочка ехала влево до текста?
    – VladD
    11 дек 2017 в 16:06
  • Да, именно. До верхнего текста.
    – TorSen
    11 дек 2017 в 16:07
  • совсем нету вариантов? :(
    – TorSen
    11 дек 2017 в 18:09

1 ответ 1

2

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

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

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

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

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

Пишем!

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

Результат:

две звезды две светлых повести

2
  • Спасибо большое. Буду разбираться
    – TorSen
    11 дек 2017 в 21:31
  • @TorSen: Пожалуйста! Рад, если помогло!
    – VladD
    11 дек 2017 в 22:11

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.