WPF 滑动面板

Question

我希望创建一个和 Blend 菜单控件类似的控件：

如图所示，点击 Assets 后，会有一个菜单滑出，旁边的窗口也会缩小，为新的滑出菜单腾出位置。该菜单应一直保留在那里，直到执行任何操作将其收回（例如，我会在同一位置放置一个“取消”按钮(x)，与上图中的按钮相同）。

此外，它不应像在 Blend 中对工具箱进行的那样停靠在另一个位置。

我如何实现这个功能？

- Hardik

---

我在网上找到了一些关于可停靠面板的代码，但它们并不按照我想要的方式工作。同时，我想实现一些简单的功能来达到我的目的。 - Hardik

你可能想要看一下 MahApps Metro 及其 Flyout 控件。我认为它非常接近你所需要的功能。http://mahapps.com/MahApps.Metro/ - kenny

Answer 1

我创建了一个窗口，以向您展示如何实现您的目标。该窗口右上方有两个按钮，如果您单击其中任何一个按钮，则会扩展红色或黑色边框。

<Window x:Class="WpfApplicationUpper.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:my="clr-namespace:WpfApplicationUpper" Height="100" Width="200">

<Window.Resources>
    <ControlTemplate x:Key="VerticalExpander" TargetType="{x:Type Expander}">
        <Border Name="ContentBorder"
                Width="0">
            <ContentPresenter />
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsExpanded"
                     Value="True">
                <Setter TargetName="ContentBorder"
                        Property="Width"
                        Value="Auto" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</Window.Resources>
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="20" />
    </Grid.ColumnDefinitions>
    <StackPanel Grid.Column="1" Orientation="Vertical">
        <Button Name="B1" Content="T" Click="B1_Click"/>
        <Button Name="B2"
                Content="F" Click="B2_Click"/>
    </StackPanel>
    <DockPanel LastChildFill="True">
        <Grid DockPanel.Dock="Right">
            <Expander Name="MainExpander1"
                      Template="{StaticResource VerticalExpander}"
                      IsExpanded="False">
                <Border Background="Black"
                        Width="50">
                </Border>
            </Expander>
            <Expander Name="MainExpander2"
                      Template="{StaticResource VerticalExpander}"
                      IsExpanded="False"
                      DockPanel.Dock="Right">
                <Border Background="Red"
                        Width="50">
                </Border>
            </Expander>
        </Grid>
        <Border Name="NonSliding"
                Width="100"
                Height="50"
                Background="Green">

        </Border>
    </DockPanel>
</Grid>
</Window>

在代码后台：

    private void B1_Click(object sender, RoutedEventArgs e)
    {
            MainExpander1.IsExpanded = !MainExpander1.IsExpanded;
    }

    private void B2_Click(object sender, RoutedEventArgs e)
    {
        MainExpander2.IsExpanded = !MainExpander2.IsExpanded;
    }

- Ramin

---

MainExpander1.IsExpanded = !MainExpander1.IsExpanded; - vines