locked
How to Adjust Height of GridView at run time. RRS feed

  • Question

  • Hello All, My requirement is like this. Please help me how to implement this.

    I am developing a user control. Where I Need to display list of Persons. (Name, Age, CIty) in Grid view. Also, I should add "Edit" button to each GridView Item. on Click of "Edit" I should reduce the height of Grid View and Display another grid to allow user to edit the details. Can some one explain how to do this? Attached is the Image for reference.


    Vamsidhar M

    Thursday, October 24, 2013 1:46 PM

Answers

  • Hi, Vamsidhar

    You can use FadeInThemeAnimation and FadeOutThemeAnimation to hide or show. Refer to the link below:

    http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.media.animation.fadeinthemeanimation.aspx

    Also, you can use DoubleAnimation to animate the Opacity property of the element you want to hide. There is a sample when you click the button, the Rectangle will hide:

    <StackPanel>
                <StackPanel.Resources>
                    <Storyboard x:Name="myStoryboard">
                        <DoubleAnimation
                  Storyboard.TargetName="myRectangle"
                  Storyboard.TargetProperty="Opacity"
                  From="1.0" To="0.0" Duration="0:0:1"/>
                    </Storyboard>
                </StackPanel.Resources>
                <Rectangle x:Name="myRectangle" 
                   PointerEntered="Rectangle_PointerEntered" 
                   PointerExited="Rectangle_PointerExited"   
                   Fill="Blue" Width="200" Height="300" />
            </StackPanel>
            <Button Content="Button" HorizontalAlignment="Left" Margin="1219,287,0,0" VerticalAlignment="Top" Click="Button_Click_1"/>

    code-behind:

    private void Button_Click_1(object sender, RoutedEventArgs e)
            {
                myStoryboard.Begin();
            }

    http://msdn.microsoft.com/en-us/library/windows/apps/jj819807.aspx

    Best Wishes!



    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by Anne Jing Tuesday, November 5, 2013 9:37 AM
    Monday, October 28, 2013 9:12 AM

All replies

  • Can some one help me on this?

    Vamsidhar M

    Thursday, October 24, 2013 6:52 PM
  • Are you trying to do inline editing?
    Thursday, October 24, 2013 8:18 PM
  • Not sure what that means.

    My reqirement was to show the below grid on click of "+". I am trying to figure out how to do this. If possible please explain what mean by inline editing and how to achieve this.


    Vamsidhar M

    Thursday, October 24, 2013 8:21 PM
  • I think I see what you are trying to do now.  What I would do is put a Grid on the page with two rows.  The first row would have a Height of "*", the second row would have a Height of "Auto".  Then add a ListView to the first grid row.  In the second row you could put a Grid or a StackPanel or whatever you want to layout your edit controls with.  By default that Grid (or StackPanel) would have it's visibility set to "Collapsed".  When you clock on the Edit or Add button, change the Visibility to "Visible".  This will cause the control to show.  Setting the Row's Height to "Auto" tells the row to be as big as it needs to accommodate it's content.  Setting the Height on the first row to "*" basically tells the row to take up whatever space is left.  Once you are done editing the value, set the second row's content back to Collapse and the row will disappear.  I believe this is what you are looking for.
    Thursday, October 24, 2013 8:34 PM
  • Hello Nick, Thanks for you help. I did the same. But what is happening is - I am able to hide/show the below stack panel. But its happening in blink of eye.  I want to make this happen smoothly. Can you tell me how to achieve this?

    Thanks for your help again.


    Vamsidhar M

    Friday, October 25, 2013 11:32 AM
  • Hello Nick, Just FYI, I tried till now to get smooth moving effect using

    <ObjectAnimationUsingKeyFrames/>. But still it is not happening.Do you know how to achieve this?


    Vamsidhar M

    Friday, October 25, 2013 1:14 PM
  • Hi, Vamsidhar

    You can use FadeInThemeAnimation and FadeOutThemeAnimation to hide or show. Refer to the link below:

    http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.media.animation.fadeinthemeanimation.aspx

    Also, you can use DoubleAnimation to animate the Opacity property of the element you want to hide. There is a sample when you click the button, the Rectangle will hide:

    <StackPanel>
                <StackPanel.Resources>
                    <Storyboard x:Name="myStoryboard">
                        <DoubleAnimation
                  Storyboard.TargetName="myRectangle"
                  Storyboard.TargetProperty="Opacity"
                  From="1.0" To="0.0" Duration="0:0:1"/>
                    </Storyboard>
                </StackPanel.Resources>
                <Rectangle x:Name="myRectangle" 
                   PointerEntered="Rectangle_PointerEntered" 
                   PointerExited="Rectangle_PointerExited"   
                   Fill="Blue" Width="200" Height="300" />
            </StackPanel>
            <Button Content="Button" HorizontalAlignment="Left" Margin="1219,287,0,0" VerticalAlignment="Top" Click="Button_Click_1"/>

    code-behind:

    private void Button_Click_1(object sender, RoutedEventArgs e)
            {
                myStoryboard.Begin();
            }

    http://msdn.microsoft.com/en-us/library/windows/apps/jj819807.aspx

    Best Wishes!



    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by Anne Jing Tuesday, November 5, 2013 9:37 AM
    Monday, October 28, 2013 9:12 AM