Creación de pestañas en WinRT

Question

Estoy trabajando en una aplicación de estilo C#/XAML Metro para Windows 8. El XAML en WinRT no tiene un control de "pestaña". Sin embargo, estoy tratando de emular la forma en que se ve un resultado en la tienda de Windows 8. Por ejemplo, esta imagen muestra "Visión general", "Detalles", y las pestañas "Opiniones":

¿Cómo creo éstos?

Parece que RadioButton tiene sentido. Pensé que podría usar GroupName para asegurar que solo se selecciona un elemento. Pero si utilizo RadioButton, no sé cómo hacer que el elemento seleccionado se vea gris oscuro mientras que las otras opciones son de color gris claro. ¿Alguien puede mostrarme el XAML de un RadioButton que no muestra la pequeña cosa marcada? Y también es gris oscuro cuando está seleccionado y gris claro cuando no está seleccionado.

¡Muchas gracias!

Answer 1

Diseñar un ListBox es preferible a diseñar un grupo de botones de opción.

El siguiente código usa un ListBox con un panel de pila horizontal para crear el encabezado de elemento de tabulación. Un ContentControl muestra el contenido de la pestaña como un control de usuario.

Solo he probado esto con WPF, pero espero que funcione en 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> 

Ver modelo

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

El FlipView control podría satisfacer sus necesidades. Sample.

Answer 3

Aquí es el estilo a utilizar para los botones de radio para que se vean/trabajar como fichas:

<!-- 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> 

A continuación, puede definir una rejilla para sostener el panel pila pestaña y un marco para mantener el contenido asociado con cada pestaña Use Click event en los botones de radio para navegar por el marco a las páginas apropiadas para cada "pestaña".

<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

I utilizarse FlipView control, así, pero crea un control de plantilla separada que se hereda de FlipView.

La idea principal es redefinir el valor predeterminado FlipViewControlTemplate: He añadido una ListBox que representa los encabezados de la ficha y se retira "Siguiente" y "Anterior" FlipView botones.

Puedo compartir el código fuente si necesita más detalles sobre mi implementación.