Windows Phone 全景图 + 数据绑定问题

Question

我希望将字母表中的每个字母都作为一个 Windows Phone PanoramaItem。请在这一点上接受它。每个字母都以多种方式显示（斜体、常规、粗体、其他字体……）。当然我可以手动完成，但它不灵活。所以我决定写一个简单的 Letter 类，它基本上包含两个字符——一个字母的大写和小写。想法是将这些字母的集合绑定到全景图 (myPano.ItemsSource=collection;)。这是模板：

<DataTemplate 
        x:Name="LetterTemplate">
        <controls:PanoramaItem

            Background="Black"
            HorizontalAlignment="Stretch"
            Name="{Binding Path=UpperCase}"
            ManipulationCompleted="A_ManipulationCompleted"
            >
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="0.5*"/>
                <RowDefinition Height="0.5*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.5*"/>
                <ColumnDefinition Width="0.5*"/>
            </Grid.ColumnDefinitions>
            <StackPanel
                Grid.Row="0"
                Grid.Column="0"
                Orientation="Vertical"
                HorizontalAlignment="Stretch">
                <TextBlock
                    Text="{Binding Path=UpperCase}"
                    Foreground="{StaticResource PhoneAccentBrush}"
                    HorizontalAlignment="Center"
                    FontFamily="Segoe WP"
                    FontSize="100" />
                <TextBlock
                    Text="{Binding Path=UpperCase}"
                    HorizontalAlignment="Center"
                    Foreground="White"
                    FontFamily="Courier New"
                    FontSize="100" />
            </StackPanel>
            <StackPanel
                Grid.Row="0"
                Grid.Column="1"
                Orientation="Vertical"
                HorizontalAlignment="Stretch">
                <TextBlock
                    Text="{Binding Path=UpperCase}"
                    Foreground="White"
                    HorizontalAlignment="Center"
                    FontFamily="Segoe WP"
                    FontStyle="Italic"
                    FontSize="100" />
                <TextBlock
                    Text="{Binding Path=UpperCase}"
                    HorizontalAlignment="Center"
                    Foreground="{StaticResource PhoneAccentBrush}"
                    FontStyle="Italic"
                    FontFamily="Courier New"
                    FontSize="100" />
            </StackPanel>
                <StackPanel
                Grid.Row="1"
                Grid.Column="0"
                Orientation="Vertical"
                HorizontalAlignment="Stretch">
                    <TextBlock
                    Text="{Binding Path=LowerCase}"
                    Foreground="{StaticResource PhoneAccentBrush}"
                    HorizontalAlignment="Center"
                    FontFamily="Segoe WP"
                    FontStyle="Italic"
                    FontSize="100" />
                    <TextBlock
                    Text="{Binding Path=LowerCase}"
                    HorizontalAlignment="Center"
                    Foreground="White"
                    FontStyle="Italic"
                    FontFamily="Courier New"
                    FontSize="100" />
                </StackPanel>
                <StackPanel
                Grid.Row="1"
                Grid.Column="1"
                Orientation="Vertical"
                HorizontalAlignment="Stretch">
                    <TextBlock
                    Text="{Binding Path=LowerCase}"
                    Foreground="White"
                    HorizontalAlignment="Center"
                    FontFamily="Segoe WP"
                    FontStyle="Italic"
                    FontSize="100" />
                    <TextBlock
                    Text="{Binding Path=LowerCase}"
                    HorizontalAlignment="Center"
                    Foreground="{StaticResource PhoneAccentBrush}"
                    FontStyle="Italic"
                    FontFamily="Courier New"
                    FontSize="100" />
                </StackPanel>
            </Grid>
    </controls:PanoramaItem>

我知道在为 Windows Phone 编程时它不是很注重性能，但我们暂时不要这样。

全景图在电话页面的构造函数中填充了一个简单的循环，从字符代码“A”迭代到“Z”，创建适当的字母并将其添加到字母集合中。它工作得很好，但有点慢：我不得不等待大约 3 秒才能显示出来，这是不可接受的。

我对这个问题的第一个解决方案是将字母集合限制为 5 个字母，并在选择更改时编辑其中的 4 个。我尝试了几种方法，但基本上我的问题是在修改发生时更新 PanoramaItems。

从集合中删除和添加字母：破坏漂亮的过渡，没办法。 当包含的 Letter 的属性发生更改时，使集合触发 CollectionChanged：尝试过，和以前一样。 BindingExpression 的 UpdateTarget()：该方法在 .NET CE 中似乎不可用。

也许我忽略了某些事情，或者只是遵循了完全不合适的方法。你会怎么做？

提前致谢！

Answer 1

请记住，26 个 PanoramaItems 可能会降低性能。

查看Best Practices section here 中的第一个要点，它说：

通过将使用的部分数量限制为最多四个部分，确保全景应用程序平稳运行。如果您的内容很密集，或者如果您的许多部分共享多个托管控件，那么您应该使用更少的部分。

Answer 2

为了完整起见：我现在保留了第一种方式（26 个 PanoramaItems），只是删除了 DataTemplate 中的 StackPanels 并将 ObservableCollection 更改为 List。根据this tips & tricks entry，因此我应该获得了小的性能提升。没关系。

仍然...如果您知道我在 Windows Phone 上更新单个 PanoramaItem（绑定目标）的具体问题的解决方案，请告诉我。

亲切的问候。

Answer 3

如果你使用下面的类结构：

class LetterContainer
{
    public Letter Letter { get; set; }
}

class Letter
{
    public String UpperCase { get; set; }
    public String LowerCase { get; set; }
}

而不是创建Letter 类的列表，而是创建LetterContainer 类型的列表以与Parorama 控件绑定。当然，您需要更改您创建的Template 中的绑定。现在，您要做的就是更改 LetterContainer 对象中 Letter 属性的值。这样，不会触发 CollectionChanged 事件。但是，请确保为 Letter、UpperCase 和 LowerCase 属性引发 PropertyChanged 事件。

Answer 4

感谢您的回复！

@decyclone：奇怪，我没看到你的……无论如何，也许我会试一试。我只是想知道它与我的收藏解决方案有何不同。我在 Letter 中实现了 NotifyPropertyChanged 的​​东西并触发了它，但 PanoramaItem 没有自动更新。为什么现在要这样做？

@MartinHN：说到性能，我知道这不是最好的解决方案。这就是我在第一个条目中所说的，也是我在这里问的原因:)