locked
Snapped View Change RowDefinition

    Question

  • I have a Grid that looks like this:

    <Grid>    
        <Grid.RowDefinitions>        
            <RowDefinition MinHeight="150" Height="Auto"/>        
            <RowDefinition MinHeight="50" Height="*"/>            
        </Grid.RowDefinitions>
    </Grid>
    ...

    I'm looking for a way to change the second RowDefinition when I go into Snapped view from this:

    <RowDefinition MinHeight="50" Height="*"/>

    into this:

    <RowDefinition MinHeight="50" Height="Auto"/>

    Is this possible? 

    Saturday, June 09, 2012 7:41 PM

Answers

  • Hi ,

    This is the way it can be achieved :-

    <Grid x:Name="LayoutRoot">
    <Grid.RowDefinitions>
    <RowDefinition Height="100" />
    <RowDefinition Height="200" />
    </Grid.RowDefinitions>

     

    <VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="ApplicationViewStates">
    <VisualState x:Name="Snapped">

    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(Grid.RowDefinitions)[0].Height" >
    <DiscreteObjectKeyFrame KeyTime="0" Value="Auto"/>
    </ObjectAnimationUsingKeyFrames>
    </Storyboard>

    </VisualState>
    </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

     

    Works for  "*" and any numerical height as well.


    -Sagar

    Friday, June 15, 2012 8:49 PM
    Moderator

All replies

  • what is the  Height="*" mean?

    <frameworkElement Height="double"/>
    -or-
    <frameworkElement Height="Auto"/>
     

    http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.frameworkelement.height


    NEU_ShieldEdge

    Tuesday, June 12, 2012 8:49 AM
  • Haven't found documentation on it yet, but so far it seems like Height="*" is sort of "take up the remaining space". 

    My row that has Height="*" is a spacer row that helps me vertically center a row. I need this spacer to disappear when I go into snapped view, but setting the width to zero like this:

    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="Spacer">
        <DiscreteObjectKeyFrame KeyTime="0">
            <DiscreteObjectKeyFrame.Value>
                <x:Int32>0</x:Int32>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>

    doesn't work. The only way to hide this row completely (that I know of) is to set

    <RowDefinition Height="*"/>


    How can I do this for Snapped view?

    Tuesday, June 12, 2012 7:44 PM
  • You can do it in C# as :-

    RowDefinition.MinHeight = 50;

    RowDefinition.Height = GridLength.Auto;

    That will change the Height property of Row to "Auto" in snapped view logic.

    -Sagar


    Wednesday, June 13, 2012 3:20 AM
    Moderator
  • The '*' pronounced "star" is used for "star sizing" your grid rows and columns.

    Assume you have 2 rows, where the first height is set to "0.25*" and the second is set to "0.75*".  The first row would take 25% of whatever real estate the control has to work with.  You just make sure they add up to 1.

    You can add an "auto" also.  Assume you add a 3rd row to the example above, and set its height to "auto".  This means the content of that row will take what space it needs, and the remainder of the grid height will be split up between the "star" rows.

    You can also type in an absolute number for one or more grid row heights... whatever (if anything) is left over gets split up by the star types.

    This form of sizing is great for doing things exactly like inspra is attempting.

      (inspra... I'm new to the C++ way of doing things... I'll try to get to your question, as I need to figure it out anyway, but my first guess is to examine (guessing at the type) IValueConverter (I'm guessing C++ must have one of these now.)  You should be able to build a converter that you bind to the height in the xaml, where it would check your display mode.  Since the display mode would happen automatically, your grid would attempt to redraw, and when it went to fetch it's height the valueconverter would be called.

     


    Jim Tomasko


    Wednesday, June 13, 2012 3:47 AM
  • inspria,

    May I ask what your attempting to accomplish visually?  I'm not sure if your question is "how do I set the row Height property in code", or if its "what values do I need to place in my height to make it look like ______?"

    I'm not sure if your attempting to completely hide a row or what.

    Sorry to present you with a question instead of an answer.


    Jim Tomasko

    Wednesday, June 13, 2012 3:59 AM
  • I should have clarified earlier, I'm looking for a way to change the Height property from any value to '*' in <VisualStateManager.VisualStateGroups> I have two rows with Height='*' I use to vertically center a row. I'm looking for a way to change the RowDefinition to Auto for one of these spacer rows when I go into snapped view.
    Friday, June 15, 2012 6:53 PM
  • Hi ,

    This is the way it can be achieved :-

    <Grid x:Name="LayoutRoot">
    <Grid.RowDefinitions>
    <RowDefinition Height="100" />
    <RowDefinition Height="200" />
    </Grid.RowDefinitions>

     

    <VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="ApplicationViewStates">
    <VisualState x:Name="Snapped">

    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(Grid.RowDefinitions)[0].Height" >
    <DiscreteObjectKeyFrame KeyTime="0" Value="Auto"/>
    </ObjectAnimationUsingKeyFrames>
    </Storyboard>

    </VisualState>
    </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

     

    Works for  "*" and any numerical height as well.


    -Sagar

    Friday, June 15, 2012 8:49 PM
    Moderator
  • Perfect, thanks! Is there any documentation on this specific example?
    Saturday, June 16, 2012 1:30 AM