Refine UI layout in PLib video library manager by adjusting MainWindow and SettingsView for a more cohesive design. Implement dedicated styles for panel headers and footers, ensuring consistent visual hierarchy. Update README.md to document these layout enhancements and style changes.

This commit is contained in:
Leonid Pershin
2026-08-08 13:48:41 +03:00
parent 5920f7a940
commit bf2c825244
4 changed files with 69 additions and 51 deletions
+38 -7
View File
@@ -127,6 +127,30 @@
<Setter Property="BorderThickness" Value="0,1,0,0" />
</Style>
<!--
The panel's own header and action row. Deliberately lighter than the window bars above:
they belong to a region inside the content, and giving them the same weight made the two
halves read as two applications stitched together.
-->
<Style Selector="Border.panelHeader">
<Setter Property="Padding" Value="16,13" />
<Setter Property="BorderBrush" Value="{DynamicResource SurfaceBorderBrush}" />
<Setter Property="BorderThickness" Value="0,0,0,1" />
</Style>
<Style Selector="Border.panelFooter">
<Setter Property="Padding" Value="16,12" />
<Setter Property="BorderBrush" Value="{DynamicResource SurfaceBorderBrush}" />
<Setter Property="BorderThickness" Value="0,1,0,0" />
</Style>
<Style Selector="TextBlock.panelTitle">
<Setter Property="Foreground" Value="{DynamicResource TextPrimaryBrush}" />
<Setter Property="FontSize" Value="14" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
<!-- ======================== Settings panel ======================== -->
<!--
@@ -138,14 +162,11 @@
<Style Selector="Border.settingsPanel">
<Setter Property="Width" Value="0" />
<Setter Property="ClipToBounds" Value="True" />
<!--
Its own backdrop and a stronger divider than the usual surface border: once the bars on
both sides line up, a hairline in the ordinary border colour reads as one continuous
bar and the panel stops looking like a separate region.
-->
<!-- Its own backdrop, so the panel reads as a separate region even where the bars on
both sides share a colour. The divider itself is a sibling element, not this
border: a border belongs to the panel and is only as visible as the panel's own
background, whereas the separation has to hold across the bars too. -->
<Setter Property="Background" Value="{DynamicResource PanelBackgroundBrush}" />
<Setter Property="BorderBrush" Value="{DynamicResource PanelDividerBrush}" />
<Setter Property="BorderThickness" Value="1,0,0,0" />
<Setter Property="Transitions">
<Transitions>
<DoubleTransition Property="Width" Duration="0:0:0.22" Easing="CubicEaseOut" />
@@ -157,6 +178,16 @@
<Setter Property="Width" Value="400" />
</Style>
<!--
Drawn after the panel and over both bars, so nothing can paint across it. This is the
one line that tells the eye where the library ends and the settings begin.
-->
<Style Selector="Rectangle.panelDivider">
<Setter Property="Width" Value="1" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="Fill" Value="{DynamicResource PanelDividerBrush}" />
</Style>
<!-- ============================ Badge ============================ -->
<Style Selector="Border.badge">