CODEWITHSUNDEEP
c#.netxamlmicrosoft-metro
Arrow
Arrow

Reputation: 2904

A different view for Snapped state (Metro app)

I have a simple app I'm making and I am having a little trouble with the different states (Full, Snapped, etc).

Below, is how my app looks in landscape, full screen view. As you can see, it has 2 grids. One left aligned, and 1 right aligned:

enter image description here

Now, when the user snaps my app to the left or right, I want only the second grid (on the right: Grid TWO) to be visible in snapped mode, like this:

enter image description here

How can we achieve this?

I have tried several things but my current code doesn't work either. I know it's wrong but here it is anyway:

<!-- Back button and page title -->
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
    <TextBlock x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}"/>
</Grid>

<Grid Grid.Row="1" Margin="120, 30, 0, 0" HorizontalAlignment="Stretch">
    <ListBox x:Name="theList" HorizontalAlignment="Left" Width="240" VerticalAlignment="Stretch" BorderBrush="{x:Null}" Background="{x:Null}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <ListBoxItem Content="{Binding Name, Mode=TwoWay}" />
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
    <TextBox x:Name="theNote" Text="{Binding ElementName=theList, Path=SelectedItem.Content, Mode=TwoWay}" AcceptsReturn="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="245,0,10,0" BorderBrush="{x:Null}" BorderThickness="0" />
</Grid>

<VisualStateManager.VisualStateGroups>

    <!-- Visual states reflect the application's view state -->
    <VisualStateGroup x:Name="ApplicationViewStates">
        <VisualState x:Name="FullScreenLandscape"/>
        <VisualState x:Name="Filled"/>

        <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
        <VisualState x:Name="FullScreenPortrait">
            <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>

        <!-- The back button and title have different styles when snapped -->
        <VisualState x:Name="Snapped">
            <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Upvotes: 1

Views: 1021

Answers (3)

SWalters
SWalters

Reputation: 3704

The second grid in your code snippet has a left margin of 120 pixels. The text inside it has a left margin of 245 pixels, to place it to the right of the list. Margins on nested objects will be additive, so the effective left margin for the text is 365 pixels (not even considering what else it's nested in). Unless you are also changing these margin values when the page is placed in snapped view, the text will be too far to the right to see. (Recall that snapped view is only 320 pixels wide!)

Here is a very simplified example of two grids on the page. Note that Grid2 has a large left margin to place it on the right of Grid1. The textboxes inside the grids have NO left margin.

    <Grid x:Name="Grid1" Grid.Row="1" Margin="120,30,0,0" Width="240" HorizontalAlignment="Left">
        <TextBox x:Name="theFirstNote" Text="This is grid 1." AcceptsReturn="True" HorizontalAlignment="Stretch" 
                VerticalAlignment="Stretch" Margin="0,0,10,0" BorderBrush="{x:Null}" BorderThickness="0" />
    </Grid>

    <Grid x:Name="Grid2" Grid.Row="1" Grid.Column="1" Margin="370,30,0,0" HorizontalAlignment="Stretch">
        <TextBox x:Name="theSecondNote" Text="This is grid 2." AcceptsReturn="True" HorizontalAlignment="Stretch" 
                VerticalAlignment="Stretch" Margin="0,0,10,0" BorderBrush="{x:Null}" BorderThickness="0" />
    </Grid>

When the VisualState changes to Snapped, not only do we have to change the visibility of Grid1, but we also have to change the margin of Grid2 so it's actually visible:

                <VisualState x:Name="Snapped">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid1" Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid2" Storyboard.TargetProperty="Margin">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="10,10,10,10"/>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>

Upvotes: 0

king
king

Reputation: 304

try to add this in the visualstate = 'snapped' 

           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GridOne" Storyboard.TargetProperty="Visibility">
                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

Upvotes: 1

Faster Solutions
Faster Solutions

Reputation: 7003

you need the following:

<VisualState x:Name="Snapped">
            <Storyboard>
 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid1" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                </ObjectAnimationUsingKeyFrames>

You'll see that we're setting Grid1 to be hidden and Grid2 to be of a specific width. This will happen when the page is moved to "Snapped" state.

Upvotes: 1

Related Questions