locked
Cannot switch between Flipviews on screen width change

    Question

  • I am moving from VB6 into the brave new world, and having a few problems with the steep learning curve! I am using VS 2013 under Windows 8.1, programming in VB.

    I am starting with a (supposedly) simple menu system, showing dishes on the menu in a FlipView. That is all OK, and I have got that working and showing images etc. However I am trying to add the code for when the user makes the screen width narrower, which basically means I want to collapse one FlipView and display another. I just cannot get this working! The original does collapse (flipDish through VisualState "Narrow" in the code) but the second (flipDishSmall) does not appear. When the screen width is put back to full width, flipDish again does appear. So what is wrong with the flipDishSmall code? It is pretty much a copy of flipDish but with the image removed.

        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.ChildrenTransitions>
                <TransitionCollection>
                    <EntranceThemeTransition/>
                </TransitionCollection>
            </Grid.ChildrenTransitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="140"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
    
            <!-- Back button and page title -->
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="120"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
                            Style="{StaticResource NavigationBackButtonNormalStyle}"
                            VerticalAlignment="Top"
                            AutomationProperties.Name="Back"
                            AutomationProperties.AutomationId="BackButton"
                            AutomationProperties.ItemType="Navigation Button"/>
                <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                            IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/>
            </Grid>
    
            <FlipView x:Name="flipDish" HorizontalAlignment="Center" Grid.Row="1" Visibility="Visible">
                <FlipView.ItemTemplate>
                    <DataTemplate>
                        <Grid Height="482">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="140"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <TextBlock x:Name="txtDishDesc" 
                                       Text="{Binding DishDescription}" 
                                       HorizontalAlignment="Left" 
                                       VerticalAlignment="Top" 
                                       Height="81" 
                                       Margin="50,10,0,0" 
                                       TextWrapping="Wrap" 
                                       Width="825" 
                                       FontFamily="Segoe UI" FontSize="36"/>
                            <StackPanel Orientation="Horizontal" Height="482" Grid.Row="1" Margin="50,0">
                                <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" BorderBrush="Black" BorderThickness="2">
                                    <Image x:Name="imgDish" 
                                           Margin="0" 
                                           Width="400" Height="400" 
                                           VerticalAlignment="Top" 
                                           Source="{Binding DishImage}" 
                                           Stretch="Uniform"/>
                                </Border>
                                <ListView x:Name="lstPrices" 
                                          HorizontalAlignment="Left" 
                                          VerticalAlignment="Top" 
                                          Height="400" 
                                          Width="400" 
                                          ItemsSource="{Binding Prices}" 
                                          Margin="50,0" 
                                          FontSize="24" 
                                          SelectionMode="None" IsItemClickEnabled="True" ItemClick="lstPrices_ItemClick">
                                    <ListView.Header>Ingredients</ListView.Header>
                                    <ListView.ItemTemplate>
                                        <DataTemplate>
                                            <StackPanel>
                                                <TextBlock Text="{Binding PriceDescription}"/>
                                            </StackPanel>
                                        </DataTemplate>
                                    </ListView.ItemTemplate>
                                </ListView>
                            </StackPanel>
                        </Grid>
                    </DataTemplate>
                </FlipView.ItemTemplate>
            </FlipView>
    
            <FlipView x:Name="flipDishSmall" HorizontalAlignment="Left" Grid.Row="1" Visibility="Collapsed">
                <FlipView.ItemTemplate>
                    <DataTemplate>
                        <Grid Height="482">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="140"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <TextBlock x:Name="txtDishDescSmall" 
                                       Text="{Binding DishDescription}" 
                                       HorizontalAlignment="Left" 
                                       VerticalAlignment="Top" 
                                       Height="81" 
                                       Margin="50,10,0,0" 
                                       TextWrapping="Wrap" 
                                       FontFamily="Segoe UI" FontSize="36"/>
                            <ListView x:Name="lstPricesSmall" Grid.Row="1" 
                                      HorizontalAlignment="Left" 
                                      VerticalAlignment="Top" 
                                      Height="400" 
                                      ItemsSource="{Binding Prices}" 
                                      Margin="50,0" 
                                      FontSize="24" 
                                      SelectionMode="None" IsItemClickEnabled="True" ItemClick="lstPrices_ItemClick">
                                <ListView.Header>Ingredients</ListView.Header>
                                <ListView.ItemTemplate>
                                    <DataTemplate>
                                        <StackPanel>
                                            <TextBlock Text="{Binding PriceDescription}"/>
                                        </StackPanel>
                                    </DataTemplate>
                                </ListView.ItemTemplate>
                            </ListView>
                        </Grid>
                    </DataTemplate>
                </FlipView.ItemTemplate>
            </FlipView>
    
    
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup>
                    <VisualState x:Name="Normal">
    
                    </VisualState>
                    <VisualState x:Name="Narrow">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="flipDish" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame Value="Collapsed"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="flipDishSmall" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame Value="Visible"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
    
        </Grid>
        
    

    The switch is activated through the VB code  if the screen width changes to less than 800 using;

    VisualStateManager.GoToState(Me, Narrow.Name, True)

    but I have also tried skipping the VisualStateManager by using;

    flipDish.Visibility = Windows.UI.Xaml.Visibility.Collapsed
    flipDishSmall.Visibility = Windows.UI.Xaml.Visibility.Visible

    In both cases, flipDish duly collapses but flipDishSmall does not appear.

    I have been trying things for days and am now completely at a loss. Any help would be VERY appreciated!

    Stuart

    Monday, August 18, 2014 1:57 PM

All replies

  • Hi Stuart,

    I do not have binding so I simply modify your code to do some test, and it seems the result is because your second flipview does not have height and width, might be the binding not successful.

    Take a look at the bolded code:

            <FlipView Background="Blue" x:Name="flipDish" HorizontalAlignment="Center" Grid.Row="1" Height="500" Width="500" Visibility="Visible">
    
            //code omitted
    
            </FlipView>
    
            <FlipView x:Name="flipDishSmall" Height="500" Width="500" Background="Aqua" HorizontalAlignment="Left" Grid.Row="1" Visibility="Collapsed">
    
            //code omitted
    
            </FlipView>
            <Button Content="Button" HorizontalAlignment="Left" Height="95" Margin="62,67,0,0" Grid.Row="1" VerticalAlignment="Top" Width="106" Click="Button_Click"/>
    

    In the button click event I use your code

                flipDish.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
                flipDishSmall.Visibility = Windows.UI.Xaml.Visibility.Visible ;

    It works fine.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" 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.

    Tuesday, August 19, 2014 5:32 AM
    Moderator
  • Hi James, Sorry for the delay but thanks for the input.

    I tried your suggestion, but including Height & Width made no difference to me. However, by setting the background colour I can now see that the VisualStates are being triggered, so the FlipView is being changed from flipDish to flipDishSmall. However, the contents of flipDishSmall are not showing on the screen. When I go back to full-size, flipDish appears fine, with the contents.

    I have tried removing the Binding, but no difference. I also tried setting the Visible attribute of the fields within the FlipView to "Visible" but then I get an error saying those fields cannot be found ("cannot resolve Targetname")? Is there some limitation on accessing fields within a FlipView?

    This is sooo annoying! Any more suggestions would be very, very welcome!

    Regards,  Stuart

    Friday, August 22, 2014 10:59 AM
  • Hi Stuart,

    Height and Width I mentioned in my post does not mean you have to set them, the reason is I do not have binding code here so I use height/width to ensure the FlipView have a certain size.

    Could you share your reproducible project with us for a better analysis?

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" 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.


    Monday, August 25, 2014 4:20 AM
    Moderator