Question

动画非常简单！在空闲状态 - 突出显示矩形位于所选行之一。但是一旦选择了另一行，矩形的长度就会增加（几乎像弹性的一样），最后会变成另一行。

有关详细动画，请查看XAML控件库应用程序！

Answer 1

NavigationView新控件为应用中的顶级导航提供了可折叠的导航菜单，其中包含荧光笔矩形坐标动画。请注意，它仅适用于Windows 10 Fall Creators Update。您可以使用它直接实现高亮动画的汉堡菜单，如下所示。

<强>用法

<NavigationView Loaded="NavigationView_Loaded" Margin="0,12,0,0" Grid.Row="1" SelectionChanged="NavigationView_SelectionChanged"
x:Name="nvSample"
IsSettingsVisible="{Binding ElementName=settingsCheck,Path=IsChecked}" IsTabStop="False"
Header="This is header text.">
<NavigationView.MenuItems>
<NavigationViewItem Icon="Play" Content="Menu Item1" Tag="SamplePage1" />
<NavigationViewItemSeparator/>
<NavigationViewItem Icon="Save" Content="Menu Item2" Tag="SamplePage2" />
<NavigationViewItem Icon="Refresh" Content="Menu Item3" Tag="SamplePage3" />
</NavigationView.MenuItems>
<Frame x:Name="contentFrame">
</Frame>
</NavigationView>

有关更多信息，请参阅Navigation view官方文档。

我在SelectionIndicator stlye中找到了NavigationViewItem。您可以找到有关SelectionIndicator的详细信息。不幸的是，动画的实现并不是这种风格。

<Style x:Key="NavigationViewItemStyle1" TargetType="NavigationViewItem">
    <Setter Property="Foreground" Value="{ThemeResource NavigationViewItemForeground}" />
    <Setter Property="Background" Value="{ThemeResource NavigationViewItemBackground}" />
    <Setter Property="BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrush}" />
    <Setter Property="BorderThickness" Value="{StaticResource NavigationViewItemBorderThickness}" />
    <Setter Property="UseSystemFocusVisuals" Value="True" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="NavigationViewItem">
                <Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}" Height="40" Control.IsTemplateFocusTarget="True">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="PointerStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="PointerOver">
                                <VisualState.Setters>
                                    <Setter Target="LayoutRoot.(RevealBrush.State)" Value="PointerOver" />
                                    <Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundPointerOver}" />
                                    <Setter Target="RevealBorder.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushPointerOver}" />
                                    <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundPointerOver}" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <VisualState.Setters>
                                    <Setter Target="LayoutRoot.(RevealBrush.State)" Value="Pressed" />
                                    <Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundPressed}" />
                                    <Setter Target="RevealBorder.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushPressed}" />
                                    <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundPressed}" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Selected">
                                <VisualState.Setters>
                                    <Setter Target="LayoutRoot.Background" Value="Red" />
                                    <Setter Target="RevealBorder.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushSelected}" />
                                    <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundSelected}" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="PointerOverSelected">
                                <VisualState.Setters>
                                    <Setter Target="LayoutRoot.(RevealBrush.State)" Value="PointerOver" />
                                    <Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundSelectedPointerOver}" />
                                    <Setter Target="RevealBorder.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushSelectedPointerOver}" />
                                    <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundSelectedPointerOver}" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="PressedSelected">
                                <VisualState.Setters>
                                    <Setter Target="LayoutRoot.(RevealBrush.State)" Value="Pressed" />
                                    <Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundSelectedPressed}" />
                                    <Setter Target="RevealBorder.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushSelectedPressed}" />
                                    <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundSelectedPressed}" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="DisabledStates">
                            <VisualState x:Name="Enabled" />
                            <VisualState x:Name="Disabled">
                                <VisualState.Setters>
                                    <Setter Target="LayoutRoot.Opacity" Value="{ThemeResource ListViewItemDisabledThemeOpacity}" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="PaneStates">
                            <VisualState x:Name="NotClosedCompact" />
                            <VisualState x:Name="ClosedCompact">
                                <VisualState.Setters>
                                    <Setter Target="RevealBorder.HorizontalAlignment" Value="Left" />
                                    <Setter Target="RevealBorder.Width" Value="{Binding CompactPaneLength, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="IconStates">
                            <VisualState x:Name="IconVisible" />
                            <VisualState x:Name="IconCollapsed">
                                <VisualState.Setters>
                                    <Setter Target="IconBox.Visibility" Value="Collapsed" />
                                    <Setter Target="IconColumn.Width" Value="16" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid HorizontalAlignment="Left" VerticalAlignment="Center">
                        <Rectangle x:Name="SelectionIndicator" Fill="{ThemeResource NavigationViewSelectionIndicatorForeground}" Height="24" Opacity="0.0" Width="3" />
                    </Grid>
                    <Border x:Name="RevealBorder" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" />
                    <Grid HorizontalAlignment="Left" Height="40">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition x:Name="IconColumn" Width="48" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Viewbox x:Name="IconBox" Child="{TemplateBinding Icon}" Margin="16,12" />
                        <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<强>更新

对于SelectionIndicator动画，您可以将其拆分为多个部分Vertical translation，Height transformation Collapsed Scale和Visible。因此，您可以创建动画故事板来描述它们并使用不同的VisualState绑定故事板。

@Vijay Nirmal还提供了您可以参考的Continuity Tab灵感。

如何在XAML控件库应用程序中实现小矩形使用的动画？

1 个答案: