MaterialLibs

为UWP添加一些炫酷的特效

Documentation

RippleStateHelper

建议:
编写控件Style或Template，在LayoutRoot中使用m_helper:RippleHelper。

<Grid x:Name="LayoutRoot" 
           m_helper:RippleHelper.RippleDuration="0:0:0.8" 
           m_helper:RippleHelper.RippleColor="{ThemeResource SystemBaseLowColor}" 
           m_helper:RippleHelper.RippleHelperState="Pressed" 
           m_helper:RippleHelper.RippleRadius="30" 
/>

注意：

• 设置IsFillEnable后，RippleRadius属性将会失效。

ParticleCanvas

<m_control:ParticleCanvas
                LineColor="DarkGray"
                ParticleColor="Gray"
/>

注意：

• 使用Paused属性控制是否绘制。
• 使用IsPointerEnable属性控制粒子是否响应鼠标。

AnimationHamburgerIcon

<Button x:Name="HamburgerButton" Width="48" Height="48" Padding="0" Margin="10"
        HorizontalAlignment="Left" VerticalAlignment="Top"
        Background="Transparent" Foreground="Black" Click="HamburgerButton_Click">
    <Button.Resources>
        <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="Transparent" />
        <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="Transparent" />
        <SolidColorBrush x:Key="ButtonForegroundPointerOver" Color="Black" />
        <SolidColorBrush x:Key="ButtonForegroundPressed" Color="Black" />
    </Button.Resources>
    <Button.Content>
        <m_control:AnimationHamburgerIcon x:Name="anIcon" />
    </Button.Content>
</Button>

private void HamburgerButton_Click(object sender, RoutedEventArgs e)
{
    mainSplitView.IsPaneOpen = !mainSplitView.IsPaneOpen;
    anIcon.IsEnded = mainSplitView.IsPaneOpen;
}

CoreSocialistValuesHelper

<Grid m_helper:CoreSocialistValuesHelper.IsCoreSocialistValuesEnable="True" >
</Grid>

不多说不多说。

TipsRectangleHelper

• 对于ListView，GridView，ListBox，请使用TipsRectangleHelper.TipTargetName属性标记播放动画的元素，例如ListView的BorderBackground，ListBox的PressedBackground，或者自行添加到ListView的TipsRectangle、GridView的BorderBackground等自定义Tips；
• 其他控件请使用TipsRectangleHelper.State控制From到To，动画将从最后一个设置From的元素播放到第一个设置To的元素。
• 详细Style示例请见App.xaml

下面是一个例子： ListViewItemContainerStyle请使用C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP(SDK版本号)\Generic\generic.xaml中9943行左右的ListViewItemExpanded Style进行自定义。 首先使用默认的BorderBackground或者添加自定义的FocusPipe，并且在VisualTransition中设置Selected到Normal的过渡持续时间达到延时隐藏的效果（根据内部实现方法不同，某些控件不需要设置，如ListBox，请自行实验）：

<Style TargetType="ListViewItem" x:Key="ListViewItemWithTipsContainerStyle">
    ...
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListViewItem">
                <Grid x:Name="ContentBorder"
                ...
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition From="Selected" To="Normal" GeneratedDuration="0:0:0.001">
                                    <VisualTransition.Storyboard>
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusPipe" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0.001" Value="Collapsed" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualTransition.Storyboard>
                                </VisualTransition>
                            </VisualStateGroup.Transitions>
                            ...
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                <Grid x:Name="ContentPresenterGrid"
                    ...
                </Grid>
                <Rectangle x:Name="FocusPipe" HorizontalAlignment="Left" VerticalAlignment="Center" 
                            Width="6" Height="23" Visibility="Collapsed"
                            Fill="{ThemeResource SystemControlHighlightAccentBrush}" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

然后在ListView实例添加附加属性

<ListView ItemContainerStyle="{StaticResource ListViewItemWithTipsContainerStyle}" ItemsSource="{x:Bind Items}" 
          m_helper:TipsRectangleHelper.TipTargetName="FocusPipe">
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Content}" />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Pivot请在generic.xaml中搜索

<Style TargetType="PivotHeaderItem">

然后将相关段落复制到以下两个位置其中之一：

• Pivot控件的Resource中。
• Pivot所在的Page的Resource，或者更上层（例如App.xaml）中。

    <Style TargetType="PivotHeaderItem">
    ...
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="PivotHeaderItem">
                    <Grid x:Name="Grid" 
                    ...
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition From="Unselected" To="UnselectedLocked" GeneratedDuration="0:0:0.33" />
                                    <VisualTransition From="UnselectedLocked" To="Unselected" GeneratedDuration="0:0:0.33" />
                                    <VisualTransition From="Selected" To="Unselected" GeneratedDuration="0:0:0.001" >
                                        <VisualTransition.Storyboard>
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusPipe" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.001" Value="Collapsed" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualTransition.Storyboard>
                                    </VisualTransition>
                                </VisualStateGroup.Transitions>
                                ...
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                    ...
                                    </Storyboard>
                                    <VisualState.Setters>
                                        <Setter Target="FocusPipe.(m_helper:TipsRectangleHelper.State)" Value="To" />
                                    </VisualState.Setters>
                                </VisualState>
                                SelectedPointerOver、SelectedPressed同上。
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        ...
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

注意不要设置x:Key和x:Name，Style会自动生效。

详细的见Simple/App.xaml，模板中设定TipsRectangleHelper.Token，然后使用VisualState控制TipsRectangleHelper.State 注意：

• 尽量不要为不同控件设置相同的Token。
• 对于ListViewBaseItemContainerStyle等VisualStateGroup中包含Pressed状态的控件，一定要给Pressed的State设置为To，不然动画不会生效。
• 一定要在VisualTransition中，处理Selected到Unselected和Selected到Normal的转换时间，让原Tips晚一段时间消失，动画才能正确播放。

VisualHelper

• VisualHelper.Opacity(Float)：设置Visual透明度。
• VisualHelper.RotationAngle(Float)：设置Visual旋转的弧度值。
• VisualHelper.RotationAngleInDegrees(Float)：设置Visual旋转角度值。
• VisualHelper.RotationAxis(Vector3)：设置Visual在三维坐标系中的旋转角度值。
• VisualHelper.Size(Vector2)：设置Visual的大小。不一定生效。
• VisualHelper.Offset(Vector3)：设置Visual相对坐标系的位移，可能会影响到布局。
• VisualHelper.Scale(Vector3)：设置Visual的缩放，缩放中心和AnchorPoint与CenterPoint有关。
• VisualHelper.Clip(Vector4(Left,Top,Right,Bottom))：设置Visual的Clip，分别是"左,上,右,下"，含义是从边到中心收缩的距离，比如"2,2,2,2"将Visual四个边都裁剪2像素，设置为"0,0,0,0"，Visual内的子元素超出Visual范围将不可见。设置为null将取消Clip。
• VisualHelper.AnchorPoint(Vector2)：设置Visual的锚点，左上角为"0,0"，右下角为"1,1"，可以设置缩放、旋转的基准，但是可能影响布局，推荐使用VisualHelper.CenterPoint。
• 设置VisualHelper.CenterPoint(Vector3)将设置Visual的缩放和旋转基准点，例如设置VisualHelper.CenterPoint="0,50"，缩放将以Visual所在坐标系的(0,50)为中心进行缩放。
• 设置VisualHelper.CenterPoint="Bind"，会将CenterPointer绑定到自身的中心上，也就是Vector3(this.Target.Size.X / 2 ,this.Target.Size.Y / 2 ,0f);
• 设置VisualHelper.IsPerspectiveEnable="True"，给容器添加景深效果。

<Border m_helper:VisualHelper.IsPerspectiveEnable="True">
    <Rectangle Width="200" Height="100" m_Helper:VisualHelper.RotationAngleInDegrees="30" VisualHelper.RotationAxis="1,0,0" />
</Border>

ImplicitAnimations

• ImplicitHelper.Target响应系统Tiggers，例如Target标记为Offset的动画会响应位置改变，标记为Opacity的动画会响应透明度的改变；其他例如标记为Scale，Rotation之类的，需要使用VisualHelper设置对应的Visual属性。
• ImplicitHelper.Duration设置动画播放时常。

<Image Source="{Binding Image}" Stretch="Uniform" 
    PointerEntered="ShowHideButton_PointerEntered" PointerExited="ShowHideButton_PointerExited"
    m_helper:VisualHelper.CenterPoint="Bind" m_helper:ImplicitHelper.Targets="Offset,Scale" m_helper:ImplicitHelper.Duration="0:0:0.33" />

private void ShowHideButton_PointerEntered(object sender, PointerRoutedEventArgs e)
{
if (sender is UIElement s)
    VisualHelper.SetScale(s, "1.15,1.15,1.15");
}

private void ShowHideButton_PointerExited(object sender, PointerRoutedEventArgs e)
{
if (sender is UIElement s)
    VisualHelper.SetScale(s, "1,1,1");
}

<Style TargetType="GridViewItem" x:Key="GridViewItemWithImplicitAnimationContainerStyle">
    <Setter Property="m_helper:ImplicitHelper.Targets" Value="Offset" />
    <Setter Property="m_helper:ImplicitHelper.Duration" Value="0:0:0.3" />
</Style>

CustomTransition

• 给UIElement的添加、删除、显示与隐藏添加动画。
• 内置了Offset、Scale、Flip三组Transition，并且提供了ShowTransitionBase和HideTransitionBase，允许用户创建自定义的Transition。
• 使用ScaleShowTransition/ScaleHideTransition的UIElement建议设置m_helper:VisualHelper.CenterPoint="Bind"以启用中心缩放。
• 使用FlipShowTransition/FlipHideTransition的UIElement建议设置VisualHelper.IsPerspectiveEnable="True"以启用景深效果。

<StackPanel m_helper:VisualHelper.IsPerspectiveEnable="True">
    <Rectangle x:Name="rect1" Height="100" Width="100" Fill="Red" m_helper:VisualHelper.CenterPoint="Bind" >
        <m_helper:TransitionsHelper.Show>
            <m_trans:FlipShowTransition From="Left" />
        </m_helper:TransitionsHelper.Show>
        <m_helper:TransitionsHelper.Hide>
            <m_trans:ScaleHideTransition ScaleX="1.5" ScaleY="1.5" />
        </m_helper:TransitionsHelper.Hide>
    </Rectangle>
    <Rectangle x:Name="rect2" Height="100" Width="100" Fill="Green" m_helper:VisualHelper.CenterPoint="Bind">
        <m_helper:TransitionsHelper.Show>
            <m_trans:FlipShowTransition From="Right" />
        </m_helper:TransitionsHelper.Show>
        <m_helper:TransitionsHelper.Hide>
            <m_trans:OffsetHideTransition OffsetY="200" />
        </m_helper:TransitionsHelper.Hide>
    </Rectangle>
</StackPanel>

• 注意：某些情况下（例如StackPanel中），Transition不会播放。
• 同ConnectedAnimation类似，建议设置NavigationTransitionInfo为SuppressNavigationTransitionInfo。
• 对于在VisualState中修改布局的UIElement，使用CustomTransition可能导致布局异常。

CardView

• 尽可能使CardView占满当前布局根，然后使用Padding调整距顶部位置。
• 使用IsOpen而不是Visibility控制是否显示。

<m_control:CardView x:Name="Card" Header="I am a Card!" Padding="24,50,24,24" MaxWidth="500" IsOpen="True">
    <m_control:CardView.HeaderTemplate>
        <DataTemplate>
            <Grid Padding="12,5" >
                <TextBlock Text="{Binding }" FontSize="20" FontWeight="SemiBold" IsColorFontEnabled="True"/>
            </Grid>
        </DataTemplate>
    </m_control:CardView.HeaderTemplate>
    <ListView ItemsSource="{x:Bind items}" ScrollViewer.IsVerticalScrollChainingEnabled="True">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Height="50" >
                    <TextBlock Text="{Binding }" VerticalAlignment="Center" />
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</m_control:CardView>

DraggedBadge

<m_control:DraggedBadge HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10,0" Content="{Binding Count}" DragCompleted="_DragCompleted" />