Skip to content

cnbluefire/MaterialLibs

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 

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

About

为UWP添加一些炫酷的特效。

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages