<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Background="#FF1E1E1E">

  <Grid.Resources>

    <SolidColorBrush x:Key="Brush.Base" Color="#FFFFFFFF" />
    <SolidColorBrush x:Key="Brush.Alt" Color="#FFFFA000" />
    <SolidColorBrush x:Key="Brush.Marker" Color="#FF4060FF" />

    <Style x:Key="Style.Heading" TargetType="TextBlock">
      <Setter Property="FontSize" Value="18" />
      <Setter Property="FontWeight" Value="Bold" />
      <Setter Property="Foreground" Value="#FFFFFFFF" />
      <Setter Property="Margin" Value="0,18,0,2" />
    </Style>
    <Style x:Key="Style.RowLabel" TargetType="TextBlock">
      <Setter Property="Width" Value="260" />
      <Setter Property="FontSize" Value="14" />
      <Setter Property="Foreground" Value="#FFC8C8C8" />
      <Setter Property="VerticalAlignment" Value="Center" />
    </Style>

    <Style x:Key="Style.Row" TargetType="StackPanel">
      <Setter Property="Orientation" Value="Horizontal" />
      <Setter Property="Margin" Value="0,0,0,6" />
    </Style>

    <Style x:Key="Style.Sample" TargetType="TextBlock">
      <Setter Property="FontSize" Value="22" />
      <Setter Property="Foreground" Value="{StaticResource Brush.Base}" />
      <Setter Property="VerticalAlignment" Value="Center" />
      <Style.Triggers>
        <DataTrigger Binding="{Binding IsChecked, ElementName=ToggleForeground}" Value="True">
          <Setter Property="Foreground" Value="{StaticResource Brush.Alt}" />
        </DataTrigger>
      </Style.Triggers>
    </Style>
  </Grid.Resources>

  <ScrollViewer HorizontalScrollBarVisibility="Disabled" Padding="16" FontFamily="Arial">
    <StackPanel Orientation="Vertical">

      <!-- ==================== 1. The switch ==================== -->
      <TextBlock Style="{StaticResource Style.Heading}" Margin="0,0,0,2"
                 Text="1. Tick this, then watch every closing bracket below" />
      <CheckBox x:Name="ToggleForeground" Content="Set Foreground = orange"
                Foreground="#FFFFFFFF" Margin="0,0,0,4" />

      <!-- ==================== 2. Which child type is affected ==================== -->
      <TextBlock Text="2. Which InlineUIContainer child is affected (driven by the section 1 toggle)" Style="{StaticResource Style.Heading}"/>

      <StackPanel Style="{StaticResource Style.Row}">
        <TextBlock Style="{StaticResource Style.RowLabel}" Text="Border, Width/Height 32" />
        <TextBlock Style="{StaticResource Style.Sample}"><Run Text="[" /><InlineUIContainer><Border Width="32" Height="32" Background="{StaticResource Brush.Marker}" /></InlineUIContainer><Run Text="] tail" /></TextBlock>
      </StackPanel>

      <StackPanel Style="{StaticResource Style.Row}">
        <TextBlock Style="{StaticResource Style.RowLabel}" Text="Border, size from content" />
        <TextBlock Style="{StaticResource Style.Sample}"><Run Text="[" /><InlineUIContainer><Border Background="{StaticResource Brush.Marker}" Padding="6,2"><TextBlock Text="inner" FontSize="16" Foreground="#FFFFFFFF" /></Border></InlineUIContainer><Run Text="] tail" /></TextBlock>
      </StackPanel>

      <StackPanel Style="{StaticResource Style.Row}">
        <TextBlock Style="{StaticResource Style.RowLabel}" Text="Rectangle" />
        <TextBlock Style="{StaticResource Style.Sample}"><Run Text="[" /><InlineUIContainer><Rectangle Width="32" Height="18" Fill="{StaticResource Brush.Marker}" /></InlineUIContainer><Run Text="] tail" /></TextBlock>
      </StackPanel>

      <StackPanel Style="{StaticResource Style.Row}">
        <TextBlock Style="{StaticResource Style.RowLabel}" Text="Ellipse" />
        <TextBlock Style="{StaticResource Style.Sample}"><Run Text="[" /><InlineUIContainer><Ellipse Width="24" Height="24" Fill="{StaticResource Brush.Marker}" /></InlineUIContainer><Run Text="] tail" /></TextBlock>
      </StackPanel>

      <StackPanel Style="{StaticResource Style.Row}">
        <TextBlock Style="{StaticResource Style.RowLabel}" Text="nested TextBlock" />
        <TextBlock Style="{StaticResource Style.Sample}"><Run Text="[" /><InlineUIContainer><TextBlock Text="nested" FontSize="22" Foreground="{StaticResource Brush.Marker}" /></InlineUIContainer><Run Text="] tail" /></TextBlock>
      </StackPanel>

      <StackPanel Style="{StaticResource Style.Row}">
        <TextBlock Style="{StaticResource Style.RowLabel}" Text="stock Button" />
        <TextBlock Style="{StaticResource Style.Sample}"><Run Text="[" /><InlineUIContainer><Button Content="btn" /></InlineUIContainer><Run Text="] tail" /></TextBlock>
      </StackPanel>

      <StackPanel Style="{StaticResource Style.Row}">
        <TextBlock Style="{StaticResource Style.RowLabel}" Text="StackPanel of two Borders" />
        <TextBlock Style="{StaticResource Style.Sample}"><Run Text="[" /><InlineUIContainer><StackPanel Orientation="Horizontal"><Border Width="16" Height="16" Background="{StaticResource Brush.Marker}" /><Border Width="16" Height="16" Background="{StaticResource Brush.Alt}" Margin="2,0,0,0" /></StackPanel></InlineUIContainer><Run Text="] tail" /></TextBlock>
      </StackPanel>

      <StackPanel Style="{StaticResource Style.Row}">
        <TextBlock Style="{StaticResource Style.RowLabel}" Text="inside a Bold span" />
        <TextBlock Style="{StaticResource Style.Sample}"><Run Text="[" /><Bold><InlineUIContainer><Border Width="32" Height="32" Background="{StaticResource Brush.Marker}" /></InlineUIContainer></Bold><Run Text="] tail" /></TextBlock>
      </StackPanel>

      <StackPanel Style="{StaticResource Style.Row}">
        <TextBlock Style="{StaticResource Style.RowLabel}" Text="two containers, one line" />
        <TextBlock Style="{StaticResource Style.Sample}"><Run Text="[" /><InlineUIContainer><Border Width="32" Height="32" Background="{StaticResource Brush.Marker}" /></InlineUIContainer><Run Text="][" /><InlineUIContainer><Border Width="32" Height="32" Background="{StaticResource Brush.Alt}" /></InlineUIContainer><Run Text="] tail" /></TextBlock>
      </StackPanel>

      <StackPanel Style="{StaticResource Style.Row}">
        <TextBlock Style="{StaticResource Style.RowLabel}" Text="container with negative Margin" />
        <TextBlock Style="{StaticResource Style.Sample}"><Run Text="[" /><InlineUIContainer><Border Width="32" Height="32" Background="{StaticResource Brush.Marker}" Margin="0,0,0,-6" /></InlineUIContainer><Run Text="] tail" /></TextBlock>
      </StackPanel>

      <!-- ==================== 4. Text-only controls ==================== -->

    </StackPanel>
  </ScrollViewer>
</Grid>