ShrlAlgoToolkit/Melskin/Controls/NumberBox.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:assists="clr-namespace:Melskin.Assists"
    xmlns:controls="clr-namespace:Melskin.Controls"
    xmlns:decorations="clr-namespace:Melskin.Controls.Decorations"
    xmlns:internal="clr-namespace:Melskin.Converters.Internal">

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/Melskin;component/Controls/Button.xaml" />
    </ResourceDictionary.MergedDictionaries>

    <Style x:Key="SlotNumberBoxStyle" TargetType="{x:Type controls:NumberBox}">
        <Setter Property="BorderBrush" Value="{DynamicResource BorderNormalBrush}" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Padding" Value="3" />
        <Setter Property="Focusable" Value="False" />
        <Setter Property="Background" Value="{DynamicResource ControlBackgroundNormalBrush}" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type controls:NumberBox}">
                    <decorations:SlotBorder
                        x:Name="slot"
                        Padding="{TemplateBinding Padding}"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Intensity="0.2">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <!--  前缀  -->
                                <ColumnDefinition Width="Auto" />
                                <!--  输入框  -->
                                <ColumnDefinition Width="*" />
                                <!--  后缀  -->
                                <ColumnDefinition Width="Auto" />

                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <ContentPresenter
                                x:Name="Prefix"
                                Grid.Column="0"
                                Margin="1,0,5,0"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                Content="{TemplateBinding assists:InputAssist.Prefix}"
                                Focusable="False" />
                            <TextBox
                                x:Name="PART_TextBox"
                                Grid.Column="1"
                                Padding="0"
                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                Background="Transparent"
                                Style="{DynamicResource FlattenTextBoxStyle}">
                                <!--<TextBox.Text>
                                    <MultiBinding Converter="{StaticResource PrecisionConverter}" UpdateSourceTrigger="PropertyChanged">
                                        <Binding Path="Value" RelativeSource="{RelativeSource TemplatedParent}" />
                                        <Binding Path="Precision" RelativeSource="{RelativeSource TemplatedParent}" />
                                    </MultiBinding>
                                </TextBox.Text>-->
                            </TextBox>
                            <!--  Suffix  -->
                            <ContentPresenter
                                x:Name="Suffix"
                                Grid.Column="2"
                                Margin="5,0,1,0"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                Content="{TemplateBinding assists:InputAssist.Suffix}"
                                Focusable="False" />
                            <Border
                                x:Name="border"
                                Grid.Column="3"
                                Margin="{Binding Padding, RelativeSource={RelativeSource TemplatedParent}, Converter={x:Static internal:NegativeConverter.Instance}}"
                                HorizontalAlignment="Right"
                                Background="Transparent"
                                BorderBrush="{DynamicResource BorderNormalBrush}"
                                BorderThickness="1,0,0,0">
                                <Grid Width="15">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="1" />
                                        <RowDefinition Height="*" />
                                    </Grid.RowDefinitions>
                                    <Button
                                        x:Name="PART_IncreaseButton"
                                        Grid.Row="0"
                                        Padding="-3"
                                        assists:ControlAssist.CornerRadius="0,4,0,0"
                                        FontSize="4"
                                        IsTabStop="False"
                                        Style="{DynamicResource FlattenButtonStyle}">
                                        <controls:IconElement
                                            x:Name="arrowUp"
                                            Foreground="{DynamicResource TextPrimaryBrush}"
                                            RenderTransformOrigin="0.5,0.5"
                                            SnapsToDevicePixels="false"
                                            Symbol="KeyboardArrowUp">
                                            <controls:IconElement.RenderTransform>
                                                <RotateTransform Angle="0" />
                                            </controls:IconElement.RenderTransform>
                                        </controls:IconElement>
                                    </Button>
                                    <Rectangle
                                        Grid.Row="1"
                                        Height="1"
                                        Fill="{DynamicResource BorderNormalBrush}" />
                                    <Button
                                        x:Name="PART_DecreaseButton"
                                        Grid.Row="2"
                                        Padding="-3"
                                        assists:ControlAssist.CornerRadius="0,0,4,0"
                                        FontSize="4"
                                        IsTabStop="False"
                                        Style="{DynamicResource FlattenButtonStyle}">
                                        <controls:IconElement
                                            x:Name="arrowDown"
                                            Foreground="{DynamicResource TextPrimaryBrush}"
                                            RenderTransformOrigin="0.5,0.5"
                                            SnapsToDevicePixels="false"
                                            Symbol="KeyboardArrowDown">
                                            <controls:IconElement.RenderTransform>
                                                <RotateTransform Angle="0" />
                                            </controls:IconElement.RenderTransform>
                                        </controls:IconElement>
                                    </Button>
                                </Grid>
                            </Border>

                        </Grid>
                    </decorations:SlotBorder>
                    <ControlTemplate.Triggers>
                        <!--  Prefix & Suffix  -->
                        <Trigger SourceName="Prefix" Property="Content" Value="{x:Null}">
                            <Setter TargetName="Prefix" Property="Visibility" Value="Collapsed" />
                        </Trigger>
                        <Trigger SourceName="Suffix" Property="Content" Value="{x:Null}">
                            <Setter TargetName="Suffix" Property="Visibility" Value="Collapsed" />
                        </Trigger>

                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="BorderBrush" Value="{DynamicResource BorderCornerLightedGradientBrush}" />
                            <!--<Setter TargetName="border" Property="Visibility" Value="Visible"/>-->
                        </Trigger>
                        <Trigger Property="IsKeyboardFocusWithin" Value="True">
                            <Setter Property="BorderBrush" Value="{DynamicResource PrimaryFocusedBrush}" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Foreground" Value="{DynamicResource TextDisabledBrush}" />
                            <Setter Property="Background" Value="{DynamicResource ControlBackgroundDisabledBrush}" />
                            <Setter TargetName="slot" Property="ShaderEnabled" Value="False" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style TargetType="{x:Type controls:NumberBox}">
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="Focusable" Value="False" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="FontSize" Value="14" />
        <Setter Property="Padding" Value="3" />
        <Setter Property="Background" Value="{DynamicResource ControlBackgroundNormalBrush}" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type controls:NumberBox}">
                    <Border
                        x:Name="Border"
                        Padding="{TemplateBinding Padding}"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CornerRadius="{TemplateBinding assists:ControlAssist.CornerRadius}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <!--  前缀  -->
                                <ColumnDefinition Width="Auto" />
                                <!--  输入框  -->
                                <ColumnDefinition Width="*" />
                                <!--  后缀  -->
                                <ColumnDefinition Width="Auto" />

                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <ContentPresenter
                                x:Name="Prefix"
                                Grid.Column="0"
                                Margin="1,0,5,0"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                Content="{TemplateBinding assists:InputAssist.Prefix}"
                                Focusable="False" />
                            <TextBox
                                x:Name="PART_TextBox"
                                Grid.Column="1"
                                Margin="5"
                                Padding="0"
                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                Background="Transparent"
                                Style="{DynamicResource FlattenTextBoxStyle}">
                                <!--<TextBox.Text>
                                    <MultiBinding Converter="{StaticResource PrecisionConverter}" UpdateSourceTrigger="PropertyChanged">
                                        <Binding Path="Value" RelativeSource="{RelativeSource TemplatedParent}" />
                                        <Binding Path="Precision" RelativeSource="{RelativeSource TemplatedParent}" />
                                    </MultiBinding>
                                </TextBox.Text>-->
                            </TextBox>
                            <ContentPresenter
                                x:Name="Suffix"
                                Grid.Column="2"
                                Margin="5,0,1,0"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                Content="{TemplateBinding assists:InputAssist.Suffix}"
                                Focusable="False" />
                            <Border
                                x:Name="border"
                                Grid.Column="3"
                                Margin="-2"
                                HorizontalAlignment="Right"
                                BorderBrush="{DynamicResource BorderNormalBrush}">
                                <Grid Width="15" Margin="2">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="*" />
                                    </Grid.RowDefinitions>
                                    <Button
                                        x:Name="PART_IncreaseButton"
                                        Grid.Row="0"
                                        Padding="-4"
                                        assists:ControlAssist.CornerRadius="2,2,0,0"
                                        Background="{DynamicResource BackgroundFloatingBrush}"
                                        FontSize="4"
                                        IsTabStop="False"
                                        Style="{DynamicResource FlattenButtonStyle}"
                                        Visibility="Collapsed">
                                        <controls:IconElement
                                            x:Name="arrowUp"
                                            Foreground="{DynamicResource TextPrimaryBrush}"
                                            RenderTransformOrigin="0.5,0.5"
                                            SnapsToDevicePixels="false"
                                            Symbol="KeyboardArrowUp">
                                            <controls:IconElement.RenderTransform>
                                                <RotateTransform Angle="0" />
                                            </controls:IconElement.RenderTransform>
                                        </controls:IconElement>
                                    </Button>
                                    <Button
                                        x:Name="PART_DecreaseButton"
                                        Grid.Row="1"
                                        Padding="-4"
                                        assists:ControlAssist.CornerRadius="0,0,2,2"
                                        Background="{DynamicResource BackgroundFloatingBrush}"
                                        FontSize="4"
                                        IsTabStop="False"
                                        Style="{DynamicResource FlattenButtonStyle}"
                                        Visibility="Collapsed">
                                        <controls:IconElement
                                            x:Name="arrowDown"
                                            Foreground="{DynamicResource TextPrimaryBrush}"
                                            RenderTransformOrigin="0.5,0.5"
                                            SnapsToDevicePixels="false"
                                            Symbol="KeyboardArrowDown">
                                            <controls:IconElement.RenderTransform>
                                                <RotateTransform Angle="0" />
                                            </controls:IconElement.RenderTransform>
                                        </controls:IconElement>
                                    </Button>
                                </Grid>
                            </Border>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <!--  Prefix & Suffix  -->
                        <Trigger SourceName="Prefix" Property="Content" Value="{x:Null}">
                            <Setter TargetName="Prefix" Property="Visibility" Value="Collapsed" />
                        </Trigger>
                        <Trigger SourceName="Suffix" Property="Content" Value="{x:Null}">
                            <Setter TargetName="Suffix" Property="Visibility" Value="Collapsed" />
                        </Trigger>

                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="{DynamicResource ControlBackgroundHoverBrush}" />
                            <Setter TargetName="PART_IncreaseButton" Property="Visibility" Value="Visible" />
                            <Setter TargetName="PART_DecreaseButton" Property="Visibility" Value="Visible" />
                        </Trigger>
                        <Trigger Property="IsKeyboardFocusWithin" Value="True">
                            <Setter Property="BorderBrush" Value="{DynamicResource PrimaryNormalBrush}" />
                        </Trigger>
                        <Trigger Property="IsFocused" Value="True">
                            <Setter Property="BorderBrush" Value="{DynamicResource PrimaryNormalBrush}" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Foreground" Value="{DynamicResource TextDisabledBrush}" />
                            <Setter Property="Background" Value="{DynamicResource ControlBackgroundDisabledBrush}" />
                            <Setter Property="Cursor" Value="None" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>