Windows 8 商店应用程序 : Using multiple RichTextColumns in a flipview control

Question

我试图在翻转 View 中以两种语言(并排)显示两列富文本。如何在 RichTextColumns 中创建两列并将它们绑定(bind)到两个不同的数据源？

翻转 View 控件如下所示:

`翻转 View x:名称=“翻转 View ” AutomationProperties.AutomationId="ItemsFlipView" AutomationProperties.Name="项目详细信息" TabIndex="1" Grid.RowSpan="2" ItemsSource="{Binding Source={StaticResource itemsViewSource}}">

        <FlipView.ItemContainerStyle>
            <Style TargetType="FlipViewItem">
                <Setter Property="Margin" Value="0,137,0,0"/>
            </Style>
        </FlipView.ItemContainerStyle>

        <FlipView.ItemTemplate>
            <DataTemplate>

                <!--
                    UserControl chosen as the templated item because it supports visual state management
                    Loaded/unloaded events explicitly subscribe to view state updates from the page
                -->
                <UserControl Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates">
                    <ScrollViewer x:Name="scrollViewer" Style="{StaticResource HorizontalScrollViewerStyle}" Grid.Row="1">
                        <Grid>

                        <!-- Content is allowed to flow across as many columns as needed -->
                        <common:RichTextColumns x:Name="richTextColumns" Margin="117,0,117,47">
                            <RichTextBlock x:Name="richTextBlock" Width="560" Style="{StaticResource ItemRichTextStyle}" IsTextSelectionEnabled="False">
                                <Paragraph>
                                    <Run FontSize="26.667" FontWeight="Light" Text="ምዕራፍ "/>
                                    <Run FontSize="26.667" FontWeight="Light" Text="{Binding ChapterNumber }"/>
                                    <LineBreak/>

                                    <!--<Run FontWeight="Normal" Text="{Binding Subtitle}"/>-->
                                </Paragraph>

                                <Paragraph>
                                    <Run FontWeight="SemiLight" Text="{Binding ChapterContent}"/>
                                </Paragraph>

                            </RichTextBlock>

                            <!-- Additional columns are created from this template -->
                            <common:RichTextColumns.ColumnTemplate>
                                <DataTemplate>
                                    <RichTextBlockOverflow Width="560" Margin="80,0,0,0">
                                        <RichTextBlockOverflow.RenderTransform>
                                            <TranslateTransform X="-1" Y="4"/>
                                        </RichTextBlockOverflow.RenderTransform>
                                    </RichTextBlockOverflow>
                                </DataTemplate>
                            </common:RichTextColumns.ColumnTemplate>
                        </common:RichTextColumns>

                        <VisualStateManager.VisualStateGroups>

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

                                <!-- Respect the narrower 100-pixel margin convention for portrait -->
                                <VisualState x:Name="FullScreenPortrait">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="richTextColumns" Storyboard.TargetProperty="Margin">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="97,0,87,57"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="image" Storyboard.TargetProperty="MaxHeight">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="400"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>

                                <!-- When snapped, the content is reformatted and scrolls vertically -->
                                <VisualState x:Name="Snapped">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="richTextColumns" Storyboard.TargetProperty="Margin">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="17,0,17,57"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="scrollViewer" Storyboard.TargetProperty="Style">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource VerticalScrollViewerStyle}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="richTextBlock" Storyboard.TargetProperty="Width">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="280"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="image" Storyboard.TargetProperty="MaxHeight">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="160"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        </Grid>
                    </ScrollViewer>
                </UserControl>
            </DataTemplate>
        </FlipView.ItemTemplate>
    </FlipView>`

Answer 1

如果列要显示两条单独的信息，您能不能只制作两个单独的富文本列，将它们放在网格内，然后网格位于 flipview 内。这样您就可以将每个 RichTextColumn 绑定(bind)到您想要的源。