Windows商店應用程序：主導航組合框樣式？

Question

我想實現類似於百思買應用程序的導航組合框

選定的項目有一個大的文本和普通的項目（未選定）有小文本。

有關如何實現此目的的任何提示？我應該在哪裏看：風格或模板或其他地方？

Answer 1

這裏是應該讓你最那裏

<Style x:Key="ComboBoxStyle1" TargetType="ComboBox"> 
    <Setter Property="Padding" Value="8,0"/> 
    <Setter Property="Background" Value="Transparent"/> 
    <Setter Property="BorderBrush" Value="Transparent"/> 
    <Setter Property="Foreground" Value="White"/> 
    <Setter Property="BorderThickness" Value="{StaticResource ComboBoxBorderThemeThickness}"/> 
    <Setter Property="TabNavigation" Value="Once"/> 
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/> 
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/> 
    <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/> 
    <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto"/> 
    <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="True"/> 
    <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False"/> 
    <Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True"/> 
    <Setter Property="HorizontalContentAlignment" Value="Left"/> 
    <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/> 
    <Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/> 
    <Setter Property="ItemsPanel"> 
     <Setter.Value> 
      <ItemsPanelTemplate> 
       <CarouselPanel/> 
      </ItemsPanelTemplate> 
     </Setter.Value> 
    </Setter> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="ComboBox"> 
       <Grid> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="*"/> 
         <ColumnDefinition Width="32"/> 
        </Grid.ColumnDefinitions> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualState x:Name="Normal"/> 
          <VisualState x:Name="PointerOver"/> 
          <VisualState x:Name="Pressed"/> 
          <VisualState x:Name="Disabled"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Background"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ComboBoxDisabledBackgroundThemeBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Background"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ComboBoxDisabledBorderThemeBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ComboBoxDisabledForegroundThemeBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DropDownGlyph"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ComboBoxArrowDisabledForegroundThemeBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="FocusStates"> 
          <VisualState x:Name="Focused"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HighlightBackground"/> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Highlight"/> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ComboBoxFocusedForegroundThemeBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="FocusedPressed"/> 
          <VisualState x:Name="Unfocused"/> 
          <VisualState x:Name="PointerFocused"/> 
          <VisualState x:Name="FocusedDropDown"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PopupBorder"> 
             <DiscreteObjectKeyFrame KeyTime="0"> 
              <DiscreteObjectKeyFrame.Value> 
               <Visibility>Visible</Visibility> 
              </DiscreteObjectKeyFrame.Value> 
             </DiscreteObjectKeyFrame> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="DropDownStates"> 
          <VisualState x:Name="Opened"> 
           <Storyboard> 
            <SplitOpenThemeAnimation ClosedTargetName="ContentPresenter" 
                   ContentTranslationOffset="0" 
                   ContentTargetName="ScrollViewer" 
                   ClosedLength="{Binding TemplateSettings.DropDownClosedHeight, 
                      RelativeSource={RelativeSource Mode=TemplatedParent}}" 
                   OffsetFromCenter="{Binding TemplateSettings.DropDownOffset, 
                       RelativeSource={RelativeSource Mode=TemplatedParent}}" 
                   OpenedTargetName="PopupBorder" 
                   OpenedLength="{Binding TemplateSettings.DropDownOpenedHeight, 
                      RelativeSource={RelativeSource Mode=TemplatedParent}}"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Closed"> 
           <Storyboard> 
            <SplitCloseThemeAnimation ClosedTargetName="ContentPresenter" ContentTranslationOffset="40" ContentTranslationDirection="{Binding TemplateSettings.SelectedItemDirection, RelativeSource={RelativeSource Mode=TemplatedParent}}" ContentTargetName="ScrollViewer" ClosedLength="{Binding TemplateSettings.DropDownClosedHeight, RelativeSource={RelativeSource Mode=TemplatedParent}}" OffsetFromCenter="{Binding TemplateSettings.DropDownOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" OpenedTargetName="PopupBorder" OpenedLength="{Binding TemplateSettings.DropDownOpenedHeight, RelativeSource={RelativeSource Mode=TemplatedParent}}"/> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2"/> 
        <Rectangle x:Name="PressedBackground" Fill="{StaticResource ComboBoxPressedHighlightThemeBrush}" Margin="{TemplateBinding BorderThickness}" Opacity="0"/> 
        <Border x:Name="HighlightBackground" BorderBrush="{StaticResource ComboBoxFocusedBorderThemeBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{StaticResource ComboBoxFocusedBackgroundThemeBrush}" Grid.ColumnSpan="2" Opacity="0"/> 
        <Rectangle x:Name="Highlight" Fill="{StaticResource ComboBoxSelectedBackgroundThemeBrush}" Margin="{TemplateBinding BorderThickness}" Opacity="0"/> 
        <ContentPresenter x:Name="ContentPresenter" FontSize="45" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
        <TextBlock x:Name="DropDownGlyph" Grid.Column="1" Foreground="White" FontWeight="Bold" FontSize="{StaticResource ComboBoxArrowThemeFontSize}" FontFamily="{StaticResource SymbolThemeFontFamily}" HorizontalAlignment="Right" IsHitTestVisible="False" Margin="0,0,6,4" Text="&#xE011;" VerticalAlignment="Center"/> 
        <Popup x:Name="Popup" Grid.Column="1"> 
         <Border x:Name="PopupBorder" BorderBrush="{StaticResource ComboBoxPopupBorderThemeBrush}" BorderThickness="{StaticResource ComboBoxPopupBorderThemeThickness}" Background="{StaticResource ComboBoxPopupBackgroundThemeBrush}" HorizontalAlignment="Stretch"> 
          <ScrollViewer x:Name="ScrollViewer" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" Foreground="{StaticResource ComboBoxPopupForegroundThemeBrush}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" VerticalSnapPointsType="OptionalSingle" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" VerticalSnapPointsAlignment="Near" ZoomMode="Disabled"> 
           <ItemsPresenter/> 
          </ScrollViewer> 
         </Border> 
        </Popup> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>