displaying grid on button click

Question

0.00/5 (No votes)

See more:

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:

XML

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

Posted 17-Oct-11 17:39pm

bizzare1988

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Shmuel Zang · Accepted Answer · 2011-10-17T23:04:00

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

Add a LayoutTransform to the grid:

XML

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

Then, add an EventTrigger to the button:

XML

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

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