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:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user