单击按钮显示网格 [英] displaying grid on button click

问题描述

我有一个WPF窗口，单击运行按钮，该窗口将扩大尺寸并显示我的输出网格.到目前为止，我的代码是:

Hi,
I have a WPF window, which on the click of a run button, should expand in size and display my output grid. So far my code has been:

<Window x:Class="WpfApplication4.Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="Advanced Query" Height="Auto" Width="Auto" SizeToContent="WidthAndHeight" Loaded="Window_Loaded" OpacityMask="Gray" Background="GhostWhite" >
    <Grid Height="392" Width="Auto">
        <Grid.RowDefinitions>
            <RowDefinition Height="361*" />
            <RowDefinition Height="31*" />
        </Grid.RowDefinitions>
        <ListBox Margin="98,41,0,104" Name="listBox1"  SelectionMode="Single" HorizontalAlignment="Left" Width="176">
        </ListBox >
        <TextBox Height="23" Margin="0,0,92,64" Name="textBox1" LostFocus="textBox1_LostFocus"  VerticalAlignment="Bottom" TextChanged="textBox1_TextChanged" HorizontalAlignment="Right" Width="176">

        </TextBox>
        <Button Height="23" Margin="0,0,93,30" Name="button1" VerticalAlignment="Bottom" Click="button1_Click" HorizontalAlignment="Right" Width="77">Run</Button>
        <ListBox HorizontalAlignment="Right" Margin="0,41,92,104" Name="listBox2" Width="176" SelectedItem="ListBoxItem_Selected" SelectionChanged="listBox2_SelectionChanged"/>
        <Button Height="23" Margin="290,78,283,0" Name="button2" VerticalAlignment="Top" Click="button2_Click">Add</Button>
        <Button Height="23" Margin="290,117,283,0" Name="button3" VerticalAlignment="Top" Click="button3_Click">Remove</Button>
        <Label Height="28" Margin="319,0,274,59" Name="label1" VerticalAlignment="Bottom">Value:</Label>
        <Label Height="28" Margin="307,7,275,0" Name="label2" VerticalAlignment="Top">Query Name:</Label>
        <TextBox Height="23" HorizontalAlignment="Right" Margin="0,12,93,0" Name="textBox2" VerticalAlignment="Top" Width="176" LostFocus="textBox2_LostFocus" />
        <Label Height="28" HorizontalAlignment="Left" Margin="79,7,0,0" Name="label3" VerticalAlignment="Top" Width="120">Look Up:</Label>
        <!--`grid for output-->
        <ContentControl Grid.Row="1" Margin="0,0,0,-40"></ContentControl>
        <Grid Name="grid1" Grid.Row="1" Margin="3,0,0,12" Height="0" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="244">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="130"></ColumnDefinition>
                <ColumnDefinition Width="380"></ColumnDefinition>
                <ColumnDefinition Width="146"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="30"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
            </Grid.RowDefinitions>
            <TextBlock Text="File Name" Grid.Row="0" Grid.Column="0" Margin="5" />
            <TextBlock Text="File Path" Grid.Row="0" Grid.Column="1" Margin="5" />
            <TextBlock Text="File Size" Grid.Row="0" Grid.Column="2" Margin="5" />
            <ListBox Name="listbox_name" Grid.Row="1" Grid.Column="0" BorderBrush="Blue" SelectedItem="listbox_nameSelectedItem" />
            <ListBox Name="listbox_path" Grid.Row="1" Grid.Column="1" BorderBrush="Blue" />
            <ListBox Name="listbox_size" Grid.Row="1" Grid.Column="2" BorderBrush="Blue" />
        </Grid>



    </Grid>
</Window>

但是，当我单击按钮时，窗口的大小没有扩大，并且我无法看到网格:(.请帮助我解决该问题.谢谢！

But when i perform the button click, the window does not expand in size and i''m unable to see my grid :(. Please help me as to how i could go about this. Thanks!

推荐答案

您可以在网格上将LayoutTransform与ScaleTransform一起使用，并在按钮的单击上为该变换设置动画，如下所示:

You can use a LayoutTransform with a ScaleTransform on the grid and, animate this transform at the button''s click, as the following:

将LayoutTransform添加到网格:

<Grid Name="grid1" Grid.Row="1" Margin="3,0,0,12" Height="0" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="244">
    <Grid.LayoutTransform>
        <ScaleTransform ScaleY="0" />
    </Grid.LayoutTransform>

...

</Grid>

然后，在按钮上添加EventTrigger:

<Button Height="23" Margin="0,0,93,30" Name="button1" VerticalAlignment="Bottom" Click="button1_Click" HorizontalAlignment="Right" Width="77">
<Button.Triggers>
    <EventTrigger RoutedEvent="ButtonBase.Click">
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation Storyboard.TargetName="grid1"

                     Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleY)"

                     To="1"

                     Duration="0:0:0.2" />
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</Button.Triggers>
    Run
</Button>

此外，将主Grid的第二个RowDefinition的Height设置为Auto.

In addition, set the Height of the 2nd RowDefinition of the main Grid to Auto.

这篇关于单击按钮显示网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！