locked
HubSection - Is there a way to remove this glyph?....

    Question

  • Hi,

    I created my own HeaderTemplate, but I still get this Glyph:

    Dictionary:

        <DataTemplate x:Key="StandardMenuDataTemplate">
            <Grid Width="310" Margin="5,10,5,10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap"/>
                <Border Grid.Row="1" Margin="0,10" Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Height="150">
                    <Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
                </Border>
                <StackPanel Grid.Row="2" Margin="0,10,0,0">
                    <TextBlock Text="{Binding Subtitle}" Style="{StaticResource SubheaderTextBlockStyle}" TextWrapping="NoWrap"/>
                    <TextBlock Text="{Binding Description}" Style="{StaticResource BodyTextBlockStyle}" />
                </StackPanel>
            </Grid>
        </DataTemplate>

    ..is there a way to remove this, but I still want it Clickable?

    Thanks!...


    Code is like a box of chocolates!...


    • Edited by VcDeveloper Monday, October 27, 2014 9:30 PM additional info
    Monday, October 27, 2014 6:02 PM

Answers

  • you can design HubSection's control template , as below:

    <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=" &#xE26B;" 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>

    Remark IsHeaderInteractiveStates Visual State Group, then the header will not show Glyph

        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Hub SectionHeaderClick="Hub_SectionHeaderClick" >
                <HubSection IsHeaderInteractive="True" Style="{StaticResource HubSectionStyle1}"   >
                    <HubSection.HeaderTemplate>
                        <DataTemplate >
                            <Border Background="Yellow" >
                                <Grid>
                                    <TextBlock Text="Click me"/>
                                </Grid>
                            </Border>
    
                        </DataTemplate>
                    </HubSection.HeaderTemplate>
                </HubSection>
            </Hub>
        </Grid>


    在現實生活中,你和誰在一起的確很重要,甚至能改變你的成長軌跡,決定你的人生成敗。 和什麼樣的人在一起,就會有什麼樣的人生。 和勤奮的人在一起,你不會懶惰; 和積極的人在一起,你不會消沈; 與智者同行,你會不同凡響; 與高人為伍,你能登上巔峰。

    • Marked as answer by VcDeveloper Tuesday, October 28, 2014 9:59 PM
    Tuesday, October 28, 2014 1:37 PM

All replies

  •  Set HubSection.IsHeaderInteractive = false

    在現實生活中,你和誰在一起的確很重要,甚至能改變你的成長軌跡,決定你的人生成敗。 和什麼樣的人在一起,就會有什麼樣的人生。 和勤奮的人在一起,你不會懶惰; 和積極的人在一起,你不會消沈; 與智者同行,你會不同凡響; 與高人為伍,你能登上巔峰。

    Monday, October 27, 2014 6:54 PM
  • Thanks Bill, but I still want it Clickable.  I want to make the Template without making it into a Button and I don't why this Glyph is showing up when I'm using a Template.

    Code is like a box of chocolates!...


    • Edited by VcDeveloper Monday, October 27, 2014 9:40 PM
    Monday, October 27, 2014 9:33 PM
  • you can design HubSection's control template , as below:

    <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=" &#xE26B;" 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>

    Remark IsHeaderInteractiveStates Visual State Group, then the header will not show Glyph

        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Hub SectionHeaderClick="Hub_SectionHeaderClick" >
                <HubSection IsHeaderInteractive="True" Style="{StaticResource HubSectionStyle1}"   >
                    <HubSection.HeaderTemplate>
                        <DataTemplate >
                            <Border Background="Yellow" >
                                <Grid>
                                    <TextBlock Text="Click me"/>
                                </Grid>
                            </Border>
    
                        </DataTemplate>
                    </HubSection.HeaderTemplate>
                </HubSection>
            </Hub>
        </Grid>


    在現實生活中,你和誰在一起的確很重要,甚至能改變你的成長軌跡,決定你的人生成敗。 和什麼樣的人在一起,就會有什麼樣的人生。 和勤奮的人在一起,你不會懶惰; 和積極的人在一起,你不會消沈; 與智者同行,你會不同凡響; 與高人為伍,你能登上巔峰。

    • Marked as answer by VcDeveloper Tuesday, October 28, 2014 9:59 PM
    Tuesday, October 28, 2014 1:37 PM
  • Thanks Bill, appreciate your help!... :)

    Code is like a box of chocolates!...

    Tuesday, October 28, 2014 9:59 PM