WPF 滑动面板

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/13989655/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-13 06:43:34  来源:igfitidea点击:

WPF Sliding Panel

wpfwpf-controls

提问by Hardik

Hello I have just started work with WPF. and I want to make a control which should be like Blend menu control. Let me tell my needs in detail.

您好,我刚刚开始使用 WPF。我想制作一个应该像 Blend 菜单控件一样的控件。详细说说我的需求吧。

enter image description here

在此处输入图片说明

As in Image, Clicking on Assets, A menu would slide out and menu other window side to it would shrink and make space for new sliding menu to reside there. The menu should reside there until any action is performed to slide it back in. (Like I would put a button at same place Cancel button(x) in image ).

就像在图像中一样,单击资产,菜单会滑出,菜单其他窗口侧会缩小并为新的滑动菜单留出空间。菜单应该驻留在那里,直到执行任何操作将其滑回。(就像我将按钮放在图像中的 Cancel button(x) 的同一位置)。

Also I dont need to dock panel to other place as we do with Toolbox with VS on Blend.

此外,我不需要像我们在 Blend 上使用带有 VS 的 Toolbox 那样将面板停靠到其他地方。

How can I achieve this ??

我怎样才能做到这一点?

Any help will be useful.

任何帮助都会有用。

Thanks in Anticipation.

感谢期待。

回答by Ramin

I created a window to show you how you can achieve your goal. It has 2 buttons on the right-above side of the window, and if you click on each of them, a red or a black border will be expanded.

我创建了一个窗口来向您展示如何实现目标。它在窗口的右上方有 2 个按钮,如果单击每个按钮,将扩展红色或黑色边框。

<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>

and in code behind:

并在后面的代码中:

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

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