Develop Reference

Non-changeable navigation button - c#

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>

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>

I have a tree view in WPF in C# with parent and child nodes. I want to bring the Expand/Collapse button to the right side. I tried the flow direction property but it is not working as expected.
How to change the position of the Expand/Collapse button in tree view?

Your best approch if you override the Treeview Control Template. Here is an example:
<Window.Resources>
<Color x:Key="SelectedBackgroundColor">#FFC5CBF9</Color>
<Color x:Key="SelectedUnfocusedColor">#FFDDDDDD</Color>
<Color x:Key="GlyphColor">#FF444444</Color>
<Color x:Key="GlyphMouseOver">sc#1, 0.004391443, 0.002428215, 0.242281124</Color>
<Style x:Key="{x:Type TreeView}"
TargetType="TreeView">
<Setter Property="OverridesDefaultStyle"
Value="True" />
<Setter Property="SnapsToDevicePixels"
Value="True" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility"
Value="Auto" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TreeView">
<Border Name="Border"
CornerRadius="1"
BorderThickness="1">
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
</Border.BorderBrush>
<Border.Background>
<SolidColorBrush Color="{DynamicResource ControlLightColor}" />
</Border.Background>
<ScrollViewer Focusable="False"
CanContentScroll="False"
Padding="4">
<ItemsPresenter />
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ExpandCollapseToggleStyle" TargetType="ToggleButton">
<Setter Property="Focusable" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid Width="15"
Height="13"
Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="Collapsed">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{x:Static Visibility.Hidden}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="Expanded">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked" />
<VisualState x:Name="Indeterminate" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Path x:Name="Collapsed"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="1,1,1,1"
Data="M 4 0 L 8 4 L 4 8 Z">
<Path.Fill>
<SolidColorBrush Color="{DynamicResource GlyphColor}" />
</Path.Fill>
</Path>
<Path x:Name="Expanded"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="1,1,1,1"
Data="M 0 4 L 8 4 L 4 8 Z"
Visibility="Hidden">
<Path.Fill>
<SolidColorBrush Color="{DynamicResource GlyphColor}" />
</Path.Fill>
</Path>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="TreeViewItemFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Border>
<Rectangle Margin="0,0,0,0"
StrokeThickness="5"
Stroke="Black"
StrokeDashArray="1 2"
Opacity="0" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="{x:Type TreeViewItem}"
TargetType="{x:Type TreeViewItem}">
<Setter Property="Background"
Value="Transparent" />
<Setter Property="HorizontalContentAlignment"
Value="{Binding Path=HorizontalContentAlignment,
RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
<Setter Property="VerticalContentAlignment"
Value="{Binding Path=VerticalContentAlignment,
RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
<Setter Property="Padding"
Value="1,0,0,0" />
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
<Setter Property="FocusVisualStyle"
Value="{StaticResource TreeViewItemFocusVisual}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TreeViewItem}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition MinWidth="19" Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Bd"
Storyboard.TargetProperty="(Panel.Background).
(SolidColorBrush.Color)"
>
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource SelectedBackgroundColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unselected" />
<VisualState x:Name="SelectedInactive">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Bd"
Storyboard.TargetProperty="(Panel.Background).
(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource SelectedUnfocusedColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ExpansionStates">
<VisualState x:Name="Expanded">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="ItemsHost">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Collapsed" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ToggleButton x:Name="Expander" Style="{StaticResource ExpandCollapseToggleStyle}"
ClickMode="Press"
Grid.Column="1"
IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"/>
<Border x:Name="Bd"
Grid.Column="0"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<ContentPresenter x:Name="PART_Header"
ContentSource="Header"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
</Border>
<ItemsPresenter x:Name="ItemsHost"
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2"
Visibility="Collapsed" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="Expander"
Property="Visibility"
Value="Hidden" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="HasHeader" Value="false" />
<Condition Property="Width" Value="Auto" />
</MultiTrigger.Conditions>
<Setter TargetName="PART_Header"
Property="MinWidth"
Value="75" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="HasHeader" Value="false" />
<Condition Property="Height" Value="Auto" />
</MultiTrigger.Conditions>
<Setter TargetName="PART_Header"
Property="MinHeight"
Value="19" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<TreeView>
<TreeViewItem Header="Cold Drinks">
<TreeViewItem Header="Coke"></TreeViewItem>
<TreeViewItem Header="Pepsi"></TreeViewItem>
<TreeViewItem Header="Orange Juice"></TreeViewItem>
<TreeViewItem Header="Milk"></TreeViewItem>
<TreeViewItem Header="Iced Tea"></TreeViewItem>
<TreeViewItem Header="Mango Shake"></TreeViewItem>
</TreeViewItem>
</TreeView>
</Grid>
Here is the result:

How do I control the horizontal space being used by the expanded TreeViewItems so a treeview can take less space? Can it be done by styling alone or do it have to be a fully remade treeview to control these kind of styling properties?

The items you see are layout by the ItemsPresenter of the parent TreeViewItem. This means to change the indentation of the child items you must change the position of the ItemsPresenter in the layout.
To do so you must override the default ControlTemplate of the TreeViewItem. Find the ItemsPresenter and give it a negative left Margin to decrease the indentation or a positive left marging to increase the indentation of the child items.
The following Style is taken from Microsoft Docs: TreeView ControlTemplate Example. There you find all the resources that the following Style depends on.
The key is to set a negative left Margin on the ItemsPresenter which is named "ItemsHost":
<ItemsPresenter x:Name="ItemsHost"
...
Margin="-12,0,0,0" />
The full TreeViewItemStyle (without resources):
<Style x:Key="{x:Type TreeViewItem}"
TargetType="{x:Type TreeViewItem}">
<Setter Property="Background"
Value="Transparent" />
<Setter Property="HorizontalContentAlignment"
Value="{Binding Path=HorizontalContentAlignment,
RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
<Setter Property="VerticalContentAlignment"
Value="{Binding Path=VerticalContentAlignment,
RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
<Setter Property="Padding"
Value="1,0,0,0" />
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
<Setter Property="FocusVisualStyle"
Value="{StaticResource TreeViewItemFocusVisual}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TreeViewItem}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="19"
Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Bd"
Storyboard.TargetProperty="(Panel.Background).
(SolidColorBrush.Color)"
>
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource SelectedBackgroundColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unselected" />
<VisualState x:Name="SelectedInactive">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Bd"
Storyboard.TargetProperty="(Panel.Background).
(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource SelectedUnfocusedColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ExpansionStates">
<VisualState x:Name="Expanded">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="ItemsHost">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Collapsed" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ToggleButton x:Name="Expander"
Style="{StaticResource ExpandCollapseToggleStyle}"
ClickMode="Press"
IsChecked="{Binding IsExpanded,
RelativeSource={RelativeSource TemplatedParent}}"/>
<Border x:Name="Bd"
Grid.Column="1"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<ContentPresenter x:Name="PART_Header"
ContentSource="Header"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
</Border>
<!-- Host of the child items -->
<ItemsPresenter x:Name="ItemsHost"
Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="2"
Visibility="Collapsed"
Margin="-12,0,0,0" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasItems"
Value="false">
<Setter TargetName="Expander"
Property="Visibility"
Value="Hidden" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="HasHeader"
Value="false" />
<Condition Property="Width"
Value="Auto" />
</MultiTrigger.Conditions>
<Setter TargetName="PART_Header"
Property="MinWidth"
Value="75" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="HasHeader"
Value="false" />
<Condition Property="Height"
Value="Auto" />
</MultiTrigger.Conditions>
<Setter TargetName="PART_Header"
Property="MinHeight"
Value="19" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

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();
}

I'm working with a RichEditBox and I'm having some problems saving and restoring the Rtf text.
Here's a sample Rtf text I've exported, as you can see there are the different foreground colors and font families saved correctly (I've manually indented it to make it easier to read):
{\rtf1\fbidis\ansi\ansicpg1252\deff0\nouicompat\deflang1040
{\fonttbl{\f0\fnil\fcharset0 Segoe UI;}
{\f1\fnil\fcharset0 Brush Script MT;}
{\f2\fnil\fcharset0 Impact;}
{\f3\fnil Segoe UI;}}
{\colortbl ;\red9\green105\blue192;\red0\green0\blue0;\red76\green152\blue25;\red208\green52\blue56;}
{\*\generator Riched20 10.0.14393}\viewkind4\uc1
\pard\ltrpar\tx720\cf1\b\i\f0\fs23 Test\cf2\b0\i0\par
\pard\ltrpar\li320\qc\tx720\cf3\strike\f1\fs40 Some color\cf2\strike0\f0\fs23\par
\pard\ltrpar\tx720\cf4\f2 Hello!\cf2\f0\par
\f3\par
\f0\lang1033\par
\f3\par
\par
\pard\ltrpar\tx720\fs23\par
}
Problem: I call
EditBox.Document.SetText(TextSetOptions.FormatRtf, myRtfString);
And the text is loaded in the control, but the font families and the foreground colors are completely ignored.
I've already tried calling:
EditBox.Document.ApplyDisplayUpdates();
It doesn't solve the issue. I mean, why is it that all the other paragraph/character options are restored correctly, but just the font families and foreground colors are ignored? Am I missing something here?
Thanks!
Edit: this is the custom Style I'm using for the RichEditBox:
<Style TargetType="RichEditBox" x:Key="CustomRtfEditBoxStyle">
<Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}" />
<Setter Property="MinHeight" Value="{ThemeResource TextControlThemeMinHeight}" />
<Setter Property="Foreground" Value="{ThemeResource TextControlForeground}" />
<Setter Property="Background" Value="{ThemeResource TextControlBackground}" />
<Setter Property="SelectionHighlightColor" Value="{ThemeResource TextControlSelectionHighlightColor}" />
<Setter Property="BorderBrush" Value="{ThemeResource TextControlBorderBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource TextControlBorderThemeThickness}" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
<Setter Property="TextWrapping" Value="Wrap" />
<Setter Property="Padding" Value="{ThemeResource TextControlThemePadding}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RichEditBox">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Disabled" />
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver" />
<VisualState x:Name="Focused" />
<VisualState x:Name="UnFocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border x:Name="BorderElement"
Grid.Row="1"
Background="{ThemeResource TextControlBackgroundFocused}"
BorderThickness="0"
Grid.ColumnSpan="2"
Grid.RowSpan="1" />
<ContentPresenter x:Name="HeaderContentPresenter"
x:DeferLoadStrategy="Lazy"
Visibility="Collapsed"
Grid.Row="0"
Margin="0,0,0,8"
Grid.ColumnSpan="2"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
FontWeight="Normal" />
<ScrollViewer x:Name="ContentElement"
RequestedTheme="Light"
Grid.Row="1"
HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
Margin="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
IsTabStop="False"
ZoomMode="Disabled"
AutomationProperties.AccessibilityView="Raw" />
<ContentControl x:Name="PlaceholderTextContentPresenter"
Grid.Row="1"
Margin="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
IsTabStop="False"
Grid.ColumnSpan="2"
Content="{TemplateBinding PlaceholderText}"
IsHitTestVisible="False" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

This issue currently cannot be reproduced in newest windows 10 build 14393 by code as follows:
XAML Code
... mc:Ignorable="d" Loaded="Page_Loaded">
<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<RichEditBox x:Name="EditBox" Height="400" Margin="40" >
</RichEditBox>
</StackPanel>
Code behind:
private void Page_Loaded(object sender, RoutedEventArgs e)
{
string myRtfString = #"{\rtf1\fbidis\ansi\ansicpg1252\deff0\nouicompat\deflang1040
{\fonttbl{\f0\fnil\fcharset0 Segoe UI;}
{\f1\fnil\fcharset0 Brush Script MT;}
{\f2\fnil\fcharset0 Impact;}
{\f3\fnil Segoe UI;}}
{\colortbl ;\red9\green105\blue192;\red0\green0\blue0;\red76\green152\blue25;\red208\green52\blue56;}
{\*\generator Riched20 10.0.14393}\viewkind4\uc1
\pard\ltrpar\tx720\cf1\b\i\f0\fs23 Test\cf2\b0\i0\par
\pard\ltrpar\li320\qc\tx720\cf3\strike\f1\fs40 Some color\cf2\strike0\f0\fs23\par
\pard\ltrpar\tx720\cf4\f2 Hello!\cf2\f0\par
\f3\par
\f0\lang1033\par
\f3\par
\par
\pard\ltrpar\tx720\fs23\par
}";
EditBox.Document.SetText(TextSetOptions.FormatRtf, myRtfString);
}
If you still want a workaround in your environment, please try to find the following code which is under “Focused ViewState” in the style of RichEditTextBox and comment it out. For more details about this please reference this thread.
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentElement">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlForegroundChromeBlackHighBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="RequestedTheme" Storyboard.TargetName="ContentElement">
<DiscreteObjectKeyFrame KeyTime="0" Value="Light"/>
</ObjectAnimationUsingKeyFrames>
And the result on my side: