无法在屏幕宽度更改的Flipviews之间切换 [英] Cannot switch between Flipviews on screen width change
问题描述
我正在从VB6进入勇敢的新世界，并在陡峭的学习曲线上遇到一些问题！我在Windows 8.1下使用VS 2013，在VB中编程。
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.
我开始使用（据称）简单的菜单系统，在FlipView菜单上显示菜肴。这一切都很好，我已经有了工作和显示图像等。但是我正在尝试添加代码，当用户使屏幕宽度更窄，这
基本上意味着我想要折叠一个FlipView并显示另一个。我只是不能让这个工作！原始文件会崩溃（通过VisualState"代码中的"Narrow"），但第二个（flipDishSmall）不会出现。当屏幕宽度
回到全宽时，再次出现flipDish。那么flipDishSmall代码有什么问题呢？它几乎是flipDish的副本，但删除了图像。
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>
通过VB代码激活开关 ;如果屏幕宽度变为小于800使用;
The switch is activated through the VB code if the screen width changes to less than 800 using;
VisualStateManager.GoToState（Me，Narrow.Name，True）
VisualStateManager.GoToState(Me, Narrow.Name, True)
但我也有尝试使用;跳过VisualStateManager;
but I have also tried skipping the VisualStateManager by using;
在这两种情况下，flipDish都会正常崩溃，但flipDishSmall不会出现。
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
推荐答案
嗨Stuart，
Hi Stuart,
我没有绑定所以我只是修改你的代码做一些测试，结果似乎是因为你的第二个flipview没有高度和宽度，可能是绑定不成功。
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.
看一下粗体代码：
<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 ;它工作正常。
- 詹姆斯
这篇关于无法在屏幕宽度更改的Flipviews之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
