主页 / 问题 / 756852
Accepted
TorSen
Asked:2020-12-11 22:43:33 +0000 UTC2020-12-11 22:43:33 +0000 UTC

路径动画。多边形。WPF

  • 772

有一个 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（设置 Storyboard.TargetProperty，因为它嵌套在 DockPanel 中，而 DockPanel 又嵌套在 StackPanel 中。）也许通过 {Binding Elementname}，但我不确定.

好吧，实际上在意识形态上尚不清楚如何移动它。您可以将它放在 Canvas 内并从左到右移动它，但也许有更简单的选择？也许您可以更改多边形的 DockPanel.Dock 属性，然后它会转移到文本框？

PS在xaml代码中，我去掉了所有不必要的绑定，sv-va等，以免干扰。

在此处输入图像描述

c#

1 个回答

  1. Best Answer

    嗯，其实没那么难。

    您只需要稍微更改布局，以便可以为某些属性设置动画。

    因此，我们进行以下布局：

    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

相关问题