使用菜单调整窗口大小

Posted 2023-03-22

【中文标题】使用菜单调整窗口大小

【英文标题】：Resizing window with menu

【发布时间】：2019-09-25 13:52:20

【问题描述】：

我遇到了在可调整大小的窗口中制作菜单的问题。我制作了一个测试应用程序来证明我的问题如下：

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

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

代码：

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

【问题讨论】：

您应该在动画结束时将Grid 的Visibility 设置为折叠或隐藏。看看this 的回答，你会怎么做。

如果你想让窗口可以调整大小，你不应该使用绝对边距

这并不能解决我的问题。如果我将可见性设置为隐藏，当我启动动画时，设置窗口不会从窗口顶部开始动画

@Ackdari 如果我不使用绝对边距，如何在窗口视图内外设置设置菜单的动画？

我没有说你应该在开始时将其设置为collapsed，但在结束时

【参考方案1】：

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

为此，我建议您添加一个保持菜单开放性状态的字段

private bool menuOpen = false;

并将其中一个 stroyboard 更改为此

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

【讨论】：

感谢朋友的回答。我只需要弄清楚如何使用更新的窗口尺寸设置 To 和 From