我应该如何创建一个十六进制键盘？答案

【问题标题】：How should I create a Hex Keyboard?我应该如何创建一个十六进制键盘？
【发布时间】：2014-03-20 19:58:56
【问题描述】：

我正在使用 XAML 编写一个 Windows Phone 8 应用程序。我需要允许用户以二进制、十六进制、八进制、十进制和 ASCII 格式输入数据。我想向用户展示一个与他们的输入选择相匹配的键盘。 Here 是 Windows Phone 计算器的屏幕截图，显示了类似的输入选择，以及我想以 HEX 模式呈现给用户的模型。

有没有一种方法可以创建自定义键盘布局？

我应该自己将 ui 构建为按钮并将按钮连接到按键命令吗？

感谢您的建议。

IntStarFoo

【问题讨论】：

我已经把它搁置了一段时间了。除非您想与文本框交互，否则整个自定义键盘的效果都很好。我想扩展它不会那么难......phone.codeplex.com/SourceControl/…

标签： silverlight xaml windows-phone-8 windows-phone

【解决方案1】：

无法使用 WP8 创建自定义键盘布局。虽然您可以使用TextBox 控制通过InputScope 选择的特定键盘，但这是提供的控制权。

由于您需要完全自定义的 UI，因此您需要自己布置按钮。通过为按钮创建自定义控件模板，您将能够使它们看起来与您想要的计算器按钮相似。

使用新模板和一些样式使按钮看起来相似相当简单。

<Style x:Key="CalculatorStyle" TargetType="Button">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="Black"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid Background="#FF333333">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver"/>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneButtonBasePressedForegroundBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" 
                        BorderThickness="{TemplateBinding BorderThickness}" 
                        Background="{TemplateBinding Background}" CornerRadius="0" Margin="0">
                        <ContentControl x:Name="ContentContainer" 
                            ContentTemplate="{TemplateBinding ContentTemplate}" 
                            Content="{TemplateBinding Content}" 
                            Foreground="{TemplateBinding Foreground}" 
                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
                            Padding="{TemplateBinding Padding}" 
                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style x:Key="NumberStyle" TargetType="Button" BasedOn="{StaticResource CalculatorStyle}">
    <Setter Property="Background" Value="#FF232323"/>
</Style>

在上面的模板中，我调整了一些边框、颜色和边距，使其与示例按钮相似。

然后使用它们——例如，您可以将它们放在Grid 中。

<Button Style="{StaticResource CalculatorStyle}" Content="Mod" 
       Grid.Row="1" Grid.Column="2"/>
<Button Style="{StaticResource NumberStyle}" Content="7" 
       Grid.Column="3"/>

【讨论】：

【解决方案2】：

您可以找到here at MSDN 的可用键盘范围 - 您无法更改它们。

因此，在您的情况下，您将必须构建自己的控制模拟键盘，您可以阅读the article on this blog 关于创建自己的键盘。也许会有所帮助。

【讨论】：