spc-kiosk-pb/Kiosk/Common/SPC.Kiosk.Common/Controls/NumericCombo.xaml

<UserControl x:Class="SPC.Kiosk.Common.NumericCombo"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:SPC.Kiosk.Common"
             mc:Ignorable="d" 
             d:DesignHeight="24" AllowDrop="True"
             x:Name="BaseCombo">
    <UserControl.Resources>
        <local:DoublePercentValue x:Key="HeightToFontSize"/>
    </UserControl.Resources>    
    <Grid x:Name="ComboBase" Background="Transparent">
        <StackPanel Orientation="Horizontal">
            <local:AnimationButton x:Name="LeftButton" 
                                   VerticalAlignment="Top"
                                   BrushStretch="Fill"
                                   Width="24"
                                   NormalBrush = "pack://application:,,,/SPC.Kiosk.Common;component/Resource/btn_move01_left_basic.png"
                                   DownBrush = "pack://application:,,,/SPC.Kiosk.Common;component/Resource/btn_move01_left_press.png"
                                   />
            <Grid x:Name="NumberGrid"  VerticalAlignment="Top">
                <Grid x:Name="CurrentNumberGrid" VerticalAlignment="Top" Background="White">
                    <TextBlock x:Name="CurrentNumberText" 
                            Width="{Binding Path=Height,ElementName=BaseCombo}"
                            Height="{Binding Path=Height,ElementName=BaseCombo}"
                            VerticalAlignment="Center" 
                            HorizontalAlignment="Center"
                            Text="1"
                            TextAlignment="Center"
                            FontSize="20"
                            Foreground="Black"
                            FontWeight="Normal"/>
                </Grid>
                <Grid x:Name="NumericStackGrid" >
                    <Canvas x:Name="NumericButtonCanvas" Background="White" Width="{Binding Path=Height,ElementName=BaseCombo}" Height="96" Visibility="Collapsed">
                        <ScrollViewer  x:Name="NumericScroll" VerticalScrollBarVisibility="Hidden"  HorizontalScrollBarVisibility="Disabled"
                                       Height="{Binding Path=Height,ElementName=NumericButtonCanvas}">
                            <StackPanel x:Name="NumericButtonStack" Orientation="Vertical" >
                                <TextBlock x:Name="NumberText1"
                                                Width="{Binding Path=Width,ElementName=CurrentNumberText}"
                                                Height="{Binding Path=Height,ElementName=BaseCombo}"
                                                VerticalAlignment="Center" 
                                                HorizontalAlignment="Center"
                                                Text="1"
                                                TextAlignment="Center"
                                                FontSize="{Binding FontSize,ElementName=CurrentNumberText}"
                                                Foreground="Black"
                                                FontWeight="{Binding Path=FontWeight,ElementName=CurrentNumberText}"/>
                                <TextBlock x:Name="NumberText2"
                                                Width="{Binding Path=Width,ElementName=CurrentNumberText}"
                                                Height="{Binding Path=Height,ElementName=BaseCombo}"
                                                VerticalAlignment="Center" 
                                                HorizontalAlignment="Center"
                                                Text="2"
                                                TextAlignment="Center"
                                                FontSize="{Binding FontSize,ElementName=CurrentNumberText}"
                                                Foreground="Black"
                                                FontWeight="{Binding Path=FontWeight,ElementName=CurrentNumberText}"/>
                                <TextBlock x:Name="NumberText3"
                                                Width="{Binding Path=Width,ElementName=CurrentNumberText}"
                                                Height="{Binding Path=Height,ElementName=BaseCombo}"
                                                VerticalAlignment="Center" 
                                                HorizontalAlignment="Center"
                                                Text="3"
                                                TextAlignment="Center"
                                                FontSize="{Binding FontSize,ElementName=ElementName}"
                                                Foreground="Black"
                                                FontWeight="{Binding Path=FontWeight,ElementName=CurrentNumberText}"/>
                                <TextBlock x:Name="NumberText4"
                                                Width="{Binding Path=Width,ElementName=CurrentNumberText}"
                                                Height="{Binding Path=Height,ElementName=BaseCombo}"
                                                VerticalAlignment="Center" 
                                                HorizontalAlignment="Center"
                                                Text="4"
                                                FontSize="{Binding FontSize,ElementName=CurrentNumberText}"
                                                TextAlignment="Center"
                                                Foreground="Black"
                                                FontWeight="{Binding Path=FontWeight,ElementName=CurrentNumberText}"/>
                            </StackPanel>
                        </ScrollViewer>
                    </Canvas>
                </Grid>
            </Grid>
            <local:AnimationButton x:Name="RightButton"
                                   VerticalAlignment="Top"
                                   BrushStretch="Fill"
                                   Width="24"
                                   NormalBrush = "pack://application:,,,/SPC.Kiosk.Common;component/Resource/btn_move01_right_basic.png" 
                                   DownBrush = "pack://application:,,,/SPC.Kiosk.Common;component/Resource/btn_move01_right_press.png"
                                   />

        </StackPanel>
    </Grid>
</UserControl>