WPF 抽屉效果，纯前端代码

<Window.Resources>
       <!--往左-->
       <DrawingImage x:Key="GoLeft">
           <DrawingImage.Drawing>
               <DrawingGroup>
                   <GeometryDrawing Brush="#6F7679"  Geometry="M325.456896 862.27968" />
                   <GeometryDrawing Brush="#6F7679"  Geometry="M882.05824 862.27968" />
                   <GeometryDrawing Brush="#6F7679"  Geometry="M-6.144 885.609472" />
                   <GeometryDrawing Brush="#6F7679"  Geometry="M935.424 958.323712 938.068992 956.217344 938.068992 784.970752 666.698752 510.976 938.068992 236.988416 938.068992 66.264064 935.424 63.634432 491.774976 510.976Z" />
                   <GeometryDrawing Brush="#6F7679"  Geometry="M529.712128 958.323712 532.33664 956.217344 532.33664 784.970752 260.461568 510.976 532.33664 236.988416 532.33664 66.264064 529.712128 63.634432 86.064128 510.976Z" />
                   <GeometryDrawing Brush="#6F7679"  Geometry="M1029.73952 885.609472" />
               </DrawingGroup>
           </DrawingImage.Drawing>
       </DrawingImage>

       <!--往右-->
       <DrawingImage x:Key="GoRight">
           <DrawingImage.Drawing>
               <DrawingGroup>
                   <GeometryDrawing Brush="#6F7679"  Geometry="M325.456896 862.27968" />
                   <GeometryDrawing Brush="#6F7679"  Geometry="M882.05824 862.27968" />
                   <GeometryDrawing Brush="#6F7679"  Geometry="M-8.192 895.174656" />
                   <GeometryDrawing Brush="#6F7679"  Geometry="M494.500864 962.378752 940.04736 513.127424 494.500864 63.878144 491.855872 65.999872 491.855872 237.974528 764.896256 513.127424 491.855872 788.286464 491.855872 959.732736Z" />
                   <GeometryDrawing Brush="#6F7679"  Geometry="M86.524928 962.378752 532.600832 513.127424 86.524928 63.878144 84.40832 65.999872 84.40832 237.974528 356.921344 513.127424 84.40832 788.286464 84.40832 959.732736Z" />
                   <GeometryDrawing Brush="#6F7679"  Geometry="M1032.119296 895.174656" />
               </DrawingGroup>
           </DrawingImage.Drawing>
       </DrawingImage>
   </Window.Resources>
   <!--抽屉效果   从右往左-->
   <Grid>
       <Grid.ColumnDefinitions>
           <ColumnDefinition Width="*"/>
           <ColumnDefinition Width="auto"/>
       </Grid.ColumnDefinitions>
       <Grid Grid.Column="0">
           <!--测试使用 可移除-->
           <Border BorderBrush="Red" BorderThickness="1"/>
           <!--测试使用 可移除-->
           <Label Content="主界面" FontSize="80" HorizontalAlignment="Center" VerticalAlignment="Center"/>
       </Grid>
       <Grid Grid.Column="1" x:Name="grid" Width="0" HorizontalAlignment="Right" >
           <!--测试使用 可移除-->
           <Border BorderBrush="Blue" BorderThickness="1"/>
           <!--测试使用 可移除-->
           <Label Content="抽拉显示界面" FontSize="40" HorizontalAlignment="Center" VerticalAlignment="Center"/>
           <ToggleButton VerticalAlignment="Center" HorizontalAlignment="Left" Margin="-20,0,0,0" Background="{x:Null}">
               <ToggleButton.Template>
                   <ControlTemplate TargetType="{x:Type ToggleButton}">
                       <Border  HorizontalAlignment="Right" SnapsToDevicePixels="true" x:Name="border" >
                           <Image x:Name="image" Source="{StaticResource GoLeft}" Stretch="Fill" Width="15" Height="100" />
                       </Border>
                       <ControlTemplate.Triggers>
                           <Trigger Property="IsChecked" Value="True">
                               <Setter Property="Source" TargetName="image" Value="{StaticResource GoRight}"/>
                               <Setter Property="Margin" TargetName="border" Value="25,0,0,0"/>
                           </Trigger>
                       </ControlTemplate.Triggers>
                   </ControlTemplate>
               </ToggleButton.Template>
               <ToggleButton.Triggers>
                   <EventTrigger RoutedEvent="ToggleButton.Unchecked">
                       <BeginStoryboard>
                           <Storyboard>
                               <DoubleAnimation Storyboard.TargetName="grid"
                                              Storyboard.TargetProperty="Width"
                                              From="500"
                                              To="0"
                                              Duration="0:0:0.7">
                               </DoubleAnimation>
                           </Storyboard>
                       </BeginStoryboard>
                   </EventTrigger>
                   <EventTrigger RoutedEvent="ToggleButton.Checked">
                       <BeginStoryboard>
                           <Storyboard>
                               <DoubleAnimation Storyboard.TargetName="grid"
                                              Storyboard.TargetProperty="Width"
                                              From="0"
                                              To="450"
                                              Duration="0:0:0.7">
                               </DoubleAnimation>
                           </Storyboard>
                       </BeginStoryboard>
                   </EventTrigger>
               </ToggleButton.Triggers>
           </ToggleButton>
       </Grid>
   </Grid>