使用菜单调整大小 window

Question

我在 re-sizeable window 中制作菜单时遇到了问题。我制作了一个测试应用程序来演示我的问题：

我正在制作一个设置菜单动画，该菜单通过更改网格边距从顶部向下过渡。当通过更改边距将设置菜单推到 window 上方时，如果我调整 window 高度，我可以看到隐藏菜单而不是看到主屏幕（绿色）扩展。

我如何更改它以便主网格（绿色）扩展而不是能够看到隐藏的设置菜单？

代码：

    <Window x:Class="ResizeTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:ResizeTest"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800"
    MinWidth="800"
    MinHeight="450"
    MaxWidth="800"
    MaxHeight="900">

    <Window.Resources>
    <Storyboard x:Key="ShowRightMenu">
        <ThicknessAnimation Storyboard.TargetProperty="Margin"
                            Storyboard.TargetName="gridMenu"
                            From="0, -450, 0, 450"
                            To="0"
                            DecelerationRatio="0.9"
                            Duration="0:0:1" />
    </Storyboard>

    <Storyboard x:Key="HideRightMenu">
        <ThicknessAnimation Storyboard.TargetProperty="Margin"
                            Storyboard.TargetName="gridMenu"
                            From="0"
                            To="0, -450, 0, 450"
                            DecelerationRatio="0.9"
                            Duration="0:0:1" />
    </Storyboard>
    </Window.Resources>

    <Grid>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Grid Background="Green">
    </Grid>
    <Grid x:Name="gridMenu" Background="Blue"
              Margin="0, -450, 0, 450"
              Grid.Column="1">

        <TextBlock Text="Well hello there!" Foreground="White" FontSize="60" 
    VerticalAlignment="Center" HorizontalAlignment="Center" />
    </Grid>

    <Button HorizontalAlignment="Left" Width="100" Height="50" Margin="10" Content="Clicky Me" 
    Click="Button_Click" />
    </Grid>
    </Window>

Answer 1

我建议您更改 ThicknessAnimation 的 To 和 From 属性，使其与 window 的高度保持同步.此外，在动画开始时，您将菜单的 Visibility 设置为 Visible，如果菜单此时不可见，则在结束时设置为 Collapsed。

为此，我建议您添加一个字段来保存菜单的 openness 状态

private bool menuOpen = false;

并将其中一个 stoyboards 改成这个

<Storyboard x:Key="MenuStoryboard">
    <ThicknessAnimation Storyboard.TargetProperty="Margin"
                    Storyboard.TargetName="gridMenu"
                    DecelerationRatio="0.9"
                    Duration="0:0:1" />
</Storyboard>

并删除另一个。

您还应该删除 Grid 的边距并添加 Collapsed 作为默认值 Visibility

<Grid x:Name="gridMenu" Background="Blue"
      Visibility="Collapsed"
      Grid.Column="1">
    ...
</Grid>

然后在 Click-Event-Handler 中，您可以根据情况调整 Storyboard 和运行动画。

private void Button_Click(object sender, RoutedEventArgs e)
{
    var storyBoard = this.FindResource("ShowRightMenu") as Storyboard;
    var animation = storyBoard.Children[0] as ThicknessAnimation;
    if (menuOpen)
    {
        animation.To = new Thickness(0, -this.Height, 0, Height);
        animation.From = new Thickness(0);
    }
    else
    {
        animation.From = new Thickness(0, -this.Height, 0, this.Height);
        animation.To = new Thickness(0);
    }
    this.gridMenu.Visibility = Visibility.Visible;
    storyBoard.Begin();

    void animationCompleated(object sender2, EventArgs e2)
    {
        if (!menuOpen)
        {
            this.gridMenu.Visibility = Visibility.Collapsed;
        }

        storyBoard.Completed -= animationCompleated;
    }

    storyBoard.Completed += animationCompleated;


    menuOpen = !menuOpen;
}

使用菜单调整大小 window

Resizing window with menu

c#

wpf

animation

side-menu