The AppbarButton FontSize is Not Changed.
What I have tried is?
AppbarButton =new AppbarButton();
BitmapIcon BitmapIcon = new BitmapIcon();
BitmapIcon.UriSource = new Uri("ms-appx:///Assets/Toolbar/Icons/image.png");
AppBarButton.IsCompact = false;
AppBarButton.Icon = BitmapIcon;
AppBarButton.FontSize = 10;
AppBarButton.Label = "Recommended PivotTable";
the label Size Won't changed?
In the default AppBarButton style, Label's FontSize is fixed. 12px in non-overflow state and 15px in overflow state.
Copy the code below into Page.Resources.
<Style TargetType="AppBarButton" x:Key="BasicAppBarButtonStyle" x:Name="BasicAppBarButtonStyle">
<Setter Property="Background" Value="{ThemeResource AppBarButtonRevealBackground}" />
<Setter Property="Foreground" Value="{ThemeResource AppBarButtonForeground}" />
<Setter Property="BorderBrush" Value="{ThemeResource AppBarButtonRevealBorderBrush}" />
<Setter Property="FontSize" Value="12" />
<Setter Property="BorderThickness" Value="{ThemeResource AppBarButtonRevealBorderThemeThickness}" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="Width" Value="68" />
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
<Setter Property="AllowFocusOnInteraction" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="AppBarButton">
<Grid x:Name="Root" MinWidth="{TemplateBinding MinWidth}" MaxWidth="{TemplateBinding MaxWidth}" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}" Margin="1,0">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ApplicationViewStates">
<VisualState x:Name="FullSize" />
<VisualState x:Name="Compact">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentViewbox" Storyboard.TargetProperty="Margin">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonContentViewboxCompactMargin}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="LabelOnRight">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentViewbox" Storyboard.TargetProperty="Margin">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonContentViewboxMargin}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="MinHeight">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarThemeCompactHeight}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="(Grid.Row)">
<DiscreteObjectKeyFrame KeyTime="0" Value="0" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="(Grid.Column)">
<DiscreteObjectKeyFrame KeyTime="0" Value="1" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="TextAlignment">
<DiscreteObjectKeyFrame KeyTime="0" Value="Left" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Margin">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonTextLabelOnRightMargin}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="LabelCollapsed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="MinHeight">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarThemeCompactHeight}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentViewbox" Storyboard.TargetProperty="Margin">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonContentViewboxCompactMargin}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Overflow">
<VisualState.Setters>
<Setter Target="ContentRoot.MinHeight" Value="0" />
<Setter Target="ContentViewbox.Visibility" Value="Collapsed" />
<Setter Target="TextLabel.Visibility" Value="Collapsed" />
<Setter Target="OverflowTextLabel.Visibility" Value="Visible" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="OverflowWithToggleButtons">
<VisualState.Setters>
<Setter Target="ContentRoot.MinHeight" Value="0" />
<Setter Target="ContentViewbox.Visibility" Value="Collapsed" />
<Setter Target="TextLabel.Visibility" Value="Collapsed" />
<Setter Target="OverflowTextLabel.Visibility" Value="Visible" />
<Setter Target="OverflowTextLabel.Margin" Value="38,0,12,0" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="OverflowWithMenuIcons">
<VisualState.Setters>
<Setter Target="ContentRoot.MinHeight" Value="0" />
<Setter Target="ContentViewbox.HorizontalAlignment" Value="Left" />
<Setter Target="ContentViewbox.VerticalAlignment" Value="Center" />
<Setter Target="ContentViewbox.Width" Value="16" />
<Setter Target="ContentViewbox.Height" Value="16" />
<Setter Target="ContentViewbox.Margin" Value="12,0,12,0" />
<Setter Target="TextLabel.Visibility" Value="Collapsed" />
<Setter Target="OverflowTextLabel.Visibility" Value="Visible" />
<Setter Target="OverflowTextLabel.Margin" Value="38,0,12,0" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="OverflowWithToggleButtonsAndMenuIcons">
<VisualState.Setters>
<Setter Target="ContentRoot.MinHeight" Value="0" />
<Setter Target="ContentViewbox.HorizontalAlignment" Value="Left" />
<Setter Target="ContentViewbox.VerticalAlignment" Value="Center" />
<Setter Target="ContentViewbox.Width" Value="16" />
<Setter Target="ContentViewbox.Height" Value="16" />
<Setter Target="ContentViewbox.Margin" Value="38,0,12,0" />
<Setter Target="TextLabel.Visibility" Value="Collapsed" />
<Setter Target="OverflowTextLabel.Visibility" Value="Visible" />
<Setter Target="OverflowTextLabel.Margin" Value="76,0,12,0" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="OverflowTextLabel" />
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
<Setter Target="Root.Background" Value="{ThemeResource AppBarButtonRevealBackgroundPointerOver}" />
<Setter Target="Border.BorderBrush" Value="{ThemeResource AppBarButtonRevealBorderBrushPointerOver}" />
<Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
<Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
<Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
</VisualState.Setters>
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="OverflowTextLabel" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
<Setter Target="Root.Background" Value="{ThemeResource AppBarButtonRevealBackgroundPressed}" />
<Setter Target="Border.BorderBrush" Value="{ThemeResource AppBarButtonRevealBorderBrushPressed}" />
<Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
<Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
<Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
</VisualState.Setters>
<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="OverflowTextLabel" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="Root.Background" Value="{ThemeResource AppBarButtonRevealBackgroundDisabled}" />
<Setter Target="Border.BorderBrush" Value="{ThemeResource AppBarButtonRevealBorderBrushDisabled}" />
<Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundDisabled}" />
<Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundDisabled}" />
<Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundDisabled}" />
<Setter Target="KeyboardAcceleratorTextLabel.Foreground" Value="{ThemeResource AppBarButtonKeyboardAcceleratorTextForegroundDisabled}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="OverflowNormal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="ContentRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="OverflowPointerOver">
<VisualState.Setters>
<Setter Target="Root.Background" Value="{ThemeResource AppBarButtonRevealBackgroundPointerOver}" />
<Setter Target="Border.BorderBrush" Value="{ThemeResource AppBarButtonRevealBorderBrushPointerOver}" />
<Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
<Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
<Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
<Setter Target="KeyboardAcceleratorTextLabel.Foreground" Value="{ThemeResource AppBarButtonKeyboardAcceleratorTextForegroundPointerOver}" />
</VisualState.Setters>
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="ContentRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="OverflowPressed">
<VisualState.Setters>
<Setter Target="Root.Background" Value="{ThemeResource AppBarButtonRevealBackgroundPressed}" />
<Setter Target="Border.BorderBrush" Value="{ThemeResource AppBarButtonRevealBorderBrushPressed}" />
<Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
<Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
<Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
<Setter Target="KeyboardAcceleratorTextLabel.Foreground" Value="{ThemeResource AppBarButtonKeyboardAcceleratorTextForegroundPressed}" />
</VisualState.Setters>
<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="ContentRoot" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="InputModeStates">
<VisualState x:Name="InputModeDefault" />
<VisualState x:Name="TouchInputMode">
<VisualState.Setters>
<Setter Target="OverflowTextLabel.Padding" Value="{ThemeResource AppBarButtonOverflowTextTouchMargin}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="GameControllerInputMode">
<VisualState.Setters>
<Setter Target="OverflowTextLabel.Padding" Value="{ThemeResource AppBarButtonOverflowTextTouchMargin}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="KeyboardAcceleratorTextVisibility">
<VisualState x:Name="KeyboardAcceleratorTextCollapsed" />
<VisualState x:Name="KeyboardAcceleratorTextVisible">
<VisualState.Setters>
<Setter Target="KeyboardAcceleratorTextLabel.Visibility" Value="Visible" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="ContentRoot" MinHeight="{ThemeResource AppBarThemeMinHeight}" Margin="-1,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Viewbox x:Name="ContentViewbox"
Height="{ThemeResource AppBarButtonContentHeight}"
Margin="{ThemeResource AppBarButtonContentViewboxCollapsedMargin}"
HorizontalAlignment="Stretch"
AutomationProperties.AccessibilityView="Raw" >
<ContentPresenter x:Name="Content"
Content="{TemplateBinding Icon}"
Foreground="{TemplateBinding Foreground}"/>
</Viewbox>
<TextBlock x:Name="TextLabel"
Grid.Row="1"
Text="{TemplateBinding Label}"
Foreground="{TemplateBinding Foreground}"
FontSize="{TemplateBinding FontSize}"
FontFamily="{TemplateBinding FontFamily}"
TextAlignment="Center"
TextWrapping="Wrap"
Margin="{ThemeResource AppBarButtonTextLabelMargin}"
AutomationProperties.AccessibilityView="Raw" />
<TextBlock x:Name="OverflowTextLabel"
Text="{TemplateBinding Label}"
Foreground="{TemplateBinding Foreground}"
FontSize="{TemplateBinding FontSize}"
FontFamily="{TemplateBinding FontFamily}"
TextAlignment="Left"
TextTrimming="Clip"
TextWrapping="NoWrap"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Margin="12,0,12,0"
Padding="{ThemeResource AppBarButtonOverflowTextLabelPadding}"
Visibility="Collapsed"
AutomationProperties.AccessibilityView="Raw" />
<TextBlock x:Name="KeyboardAcceleratorTextLabel"
Grid.Column="1"
Style="{ThemeResource CaptionTextBlockStyle}"
Text="{TemplateBinding KeyboardAcceleratorTextOverride}"
MinWidth="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.KeyboardAcceleratorTextMinWidth}"
Margin="24,0,12,0"
Foreground="{ThemeResource AppBarButtonKeyboardAcceleratorTextForeground}"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Visibility="Collapsed"
AutomationProperties.AccessibilityView="Raw" />
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}" Grid.RowSpan="2" Grid.ColumnSpan="2" Margin="1,0" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Usage
xaml
<AppBarButton Style="{StaticResource BasicAppBarButtonStyle}" FontSize="10"/>
C#
var appBarButton = new AppBarButton();
appBarButton.Style = BasicAppBarButtonStyle;
appBarButton.FontSize = 10;
Related
I want to change the BreadcrumberItem style(Template) in Breadcrumber.I had changed the itemTemplate of BreadCrumber. But it always takes the default style of BreadcrumberItem.
My Complete Project Link . I want to change the next indication ChevronIcon(PART_ChevronTextBlock) text to "/" .
My xaml :
<Grid x:Name="grid">
<controls:BreadcrumbBar x:Name="bread" Width="200" Height="100">
<controls:BreadcrumbBar.ItemTemplate>
<ControlTemplate TargetType="controls:BreadcrumbBarItem">
<Grid x:Name="PART_LayoutRoot">
<Grid.Resources>
<Flyout x:Name="PART_EllipsisFlyout">
<Flyout.FlyoutPresenterStyle>
<Style TargetType="FlyoutPresenter">
<Setter Property="Background" Value="{ThemeResource BreadcrumbBarEllipsisFlyoutPresenterBackground}"/>
<Setter Property="BorderBrush" Value="{ThemeResource BreadcrumbBarEllipsisFlyoutPresenterBorderBrush}"/>
<Setter Property="BorderThickness" Value="{ThemeResource BreadcrumbBarEllipsisFlyoutPresenterBorderThemeThickness}"/>
<Setter Property="Padding" Value="0,2"/>
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False"/>
<Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False"/>
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
<Setter Property="MaxWidth" Value="{ThemeResource FlyoutThemeMaxWidth}"/>
<Setter Property="MinHeight" Value="40"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="FlyoutPresenter">
<Grid Background="{TemplateBinding Background}" CornerRadius="{ThemeResource ControlCornerRadius}">
<ScrollViewer x:Name="FlyoutPresenterScrollViewer" AutomationProperties.AccessibilityView="Raw" Content="{TemplateBinding Content}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" Margin="{TemplateBinding Padding}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"/>
<Border x:Name="FlyoutPresenterBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{ThemeResource ControlCornerRadius}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Flyout.FlyoutPresenterStyle>
</Flyout>
</Grid.Resources>
<Grid.CornerRadius>
<ThemeResource ResourceKey="ControlCornerRadius"/>
</Grid.CornerRadius>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="PART_ContentColumn" Width="Auto"/>
<ColumnDefinition x:Name="PART_ChevronColumn" Width="Auto"/>
</Grid.ColumnDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ItemTypeStates">
<VisualState x:Name="Inline"/>
<VisualState x:Name="EllipsisDropDown">
<VisualState.Setters>
<Setter Target="PART_ItemButton.Visibility" Value="Collapsed"/>
<Setter Target="PART_ChevronTextBlock.Visibility" Value="Collapsed"/>
<Setter Target="PART_ContentColumn.Width" Value="*"/>
<Setter Target="PART_EllipsisDropDownItemContentPresenter.Visibility" Value="Visible"/>
<Setter Target="PART_LayoutRoot.Padding" Value="11,7,11,9"/>
<Setter Target="PART_LayoutRoot.Margin" Value="5,3"/>
<Setter Target="PART_LayoutRoot.FocusVisualMargin" Value="-3"/>
<Setter Target="PART_ItemButton.(Control.IsTemplateFocusTarget)" Value="False"/>
<Setter Target="PART_LayoutRoot.(Control.IsTemplateFocusTarget)" Value="True"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="EllipsisDropDownItemCommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="PART_LayoutRoot"/>
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_LayoutRoot" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource BreadcrumbBarEllipsisDropDownItemBackgroundPointerOver}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_EllipsisDropDownItemContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource BreadcrumbBarEllipsisDropDownItemForegroundPointerOver}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_LayoutRoot" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource BreadcrumbBarEllipsisDropDownItemBackgroundPressed}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_EllipsisDropDownItemContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource BreadcrumbBarEllipsisDropDownItemForegroundPressed}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_LayoutRoot" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource BreadcrumbBarEllipsisDropDownItemBackgroundDisabled}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_EllipsisDropDownItemContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource BreadcrumbBarEllipsisDropDownItemForegroundDisabled}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="InlineItemTypeStates">
<VisualState x:Name="Default">
<VisualState.Setters>
<Setter Target="PART_ChevronTextBlock.Text" Value="/"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="DefaultRTL">
<VisualState.Setters>
<Setter Target="PART_ChevronTextBlock.Text" Value="/"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="LastItem">
<VisualState.Setters>
<Setter Target="PART_ItemButton.Visibility" Value="Collapsed"/>
<Setter Target="PART_ChevronTextBlock.Visibility" Value="Collapsed"/>
<Setter Target="PART_LastItemContentPresenter.Visibility" Value="Visible"/>
<Setter Target="PART_ItemButton.(Control.IsTemplateFocusTarget)" Value="False"/>
<Setter Target="PART_LastItemContentPresenter.(Control.IsTemplateFocusTarget)" Value="True"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Ellipsis">
<VisualState.Setters>
<Setter Target="PART_ChevronTextBlock.Text" Value="/"/>
<Setter Target="PART_EllipsisTextBlock.Visibility" Value="Visible"/>
<Setter Target="PART_ItemContentPresenter.Visibility" Value="Collapsed"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="EllipsisRTL">
<VisualState.Setters>
<Setter Target="PART_EllipsisTextBlock.Visibility" Value="Visible"/>
<Setter Target="PART_ItemContentPresenter.Visibility" Value="Collapsed"/>
<Setter Target="PART_ChevronTextBlock.Text" Value="/"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Button x:Name="PART_ItemButton" AutomationProperties.AccessibilityView="Raw" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.Column="0" FocusVisualMargin="-3" IsTabStop="False" Control.IsTemplateFocusTarget="True" AutomationProperties.Name="BreadcrumbBarItemButton" Padding="1,3" x:DeferLoadStrategy="Lazy">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Foreground" Value="{ThemeResource BreadcrumbBarNormalForegroundBrush}"/>
<Setter Property="BorderBrush" Value="{ThemeResource BreadcrumbBarBorderBrush}"/>
<Setter Property="Background" Value="{ThemeResource BreadcrumbBarBackgroundBrush}"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="FontSize" Value="{ThemeResource BreadcrumbBarItemThemeFontSize}"/>
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
<Setter Property="Padding" Value="0,0,0,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Target="PART_ContentPresenter.Foreground" Value="{ThemeResource BreadcrumbBarNormalForegroundBrush}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="CurrentNormal">
<VisualState.Setters>
<Setter Target="PART_ContentPresenter.Foreground" Value="{ThemeResource BreadcrumbBarCurrentNormalForegroundBrush}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="PART_ContentPresenter.Foreground" Value="{ThemeResource BreadcrumbBarHoverForegroundBrush}"/>
<Setter Target="PART_ContentPresenter.Background" Value="{ThemeResource BreadcrumbBarBackgroundBrush}"/>
<Setter Target="PART_ContentPresenter.BorderBrush" Value="{ThemeResource BreadcrumbBarBorderBrush}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="CurrentPointerOver">
<VisualState.Setters>
<Setter Target="PART_ContentPresenter.Foreground" Value="{ThemeResource BreadcrumbBarCurrentHoverForegroundBrush}"/>
<Setter Target="PART_ContentPresenter.Background" Value="{ThemeResource BreadcrumbBarBackgroundBrush}"/>
<Setter Target="PART_ContentPresenter.BorderBrush" Value="{ThemeResource BreadcrumbBarBorderBrush}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="PART_ContentPresenter.Foreground" Value="{ThemeResource BreadcrumbBarPressedForegroundBrush}"/>
<Setter Target="PART_ContentPresenter.Background" Value="{ThemeResource BreadcrumbBarBackgroundBrush}"/>
<Setter Target="PART_ContentPresenter.BorderBrush" Value="{ThemeResource BreadcrumbBarBorderBrush}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="CurrentPressed">
<VisualState.Setters>
<Setter Target="PART_ContentPresenter.Foreground" Value="{ThemeResource BreadcrumbBarCurrentPressedForegroundBrush}"/>
<Setter Target="PART_ContentPresenter.Background" Value="Transparent"/>
<Setter Target="PART_ContentPresenter.BorderBrush" Value="Transparent"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="PART_ContentPresenter.Foreground" Value="{ThemeResource BreadcrumbBarDisabledForegroundBrush}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="CurrentDisabled">
<VisualState.Setters>
<Setter Target="PART_ContentPresenter.Foreground" Value="{ThemeResource BreadcrumbBarCurrentDisabledForegroundBrush}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Focus">
<VisualState.Setters>
<Setter Target="PART_ContentPresenter.Foreground" Value="{ThemeResource BreadcrumbBarFocusForegroundBrush}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="CurrentFocus">
<VisualState.Setters>
<Setter Target="PART_ContentPresenter.Foreground" Value="{ThemeResource BreadcrumbBarCurrentFocusForegroundBrush}"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="PART_ContentPresenter" AutomationProperties.AccessibilityView="Raw" BorderBrush="{TemplateBinding BorderBrush}" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" AutomationProperties.Name="ContentPresenter" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
<Grid AutomationProperties.AccessibilityView="Raw" AutomationProperties.Name="BreadcrumbBarItemGrid">
<ContentPresenter x:Name="PART_ItemContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" Grid.Column="0" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" FontFamily="{TemplateBinding FontFamily}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" LineHeight="20" AutomationProperties.Name="BreadcrumbBarItemContentPresenter" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
<TextBlock x:Name="PART_EllipsisTextBlock" AutomationProperties.AccessibilityView="Raw" Grid.Column="0" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="{TemplateBinding FontSize}" IsTextScaleFactorEnabled="False" AutomationProperties.Name="BreadcrumbBarEllipsisTextBlock" Padding="3" Text="" VerticalAlignment="Stretch" Visibility="Collapsed"/>
</Grid>
</Button>
<ContentPresenter x:Name="PART_LastItemContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" CornerRadius="{ThemeResource ControlCornerRadius}" Grid.Column="0" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" Foreground="{ThemeResource BreadcrumbBarCurrentNormalForegroundBrush}" FocusVisualMargin="-3" FontFamily="{TemplateBinding FontFamily}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" LineHeight="20" Padding="1,3" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Visibility="Collapsed"/>
<ContentPresenter x:Name="PART_EllipsisDropDownItemContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" Grid.Column="0" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" FontWeight="Normal" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" HorizontalContentAlignment="Stretch" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Visibility="Collapsed" x:DeferLoadStrategy="Lazy"/>
<TextBlock x:Name="PART_ChevronTextBlock" AutomationProperties.AccessibilityView="Raw" Grid.Column="1" Foreground="{ThemeResource BreadcrumbBarNormalForegroundBrush}" FontFamily="SegoeUI" FontSize="14" HorizontalAlignment="Center" IsTextScaleFactorEnabled="False" AutomationProperties.Name="ChevronTextBlock" Padding="{ThemeResource BreadcrumbBarChevronPadding}" Text="/" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</controls:BreadcrumbBar.ItemTemplate>
</controls:BreadcrumbBar>
</Grid>
In c#:
bread.ItemsSource = new List<string> { "g", "j", "o", "p" };
This code does what you want to do.
Bring the DefaultBreadcrumbBarItemStyle from generic.xaml.
Remove the DefaultBreadcrumbBarItemStyle key.
Change all {ThemeResource SymbolThemeFontFamily} to {ThemeResource ContentControlThemeFontFamily}.
Override <x:String x:Key="BreadcrumbBarChevronLeftToRight"></x:String> to <x:String x:Key="BreadcrumbBarChevronLeftToRight">/</x:String>.
<Grid>
<Grid.Resources>
<Style x:Key="CustomBreadcrumbBarItemStyle" TargetType="BreadcrumbBarItem">
<Setter Property="Background" Value="{ThemeResource BreadcrumbBarBackgroundBrush}" />
<Setter Property="BorderBrush" Value="{ThemeResource BreadcrumbBarBorderBrush}" />
<Setter Property="FocusVisualMargin" Value="1" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource BreadcrumbBarItemThemeFontSize}" />
<Setter Property="FontWeight" Value="{ThemeResource BreadcrumbBarItemFontWeight}" />
<Setter Property="Foreground" Value="{ThemeResource BreadcrumbBarForegroundBrush}" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="IsTabStop" Value="True" />
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="BreadcrumbBarItem">
<Grid x:Name="PART_LayoutRoot" CornerRadius="{TemplateBinding CornerRadius}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ItemTypeStates">
<VisualState x:Name="Inline" />
<VisualState x:Name="EllipsisDropDown">
<VisualState.Setters>
<Setter Target="PART_ItemButton.Visibility" Value="Collapsed" />
<Setter Target="PART_ChevronTextBlock.Visibility" Value="Collapsed" />
<Setter Target="PART_ContentColumn.Width" Value="*" />
<Setter Target="PART_EllipsisDropDownItemContentPresenter.Visibility" Value="Visible" />
<Setter Target="PART_LayoutRoot.Padding" Value="11,7,11,9" />
<Setter Target="PART_LayoutRoot.Margin" Value="5,3" />
<Setter Target="PART_LayoutRoot.FocusVisualMargin" Value="-3" />
<Setter Target="PART_ItemButton.(Control.IsTemplateFocusTarget)" Value="False" />
<Setter Target="PART_LayoutRoot.(Control.IsTemplateFocusTarget)" Value="True" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="EllipsisDropDownItemCommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="PART_LayoutRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_LayoutRoot" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource BreadcrumbBarEllipsisDropDownItemBackgroundPointerOver}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_EllipsisDropDownItemContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource BreadcrumbBarEllipsisDropDownItemForegroundPointerOver}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_LayoutRoot" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource BreadcrumbBarEllipsisDropDownItemBackgroundPressed}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_EllipsisDropDownItemContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource BreadcrumbBarEllipsisDropDownItemForegroundPressed}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_LayoutRoot" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource BreadcrumbBarEllipsisDropDownItemBackgroundDisabled}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_EllipsisDropDownItemContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource BreadcrumbBarEllipsisDropDownItemForegroundDisabled}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="InlineItemTypeStates">
<VisualState x:Name="Default">
<VisualState.Setters>
<Setter Target="PART_ChevronTextBlock.Text" Value="{ThemeResource BreadcrumbBarChevronLeftToRight}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="DefaultRTL">
<VisualState.Setters>
<Setter Target="PART_ChevronTextBlock.Text" Value="{ThemeResource BreadcrumbBarChevronRightToLeft}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="LastItem">
<VisualState.Setters>
<Setter Target="PART_ItemButton.Visibility" Value="Collapsed" />
<Setter Target="PART_ChevronTextBlock.Visibility" Value="Collapsed" />
<Setter Target="PART_LastItemContentPresenter.Visibility" Value="Visible" />
<Setter Target="PART_ItemButton.(Control.IsTemplateFocusTarget)" Value="False" />
<Setter Target="PART_LastItemContentPresenter.(Control.IsTemplateFocusTarget)" Value="True" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Ellipsis">
<VisualState.Setters>
<Setter Target="PART_ChevronTextBlock.Text" Value="{ThemeResource BreadcrumbBarChevronLeftToRight}" />
<Setter Target="PART_EllipsisTextBlock.Visibility" Value="Visible" />
<Setter Target="PART_ItemContentPresenter.Visibility" Value="Collapsed" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="EllipsisRTL">
<VisualState.Setters>
<Setter Target="PART_EllipsisTextBlock.Visibility" Value="Visible" />
<Setter Target="PART_ItemContentPresenter.Visibility" Value="Collapsed" />
<Setter Target="PART_ChevronTextBlock.Text" Value="{ThemeResource BreadcrumbBarChevronRightToLeft}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.Resources>
<Flyout x:Name="PART_EllipsisFlyout">
<Flyout.FlyoutPresenterStyle>
<Style TargetType="FlyoutPresenter">
<Setter Property="Background" Value="{ThemeResource BreadcrumbBarEllipsisFlyoutPresenterBackground}" />
<Setter Property="BorderBrush" Value="{ThemeResource BreadcrumbBarEllipsisFlyoutPresenterBorderBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource BreadcrumbBarEllipsisFlyoutPresenterBorderThemeThickness}" />
<Setter Property="Padding" Value="0,2" />
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" />
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False" />
<Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False" />
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
<Setter Property="MaxWidth" Value="{ThemeResource FlyoutThemeMaxWidth}" />
<Setter Property="MinHeight" Value="40" />
<Setter Property="CornerRadius" Value="{ThemeResource OverlayCornerRadius}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="FlyoutPresenter">
<Grid Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}" BackgroundSizing="InnerBorderEdge">
<ScrollViewer x:Name="FlyoutPresenterScrollViewer" Margin="{TemplateBinding Padding}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" Content="{TemplateBinding Content}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}" AutomationProperties.AccessibilityView="Raw" />
<Border x:Name="FlyoutPresenterBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Flyout.FlyoutPresenterStyle>
</Flyout>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" x:Name="PART_ContentColumn" />
<ColumnDefinition Width="Auto" x:Name="PART_ChevronColumn" />
</Grid.ColumnDefinitions>
<Button x:Name="PART_ItemButton" x:DeferLoadStrategy="Lazy" Grid.Column="0" AutomationProperties.Name="BreadcrumbBarItemButton" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Control.IsTemplateFocusTarget="True" IsTabStop="False" FocusVisualMargin="-3" Padding="1,3" CornerRadius="{TemplateBinding CornerRadius}" AutomationProperties.AccessibilityView="Raw">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Foreground" Value="{ThemeResource BreadcrumbBarNormalForegroundBrush}" />
<Setter Property="BorderBrush" Value="{ThemeResource BreadcrumbBarBorderBrush}" />
<Setter Property="Background" Value="{ThemeResource BreadcrumbBarBackgroundBrush}" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="FontSize" Value="{ThemeResource BreadcrumbBarItemThemeFontSize}" />
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
<Setter Property="Padding" Value="0,0,0,0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Target="PART_ContentPresenter.Foreground" Value="{ThemeResource BreadcrumbBarNormalForegroundBrush}" />
</VisualState.Setters>
</VisualState>
<!-- Current refers to the last item -->
<VisualState x:Name="CurrentNormal">
<VisualState.Setters>
<Setter Target="PART_ContentPresenter.Foreground" Value="{ThemeResource BreadcrumbBarCurrentNormalForegroundBrush}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="PART_ContentPresenter.Foreground" Value="{ThemeResource BreadcrumbBarHoverForegroundBrush}" />
<Setter Target="PART_ContentPresenter.Background" Value="{ThemeResource BreadcrumbBarBackgroundBrush}" />
<Setter Target="PART_ContentPresenter.BorderBrush" Value="{ThemeResource BreadcrumbBarBorderBrush}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="CurrentPointerOver">
<VisualState.Setters>
<Setter Target="PART_ContentPresenter.Foreground" Value="{ThemeResource BreadcrumbBarCurrentHoverForegroundBrush}" />
<Setter Target="PART_ContentPresenter.Background" Value="{ThemeResource BreadcrumbBarBackgroundBrush}" />
<Setter Target="PART_ContentPresenter.BorderBrush" Value="{ThemeResource BreadcrumbBarBorderBrush}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="PART_ContentPresenter.Foreground" Value="{ThemeResource BreadcrumbBarPressedForegroundBrush}" />
<Setter Target="PART_ContentPresenter.Background" Value="{ThemeResource BreadcrumbBarBackgroundBrush}" />
<Setter Target="PART_ContentPresenter.BorderBrush" Value="{ThemeResource BreadcrumbBarBorderBrush}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="CurrentPressed">
<VisualState.Setters>
<Setter Target="PART_ContentPresenter.Foreground" Value="{ThemeResource BreadcrumbBarCurrentPressedForegroundBrush}" />
<Setter Target="PART_ContentPresenter.Background" Value="Transparent" />
<Setter Target="PART_ContentPresenter.BorderBrush" Value="Transparent" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="PART_ContentPresenter.Foreground" Value="{ThemeResource BreadcrumbBarDisabledForegroundBrush}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="CurrentDisabled">
<VisualState.Setters>
<Setter Target="PART_ContentPresenter.Foreground" Value="{ThemeResource BreadcrumbBarCurrentDisabledForegroundBrush}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Focus">
<VisualState.Setters>
<Setter Target="PART_ContentPresenter.Foreground" Value="{ThemeResource BreadcrumbBarFocusForegroundBrush}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="CurrentFocus">
<VisualState.Setters>
<Setter Target="PART_ContentPresenter.Foreground" Value="{ThemeResource BreadcrumbBarCurrentFocusForegroundBrush}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="PART_ContentPresenter" AutomationProperties.Name="ContentPresenter" BorderBrush="{TemplateBinding BorderBrush}" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplate="{TemplateBinding ContentTemplate}" Padding="{TemplateBinding Padding}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" AutomationProperties.AccessibilityView="Raw" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
<!-- This is the Button Content -->
<Grid AutomationProperties.Name="BreadcrumbBarItemGrid" AutomationProperties.AccessibilityView="Raw">
<ContentPresenter x:Name="PART_ItemContentPresenter" AutomationProperties.Name="BreadcrumbBarItemContentPresenter" Grid.Column="0" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplate="{TemplateBinding ContentTemplate}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontWeight="{TemplateBinding FontWeight}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" LineHeight="20" AutomationProperties.AccessibilityView="Raw" />
<TextBlock x:Name="PART_EllipsisTextBlock" AutomationProperties.Name="BreadcrumbBarEllipsisTextBlock" Grid.Column="0" FontFamily="{ThemeResource ContentControlThemeFontFamily}" FontSize="{TemplateBinding FontSize}" Padding="3" Text="" Visibility="Collapsed" VerticalAlignment="Stretch" IsTextScaleFactorEnabled="False" AutomationProperties.AccessibilityView="Raw" />
</Grid>
</Button>
<!-- ContentPresenter to be shown only when the rendered item is the Current Item -->
<ContentPresenter x:Name="PART_LastItemContentPresenter" Grid.Column="0" Visibility="Collapsed" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplate="{TemplateBinding ContentTemplate}" FocusVisualMargin="-3" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontWeight="{TemplateBinding FontWeight}" Foreground="{ThemeResource BreadcrumbBarCurrentNormalForegroundBrush}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" LineHeight="20" Padding="1,3" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" CornerRadius="{TemplateBinding CornerRadius}" AutomationProperties.AccessibilityView="Raw" />
<!-- ContentPresenter to be shown only when the rendered item is a drop down Item -->
<ContentPresenter x:Name="PART_EllipsisDropDownItemContentPresenter" x:DeferLoadStrategy="Lazy" Grid.Column="0" Visibility="Collapsed" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" HorizontalContentAlignment="Stretch" FontWeight="Normal" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" AutomationProperties.AccessibilityView="Raw" />
<!-- TextBlock that contains the chevron icon -->
<TextBlock x:Name="PART_ChevronTextBlock" AutomationProperties.Name="ChevronTextBlock" Grid.Column="1" HorizontalAlignment="Center" IsTextScaleFactorEnabled="False" FontFamily="{ThemeResource ContentControlThemeFontFamily}" FontSize="{ThemeResource BreadcrumbBarChevronFontSize}" Foreground="{ThemeResource BreadcrumbBarNormalForegroundBrush}" Text="" Padding="{ThemeResource BreadcrumbBarChevronPadding}" VerticalAlignment="Center" AutomationProperties.AccessibilityView="Raw" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<BreadcrumbBar ItemsSource="{x:Bind Items}">
<BreadcrumbBar.Resources>
<x:String x:Key="BreadcrumbBarChevronLeftToRight">/</x:String>
<Style
BasedOn="{StaticResource CustomBreadcrumbBarItemStyle}"
TargetType="BreadcrumbBarItem" />
</BreadcrumbBar.Resources>
</BreadcrumbBar>
</Grid>
How do i change default header position of selected tab to bottom. Here's my code
<controls:TabView x:Name="Tabs"
SelectionChanged="{x:Bind ViewModel.Tabs_SelectionChanged}">
<controls:TabViewItem Header="Tab 1" FontSize="16" >
</controls:TabViewItem>
<controls:TabViewItem Header="Tab 2" FontSize="16">
</controls:TabViewItem>
</controls:TabView>
Also how do i get selected tag from SelectionChanged event
public void Tabs_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (e.AddedItems.Count > 0)
{
var item = e.AddedItems[0] ;
if (item != null)
{
}
}
}
How to set Tab Header Position Bottom in TabView control in xaml uwp app
For your requirement, we suggest you edit TabView style, and swap Tabs and Footer positions.
Copy above style into your app.xaml file and find ScrollViewer x:Name="ScrollViewer" and modify Grid.Row="1" to Grid.Row="3" then find
<ContentPresenter Grid.Row="1"
Grid.ColumnSpan="6"
Content="{TemplateBinding Footer}"
ContentTemplate="{TemplateBinding FooterTemplate}" />
modify Grid.Row="3" to Grid.Row="1". Now the tabs will be placed on bottom.
Update
Ok, I got it, you could edit TabViewItemHeaderTemplate control template and find Rectangle x:Name="SelectionIndicator" and change default VerticalAlignment as Bottom. Please copy below style to your app.xaml file.
<ControlTemplate x:Key="TabViewItemHeaderTemplate"
TargetType="comm:TabViewItem">
<Grid x:Name="LayoutRoot"
ex:FrameworkElementExtensions.AncestorType="local:CustomTabView"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Control.IsTemplateFocusTarget="True"
FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<ScaleTransform x:Name="LayoutRootScale" />
</Grid.RenderTransform>
<Rectangle x:Name="SelectionIndicator"
Height="2"
Margin="0,1"
VerticalAlignment="Bottom"
Fill="{ThemeResource TabViewSelectionIndicatorForeground}"
Opacity="0" />
<Grid Padding="{TemplateBinding Padding}">
<Grid x:Name="ContentPresenterGrid">
<Grid.RenderTransform>
<TranslateTransform x:Name="ContentPresenterTranslateTransform" />
</Grid.RenderTransform>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!-- Modifications of default ListViewItem Template for our Tab Here -->
<Viewbox x:Name="IconBox"
MaxWidth="{ThemeResource TabViewItemHeaderIconSize}"
MaxHeight="{ThemeResource TabViewItemHeaderIconSize}"
Margin="{ThemeResource TabViewItemHeaderIconMargin}"
Visibility="{Binding Icon, Converter={StaticResource NullVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}">
<ContentPresenter x:Name="Icon"
Content="{TemplateBinding Icon}"
Foreground="{TemplateBinding Foreground}" />
</Viewbox>
<ContentPresenter x:Name="ContentPresenter"
Grid.Column="1"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
FontWeight="{TemplateBinding FontWeight}"
OpticalMarginAlignment="TrimSideBearings" />
<!-- Use grid to toggle visibility based on IsClosable property and inner border for hover animations. -->
<Border x:Name="CloseButtonContainer"
Grid.Column="2"
Width="{Binding (ex:FrameworkElementExtensions.Ancestor).IsCloseButtonOverlay, Converter={StaticResource CloseCollapsingSizeConverter}, ElementName=LayoutRoot}"
HorizontalAlignment="Right"
Visibility="{Binding IsClosable, Converter={StaticResource BoolToVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}">
<Border x:Name="CloseButtonBorder"
Width="{StaticResource TabViewItemHeaderCloseWidth}"
Margin="{ThemeResource TabViewItemHeaderCloseMargin}"
Background="{TemplateBinding Background}"
Visibility="Collapsed">
<Button x:Name="CloseButton"
x:Uid="/Microsoft.Toolkit.Uwp.UI.Controls/Resources/WindowsCommunityToolkit_TabView_CloseButton"
Style="{StaticResource TabViewItemCloseButtonStyle}">
</Button>
</Border>
</Border>
</Grid>
</Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource TabViewItemHeaderBackgroundPointerOver}" />
<Setter Target="Icon.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundPointerOver}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundPointerOver}" />
</VisualState.Setters>
<Storyboard>
<!-- Close Button -->
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CloseButtonBorder"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CloseButtonBorder"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource TabViewItemHeaderBackgroundPressed}" />
<Setter Target="Icon.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundPressed}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundPressed}" />
<Setter Target="SelectionIndicator.Opacity" Value="0.4" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource TabViewItemHeaderBackgroundSelected}" />
<Setter Target="Icon.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundSelected}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundSelected}" />
</VisualState.Setters>
<Storyboard>
<!-- Selected Bar -->
<DoubleAnimation Storyboard.TargetName="SelectionIndicator"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
<!-- Close Button -->
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CloseButtonBorder"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CloseButtonBorder"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOverSelected">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource TabViewItemHeaderBackgroundPointerOver}" />
<Setter Target="Icon.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundPointerOver}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundPointerOver}" />
</VisualState.Setters>
<Storyboard>
<!-- Selected Bar -->
<DoubleAnimation Storyboard.TargetName="SelectionIndicator"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
<!-- Close Button -->
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CloseButtonBorder"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CloseButtonBorder"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="PressedSelected">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource TabViewItemHeaderBackgroundSelected}" />
<Setter Target="Icon.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundPressed}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundPressed}" />
</VisualState.Setters>
<Storyboard>
<!-- Selected Bar -->
<DoubleAnimation Storyboard.TargetName="SelectionIndicator"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
<!-- Close Button -->
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CloseButtonBorder"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CloseButtonBorder"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DisabledStates">
<VisualState x:Name="Enabled" />
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="Icon.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundDisabled}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundDisabled}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DataVirtualizationStates">
<VisualState x:Name="DataAvailable" />
<VisualState x:Name="DataPlaceholder" />
</VisualStateGroup>
<VisualStateGroup x:Name="ReorderHintStates">
<VisualState x:Name="NoReorderHint" />
<VisualState x:Name="BottomReorderHint">
<Storyboard>
<DragOverThemeAnimation Direction="Bottom"
ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="TopReorderHint">
<Storyboard>
<DragOverThemeAnimation Direction="Top"
ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="RightReorderHint">
<Storyboard>
<DragOverThemeAnimation Direction="Right"
ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="LeftReorderHint">
<Storyboard>
<DragOverThemeAnimation Direction="Left"
ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.2"
To="NoReorderHint" />
</VisualStateGroup.Transitions>
</VisualStateGroup>
<VisualStateGroup x:Name="DragStates">
<VisualState x:Name="NotDragging" />
<VisualState x:Name="Dragging">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="LayoutRoot"
Storyboard.TargetProperty="Opacity"
To="{ThemeResource ListViewItemDragThemeOpacity}"
Duration="0" />
<DragItemThemeAnimation TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="DraggingTarget" />
<VisualState x:Name="MultipleDraggingPrimary" />
<VisualState x:Name="MultipleDraggingSecondary" />
<VisualState x:Name="DraggedPlaceholder" />
<VisualState x:Name="Reordering">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="LayoutRoot"
Storyboard.TargetProperty="Opacity"
To="{ThemeResource ListViewItemReorderThemeOpacity}"
Duration="0:0:0.240" />
</Storyboard>
</VisualState>
<VisualState x:Name="ReorderingTarget">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="LayoutRoot"
Storyboard.TargetProperty="Opacity"
To="{ThemeResource ListViewItemReorderTargetThemeOpacity}"
Duration="0:0:0.240" />
<DoubleAnimation Storyboard.TargetName="LayoutRootScale"
Storyboard.TargetProperty="ScaleX"
To="{ThemeResource ListViewItemReorderTargetThemeScale}"
Duration="0:0:0.240" />
<DoubleAnimation Storyboard.TargetName="LayoutRootScale"
Storyboard.TargetProperty="ScaleY"
To="{ThemeResource ListViewItemReorderTargetThemeScale}"
Duration="0:0:0.240" />
</Storyboard>
</VisualState>
<VisualState x:Name="MultipleReorderingPrimary" />
<VisualState x:Name="ReorderedPlaceholder">
<Storyboard>
<FadeOutThemeAnimation TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="DragOver">
<Storyboard>
<DropTargetItemThemeAnimation TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.2"
To="NotDragging" />
</VisualStateGroup.Transitions>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
<!-- Based on Style for Windows.UI.Xaml.Controls.ListViewItem -->
<Style TargetType="comm:TabViewItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="BorderBrush" Value="{ThemeResource TabViewItemHeaderRevealBorderBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource TabViewItemHeaderBorderThickness}" />
<Setter Property="Background" Value="{ThemeResource TabViewItemHeaderBackground}" />
<Setter Property="Foreground" Value="{ThemeResource TabViewItemHeaderForeground}" />
<Setter Property="Margin" Value="{ThemeResource TabViewItemHeaderMargin}" />
<Setter Property="TabNavigation" Value="Local" />
<Setter Property="IsHoldingEnabled" Value="True" />
<Setter Property="Padding" Value="14,0" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="MinWidth" Value="{ThemeResource TabViewItemHeaderMinWidth}" />
<Setter Property="MinHeight" Value="{ThemeResource TabViewItemHeaderMinHeight}" />
<Setter Property="MaxWidth" Value="{ThemeResource TabViewItemHeaderMaxWidth}" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="FocusVisualMargin" Value="0" />
<Setter Property="IsClosable" Value="False" />
<Setter Property="Template" Value="{StaticResource TabViewItemHeaderTemplate}" />
</Style>
I am writing a Windows 10 UWP App. I created a button which contains stackpanel with two textblocks. I want to change foreground of these textblocks on pressed.
I modified Default Button Style. so, on clicking of this button, BorderBrush is changing but foreground of textblocks is not.
<Button Command="{Binding}" Style="{StaticResource Button|SecondaryPurpleButtonStyle}" >
<Button.Content>
<StackPanel Orientation="Horizontal">
<TextBlock Margin="4" Style="{StaticResource TextBlock|MenuIconTextBlockStyle}" Foreground="{StaticResource Color|BrandLogoPurpleSolidColorBrush}"
Text="" />
<TextBlock Style="{StaticResource ThemedBodyTextBlockStyle}" Foreground="{StaticResource Color|BrandLogoPurpleSolidColorBrush}"
Margin="4" Text="Add to Shortlist" />
</StackPanel>
</Button.Content>
</Button>
Style:
<Style x:Key="Button|SecondaryPurpleButtonStyle"
TargetType="Button">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="{StaticResource Color|BrandLogoPurpleSolidColorBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource Color|BrandLogoPurpleSolidColorBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" />
<Setter Property="Padding" Value="8,4,8,4" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid"
Background="{TemplateBinding Background}">
<ContentPresenter x:Name="ContentPresenter"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="0.7"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
Padding="{TemplateBinding Padding}" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<!--<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource BrandLogoOrangePointerChangeSolidColorBrush}"/>
</ObjectAnimationUsingKeyFrames>-->
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource Color|BrandLogoLightestPurplePointerChangeSolidColorBrush}" />
</ObjectAnimationUsingKeyFrames>
<!--<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource OLXLogoOrangeSolidColorBrush}"/>
</ObjectAnimationUsingKeyFrames>-->
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource Color|BrandLogoPurpleSolidColorBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource Color|BrandLogoPurpleSolidColorBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0"
Value="White" />
</ObjectAnimationUsingKeyFrames>
<PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource SystemControlDisabledTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
In your XAML code, you have set TextBlock's Foreground property to {StaticResource Color|BrandLogoPurpleSolidColorBrush} explicitly. So the foreground won't change.
To make sure the foreground of textblocks can be changed as BorderBrush, please delete Foreground property in your TextBlock and also make sure you didn't set Foreground property in TextBlock's style.
<Button Command="{Binding}" Style="{StaticResource Button|SecondaryPurpleButtonStyle}" >
<Button.Content>
<StackPanel Orientation="Horizontal">
<TextBlock Margin="4" Style="{StaticResource TextBlock|MenuIconTextBlockStyle}" Text="" />
<TextBlock Style="{StaticResource ThemedBodyTextBlockStyle}" Margin="4" Text="Add to Shortlist" />
</StackPanel>
</Button.Content>
</Button>
So that the TextBlocks in Button.Content will use ContentPresenter's Foreground which can be changed in different VisualStates.
I have a pivot with a header template, in this pivot.
The condition here is I would like to make the textblock bold only if the pivot is selected.
I tried editing the Pivot style but no as I couldn't find what to change there.
<Pivot x:Name="mainContentPivot" Grid.Row="1"
ItemContainerStyle="{StaticResource CategoriesPivotItemsStyle}"
>
<Pivot.HeaderTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding TitleHeaders}" FontSize="16" />
</StackPanel>
</DataTemplate>
</Pivot.HeaderTemplate>
</Pivot>
Any clues as to how to achieve this,
Thanks.
You need to do the following:
Get the PivotHeaderItem template from %ProgramFiles(x86)%\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic\generic.xaml
Use it to style your PivotHeaderItem
Edit the Selected VisualState to add this Setter:
<Setter Target="ContentPresenter.FontWeight" Value="Bold" />
Get back to me if you need any help.
The code is here for you:
<Pivot>
...
...
<Pivot.Resources>
<Style TargetType="PivotHeaderItem">
<Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}" />
<Setter Property="FontFamily" Value="{ThemeResource PivotHeaderItemFontFamily}" />
<Setter Property="FontWeight" Value="{ThemeResource PivotHeaderItemThemeFontWeight}" />
<Setter Property="CharacterSpacing" Value="{ThemeResource PivotHeaderItemCharacterSpacing}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
<Setter Property="Padding" Value="{ThemeResource PivotHeaderItemMargin}" />
<Setter Property="Height" Value="48" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="PivotHeaderItem">
<Grid
x:Name="Grid"
Background="{TemplateBinding Background}">
<Grid.Resources>
<Style x:Key="BaseContentPresenterStyle" TargetType="ContentPresenter">
<Setter Property="FontFamily" Value="XamlAutoFontFamily"/>
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="FontSize" Value="15"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="LineStackingStrategy" Value="MaxHeight"/>
<Setter Property="TextLineBounds" Value="Full"/>
<Setter Property="OpticalMarginAlignment" Value="TrimSideBearings"/>
</Style>
<Style x:Key="BodyContentPresenterStyle" TargetType="ContentPresenter" BasedOn="{StaticResource BaseContentPresenterStyle}">
<Setter Property="FontFamily" Value="{ThemeResource PivotHeaderItemFontFamily}" />
<Setter Property="FontWeight" Value="{ThemeResource PivotHeaderItemThemeFontWeight}"/>
<Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}"/>
</Style>
</Grid.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Unselected" To="UnselectedLocked" GeneratedDuration="0:0:0.33" />
<VisualTransition From="UnselectedLocked" To="Unselected" GeneratedDuration="0:0:0.33" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground" >
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unselected" />
<VisualState x:Name="UnselectedLocked">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ContentPresenterTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0" To="{ThemeResource PivotHeaderItemLockedTranslation}" />
<DoubleAnimation Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="(UIElement.Opacity)"
Duration="0" To="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground" >
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
Storyboard.TargetProperty="Background" >
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<!-- Here is where it goes --> <VisualState.Setters>
<Setter Target="ContentPresenter.FontWeight" Value="Bold" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="UnselectedPointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground" >
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
Storyboard.TargetProperty="Background" >
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedPointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground" >
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
Storyboard.TargetProperty="Background" >
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="UnselectedPressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground" >
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
Storyboard.TargetProperty="Background" >
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedPressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground" >
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
Storyboard.TargetProperty="Background" >
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter
x:Name="ContentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="{TemplateBinding Padding}"
FontSize="{TemplateBinding FontSize}"
FontFamily="{TemplateBinding FontFamily}"
FontWeight="{TemplateBinding FontWeight}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<ContentPresenter.RenderTransform>
<TranslateTransform x:Name="ContentPresenterTranslateTransform" />
</ContentPresenter.RenderTransform>
</ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Pivot.Resources>
</Pivot>
I want to change image1(let say) on clicking a button, to image2 and again on releasing I want to change it back to image1.
If any body knows please answer me. I am new to windows phone development.
<Button x:Name="MyButton" IsPressed="{Binding MyButtonIsPressed}"></Button>
C#
private bool _myButtonIsPressed;
public bool MyButtonIsPressed {
get{ return _myButtonIsPressed;}
set{
_myButtonIsPressed = value;
if(value==false){
MyButton.Content = ImageWhenReleasing;
}
else{
MyButton.Content = ImageWhenClicking;
}
}
}
I hope this can help you.
Change the Visibility of the images in the visual states of the button.
The style for the button:
<Style x:Key="ButtonStyle2"
TargetType="Button">
<Setter Property="Background"
Value="Transparent" />
<Setter Property="BorderBrush"
Value="{ThemeResource PhoneForegroundBrush}" />
<Setter Property="Foreground"
Value="{ThemeResource PhoneForegroundBrush}" />
<Setter Property="BorderThickness"
Value="{ThemeResource PhoneBorderThickness}" />
<Setter Property="FontFamily"
Value="{ThemeResource PhoneFontFamilyNormal}" />
<Setter Property="FontWeight"
Value="{ThemeResource PhoneButtonFontWeight}" />
<Setter Property="FontSize"
Value="{ThemeResource TextStyleLargeFontSize}" />
<Setter Property="Padding"
Value="{ThemeResource PhoneButtonContentPadding}" />
<Setter Property="MinHeight"
Value="{ThemeResource PhoneButtonMinHeight}" />
<Setter Property="MinWidth"
Value="{ThemeResource PhoneButtonMinWidth}" />
<Setter Property="HorizontalAlignment"
Value="Left" />
<Setter Property="VerticalAlignment"
Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="Grid"
Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Pressed"
To="PointerOver">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="Grid" />
</Storyboard>
</VisualTransition>
<VisualTransition From="PointerOver"
To="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="Grid" />
</Storyboard>
</VisualTransition>
<VisualTransition From="Pressed"
To="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="Grid" />
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver" />
<VisualState x:Name="Pressed">
<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="Grid" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource ButtonPressedForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="image1">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="image2">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</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="BorderBrush"
Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource ButtonDisabledBorderThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource ButtonDisabledBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Margin="{ThemeResource PhoneTouchTargetOverhang}">
<Grid>
<BitmapIcon x:Name="image2"
UriSource="/Assets/Square71x71Logo.scale-240.png"
Foreground="Red"
Height="130" Visibility="Collapsed" />
<BitmapIcon x:Name="image1"
UriSource="/Assets/Square71x71Logo.scale-240.png"
Foreground="Yellow"
Height="150" />
<ContentPresenter x:Name="ContentPresenter"
AutomationProperties.AccessibilityView="Raw"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
Foreground="{TemplateBinding Foreground}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>