windows-8 - 使用 FlipView 和标题的用户控件在 WinRT 应用程序中实现 Pivot

Question

我想实现枢轴的行为（控件仅在 WP8 中可用），为此我使用翻转视图和标题，我使用用户控件，在其中放置模拟标题的按钮列表。当我从一个 FlipViewItem 传递到另一个时，我需要突出显示 Correspondant 按钮（标题）！请有任何帮助！

Answer 1

<Grid x:Name="RootLayout" Background="#FF141414"  >
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Hidden" >
        <ListView x:Name="lstTabs" SelectionMode="Single" SelectedIndex="{Binding SelectedIndex, ElementName=FVFiche, Mode=TwoWay}">
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapGrid Orientation="Horizontal" HorizontalChildrenAlignment="left"/>
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="Padding" Value="0"/>
                    <Setter Property="Margin" Value="0"/>
                    <Setter Property="FontSize" Value="32"/>
                    <Setter Property="Background" Value="#FF141414"/>
                    <Setter Property="BorderBrush" Value="Black"/>
                </Style>
            </ListView.ItemContainerStyle>
        </ListView>
    </ScrollViewer>
    <FlipView x:Name="FVFiche" Grid.Row="1" />
</Grid>

最后我选择了这个解决方案，更容易看到http://blogs.msdn.com/b/avip/archive/2011/09/19/windows-8-development-tip-tab-control.aspx

Answer 2

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Hidden" >
       <ListView x:Name="lstTabs" SelectionMode="Single"

SelectedIndex="{绑定 SelectedIndex, ElementName=FVFiche, Mode=TwoWay}">

            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapGrid Orientation="Horizontal" HorizontalChildrenAlignment="left"/>
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="Padding" Value="0"/>
                    <Setter Property="Margin" Value="0"/>
                    <Setter Property="FontSize" Value="32"/>
                    <Setter Property="Background" Value="#FF141414"/>
                    <Setter Property="BorderBrush" Value="Black"/>
                </Style>
            </ListView.ItemContainerStyle>
        </ListView>
    </ScrollViewer>
    <FlipView x:Name="FVFiche" Grid.Row="1" />

最后我选择了这个解决方案，它更容易:)

Answer 3

以防万一其他人加入此帖子，您可以在此处获得一个示例，说明如何在 2014 年 4 月 2 日的 Windows 开发中心的 VS 2013 中执行此操作。

XAML FlipView 控件示例

<Grid x:Name="grid1" Grid.Row="1">
<Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ListBox x:Name="TSMainPivotMenu" 
         SelectedItem="{Binding SelectedItem, ElementName=TSMainPivot, Mode=TwoWay}" 
         Width="474" BorderThickness="0" Height="40" Background="#A5000000" 
         ItemContainerStyle="{StaticResource ContextControlItemStyle}" 
         IsTabStop="False" 
         HorizontalAlignment="Center" Margin="0,-5,0,0" 
         Style="{StaticResource ListBoxStyle1}">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>
<FlipView x:Name="TSMainPivot" Grid.Row="1">
    <FlipViewItem >
        <local:HomePivot/>
    </FlipViewItem>

    <FlipViewItem >
        <TextBlock 
            x:Name="WritingMenuTitle"
            HorizontalAlignment="Left"
            FontSize="32"
            FontWeight="SemiBold"
            Text="Khanahk"
            TextAlignment="Left"
            TextWrapping="Wrap"/>

    </FlipViewItem>

</FlipView>

代码背后：

/// <summary>
/// Invoked when this page is about to be displayed in a Frame.
/// </summary>
/// <param name="e">Event data that describes how this page was reached.  The Parameter
/// property is typically used to configure the page.</param>
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    var sampleData = new Controls_FlipView.Data.SampleDataSource();
    FlipView4.ItemsSource = sampleData.Items;
    ContextControl.ItemsSource = sampleData.Items;
    ContextControl.SelectionChanged += ContextControl_SelectionChanged;
}

样本数据：

/// <summary>
/// Creates a collection of groups and items with hard-coded content.
/// </summary>
public sealed class SampleDataSource
{
private ObservableCollection<object> _items = new ObservableCollection<object>();
public ObservableCollection<object> Items
{
    get { return this._items; }
}

public SampleDataSource()
{
    Items.Add(new SampleDataItem("Cliff",
            "item",
            "Assets/Cliff.jpg"
            ));
    Items.Add(new SampleDataItem("Grapes",
            "item",
            "Assets/Grapes.jpg"
            ));
    Items.Add(new SampleDataItem("Rainier",
            "item",
            "Assets/Rainier.jpg"
            ));
    Items.Add(new SampleDataItem("Sunset",
            "item",
            "Assets/Sunset.jpg"
            ));
    Items.Add(new SampleDataItem("Valley",
            "item",
            "Assets/Valley.jpg"
            ));
}
}