locked
Is there a way to hide the chevron glyph when setting HubSection.IsHeaderInteractive to true? RRS feed

  • Question

  • Hi,

    I wanted to change my HubSection Header in which there is a combobox. However, I can't seem to remove the chevron glyph when HubSection.IsHeaderInteractive is set to true. And if I set it to false, combobox is not clickable. Please help me. Thanks! Any suggestions are very much appreciated.

    Tuesday, October 8, 2013 4:57 AM

Answers

  • Hi Paulo,

    yes, you need to change the ControlTemplate for the HubSection. Right-click on the HubSection in the Designer in Visual Studio or Blend. From the ContextMenu choose "Edit Template->Edit a copy".

    You receive the following Style that sets the ControlTemplate:

      <Page.Resources>
        <Style x:Key="HubSectionStyle1" TargetType="HubSection">
          <Setter Property="HorizontalAlignment" Value="Left"/>
          <Setter Property="VerticalAlignment" Value="Stretch"/>
          <Setter Property="HorizontalContentAlignment" Value="Left"/>
          <Setter Property="VerticalContentAlignment" Value="Top"/>
          <Setter Property="Padding" Value="40,40,40,44"/>
          <Setter Property="IsTabStop" Value="False"/>
          <Setter Property="Template">
            <Setter.Value>
              <ControlTemplate TargetType="HubSection">
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                  <Border.Resources>
                    <ControlTemplate x:Key="HeaderButtonTemplate" TargetType="Button">
                      <Grid Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                          <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="PointerOver">
                              <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HubSectionHeaderPointerOverForegroundThemeBrush}"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="IsHeaderInteractiveMarker">
                                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HubSectionHeaderPointerOverForegroundThemeBrush}"/>
                                </ObjectAnimationUsingKeyFrames>
                              </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                              <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HubSectionHeaderPressedForegroundThemeBrush}"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="IsHeaderInteractiveMarker">
                                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HubSectionHeaderPressedForegroundThemeBrush}"/>
                                </ObjectAnimationUsingKeyFrames>
                              </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                              <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledForegroundThemeBrush}"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="IsHeaderInteractiveMarker">
                                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledForegroundThemeBrush}"/>
                                </ObjectAnimationUsingKeyFrames>
                              </Storyboard>
                            </VisualState>
                          </VisualStateGroup>
                          <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                              <Storyboard>
                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/>
                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/>
                              </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unfocused"/>
                            <VisualState x:Name="PointerFocused"/>
                          </VisualStateGroup>
                          <VisualStateGroup x:Name="IsHeaderInteractiveStates">
                            <VisualState x:Name="HeaderInteractive">
                              <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="IsHeaderInteractiveMarker">
                                  <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                </ObjectAnimationUsingKeyFrames>
                              </Storyboard>
                            </VisualState>
                            <VisualState x:Name="HeaderNonInteractive"/>
                          </VisualStateGroup>
                          <VisualStateGroup x:Name="FlowDirectionStates">
                            <VisualState x:Name="LeftToRight"/>
                            <VisualState x:Name="RightToLeft">
                              <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Text" Storyboard.TargetName="IsHeaderInteractiveMarker">
                                  <DiscreteObjectKeyFrame KeyTime="0" Value="  &#xE26C;"/>
                                </ObjectAnimationUsingKeyFrames>
                              </Storyboard>
                            </VisualState>
                          </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <StackPanel Orientation="Horizontal">
                          <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" OpticalMarginAlignment="TrimSideBearings" TextLineBounds="Tight" VerticalAlignment="Center"/>
                          <TextBlock x:Name="IsHeaderInteractiveMarker" AutomationProperties.AccessibilityView="Raw" FontFamily="{ThemeResource SymbolThemeFontFamily}" OpticalMarginAlignment="TrimSideBearings" TextLineBounds="Tight" Text="This is the marker" Visibility="Collapsed" VerticalAlignment="Center"/>
                        </StackPanel>
                        <Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Margin="-5" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>
                        <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Margin="-5" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
                      </Grid>
                    </ControlTemplate>
                  </Border.Resources>
                  <Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                    <Grid.RowDefinitions>
                      <RowDefinition Height="Auto"/>
                      <RowDefinition Height="Auto"/>
                      <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Rectangle x:Name="HubHeaderPlaceholder" Grid.Row="0"/>
                    <Button x:Name="HeaderButton" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" FontWeight="{ThemeResource HubSectionHeaderThemeFontWeight}" FontSize="{ThemeResource HubSectionHeaderThemeFontSize}" Margin="{ThemeResource HubSectionHeaderThemeMargin}" Grid.Row="1" Template="{StaticResource HeaderButtonTemplate}"/>
                    <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Grid.Row="2"/>
                  </Grid>
                </Border>
              </ControlTemplate>
            </Setter.Value>
          </Setter>
        </Style>
      </Page.Resources>
    
      <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Hub>
          <HubSection Header="Hello" IsHeaderInteractive="True" Style="{StaticResource HubSectionStyle1}"></HubSection>
        </Hub>
      </Grid>

    Look in the ControlTemplate. There's a TextBlock with the name "IsHeaderInteractiveMarker". I've changed the Text to "This is the marker". Now the header shows this text for interactive headers instead of ">". You can just set the text to an empty string "" or exclude the TextBlock for your requirements. If you do the latter one, don't forget to also exclude the Storyboard-Animations for the IsHeaderInteractiveStates-Group.

    Edit: And see the HubSection, how it references the Style with the custom ControlTemplate via StaticResource-Markup Extension. If you want the Standard-Behaviour on other HubSections, just don't set the Style-Property to the StaticResource



    Thomas Claudius Huber

    "If you can´t make your app run faster, make it at least look & feel extremly fast"

    twitter: @thomasclaudiush
    homepage: www.thomasclaudiushuber.com
    author of: ultimate Windows Store Apps handbook | ultimate WPF handbook | ultimate Silverlight handbook


    Tuesday, October 8, 2013 9:03 AM

All replies

  • Hi Paulo,

    yes, you need to change the ControlTemplate for the HubSection. Right-click on the HubSection in the Designer in Visual Studio or Blend. From the ContextMenu choose "Edit Template->Edit a copy".

    You receive the following Style that sets the ControlTemplate:

      <Page.Resources>
        <Style x:Key="HubSectionStyle1" TargetType="HubSection">
          <Setter Property="HorizontalAlignment" Value="Left"/>
          <Setter Property="VerticalAlignment" Value="Stretch"/>
          <Setter Property="HorizontalContentAlignment" Value="Left"/>
          <Setter Property="VerticalContentAlignment" Value="Top"/>
          <Setter Property="Padding" Value="40,40,40,44"/>
          <Setter Property="IsTabStop" Value="False"/>
          <Setter Property="Template">
            <Setter.Value>
              <ControlTemplate TargetType="HubSection">
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                  <Border.Resources>
                    <ControlTemplate x:Key="HeaderButtonTemplate" TargetType="Button">
                      <Grid Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                          <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="PointerOver">
                              <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HubSectionHeaderPointerOverForegroundThemeBrush}"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="IsHeaderInteractiveMarker">
                                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HubSectionHeaderPointerOverForegroundThemeBrush}"/>
                                </ObjectAnimationUsingKeyFrames>
                              </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                              <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HubSectionHeaderPressedForegroundThemeBrush}"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="IsHeaderInteractiveMarker">
                                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HubSectionHeaderPressedForegroundThemeBrush}"/>
                                </ObjectAnimationUsingKeyFrames>
                              </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                              <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledForegroundThemeBrush}"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="IsHeaderInteractiveMarker">
                                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledForegroundThemeBrush}"/>
                                </ObjectAnimationUsingKeyFrames>
                              </Storyboard>
                            </VisualState>
                          </VisualStateGroup>
                          <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                              <Storyboard>
                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/>
                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/>
                              </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unfocused"/>
                            <VisualState x:Name="PointerFocused"/>
                          </VisualStateGroup>
                          <VisualStateGroup x:Name="IsHeaderInteractiveStates">
                            <VisualState x:Name="HeaderInteractive">
                              <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="IsHeaderInteractiveMarker">
                                  <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                </ObjectAnimationUsingKeyFrames>
                              </Storyboard>
                            </VisualState>
                            <VisualState x:Name="HeaderNonInteractive"/>
                          </VisualStateGroup>
                          <VisualStateGroup x:Name="FlowDirectionStates">
                            <VisualState x:Name="LeftToRight"/>
                            <VisualState x:Name="RightToLeft">
                              <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Text" Storyboard.TargetName="IsHeaderInteractiveMarker">
                                  <DiscreteObjectKeyFrame KeyTime="0" Value="  &#xE26C;"/>
                                </ObjectAnimationUsingKeyFrames>
                              </Storyboard>
                            </VisualState>
                          </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <StackPanel Orientation="Horizontal">
                          <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" OpticalMarginAlignment="TrimSideBearings" TextLineBounds="Tight" VerticalAlignment="Center"/>
                          <TextBlock x:Name="IsHeaderInteractiveMarker" AutomationProperties.AccessibilityView="Raw" FontFamily="{ThemeResource SymbolThemeFontFamily}" OpticalMarginAlignment="TrimSideBearings" TextLineBounds="Tight" Text="This is the marker" Visibility="Collapsed" VerticalAlignment="Center"/>
                        </StackPanel>
                        <Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Margin="-5" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>
                        <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Margin="-5" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
                      </Grid>
                    </ControlTemplate>
                  </Border.Resources>
                  <Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                    <Grid.RowDefinitions>
                      <RowDefinition Height="Auto"/>
                      <RowDefinition Height="Auto"/>
                      <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Rectangle x:Name="HubHeaderPlaceholder" Grid.Row="0"/>
                    <Button x:Name="HeaderButton" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" FontWeight="{ThemeResource HubSectionHeaderThemeFontWeight}" FontSize="{ThemeResource HubSectionHeaderThemeFontSize}" Margin="{ThemeResource HubSectionHeaderThemeMargin}" Grid.Row="1" Template="{StaticResource HeaderButtonTemplate}"/>
                    <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Grid.Row="2"/>
                  </Grid>
                </Border>
              </ControlTemplate>
            </Setter.Value>
          </Setter>
        </Style>
      </Page.Resources>
    
      <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Hub>
          <HubSection Header="Hello" IsHeaderInteractive="True" Style="{StaticResource HubSectionStyle1}"></HubSection>
        </Hub>
      </Grid>

    Look in the ControlTemplate. There's a TextBlock with the name "IsHeaderInteractiveMarker". I've changed the Text to "This is the marker". Now the header shows this text for interactive headers instead of ">". You can just set the text to an empty string "" or exclude the TextBlock for your requirements. If you do the latter one, don't forget to also exclude the Storyboard-Animations for the IsHeaderInteractiveStates-Group.

    Edit: And see the HubSection, how it references the Style with the custom ControlTemplate via StaticResource-Markup Extension. If you want the Standard-Behaviour on other HubSections, just don't set the Style-Property to the StaticResource



    Thomas Claudius Huber

    "If you can´t make your app run faster, make it at least look & feel extremly fast"

    twitter: @thomasclaudiush
    homepage: www.thomasclaudiushuber.com
    author of: ultimate Windows Store Apps handbook | ultimate WPF handbook | ultimate Silverlight handbook


    Tuesday, October 8, 2013 9:03 AM
  • Hi Thomas! Thanks! :) I never knew this was possible in Blend, I was search the net for the default template for this. 
    Tuesday, October 8, 2013 9:26 AM