Develop Reference

Collapse panel inside the content dialog using c# for UWP application - c#

I couldn't find any design like an accordion (collapsible panel) within the content dialog using c# for UWP app. I can't customize the button alignment, title alignment and collapsible panel within the content dialog.

You can directly put your collapsible panel in the Content of ContentDialog in xaml. And if you want to customize the button alignment, title alignment, you need to change it in the Style of ContentDialog. Take title as an example, there is a ContentControl named "Title" represents Title and change its HorizontalAlignment to "Center", it will put the Title in the center of the dialog.
.xaml:
<Page.Resources>
<Style TargetType="ContentDialog" x:Key="ContentDialogStyle1">
<Setter Property="Foreground" Value="{ThemeResource ContentDialogForeground}" />
<Setter Property="Background" Value="{ThemeResource ContentDialogBackground}" />
<Setter Property="BorderBrush" Value="{ThemeResource ContentDialogBorderBrush}" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentDialog">
<Border x:Name="Container">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="DialogShowingStates">
<VisualStateGroup.Transitions>
<VisualTransition To="DialogHidden">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="IsHitTestVisible">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="False" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform" Storyboard.TargetProperty="ScaleX">
<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.0" />
<SplineDoubleKeyFrame KeyTime="0:0:0.5" KeySpline="0.1,0.9 0.2,1.0" Value="1.05" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform" Storyboard.TargetProperty="ScaleY">
<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.0" />
<SplineDoubleKeyFrame KeyTime="0:0:0.5" KeySpline="0.1,0.9 0.2,1.0" Value="1.05" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.0" />
<LinearDoubleKeyFrame KeyTime="0:0:0.083" Value="0.0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition To="DialogShowing">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform" Storyboard.TargetProperty="ScaleX">
<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.05" />
<SplineDoubleKeyFrame KeyTime="0:0:0.5" KeySpline="0.1,0.9 0.2,1.0" Value="1.0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform" Storyboard.TargetProperty="ScaleY">
<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.05" />
<SplineDoubleKeyFrame KeyTime="0:0:0.5" KeySpline="0.1,0.9 0.2,1.0" Value="1.0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0.0" />
<LinearDoubleKeyFrame KeyTime="0:0:0.167" Value="1.0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="DialogHidden" />
<VisualState x:Name="DialogShowing">
<VisualState.Setters>
<Setter Target="LayoutRoot.Visibility" Value="Visible" />
<Setter Target="BackgroundElement.TabFocusNavigation" Value="Cycle" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="DialogShowingWithoutSmokeLayer">
<VisualState.Setters>
<Setter Target="LayoutRoot.Visibility" Value="Visible" />
<Setter Target="LayoutRoot.Background" Value="{x:Null}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DialogSizingStates">
<VisualState x:Name="DefaultDialogSizing" />
<VisualState x:Name="FullDialogSizing">
<VisualState.Setters>
<Setter Target="BackgroundElement.VerticalAlignment" Value="Stretch" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ButtonsVisibilityStates">
<VisualState x:Name="AllVisible" />
<VisualState x:Name="NoneVisible">
<VisualState.Setters>
<Setter Target="CommandSpace.Visibility" Value="Collapsed" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PrimaryVisible">
<VisualState.Setters>
<Setter Target="PrimaryButton.(Grid.Column)" Value="2" />
<Setter Target="PrimaryButton.(Grid.ColumnSpan)" Value="1" />
<Setter Target="PrimaryButton.Margin" Value="2,0,0,0" />
<Setter Target="SecondaryButton.Visibility" Value="Collapsed" />
<Setter Target="CloseButton.Visibility" Value="Collapsed" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="SecondaryVisible">
<VisualState.Setters>
<Setter Target="SecondaryButton.(Grid.Column)" Value="2" />
<Setter Target="SecondaryButton.(Grid.ColumnSpan)" Value="2" />
<Setter Target="SecondaryButton.Margin" Value="2,0,0,0" />
<Setter Target="PrimaryButton.Visibility" Value="Collapsed" />
<Setter Target="CloseButton.Visibility" Value="Collapsed" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="CloseVisible">
<VisualState.Setters>
<Setter Target="CloseButton.(Grid.Column)" Value="2" />
<Setter Target="CloseButton.(Grid.ColumnSpan)" Value="2" />
<Setter Target="CloseButton.Margin" Value="2,0,0,0" />
<Setter Target="PrimaryButton.Visibility" Value="Collapsed" />
<Setter Target="SecondaryButton.Visibility" Value="Collapsed" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PrimaryAndSecondaryVisible">
<VisualState.Setters>
<Setter Target="PrimaryButton.(Grid.ColumnSpan)" Value="2" />
<Setter Target="SecondaryButton.(Grid.Column)" Value="2" />
<Setter Target="SecondaryButton.(Grid.ColumnSpan)" Value="2" />
<Setter Target="SecondaryButton.Margin" Value="2,0,0,0" />
<Setter Target="CloseButton.Visibility" Value="Collapsed" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PrimaryAndCloseVisible">
<VisualState.Setters>
<Setter Target="PrimaryButton.(Grid.ColumnSpan)" Value="2" />
<Setter Target="CloseButton.(Grid.Column)" Value="2" />
<Setter Target="CloseButton.(Grid.ColumnSpan)" Value="2" />
<Setter Target="CloseButton.Margin" Value="2,0,0,0" />
<Setter Target="SecondaryButton.Visibility" Value="Collapsed" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="SecondaryAndCloseVisible">
<VisualState.Setters>
<Setter Target="SecondaryButton.(Grid.Column)" Value="0" />
<Setter Target="SecondaryButton.(Grid.ColumnSpan)" Value="2" />
<Setter Target="SecondaryButton.Margin" Value="0,0,2,0" />
<Setter Target="CloseButton.(Grid.Column)" Value="2" />
<Setter Target="CloseButton.(Grid.ColumnSpan)" Value="2" />
<Setter Target="CloseButton.Margin" Value="2,0,0,0" />
<Setter Target="PrimaryButton.Visibility" Value="Collapsed" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DefaultButtonStates">
<VisualState x:Name="NoDefaultButton" />
<VisualState x:Name="PrimaryAsDefaultButton">
<VisualState.Setters>
<Setter Target="PrimaryButton.Style" Value="{StaticResource AccentButtonStyle}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="SecondaryAsDefaultButton">
<VisualState.Setters>
<Setter Target="SecondaryButton.Style" Value="{StaticResource AccentButtonStyle}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="CloseAsDefaultButton">
<VisualState.Setters>
<Setter Target="CloseButton.Style" Value="{StaticResource AccentButtonStyle}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DialogBorderStates">
<VisualState x:Name="NoBorder" />
<VisualState x:Name="AccentColorBorder">
<VisualState.Setters>
<Setter Target="BackgroundElement.BorderBrush" Value="{ThemeResource SystemControlForegroundAccentBrush}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="LayoutRoot" Visibility="Collapsed" Background="{ThemeResource SystemControlPageBackgroundMediumAltMediumBrush}">
<Border x:Name="BackgroundElement"
Background="{TemplateBinding Background}"
FlowDirection="{TemplateBinding FlowDirection}"
BorderThickness="{ThemeResource ContentDialogBorderWidth}"
BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="{TemplateBinding CornerRadius}"
MinWidth="{ThemeResource ContentDialogMinWidth}"
MaxWidth="{ThemeResource ContentDialogMaxWidth}"
MinHeight="{ThemeResource ContentDialogMinHeight}"
MaxHeight="{ThemeResource ContentDialogMaxHeight}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<ScaleTransform x:Name="ScaleTransform" />
</Border.RenderTransform>
<Grid x:Name="DialogSpace" Padding="{ThemeResource ContentDialogPadding}">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ScrollViewer x:Name="ContentScrollViewer"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Disabled"
ZoomMode="Disabled"
Margin="{ThemeResource ContentDialogContentScrollViewerMargin}"
IsTabStop="False">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ContentControl x:Name="Title"
Margin="{ThemeResource ContentDialogTitleMargin}"
Content="{TemplateBinding Title}"
ContentTemplate="{TemplateBinding TitleTemplate}"
FontSize="20"
FontFamily="XamlAutoFontFamily"
FontWeight="Normal"
Foreground="{TemplateBinding Foreground}"
HorizontalAlignment="Center"
VerticalAlignment="Top"
IsTabStop="False">
<ContentControl.Template>
<ControlTemplate TargetType="ContentControl">
<ContentPresenter Content="{TemplateBinding Content}"
MaxLines="2"
TextWrapping="Wrap"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="{TemplateBinding Padding}"
ContentTransitions="{TemplateBinding ContentTransitions}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</ControlTemplate>
</ContentControl.Template>
</ContentControl>
<ContentPresenter x:Name="Content"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
FontSize="{ThemeResource ControlContentThemeFontSize}"
FontFamily="{ThemeResource ContentControlThemeFontFamily}"
Margin="{ThemeResource ContentDialogContentMargin}"
Foreground="{TemplateBinding Foreground}"
Grid.Row="1"
TextWrapping="Wrap" />
</Grid>
</ScrollViewer>
<Grid x:Name="CommandSpace"
Grid.Row="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Bottom"
XYFocusKeyboardNavigation="Enabled"
Margin="{ThemeResource ContentDialogCommandSpaceMargin}">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="0.5*" />
<ColumnDefinition Width="0.5*" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button x:Name="PrimaryButton"
Content="{TemplateBinding PrimaryButtonText}"
IsEnabled="{TemplateBinding IsPrimaryButtonEnabled}"
Style="{TemplateBinding PrimaryButtonStyle}"
ElementSoundMode="FocusOnly"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="0,0,2,0"
Grid.Column="0" Background="Red"/>
<Button x:Name="SecondaryButton"
Content="{TemplateBinding SecondaryButtonText}"
IsEnabled="{TemplateBinding IsSecondaryButtonEnabled}"
Style="{TemplateBinding SecondaryButtonStyle}"
ElementSoundMode="FocusOnly"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="2,0,2,0"
Grid.Column="1"
Grid.ColumnSpan="2" />
<Button x:Name="CloseButton"
Content="{TemplateBinding CloseButtonText}"
Style="{TemplateBinding CloseButtonStyle}"
ElementSoundMode="FocusOnly"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="2,0,0,0"
Grid.Column="3" />
</Grid>
</Grid>
</Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<StackPanel>
<Button Click="Button_Click">click</Button>
<ContentDialog x:Name="testDialog" Title="MyHeader" Style="{StaticResource ContentDialogStyle1}">
<StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
// Add your collapsible panel
</StackPanel>
</ContentDialog>
</StackPanel>
.cs:
private async void Button_Click(object sender, RoutedEventArgs e)
{
await testDialog.ShowAsync();
}

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>

Introduction
I downloaded a template of a Universal Windows Platform (UWP) application and started making changes right away.
Problem
When I try to change the button responsible for shortening the left navigation page, I cannot make a change.
Source Code
<Page
x:Class="AVE_VSCODE_EXTENSION.Views.ShellPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:i="using:Microsoft.Xaml.Interactivity"
xmlns:behaviors="using:AVE_VSCODE_EXTENSION.Behaviors"
xmlns:winui="using:Microsoft.UI.Xaml.Controls"
xmlns:helpers="using:AVE_VSCODE_EXTENSION.Helpers"
xmlns:views="using:AVE_VSCODE_EXTENSION.Views"
Loaded="OnLoaded"
mc:Ignorable="d">
<winui:NavigationView
x:Name="navigationView"
IsBackButtonVisible="Visible"
IsBackEnabled="{x:Bind IsBackEnabled, Mode=OneWay}"
SelectedItem="{x:Bind Selected, Mode=OneWay}"
ItemInvoked="OnItemInvoked"
IsSettingsVisible="True"
Background="{ThemeResource SystemControlBackgroundAltHighBrush}">
<winui:NavigationView.MenuItems>
<!--
TODO WTS: Change the symbols for each item as appropriate for your app
More on Segoe UI Symbol icons: https://learn.microsoft.com/windows/uwp/style/segoe-ui-symbol-font
Or to use an IconElement instead of a Symbol see https://github.com/Microsoft/WindowsTemplateStudio/blob/release/docs/UWP/projectTypes/navigationpane.md
Edit String/en-US/Resources.resw: Add a menu item title for each page
-->
<winui:NavigationViewItem x:Uid="Shell_Main" Icon="Globe" helpers:NavHelper.NavigateTo="views:MainPage" />
<winui:NavigationViewItem x:Uid="Shell_Chart" Icon="Admin" helpers:NavHelper.NavigateTo="views:ChartPage" />
</winui:NavigationView.MenuItems>
<i:Interaction.Behaviors>
<behaviors:NavigationViewHeaderBehavior
DefaultHeader="{x:Bind Selected.Content, Mode=OneWay}">
<behaviors:NavigationViewHeaderBehavior.DefaultHeaderTemplate>
<DataTemplate>
<Grid>
<TextBlock
Text="{Binding}"
Style="{ThemeResource TitleTextBlockStyle}"
Margin="{StaticResource SmallLeftRightMargin}" />
</Grid>
</DataTemplate>
</behaviors:NavigationViewHeaderBehavior.DefaultHeaderTemplate>
</behaviors:NavigationViewHeaderBehavior>
</i:Interaction.Behaviors>
<Grid>
<Frame x:Name="shellFrame" />
</Grid>
</winui:NavigationView>
</Page>

When I try to change the button responsible for shortening the left navigation page, I cannot make a change.
The shortening button of navigation page is PaneToggleButton, and it has independent style to descript the content, you could place the following style in your app's resource and edit the Icon
Textblock to approach like the following.
<Application.Resources>
<Style x:Key="PaneToggleButtonStyle" TargetType="Button">
<Setter Property="FontSize" Value="16" />
<Setter Property="FontFamily" Value="{StaticResource SymbolThemeFontFamily}" />
<Setter Property="MinHeight" Value="{StaticResource PaneToggleButtonHeight}" />
<Setter Property="MinWidth" Value="{StaticResource PaneToggleButtonWidth}" />
<Setter Property="Padding" Value="0" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Background" Value="{ThemeResource NavigationViewItemBackground}" />
<Setter Property="Foreground" Value="{ThemeResource NavigationViewItemForeground}" />
<Setter Property="BorderThickness" Value="{ThemeResource NavigationViewToggleBorderThickness}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid
x:Name="LayoutRoot"
Height="{TemplateBinding MinHeight}"
MinWidth="{TemplateBinding MinWidth}"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="Stretch"
Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{ThemeResource PaneToggleButtonWidth}" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="{ThemeResource PaneToggleButtonHeight}" />
</Grid.RowDefinitions>
<Viewbox
x:Name="IconHost"
Width="16"
Height="16"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw">
<TextBlock
x:Name="Icon"
AutomationProperties.AccessibilityView="Raw"
FontSize="{TemplateBinding FontSize}"
Text="" />
</Viewbox>
<ContentPresenter
x:Name="ContentPresenter"
Grid.Column="1"
VerticalContentAlignment="Center"
AutomationProperties.AccessibilityView="Raw"
Content="{TemplateBinding Content}"
FontSize="{TemplateBinding FontSize}" />
<Border
x:Name="RevealBorder"
Grid.ColumnSpan="2"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource ButtonBackgroundPointerOver}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundPointerOver}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource ButtonBackgroundPressed}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundPressed}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource ButtonBackgroundDisabled}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundDisabled}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource ToggleButtonBackgroundChecked}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ToggleButtonForegroundChecked}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="CheckedPointerOver">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource ToggleButtonBackgroundCheckedPointerOver}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ToggleButtonForegroundCheckedPointerOver}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="CheckedPressed">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource ToggleButtonBackgroundCheckedPressed}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ToggleButtonForegroundCheckedPressed}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="CheckedDisabled">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource ToggleButtonBackgroundCheckedDisabled}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ToggleButtonForegroundCheckedDisabled}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>

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;

i am trying to develop the design as shown in figure below. I have managed to achieve the design as shown. Now the issue is when i tap on text box it doesn't show characters being typed .Although by debugging i checked the value is being get in the variable.
code snippet:
<Page.Resources>
<ControlTemplate x:Key="TextBoxControlTemplate1" TargetType="TextBox">
<Grid Background="#FFBAC0E0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Width="50" Margin="0,0,0,0" Source="Assets/call.png" Height="35" />
<TextBox Name="alpha" Grid.Column="1" BorderThickness="0,0,0,0" Background="#FFBAC0E0" PlaceholderText="Search here Kindly" Foreground="Aqua" Height="54" Padding="10" Margin="0" VerticalAlignment="Stretch" />
</Grid>
</ControlTemplate>
</Page.Resources>
<Grid>
<TextBox Template="{StaticResource TextBoxControlTemplate1}" />
</Grid>

It is always better to modify the default style of a control instead of creating your own template. So you can use this which will work for your scenario:
<TextBox
Height="54"
Margin="0"
VerticalAlignment="Stretch"
Background="#FFBAC0E0"
BorderThickness="0"
Foreground="Aqua"
Padding="10"
PlaceholderText="Search here Kindly">
<TextBox.Style>
<Style TargetType="TextBox">
<Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}" />
<Setter Property="MinHeight" Value="{ThemeResource TextControlThemeMinHeight}" />
<Setter Property="Foreground" Value="{ThemeResource TextBoxForegroundThemeBrush}" />
<Setter Property="SelectionHighlightColor" Value="{ThemeResource TextSelectionHighlightColorThemeBrush}" />
<Setter Property="Background" Value="{ThemeResource TextBoxBackgroundThemeBrush}" />
<Setter Property="BorderBrush" Value="{ThemeResource TextBoxBorderThemeBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource TextControlBorderThemeThickness}" />
<Setter Property="FontFamily" Value="{ThemeResource PhoneFontFamilyNormal}" />
<Setter Property="FontSize" Value="{ThemeResource ContentControlFontSize}" />
<Setter Property="TextWrapping" Value="NoWrap" />
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
<Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
<Setter Property="Padding" Value="{ThemeResource TextControlThemePadding}" />
<Setter Property="Margin" Value="{ThemeResource TextControlMarginThemeThickness}" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledBorderThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledHeaderForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimation
Duration="0"
Storyboard.TargetName="BorderElement"
Storyboard.TargetProperty="Opacity"
To="{ThemeResource TextControlBorderThemeOpacity}" />
</Storyboard>
</VisualState>
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextSelectionHighlightColorThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation
Duration="0"
Storyboard.TargetName="PlaceholderTextContentPresenter"
Storyboard.TargetProperty="Opacity"
To="0" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxFocusedBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image
Grid.RowSpan="2"
Grid.Column="0"
Width="50"
Height="35"
Margin="0,0,0,0"
Source="Assets/call.png" />
<Border
x:Name="BorderElement"
Grid.Row="1"
Grid.Column="1"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" />
<ContentPresenter
x:Name="HeaderContentPresenter"
Grid.Row="0"
Grid.Column="1"
Margin="{ThemeResource TextControlHeaderMarginThemeThickness}"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Style="{StaticResource HeaderContentPresenterStyle}" />
<ScrollViewer
x:Name="ContentElement"
Grid.Row="1"
Grid.Column="1"
MinHeight="{ThemeResource TextControlThemeMinHeight}"
Margin="{TemplateBinding BorderThickness}"
AutomationProperties.AccessibilityView="Raw"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
IsTabStop="False"
IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
Padding="{TemplateBinding Padding}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
ZoomMode="Disabled" />
<ContentControl
x:Name="PlaceholderTextContentPresenter"
Grid.Row="1"
Grid.Column="1"
Margin="{TemplateBinding BorderThickness}"
Content="{TemplateBinding PlaceholderText}"
FontSize="{ThemeResource ContentControlFontSize}"
Foreground="{ThemeResource TextBoxPlaceholderTextThemeBrush}"
IsTabStop="False"
Padding="{TemplateBinding Padding}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TextBox.Style>
</TextBox>

I have found a nice style for WPF applications and I´m trying to make it work with ValidationErrors.
Here the full textbox style:
<Style x:Key="TextBoxStyle" TargetType="TextBox">
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Foreground" Value="{StaticResource ForegroundBrush}" />
<Setter Property="FontSize" Value="13.333" />
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="Background" Value="{StaticResource TextBoxBackgroundBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource TextBoxBorderBrush}" />
<Setter Property="MinHeight" Value="30" />
<Setter Property="Padding" Value="6,4" />
<Setter Property="SelectionBrush" Value="{StaticResource TextBoxFocusedBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Grid x:Name="RootElement">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TextBoxHoverBorderBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TextBoxHoverBackgroundBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement" />
</Storyboard>
</VisualState>
<VisualState x:Name="ReadOnly">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ReadOnlyVisualElement" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ValidationStates">
<VisualState x:Name="Valid" />
<VisualState x:Name="InvalidUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ValidationErrorElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="InvalidFocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ValidationErrorElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsOpen" Storyboard.TargetName="validationTooltip">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>True</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Opacity="1">
<Grid>
<Border x:Name="ReadOnlyVisualElement" Background="{StaticResource TextBoxReadOnlyBackgroundBrush}" Opacity="0" />
<ScrollViewer x:Name="PART_ContentHost" BorderThickness="0" IsTabStop="False" Padding="{TemplateBinding Padding}" />
</Grid>
</Border>
<Border x:Name="DisabledVisualElement" BorderBrush="{StaticResource DisabledVisualElement}" BorderThickness="{TemplateBinding BorderThickness}" Background="{StaticResource DisabledVisualElement}" IsHitTestVisible="False" Opacity="0" />
<Border x:Name="FocusVisualElement" BorderBrush="{StaticResource TextBoxFocusedBrush}" BorderThickness="{TemplateBinding BorderThickness}" IsHitTestVisible="False" Opacity="0" />
<Border x:Name="ValidationErrorElement" BorderBrush="{StaticResource ValidationErrorElement}" BorderThickness="{TemplateBinding BorderThickness}" Visibility="Collapsed">
<ToolTipService.ToolTip>
<ToolTip x:Name="validationTooltip" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" Placement="Right" PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Template="{StaticResource ValidationToolTipTemplate}">
<ToolTip.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="validationTooltip">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>true</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToolTip.Triggers>
</ToolTip>
</ToolTipService.ToolTip>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
The problem is when it will show the validation error, it says that the element "validationTooltip" cannot be found.
I've tried change the storyboard from
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsOpen" Storyboard.TargetName="validationTooltip">
to
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsOpen" Storyboard.Target="{Binding ElementName=validationTooltip}">
and the error has stopped, but instead another error shows, saying "cannot resolve all property references in the property path" pointing to "IsOpen".
Do you guys have any clues?

After some time, I got the expected result using triggers and creating my own style.
Here is the code.
<Style TargetType="TextBox" x:Key="FieldTextBoxStyle" BasedOn="{StaticResource FieldTextBoxStyle2}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Grid x:Name="RootElement">
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Opacity="1">
<Grid>
<Border x:Name="ReadOnlyVisualElement" Background="{StaticResource TextBoxReadOnlyBackgroundBrush}" Opacity="0" />
<ScrollViewer x:Name="PART_ContentHost" BorderThickness="0" IsTabStop="False" Padding="{TemplateBinding Padding}" />
</Grid>
</Border>
<Border x:Name="DisabledVisualElement" BorderBrush="{StaticResource DisabledVisualElement}" BorderThickness="{TemplateBinding BorderThickness}" Background="{StaticResource DisabledVisualElement}" IsHitTestVisible="False" Opacity="0" />
<Border x:Name="FocusVisualElement" BorderBrush="{StaticResource TextBoxFocusedBrush}" BorderThickness="{TemplateBinding BorderThickness}" IsHitTestVisible="False" Opacity="0" />
<Border x:Name="ValidationErrorElement" BorderBrush="{StaticResource ValidationErrorElement}" BorderThickness="{TemplateBinding BorderThickness}" Visibility="Collapsed">
<ToolTipService.ToolTip>
<ToolTip x:Name="validationTooltip" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" IsHitTestVisible="true" Placement="Right" PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Template="{StaticResource ValidationToolTipTemplate}"/>
</ToolTipService.ToolTip>
</Border>
</Grid>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsEnabled" Value="true" />
<Condition Property="IsMouseOver" Value="true" />
</MultiTrigger.Conditions>
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource TextBoxHoverBorderBrush}" />
<Setter TargetName="Border" Property="Background" Value="{StaticResource TextBoxHoverBackgroundBrush}" />
</MultiTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="DisabledVisualElement" Property="Opacity" Value="1" />
</Trigger>
<Trigger Property="IsReadOnly" Value="true">
<Setter TargetName="ReadOnlyVisualElement" Property="Opacity" Value="1" />
</Trigger>
<Trigger Property="IsFocused" Value="true">
<Setter TargetName="FocusVisualElement" Property="Opacity" Value="1" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsFocused" Value="true" />
<Condition Property="Validation.HasError" Value="true" />
</MultiTrigger.Conditions>
<Setter TargetName="ValidationErrorElement" Property="Visibility" Value="Visible" />
<Setter TargetName="validationTooltip" Property="IsOpen" Value="true" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsFocused" Value="false" />
<Condition Property="Validation.HasError" Value="true" />
</MultiTrigger.Conditions>
<Setter TargetName="ValidationErrorElement" Property="Visibility" Value="Visible" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>