Tạo các tab trong WinRT

Question

Tôi đang làm việc trên ứng dụng kiểu C#/XAML Metro cho Windows 8. XAML trong WinRT không có điều khiển "tab". Tuy nhiên, tôi đang cố gắng để mô phỏng cách một kết quả trong cửa hàng Windows 8 trông. Ví dụ, hình ảnh này cho thấy "Tổng quan", "Chi tiết", và "Nhận xét" tab:

Làm thế nào để tạo ra những?

RadioButton có vẻ hợp lý. Tôi figured tôi có thể sử dụng GroupName để đảm bảo chỉ có một mục được chọn. Nhưng nếu tôi sử dụng RadioButton, tôi không biết cách làm cho mục được chọn trông có màu xám đậm trong khi làm cho các tùy chọn khác có màu xám nhạt. Ai đó có thể chỉ cho tôi XAML của một RadioButton mà không hiển thị thingy kiểm tra ít? Và cũng có màu xám đậm khi được chọn và có màu xám nhạt khi không được chọn.

Cảm ơn bạn rất nhiều!

Answer 1

Tạo kiểu ListBox thích hợp hơn để tạo kiểu cho nhóm nút radio.

Mã sau sử dụng ListBox với ngăn xếp ngang để tạo tiêu đề mục tab. ContentControl hiển thị nội dung tab dưới dạng điều khiển người dùng.

Tôi chỉ thử nghiệm điều này với WPF, nhưng hy vọng nó sẽ hoạt động trên WinRT.

<Page.Resources> 
    <Style TargetType="ListBoxItem"> 
     <!-- disable default selection highlight --> 
     <!-- Style.Resources is not supported in WinRT --> 
     <!--<Style.Resources> 
      --><!-- SelectedItem with focus --><!-- 
      <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" 
          Color="Transparent" /> 
      --><!-- SelectedItem without focus --><!-- 
      <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" 
          Color="Transparent" /> 
     </Style.Resources>--> 
     <!--Setter Property="FocusVisualStyle" is not supported in WinRT --> 
     <!--<Setter Property="FocusVisualStyle" Value="{x:Null}" />--> 
    </Style> 
    <Style x:Key="TitleStyle" TargetType="TextBlock"> 
     <Setter Property="Foreground" Value="LightGray"/> 
     <!--Style.Triggers is not supported in WinRT--> 
     <!--<Style.Triggers> 
      <DataTrigger Value="True" Binding="{Binding Path=IsSelected, 
         RelativeSource={RelativeSource Mode=FindAncestor, 
         AncestorType={x:Type ListBoxItem}}}"> 
       <Setter Property="Foreground" Value="DarkGray"/> 
       <Setter Property="FontWeight" Value="Bold"/> 
      </DataTrigger> 
     </Style.Triggers>--> 
    </Style> 
</Page.Resources> 
<Grid> 
    <Grid.DataContext> 
     <ViewModel:TestPage/> 
    </Grid.DataContext> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto"/> 
     <RowDefinition/> 
    </Grid.RowDefinitions> 

    <ListBox x:Name="tabListBox" Grid.Row="0" ItemsSource="{Binding Items}" 
         SelectedItem="{Binding SelectedItem, Mode=TwoWay}" 
         BorderBrush="{x:Null}" BorderThickness="0"> 
     <ListBox.ItemsPanel> 
      <ItemsPanelTemplate> 
       <StackPanel Orientation="Horizontal" /> 
      </ItemsPanelTemplate> 
     </ListBox.ItemsPanel> 
     <ListBox.ItemTemplate> 
      <DataTemplate> 
       <TextBlock Text="{Binding Title}" Margin="5" 
         Style="{StaticResource TitleStyle}"/> 
      </DataTemplate> 
     </ListBox.ItemTemplate> 
    </ListBox> 

    <ContentControl Grid.Row="1" Content="{Binding SelectedItem.Content}"/> 
</Grid> 

Xem mô hình

public class MyTabViewModel : INotifyPropertyChanged 
{ 
    public MyTabViewModel() 
    { 
     Items = 
      new List<MyTabItem> 
       { 
        new MyTabItem 
         { 
          Title = "Overview", 
          Content = new UserControl1() 
         }, 
        new MyTabItem 
         { 
          Title = "Detail", 
          Content = new UserControl2() 
         }, 
        new MyTabItem 
         { 
          Title = "Reviews", 
          Content = new UserControl3() 
         }, 
       }; 
    } 

    public IEnumerable<MyTabItem> Items { get; private set; } 

    private MyTabItem _selectedItem; 

    public MyTabItem SelectedItem 
    { 
     get { return _selectedItem; } 
     set 
     { 
      _selectedItem = value; 
      PropertyChanged(this, new PropertyChangedEventArgs("SelectedItem")); 
     } 
    } 

    #region Implementation of INotifyPropertyChanged 

    public event PropertyChangedEventHandler PropertyChanged; 

    #endregion 
} 

public class MyTabItem 
{ 
    public string Title { get; set; } 
    public UserControl Content { get; set; } 
} 

Answer 2

Các FlipView control có thể đáp ứng nhu cầu của bạn. Sample.

Answer 3

Đây là phong cách để sử dụng cho nút radio để làm cho họ nhìn/làm việc như tab:

<!-- Style for radio buttons used as tab control --> 
<Style x:Key="TabRadioButtonStyle" TargetType="RadioButton"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="RadioButton"> 
       <Grid> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CheckStates"> 
          <VisualState x:Name="Unchecked"> 
           <Storyboard> 
            <ColorAnimation Duration="0" To="Gray" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="TabButtonText" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Indeterminate"> 
           <Storyboard> 
            <ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="TabButtonText" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Checked"> 
           <Storyboard> 
            <ColorAnimation Duration="0" To="Black" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="TabButtonText" /> 
           </Storyboard> 
          </VisualState> 

         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <TextBlock x:Name="TabButtonText" Text="{TemplateBinding Content}" Style="{StaticResource GroupHeaderTextStyle}" HorizontalAlignment="Left"/> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Sau đó bạn có thể định nghĩa một mạng lưới để giữ bảng điều khiển tab chồng và một khung để giữ nội dung liên quan mỗi tab. Sử dụng sự kiện Nhấp chuột trên các nút radio để điều hướng khung đến các trang thích hợp cho mỗi "tab".

<Grid Grid.Row="1" 
     Margin="120,0,56,56"> 
     <!-- Row 1 to hold the "Tabs", Row 2 to hold the content --> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="*" /> 
     </Grid.RowDefinitions> 
     <StackPanel Grid.Row="0" Orientation="Horizontal"> 
      <RadioButton x:Name="Tab1" Content="Tab1" Style="{StaticResource TabRadioButtonStyle}" IsChecked="True" Click="Tab1_Clicked" /> 
      <RadioButton x:Name="Tab2" Content="Tab2" Style="{StaticResource TabRadioButtonStyle}" IsChecked="False" Click="Tab2_Clicked" Margin="30,0,0,0" /> 
      <RadioButton x:Name="Tab3" Content="Tab3" Style="{StaticResource TabRadioButtonStyle}" IsChecked="False" Click="Tab3_Clicked" Margin="30,0,0,0"/> 
     </StackPanel> 
     <Frame x:Name="ContentFrame" Margin="0,20,0,0" Grid.Row="1" Background="{StaticResource SandstormBackgroundBrush}" Loaded="ContentFrame_Loaded" /> 
    </Grid> 

Answer 4

tôi đã sử dụng FlipView kiểm soát là tốt, nhưng tôi đã tạo một điều khiển templated riêng biệt mà được thừa hưởng từ FlipView.

Ý tưởng chính là để ghi đè mặc định FlipViewControlTemplate: Tôi đã thêm một ListBox đại diện cho tiêu đề tab và gỡ bỏ "Next" và "Previous" FlipView nút.

Tôi có thể chia sẻ mã nguồn nếu bạn cần thêm chi tiết về triển khai của mình.