先来看看效果吧
简单的说下原理就是：抽拉界面的宽度进行动画效果
代码语言：javascript复制<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>喜欢的话可以点赞收藏赞助哦
