<UserControl xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="IFSRenderer.AvaloniaShell.Controls.ValueSlider"
x:Name="Root">
<!--
Port of WpfDisplay/Views/ValueSlider.xaml.
Two layouts, selected by IsLabelShown, exactly as the original:
IsLabelShown = true IsLabelShown = false
┌──────────────────┬───┐ ┌───┬──────────┬───┬───┐
│ Label │ ◇ │ │ - │ 1.0000 │ + │ ◇ │
├───┬──────────┬───┴───┤ └───┴──────────┴───┴───┘
│ - │ 1.0000 │ + │
└───┴──────────┴───────┘
#303030 is the measured fill of the Windows control - sampled from the
reference screenshots, not chosen.
-->
<UserControl.Resources>
<SolidColorBrush x:Key="ValueSliderFill" Color="#303030" />
</UserControl.Resources>
<UserControl.Styles>
<!-- Flat, square, tightly-padded: the original uses MaterialDesignFlatButton
with an explicit #303030 background and no rounding. -->
<Style Selector="Button.step">
<Setter Property="Background" Value="{StaticResource ValueSliderFill}" />
<Setter Property="Foreground" Value="#e8e8e8" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="CornerRadius" Value="0" />
<Setter Property="Padding" Value="10,0" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="FontSize" Value="15" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Focusable" Value="False" />
</Style>
<Style Selector="Button.step:pointerover /template/ ContentPresenter">
<Setter Property="Background" Value="#3d3d3d" />
</Style>
<!--
The keyframe diamond: a bare glyph, no chrome, like MaterialDesignToolButton.
Padding is 8 on ALL sides, as the canonical sets it (WpfDisplay/Views/ValueSlider.xaml:47
and :86). It used to be "6,0" — no vertical padding at all — which left the button 11px
tall around a 13px glyph, so every ◇/◆/◈ was clipped top and bottom. The symptom reads as
"the keyframe icons are cropped", and because they sit hard against the right edge it looks
like the scrollbar is doing it; it is not, the glyph simply has no room.
-->
<Style Selector="Button.diamond">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="CornerRadius" Value="0" />
<Setter Property="Padding" Value="8" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="FontSize" Value="13" />
<Setter Property="Focusable" Value="False" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
<Style Selector="Button.diamond:pointerover /template/ ContentPresenter">
<Setter Property="Background" Value="#33ffffff" />
</Style>
</UserControl.Styles>
<StackPanel>
<Grid Name="LabelRow" ColumnDefinitions="*,Auto">
<TextBlock Name="LabelText" Grid.Column="0"
VerticalAlignment="Center" Margin="2,2,0,2" />
<Button Name="Diamond1" Grid.Column="1" Classes="diamond" />
</Grid>
<!--
MinHeight, not Height. The canonical declares no height on this row at all
(WpfDisplay/Views/ValueSlider.xaml:52); pinning it to the 32px measured off a screenshot
cropped the ValueEditor TextBox, whose desired height under Material is 56 - so every
click-to-type lost 24px of the control. MinHeight keeps the measured rhythm for the
normal (display) state while letting the editor have the room it asks for.
-->
<Grid ColumnDefinitions="Auto,*,Auto,Auto" MinHeight="32">
<Button Name="DownButton" Grid.Column="0" Classes="step" Content="-" />
<Border Name="ValueField" Grid.Column="1"
Background="{StaticResource ValueSliderFill}" Cursor="SizeWestEast">
<TextBlock Name="ValueText"
HorizontalAlignment="Center" VerticalAlignment="Center"
Foreground="#ffffff" />
</Border>
<!-- Occupies the same cell; swapped in while editing. -->
<TextBox Name="ValueEditor" Grid.Column="1" IsVisible="False"
HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
Padding="0" />
<Button Name="UpButton" Grid.Column="2" Classes="step" Content="+" />
<Button Name="Diamond2" Grid.Column="3" Classes="diamond" />
</Grid>
</StackPanel>
</UserControl>