Question

我遇到了在可调整大小的窗口中制作菜单的问题。我制作了一个测试应用程序，以在下面演示我的问题：

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

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

代码：

    <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

我建议您更改To的{{1}}和From属性，以使其与窗口的高度保持最新。另外，在动画开始时，如果菜单当前不可见，则将菜单的ThicknessAnimation设置为Visibility，最后将菜单的Visible设置为Collapsed。

为此，我建议您添加一个包含菜单的 openness 状态的字段

private bool menuOpen = false;

并更改其中的一块滑板

<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中，可以根据情况调整情节提要，并运行动画。

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

使用菜单调整窗口大小

1 个答案: