Click here to Skip to main content
15,897,518 members
Articles / Desktop Programming / WPF

WPF User Control - NumericBox

Rate me:
Please Sign up or sign in to vote.
4.82/5 (15 votes)
31 Jan 2011CPOL6 min read 53.9K   3.1K   26  
WPF User control like well-known NumericUpDown
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:NumericBox;assembly=NumericBox">
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="Brushes.xaml" />
    </ResourceDictionary.MergedDictionaries>

    <!-- Popup border style-->
    <Style x:Key="popupBorder" TargetType="Border">
        <Setter Property="Background" Value="{StaticResource ConvexHorizontalBrush}"/>
        <Setter Property="BorderBrush" Value="{StaticResource BorderBrush}" />
        <Setter Property="Opacity" Value="1" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="CornerRadius" Value="2" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
    </Style>

    <!-- Buttons style -->
    <Style TargetType="{x:Type Button}">
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border x:Name="Border" CornerRadius="2" BorderThickness="1" Background="{StaticResource ConvexHorizontalBrush}" BorderBrush="{StaticResource BorderBrush}">
                        <ContentPresenter Margin="2" HorizontalAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="True"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsDefaulted" Value="true">
                            <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DefaultedBorderBrush}" />
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="Border" Property="Background" Value="{StaticResource HighlightBrush}" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter TargetName="Border" Property="Background" Value="{StaticResource PressedBrush}" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
                            <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- TextBox style -->
    <Style x:Key="{x:Type TextBox}" TargetType="{x:Type TextBoxBase}">
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Foreground" Value="{StaticResource BorderBrush}" />
        <Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="AllowDrop" Value="true"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBoxBase}">
                    <Border Name="Border" CornerRadius="2" Padding="2" Background="{StaticResource PressedBrush}" BorderBrush="{StaticResource BorderBrush}" BorderThickness="1" >
                        <ScrollViewer Margin="0" x:Name="PART_ContentHost"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="Border" Property="Background" Value="{StaticResource PressedHighlightBrush}"/>
                            <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource HighlightBorderBrush}"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}"/>
                            <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBackgroundBrush}"/>
                            <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="{x:Type local:NumericBox}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:NumericBox}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition Width="15"/>
                        </Grid.ColumnDefinitions>

                        <!-- Popup options content -->
                        <Popup x:Name="PART_Popup" AllowsTransparency="True" Placement="Left" Width="180" Height="36" PopupAnimation="Fade"  >
                            <Grid>
                                <Border Style="{StaticResource popupBorder}"/>
                                <StackPanel Margin="5" Orientation="Horizontal">
                                    <TextBlock Text="Increment: " TextWrapping="Wrap" FontSize="14" Margin="5,3,5,0" />
                                    <TextBox x:Name="PART_IncrementTextBox" FontSize="14" Width="80"/>
                                </StackPanel>
                            </Grid>
                        </Popup>

                        <!-- Text field for value -->
                        <TextBox x:Name="PART_NumericTextBox" Grid.ColumnSpan="2">
                            <TextBox.ContextMenu>
                                <ContextMenu>
                                    <MenuItem x:Name="PART_MenuItem" Header="Options"/>
                                </ContextMenu>
                            </TextBox.ContextMenu>
                        </TextBox>

                        <!-- Increase/Decrease buttons -->
                        <Grid Grid.Column="1">
                            <Grid.RowDefinitions>
                                <RowDefinition />
                                <RowDefinition />
                            </Grid.RowDefinitions>
                            <Button x:Name="PART_IncreaseButton" Grid.Row="0" Margin="0,0,0,0.2">
                                <Button.Content>
                                    <Polygon Stroke="Black" Fill="LightSkyBlue" StrokeThickness="0.2" Points="0,0 -2,5 2,5" Stretch="Fill"/>
                                </Button.Content>
                            </Button>
                            <Button x:Name="PART_DecreaseButton" Grid.Row="1" Margin="0,0.2,0,0">
                                <Button.Content>
                                    <Polygon Stroke="Black" Fill="LightSkyBlue" StrokeThickness="0.2" Points="-2,0 2,0 0,5 " Stretch="Fill"/>
                                </Button.Content>
                            </Button>
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer
Russian Federation Russian Federation
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions