Windows 8 Store App:在flipview控件中使用多个RichTextColumns

时间:2013-02-25 16:08:46

标签: windows xaml windows-8 windows-store-apps

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

翻转视图控件如下所示:

`FlipView             X:NAME = “flipView”             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>`

1 个答案:

答案 0 :(得分:2)

如果列将显示两条独立的信息,你是否可以制作两个单独的richtextcolumns,将它们放在网格内,然后在flipview中。这样,您就可以将每个RichTextColumn绑定到所需的源。