(精华)2020年02月06日 WPF课程管理系统项目实战(平台布局-抽屉侧滑栏）

相关代码

<!--抽屉侧滑栏-->
 <Border Background="#EE444444" Width="240" HorizontalAlignment="Right" 
         CornerRadius="0,5,5,0">
     <Border.Effect>
         <DropShadowEffect Color="Gray" ShadowDepth="0" BlurRadius="5" Opacity="0.3" Direction="180"/>
     </Border.Effect>
     <Border.RenderTransform>
         <TranslateTransform X="250" x:Name="tt"/>
     </Border.RenderTransform>
     <Grid>
         <Grid.RowDefinitions>
             <RowDefinition Height="230"/>
             <RowDefinition/>
         </Grid.RowDefinitions>
         <Button Width="40" Height="40" BorderThickness="0" Content="&#xe653;"
             FontFamily="../Assets/Fonts/#iconfont"
             VerticalAlignment="Top" HorizontalAlignment="Left"
             Name="btnCloseUserInfo"/>

         <Border Width="80" Height="80" CornerRadius="40">
             <Border.Effect>
                 <DropShadowEffect Color="White" ShadowDepth="0" BlurRadius="5" Opacity="0.3" Direction="0"/>
             </Border.Effect>
             <Border.Background>
                 <ImageBrush ImageSource="{Binding UserInfo.Avatar}"/>
             </Border.Background>
         </Border>

         <Grid Grid.Row="1" Margin="20,0">
             <Grid.Resources>
                 <Style TargetType="RadioButton">
                     <Setter Property="Foreground" Value="White"/>
                     <Setter Property="FontSize" Value="14"/>
                 </Style>
                 <Style TargetType="TextBlock">
                     <Setter Property="Foreground" Value="White"/>
                     <Setter Property="FontSize" Value="14"/>
                 </Style>
             </Grid.Resources>
             <Grid.RowDefinitions>
                 <RowDefinition Height="40"/>
                 <RowDefinition Height="40"/>
                 <RowDefinition Height="40"/>
                 <RowDefinition Height="40"/>
             </Grid.RowDefinitions>
             <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                 <TextBlock Text="用户名"/>
                 <TextBlock Text="{Binding UserInfo.UserName}" Margin="10,0,0,0"/>
             </StackPanel>
             <StackPanel Orientation="Horizontal" Grid.Row="1" VerticalAlignment="Center">
                 <TextBlock Text="性   别"/>
                 <RadioButton Content="男" Margin="10,0,0,0" Template="{StaticResource GenderRadioButtonTemplate}"
                              IsChecked="{Binding UserInfo.Gender,Converter={StaticResource genderConverter},ConverterParameter=1}"/>
                 <RadioButton Content="女" Margin="10,0,0,0" Template="{StaticResource GenderRadioButtonTemplate}" 
                              IsChecked="{Binding UserInfo.Gender,Converter={StaticResource genderConverter},ConverterParameter=2}"/>
             </StackPanel>
         </Grid>
     </Grid>
 </Border>

抽屉侧滑栏实际触发

<Window.Triggers>
        <EventTrigger RoutedEvent="Button.Click" SourceName="btnUsreInfo">
            <BeginStoryboard Storyboard="{StaticResource UserInfoStoryboard}"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="Button.Click" SourceName="btnCloseUserInfo">
            <BeginStoryboard Storyboard="{StaticResource CloseUserInfoStoryboard}"/>
        </EventTrigger>
    </Window.Triggers>

<Storyboard x:Key="UserInfoStoryboard">
    <DoubleAnimation Duration="0:0:0.2" To="0"
                     Storyboard.TargetName="tt"
                     Storyboard.TargetProperty="X"/>
</Storyboard>
<Storyboard x:Key="CloseUserInfoStoryboard">
    <DoubleAnimation Duration="0:0:0.1"
                     Storyboard.TargetName="tt"
                     Storyboard.TargetProperty="X"/>
</Storyboard>