fix(controls): Fix Separator layout and add Orientation attached prop…

[apachezy]

Pull request type

Please check the type of change your PR introduces:

• Update
• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes

What is the current behavior?

Currently, the Separator control uses a global implicit style to apply WPFUI’s theme colors and attempts to support vertical orientation. However, several issues cause incorrect layout behavior:

• "Double Margin" Effect: The implicit style overrides the default template and incorrectly makes the internal Border's Margin property inherit the Separator control's Margin property via TemplateBinding.

  As shown below:

  <Style TargetType="{x:Type Separator}">
      ...
      <Setter Property="Template">
          <Setter.Value>
              <ControlTemplate TargetType="{x:Type Separator}">
                  <!-- Incorrectly inherits the Margin property -->
                  <Border
                      Margin="{TemplateBinding Margin}"
                      ... />
              </ControlTemplate>
          </Setter.Value>
      </Setter>
  </Style>

  This causes the Separator's own Margin property to take effect, and the internal Border also inherits the same Margin value. The Border then creates spacing inside the control, expanding it and ultimately manifesting as a "double margin" effect.

  Example:
  

• Directional Support: It uses the Top and Left borders of a Border to simulate horizontal and vertical separator lines. When width or height is set larger than 1, two lines become visible. Moreover, these lines are not centered—unlike the native WPF Separator, whose line always stays in the middle.

  Example: <Separator Width="100" Height="100" />
  

• Property and Resource Key Naming: Due to the above design (using Border to draw the line), the style uses BorderBrush for theming, and the resource key is named “SeparatorBorderBrush.” However, the native WPF Separator uses the Background property for its visual color. This discrepancy can confuse developers and lead to unexpected behavior.

Issue Number: N/A

What is the new behavior?

• The style has been redefined to align with the behavior of the native WPF Separator control, eliminating the “double margin” issue.

• Introduced the SeparatorAttached helper class, which adds an Orientation attached property to Separator. Together with the updated style, this enables seamless direction switching.

• Renamed the theme resource key from SeparatorBorderBrush to SeparatorBackgroundBrush, matching WPF’s native naming pattern and unifying developer expectations.

Examples:

<Separator Margin="0 10 0 2" />

and:

<Separator ui:SeparatorAttached.Orientation="Vertical" Margin="10" />

Other information