随笔- 206 文章- 1 评论- 48 阅读- 33万

WPF学习笔记-数据采集与监控项目02-主界面（页面切换，抽屉侧滑栏效果）

以下是视频学习笔记

https://www.bilibili.com/video/BV1gq4y1D76d?p=28

1，页面切换和命令绑定

效果

实现思路

2，弹出抽屉侧滑窗的效果

【2.1】效果

【2.2】侧滑栏代码

<!--抽屉侧滑栏，Background="#EE444444" 是1个半透明的效果-->
    <Border Background="#EE444444" Width="240" HorizontalAlignment="Right" CornerRadius="5">
    <!--添加阴影效果，这里不是很明显，Direction是阴影的方向，180是阴影在左边-->
    <Border.Effect>
            <DropShadowEffect Color="Gray" ShadowDepth="0" BlurRadius="5" Opacity="0.3" Direction="180"></DropShadowEffect>
        </Border.Effect>
    <!--位移变形实现抽屉侧滑，实际上是改变X的值-->
        <Border.RenderTransform>
            <TranslateTransform X="250" x:Name="tt"></TranslateTransform>
        </Border.RenderTransform>
        <Button Width="40" Height="40" VerticalAlignment="Top" HorizontalAlignment="Left" Name="btnCloseUserInfo"
               BorderThickness="0" Content="" FontFamily="../Assets/Iconfont/#iconfont"></Button>
    </Border>

【2.3】

<!--动画目标，把谁的什么属性在多少时间内从当前值变化到0，打开抽屉窗-->
<Storyboard x:Key="UserInfoStoryboard">
    <DoubleAnimation Duration="0:0:0.2" To="0"
                     Storyboard.TargetName="tt"
                     Storyboard.TargetProperty="X">
    </DoubleAnimation>
</Storyboard>
<!--动画目标，隐藏抽屉窗-->
<Storyboard x:Key="CloseUserInfoStoryboard">
    <DoubleAnimation Duration="0:0:0.2" 
                     Storyboard.TargetName="tt"
                     Storyboard.TargetProperty="X">
    </DoubleAnimation>
</Storyboard>

【2.4】

<Window.Triggers>
    <!--点击btnUserInfo触发UserInfoStoryboard打开抽屉窗-->
    <EventTrigger RoutedEvent="Button.Click" SourceName="btnUserInfo">
        <BeginStoryboard Storyboard="{StaticResource UserInfoStoryboard}"></BeginStoryboard>
    </EventTrigger>
    <EventTrigger RoutedEvent="Button.Click" SourceName="btnCloseUserInfo">
        <BeginStoryboard Storyboard="{StaticResource CloseUserInfoStoryboard}"></BeginStoryboard>
    </EventTrigger>
</Window.Triggers>