<HeaderedContentControl
    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"
    mc:Ignorable="d"
    d:DesignWidth="1280" d:DesignHeight="1720"
    Style="{StaticResource SampleControlStyle}"
    Header="Brushes"
    Tag="https://www.noesisengine.com/docs/Gui.Core._Blush.html">

  <StackPanel>
    <TextBlock Style="{StaticResource SampleSectionDesc}" Text="A Brush defines how to fill the interiors of panels and graphical shapes such as rectangles, ellipses and paths."/>
    <HeaderedContentControl Style="{StaticResource SampleSectionStyle}" Tag="https://www.noesisengine.com/xamltoy/248731b0149ce9bb2152b7d78358be7d" TabIndex="100">
      <HeaderedContentControl.Header>
        <StackPanel>
          <TextBlock Style="{StaticResource SampleSectionTitle}" Text="SolidColorBrush"/>
          <TextBlock Style="{StaticResource SampleSectionDesc}" Margin="0,5,0,0">
            <Run>The</Run>
            <Run FontWeight="Bold">Color</Run>
            <Run>property specifies a solid color. It can be defined by a named color like Red, or an hexadecimal value for the four color components: alpha, red, green and blue.</Run>
          </TextBlock>
        </StackPanel>
      </HeaderedContentControl.Header>
      <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
        <Rectangle Height="5" Fill="Gray" Margin="0,20,0,0" VerticalAlignment="Top"/>
        <StackPanel Orientation="Horizontal" Margin="20,0">
          <StackPanel>
            <Rectangle Width="80" Height="40">
              <Rectangle.Fill>
                <SolidColorBrush Color="Red"/>
              </Rectangle.Fill>
            </Rectangle>
            <TextBlock Text="Red" HorizontalAlignment="Center" Margin="0,4,0,0"/>
          </StackPanel>
          <StackPanel Margin="30,0,0,0">
            <Rectangle Width="80" Height="40">
              <Rectangle.Fill>
                <SolidColorBrush Color="#00FF00"/>
              </Rectangle.Fill>
            </Rectangle>
            <TextBlock Text="#00FF00" HorizontalAlignment="Center" Margin="0,4,0,0"/>
          </StackPanel>
          <StackPanel Margin="30,0,0,0">
            <Rectangle Width="80" Height="40">
              <Rectangle.Fill>
                <SolidColorBrush Color="#7F0000FF"/>
              </Rectangle.Fill>
            </Rectangle>
            <TextBlock Text="#7F0000FF" HorizontalAlignment="Center" Margin="0,4,0,0"/>
          </StackPanel>
        </StackPanel>
      </Grid>
    </HeaderedContentControl>
    <HeaderedContentControl Style="{StaticResource SampleSectionStyle}" Tag="https://www.noesisengine.com/xamltoy/e86ed48a82d8696ba0e51cdd8624a112" TabIndex="200">
      <HeaderedContentControl.Header>
        <StackPanel>
          <TextBlock Style="{StaticResource SampleSectionTitle}" Text="LinearGradientBrush"/>
          <TextBlock Style="{StaticResource SampleSectionDesc}" Margin="0,5,0,0">
            <Run>A LinearGradientBrush renders a gradient along a line defined by the</Run>
            <Run FontWeight="Bold">StartPoint</Run>
            <Run>and</Run>
            <Run FontWeight="Bold">EndPoint</Run>
            <Run>properties. The gradient colors are specified by a collection of</Run>
            <Run FontWeight="Bold">GradientStop</Run>
            <Run>objects.</Run>
          </TextBlock>
        </StackPanel>
      </HeaderedContentControl.Header>
      <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
        <Rectangle Height="5" Fill="Gray" Margin="0,20,0,0" VerticalAlignment="Top"/>
        <StackPanel Margin="20,0">
          <Rectangle Width="320" Height="40">
            <Rectangle.Fill>
              <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                <GradientStop Offset="{Binding Value, ElementName=offset1}" Color="{Binding SelectedItem.Content, ElementName=color1}"/>
                <GradientStop Offset="{Binding Value, ElementName=offset2}" Color="{Binding SelectedItem.Content, ElementName=color2}"/>
              </LinearGradientBrush>
            </Rectangle.Fill>
          </Rectangle>
          <StackPanel Orientation="Horizontal" Margin="0,10,0,0">
            <TextBlock Text="Stop 0" Width="50" VerticalAlignment="Center" Margin="0,0,10,0"/>
            <Slider x:Name="offset1" Minimum="0" Maximum="1" Value="0" SmallChange="0.1" LargeChange="0.1" Width="120" Margin="0,0,10,0"/>
            <ComboBox x:Name="color1" Width="130" SelectedIndex="0">
              <ComboBoxItem>
                <Color>#FFFF0000</Color>
              </ComboBoxItem>
              <ComboBoxItem>
                <Color>#7FFF0000</Color>
              </ComboBoxItem>
              <ComboBoxItem>
                <Color>#FF00FF00</Color>
              </ComboBoxItem>
              <ComboBoxItem>
                <Color>#7F00FF00</Color>
              </ComboBoxItem>
              <ComboBoxItem>
                <Color>#FF0000FF</Color>
              </ComboBoxItem>
              <ComboBoxItem>
                <Color>#7F0000FF</Color>
              </ComboBoxItem>
            </ComboBox>
          </StackPanel>
          <StackPanel Orientation="Horizontal" Margin="0,4,0,0">
            <TextBlock Text="Stop 1" Width="50" VerticalAlignment="Center" Margin="0,0,10,0"/>
            <Slider x:Name="offset2" Minimum="0" Maximum="1" Value="1" SmallChange="0.1" LargeChange="0.1" Width="120" Margin="0,0,10,0"/>
            <ComboBox x:Name="color2" Width="130" SelectedIndex="2">
              <ComboBoxItem>
                <Color>#FFFF0000</Color>
              </ComboBoxItem>
              <ComboBoxItem>
                <Color>#7FFF0000</Color>
              </ComboBoxItem>
              <ComboBoxItem>
                <Color>#FF00FF00</Color>
              </ComboBoxItem>
              <ComboBoxItem>
                <Color>#7F00FF00</Color>
              </ComboBoxItem>
              <ComboBoxItem>
                <Color>#FF0000FF</Color>
              </ComboBoxItem>
              <ComboBoxItem>
                <Color>#7F0000FF</Color>
              </ComboBoxItem>
            </ComboBox>
          </StackPanel>
        </StackPanel>
      </Grid>
    </HeaderedContentControl>
    <HeaderedContentControl Style="{StaticResource SampleSectionStyle}" Tag="https://www.noesisengine.com/xamltoy/0b53f9fd57c38129431c55d088ba5f24" TabIndex="200">
      <HeaderedContentControl.Header>
        <StackPanel>
          <TextBlock Style="{StaticResource SampleSectionTitle}" Text="RadialGradientBrush"/>
          <TextBlock Style="{StaticResource SampleSectionDesc}" Margin="0,5,0,0">
            <Run>A RadialGradientBrush renders a gradient defined by a circle, along with a focal point specified by the</Run>
            <Run FontWeight="Bold">GradientOrigin</Run>
            <Run>property.</Run>
          </TextBlock>
        </StackPanel>
      </HeaderedContentControl.Header>
      <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
        <Rectangle Height="5" Fill="Gray" Margin="0,50,0,0" VerticalAlignment="Top"/>
        <StackPanel Margin="20,0">
          <Rectangle Width="320" Height="100">
            <Rectangle.Fill>
              <RadialGradientBrush Center="0.5,0.5" GradientOrigin="0.5,0.5">
                <GradientStop Offset="{Binding Value, ElementName=offset3}" Color="{Binding SelectedItem.Content, ElementName=color3}"/>
                <GradientStop Offset="{Binding Value, ElementName=offset4}" Color="{Binding SelectedItem.Content, ElementName=color4}"/>
              </RadialGradientBrush>
            </Rectangle.Fill>
          </Rectangle>
          <StackPanel Orientation="Horizontal" Margin="0,10,0,0">
            <TextBlock Text="Stop 0" Width="50" VerticalAlignment="Center" Margin="0,0,10,0"/>
            <Slider x:Name="offset3" Minimum="0" Maximum="1" Value="0" SmallChange="0.1" LargeChange="0.1" Width="120" Margin="0,0,10,0"/>
            <ComboBox x:Name="color3" Width="130" SelectedIndex="0">
              <ComboBoxItem>
                <Color>#FFFF0000</Color>
              </ComboBoxItem>
              <ComboBoxItem>
                <Color>#7FFF0000</Color>
              </ComboBoxItem>
              <ComboBoxItem>
                <Color>#FF00FF00</Color>
              </ComboBoxItem>
              <ComboBoxItem>
                <Color>#7F00FF00</Color>
              </ComboBoxItem>
              <ComboBoxItem>
                <Color>#FF0000FF</Color>
              </ComboBoxItem>
              <ComboBoxItem>
                <Color>#7F0000FF</Color>
              </ComboBoxItem>
            </ComboBox>
          </StackPanel>
          <StackPanel Orientation="Horizontal" Margin="0,4,0,0">
            <TextBlock Text="Stop 1" Width="50" VerticalAlignment="Center" Margin="0,0,10,0"/>
            <Slider x:Name="offset4" Minimum="0" Maximum="1" Value="1" SmallChange="0.1" LargeChange="0.1" Width="120" Margin="0,0,10,0"/>
            <ComboBox x:Name="color4" Width="130" SelectedIndex="1">
              <ComboBoxItem>
                <Color>#FFFF0000</Color>
              </ComboBoxItem>
              <ComboBoxItem>
                <Color>#7FFF0000</Color>
              </ComboBoxItem>
              <ComboBoxItem>
                <Color>#FF00FF00</Color>
              </ComboBoxItem>
              <ComboBoxItem>
                <Color>#7F00FF00</Color>
              </ComboBoxItem>
              <ComboBoxItem>
                <Color>#FF0000FF</Color>
              </ComboBoxItem>
              <ComboBoxItem>
                <Color>#7F0000FF</Color>
              </ComboBoxItem>
            </ComboBox>
          </StackPanel>
        </StackPanel>
      </Grid>
    </HeaderedContentControl>
    <HeaderedContentControl Style="{StaticResource SampleSectionStyle}" Tag="https://www.noesisengine.com/xamltoy/7880315f865106350dd9cb75126cc498" TabIndex="200">
      <HeaderedContentControl.Header>
        <StackPanel>
          <TextBlock Style="{StaticResource SampleSectionTitle}" Text="ImageBrush"/>
          <TextBlock Style="{StaticResource SampleSectionDesc}" Margin="0,5,0,0">
            <Run>An ImageBrush is a type of</Run>
            <Run FontWeight="Bold">TileBrush</Run>
            <Run>that defines its content as an image specified by its</Run>
            <Run FontWeight="Bold">ImageSource</Run>
            <Run>property. You can control how the image is stretched, aligned, and tiled, enabling you to produce patterns and other effects.</Run>
          </TextBlock>
        </StackPanel>
      </HeaderedContentControl.Header>
      <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <Grid>
          <Rectangle Height="5" Fill="Gray" Margin="0,50,0,0" VerticalAlignment="Top"/>
          <Rectangle Width="300" Height="100" Margin="20,0">
            <Rectangle.Fill>
              <ImageBrush ImageSource="Images/Nature.png" Stretch="UniformToFill"/>
            </Rectangle.Fill>
          </Rectangle>
        </Grid>
        <Grid Margin="0,10,0,0">
          <Rectangle Height="5" Fill="Gray" Margin="0,50,0,0" VerticalAlignment="Top"/>
          <Rectangle Width="300" Height="100" Margin="20,0">
            <Rectangle.Fill>
              <ImageBrush ImageSource="Images/Nature.png" Stretch="Uniform" Viewbox="0.3,0.17,0.3,0.3" Opacity="0.75"/>
            </Rectangle.Fill>
          </Rectangle>
        </Grid>
        <Grid Margin="0,10,0,0">
          <Rectangle Height="5" Fill="Gray" Margin="0,50,0,0" VerticalAlignment="Top"/>
          <Rectangle Width="300" Height="100">
            <Rectangle.Fill>
              <ImageBrush ImageSource="Images/Nature.png" Stretch="Fill" Viewport="0,0,0.25,0.5" TileMode="Tile"/>
            </Rectangle.Fill>
          </Rectangle>
        </Grid>
      </StackPanel>
    </HeaderedContentControl>
    <HeaderedContentControl Style="{StaticResource SampleSectionStyle}" Tag="https://www.noesisengine.com/xamltoy/c3d1a13ba96f2f2a1b5b3625a3ec0279" TabIndex="200">
      <HeaderedContentControl.Header>
        <StackPanel>
          <TextBlock Style="{StaticResource SampleSectionTitle}" Text="VisualBrush"/>
          <TextBlock Style="{StaticResource SampleSectionDesc}" Margin="0,5,0,0">
            <Run>You can use an existing Visual to generate a duplicate image of the target Visual to create interesting effects, such as reflection and magnification.</Run>
          </TextBlock>
        </StackPanel>
      </HeaderedContentControl.Header>
      <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Viewbox x:Name="elephant" Width="150" Height="100" Margin="5" VerticalAlignment="Top">
          <Grid Width="512" Height="350" RenderTransformOrigin="0.5,0.5">
            <Grid Margin="0,-80,0,0">
              <Path Fill="#FF476775" Data="M84.05 289.048l6.275 120.812c0.183 2.214 2.037 3.918 4.262 3.918h67.741   c2.695 0 4.912-2.116 5.035-4.803l0.196-4.295c0.187-4.087-1.534-8.028-4.659-10.672l-10.054-8.505   c-3.688-3.12-5.377-8.004-4.401-12.732l10.088-93.866L84.05 289.048z"/>
              <Path Fill="#FF476775" Data="M291.867 251.177l-28.735 125.399c-0.695 1.945 0.103 4.108 1.896 5.137l16.321 9.371   c1.229 0.705 2.028 1.974 2.133 3.385l1.095 14.724c0.184 2.476-1.778 4.586-4.264 4.586h-62.812c-2.538 0-4.517-2.194-4.253-4.715   l12.335-162.692L291.867 251.177z"/>
              <Path Fill="#FF91BED4" Data="M479.338 147.889v165.316c0 28.221-22.91 51.097-51.172 51.097h-0.773  c-28.261 0-51.172-22.877-51.172-51.097v-24.343c0-2.252 1.828-4.078 4.081-4.078h32.163c2.256 0 4.083 1.826 4.083 4.08v24.21  c0 6.053 4.911 10.959 10.968 10.959h0.014c6.057 0 10.968-4.907 10.968-10.959v-74.422l-66.454-12.56l-32.16 25.507l10.047 122.724  c0.173 1.366 0.991 2.559 2.215 3.211l20.593 11.051c1.266 0.683 2.103 1.948 2.226 3.385l1.552 17.148  c0.225 2.498-1.756 4.659-4.267 4.659h-57.623c-1.868 0-3.512-1.203-4.083-2.977l-24.355-119.72  c-0.514-2.529-3.116-4.045-5.568-3.235c-17.686 5.839-82.518 25.926-125.374 21.681l-48.473-2.247  c-1.692-0.078-3.278 0.837-4.045 2.347c-14.626 28.789-27.168 59.192-27.168 59.192l-3.553 7.431  c-0.755 1.57-1.113 3.232-1.113 4.873c0 3.731 1.848 7.351 5.166 9.491c3.043 1.978 4.952 5.281 5.145 8.89l0.347 6.556  c0.225 4.19-3.124 7.718-7.33 7.718H4.317c-2.363 0-4.278-1.913-4.278-4.275V302.38c0 0-1.327-57.203 11.496-102.773  c0.01-0.041 0.03-0.082 0.041-0.122c2.787-9.878 6.238-19.197 10.505-27.271c0.062-0.122 0.133-0.234 0.194-0.357  c0.173-0.336 0.357-0.662 0.541-0.99c0.246-0.459 0.501-0.917 0.766-1.366c0.225-0.398 0.46-0.795 0.694-1.192c0 0 0 0 0.01-0.01  c20.726-35.488 59.256-59.323 103.372-59.323h235.136l18.163-10.755h48.638C457.068 98.221 479.338 120.458 479.338 147.889z"/>
              <Path Fill="#FF628FA3" Data="M438.499 238.653v74.422c0 0.696-0.072 1.374-0.196 2.034c0.956 5.079 5.415 8.926 10.779 8.926   c6.061 0 10.976-4.907 10.976-10.959v-74.422h-21.558V238.653z"/>
              <Path Fill="#FF628FA3" Data="M21.597 409.506V302.38c0 0-1.327-57.203 11.496-102.772c0.01-0.041 0.03-0.082 0.041-0.122   c2.787-9.878 6.238-19.197 10.505-27.271c0.062-0.122 0.133-0.234 0.194-0.357c0.173-0.336 0.357-0.662 0.541-0.99   c0.246-0.458 0.501-0.917 0.766-1.366c0.225-0.397 0.46-0.795 0.694-1.192c0 0 0 0 0.01-0.01   c20.726-35.488 59.256-59.323 103.372-59.323h-21.558c-44.116 0-82.646 23.836-103.372 59.323c-0.01 0.01-0.01 0.01-0.01 0.01   c-0.235 0.397-0.469 0.795-0.694 1.192c-0.265 0.448-0.52 0.908-0.766 1.366c-0.184 0.327-0.368 0.653-0.541 0.99   c-0.062 0.122-0.133 0.234-0.194 0.357c-4.267 8.074-7.719 17.392-10.505 27.271c-0.01 0.041-0.03 0.082-0.041 0.122   C-1.288 245.178 0.039 302.38 0.039 302.38v107.126c0 2.359 1.915 4.272 4.278 4.272h21.558   C23.513 413.778 21.597 411.865 21.597 409.506z"/>
              <Path Fill="#FF628FA3" Data="M332.1 410.801l-21.584-106.1c-1.975-9.705-11.862-15.616-21.351-12.758   c-0.856 0.258-1.737 0.52-2.642 0.789l24.02 118.069c0.572 1.774 2.215 2.977 4.083 2.977h21.558   C334.316 413.778 332.673 412.575 332.1 410.801z"/>
              <Path Fill="#FF628FA3" Data="M397.778 313.205v-24.344c0-2.252 1.829-4.077 4.083-4.077h-21.558   c-2.256 0-4.083 1.825-4.083 4.077v24.344c0 28.221 22.91 51.098 51.172 51.098h0.773c3.561 0 7.036-0.365 10.393-1.056   C415.28 358.451 397.778 337.87 397.778 313.205z"/>
              <Path Fill="#FF91BED4" Data="M11.577 199.485c2.379-9.604 5.942-18.749 10.505-27.271  C17.815 180.288 14.364 189.606 11.577 199.485z"/>
              <Ellipse Margin="436.6,164.1,0,0" Width="16.2" Height="16.2" Fill="#FF476775" HorizontalAlignment="Left" VerticalAlignment="Top"/>
              <Path Fill="#FF628FA3" Data="M332.206 288.862h-40.679c-2.254 0-4.081-1.828-4.081-4.081V182.674  c0-46.642 37.811-84.454 84.454-84.454h13.795c2.38 0 4.31 1.93 4.31 4.31v128.533C390.004 262.984 364.126 288.862 332.206 288.862  z"/>
              <Path Fill="#FF476775" Data="M309.004 284.783V182.639c0-45.454 28.517-82.5 73.56-84.33l7.441-0.089h-18.069  c-46.662 0-84.488 37.795-84.488 84.418v102.144c0 2.253 1.828 4.079 4.082 4.079h21.558  C310.831 288.861 309.004 287.036 309.004 284.783z"/>
              <Path Fill="#FFF2E5CB" Data="M426.929 217.627l-5.535 9.518c-2.119 3.644 0 8.286 4.144 9.079l81.592 15.617  c4.45 0.852 6.772-5.089 2.919-7.472l-54.711-33.838C445.558 204.482 432.706 207.692 426.929 217.627z"/>
            </Grid>
          </Grid>
        </Viewbox>
        <Rectangle Width="140" Height="100" Margin="10,0,0,0" Stroke="Gray">
          <Rectangle.Fill>
            <VisualBrush Visual="{Binding ElementName=elephant}" Stretch="Uniform" Viewbox="0.5,0,0.5,0.5" AlignmentY="Top"/>
          </Rectangle.Fill>
        </Rectangle>
      </StackPanel>
    </HeaderedContentControl>
  </StackPanel>
</HeaderedContentControl>