Hello,
We are using the Numpad version of your RadVirtualKeyboardForm and did some modifications on the layout which worked absolutely fine so far. The only thing we would still like to do is to make each key bigger because we use it on a touch screen and the standard key size appears to be too small for certain of our users.
We are using an XML file in order to load the keyboard layout and I tried to change the KeyWidth and KeyHeight in the XML file which works fine. But the layout becomes messy as the window of the keyboard only seems to grow horizontally but not vertically as seen in the screenshot. Is there a possibility to indicate the window's size somewhere?
Thank you in advance and have a nice day!
3 Answers, 1 is accepted
Rank 2
Iron
Iron
Iron
Here the XML for the keyboard layout
<RadVirtualKeyboard>
<MainLayoutPanel xsi:type="Telerik.WinControls.VirtualKeyboard.VirtualKeyboardLayoutPanel" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<KeyboardLayouts>
<Telerik.WinControls.VirtualKeyboard.VirtualKeyboardLayout KeySpacing="0.1">
<Rows>
<Telerik.WinControls.VirtualKeyboard.Row>
<Keys>
<Telerik.WinControls.VirtualKeyboard.NumpadKey SecondaryVirtualKey="36" SecondaryDisplayText="Home" KeyType="Numpad" KeyWidth="1.5" KeyHeight="1.5" VirtualKey="103">
<SecondaryKeyInfo LowerText="" ShiftText="" AltText="" CapsLockText="" />
</Telerik.WinControls.VirtualKeyboard.NumpadKey>
<Telerik.WinControls.VirtualKeyboard.NumpadKey SecondaryVirtualKey="38" SecondaryDisplayText="" KeyType="Numpad" KeyWidth="1.5" KeyHeight="1.5" VirtualKey="104">
<SecondaryKeyInfo LowerText="" ShiftText="" AltText="" CapsLockText="" />
</Telerik.WinControls.VirtualKeyboard.NumpadKey>
<Telerik.WinControls.VirtualKeyboard.NumpadKey SecondaryVirtualKey="33" SecondaryDisplayText="PgUp" KeyType="Numpad" KeyWidth="1.5" KeyHeight="1.5" VirtualKey="105">
<SecondaryKeyInfo LowerText="" ShiftText="" AltText="" CapsLockText="" />
</Telerik.WinControls.VirtualKeyboard.NumpadKey>
<Telerik.WinControls.VirtualKeyboard.Key DisplayText="î„€" KeyType="Special" KeyWidth="1.5" KeyHeight="1.5" VirtualKey="8" CustomFont="TelerikWebUI" />
</Keys>
</Telerik.WinControls.VirtualKeyboard.Row>
<Telerik.WinControls.VirtualKeyboard.Row>
<Keys>
<Telerik.WinControls.VirtualKeyboard.NumpadKey SecondaryVirtualKey="37" SecondaryDisplayText="" KeyType="Numpad" KeyWidth="1.5" KeyHeight="1.5" VirtualKey="100">
<SecondaryKeyInfo LowerText="" ShiftText="" AltText="" CapsLockText="" />
</Telerik.WinControls.VirtualKeyboard.NumpadKey>
<Telerik.WinControls.VirtualKeyboard.NumpadKey SecondaryVirtualKey="-1" SecondaryDisplayText="" KeyType="Numpad" KeyWidth="1.5" KeyHeight="1.5" VirtualKey="101">
<SecondaryKeyInfo LowerText="" ShiftText="" AltText="" CapsLockText="" />
</Telerik.WinControls.VirtualKeyboard.NumpadKey>
<Telerik.WinControls.VirtualKeyboard.NumpadKey SecondaryVirtualKey="39" SecondaryDisplayText="" KeyType="Numpad" KeyWidth="1.5" KeyHeight="1.5" VirtualKey="102">
<SecondaryKeyInfo LowerText="" ShiftText="" AltText="" CapsLockText="" />
</Telerik.WinControls.VirtualKeyboard.NumpadKey>
<Telerik.WinControls.VirtualKeyboard.Key DisplayText="Enter" KeyType="Normal" KeyWidth="1.5" KeyHeight="4.5" VirtualKey="13" Font="Arial, 10pt" />
</Keys>
</Telerik.WinControls.VirtualKeyboard.Row>
<Telerik.WinControls.VirtualKeyboard.Row>
<Keys>
<Telerik.WinControls.VirtualKeyboard.NumpadKey SecondaryVirtualKey="35" SecondaryDisplayText="End" KeyType="Numpad" KeyWidth="1.5" KeyHeight="1.5" VirtualKey="97">
<SecondaryKeyInfo LowerText="" ShiftText="" AltText="" CapsLockText="" />
</Telerik.WinControls.VirtualKeyboard.NumpadKey>
<Telerik.WinControls.VirtualKeyboard.NumpadKey SecondaryVirtualKey="40" SecondaryDisplayText="" KeyType="Numpad" KeyWidth="1.5" KeyHeight="1.5" VirtualKey="98">
<SecondaryKeyInfo LowerText="" ShiftText="" AltText="" CapsLockText="" />
</Telerik.WinControls.VirtualKeyboard.NumpadKey>
<Telerik.WinControls.VirtualKeyboard.NumpadKey SecondaryVirtualKey="34" SecondaryDisplayText="PgDn" KeyType="Numpad" KeyWidth="1.5" KeyHeight="1.5" VirtualKey="99">
<SecondaryKeyInfo LowerText="" ShiftText="" AltText="" CapsLockText="" />
</Telerik.WinControls.VirtualKeyboard.NumpadKey>
</Keys>
</Telerik.WinControls.VirtualKeyboard.Row>
<Telerik.WinControls.VirtualKeyboard.Row>
<Keys>
<Telerik.WinControls.VirtualKeyboard.NumpadKey SecondaryVirtualKey="45" SecondaryDisplayText="Ins" DisplayText=" " KeyType="Special" KeyWidth="1.5" KeyHeight="1.5" VirtualKey="32">
<SecondaryKeyInfo LowerText="" ShiftText="" AltText="" CapsLockText="" />
</Telerik.WinControls.VirtualKeyboard.NumpadKey>
<Telerik.WinControls.VirtualKeyboard.NumpadKey SecondaryVirtualKey="46" SecondaryDisplayText="Del" DisplayText="0" KeyType="Normal" KeyWidth="1.5" KeyHeight="1.5" VirtualKey="96">
<SecondaryKeyInfo LowerText="" ShiftText="" AltText="" CapsLockText="" />
</Telerik.WinControls.VirtualKeyboard.NumpadKey>
<Telerik.WinControls.VirtualKeyboard.Key DisplayText=" " KeyType="Special" KeyWidth="1.5" KeyHeight="1.5" VirtualKey="32" />
</Keys>
</Telerik.WinControls.VirtualKeyboard.Row>
</Rows>
</Telerik.WinControls.VirtualKeyboard.VirtualKeyboardLayout>
</KeyboardLayouts>
</MainLayoutPanel>
</RadVirtualKeyboard>
Hi Jana,
Thank you for the provided details.
Upon checking the XML, the KeyWidth and KeyHeight properties are set to 1.5. I am not sure if this is intended or how it is set to this value. If I change these properties to 1 for all elements in the XML I got the following result:
Can you confirm if that is the required visual look? Here is the updated XML file.
<RadVirtualKeyboard>
<MainLayoutPanel xsi:type="Telerik.WinControls.VirtualKeyboard.VirtualKeyboardLayoutPanel" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<KeyboardLayouts>
<Telerik.WinControls.VirtualKeyboard.VirtualKeyboardLayout KeySpacing="0.1">
<Rows>
<Telerik.WinControls.VirtualKeyboard.Row>
<Keys>
<Telerik.WinControls.VirtualKeyboard.NumpadKey SecondaryVirtualKey="36" SecondaryDisplayText="Home" KeyType="Numpad" KeyWidth="1" KeyHeight="1" VirtualKey="103">
<SecondaryKeyInfo LowerText="" ShiftText="" AltText="" CapsLockText="" />
</Telerik.WinControls.VirtualKeyboard.NumpadKey>
<Telerik.WinControls.VirtualKeyboard.NumpadKey SecondaryVirtualKey="38" SecondaryDisplayText="" KeyType="Numpad" KeyWidth="1" KeyHeight="1" VirtualKey="104">
<SecondaryKeyInfo LowerText="" ShiftText="" AltText="" CapsLockText="" />
</Telerik.WinControls.VirtualKeyboard.NumpadKey>
<Telerik.WinControls.VirtualKeyboard.NumpadKey SecondaryVirtualKey="33" SecondaryDisplayText="PgUp" KeyType="Numpad" KeyWidth="1" KeyHeight="1" VirtualKey="105">
<SecondaryKeyInfo LowerText="" ShiftText="" AltText="" CapsLockText="" />
</Telerik.WinControls.VirtualKeyboard.NumpadKey>
<Telerik.WinControls.VirtualKeyboard.Key DisplayText="î„€" KeyType="Special" KeyWidth="1" KeyHeight="1" VirtualKey="8" CustomFont="TelerikWebUI" />
</Keys>
</Telerik.WinControls.VirtualKeyboard.Row>
<Telerik.WinControls.VirtualKeyboard.Row>
<Keys>
<Telerik.WinControls.VirtualKeyboard.NumpadKey SecondaryVirtualKey="37" SecondaryDisplayText="" KeyType="Numpad" KeyWidth="1" KeyHeight="1" VirtualKey="100">
<SecondaryKeyInfo LowerText="" ShiftText="" AltText="" CapsLockText="" />
</Telerik.WinControls.VirtualKeyboard.NumpadKey>
<Telerik.WinControls.VirtualKeyboard.NumpadKey SecondaryVirtualKey="-1" SecondaryDisplayText="" KeyType="Numpad" KeyWidth="1" KeyHeight="1" VirtualKey="101">
<SecondaryKeyInfo LowerText="" ShiftText="" AltText="" CapsLockText="" />
</Telerik.WinControls.VirtualKeyboard.NumpadKey>
<Telerik.WinControls.VirtualKeyboard.NumpadKey SecondaryVirtualKey="39" SecondaryDisplayText="" KeyType="Numpad" KeyWidth="1" KeyHeight="1" VirtualKey="102">
<SecondaryKeyInfo LowerText="" ShiftText="" AltText="" CapsLockText="" />
</Telerik.WinControls.VirtualKeyboard.NumpadKey>
<Telerik.WinControls.VirtualKeyboard.Key DisplayText="Enter" KeyType="Normal" KeyWidth="1" KeyHeight="4.5" VirtualKey="13" Font="Arial, 10pt" />
</Keys>
</Telerik.WinControls.VirtualKeyboard.Row>
<Telerik.WinControls.VirtualKeyboard.Row>
<Keys>
<Telerik.WinControls.VirtualKeyboard.NumpadKey SecondaryVirtualKey="35" SecondaryDisplayText="End" KeyType="Numpad" KeyWidth="1" KeyHeight="1" VirtualKey="97">
<SecondaryKeyInfo LowerText="" ShiftText="" AltText="" CapsLockText="" />
</Telerik.WinControls.VirtualKeyboard.NumpadKey>
<Telerik.WinControls.VirtualKeyboard.NumpadKey SecondaryVirtualKey="40" SecondaryDisplayText="" KeyType="Numpad" KeyWidth="1" KeyHeight="1" VirtualKey="98">
<SecondaryKeyInfo LowerText="" ShiftText="" AltText="" CapsLockText="" />
</Telerik.WinControls.VirtualKeyboard.NumpadKey>
<Telerik.WinControls.VirtualKeyboard.NumpadKey SecondaryVirtualKey="34" SecondaryDisplayText="PgDn" KeyType="Numpad" KeyWidth="1" KeyHeight="1" VirtualKey="99">
<SecondaryKeyInfo LowerText="" ShiftText="" AltText="" CapsLockText="" />
</Telerik.WinControls.VirtualKeyboard.NumpadKey>
</Keys>
</Telerik.WinControls.VirtualKeyboard.Row>
<Telerik.WinControls.VirtualKeyboard.Row>
<Keys>
<Telerik.WinControls.VirtualKeyboard.NumpadKey SecondaryVirtualKey="45" SecondaryDisplayText="Ins" DisplayText=" " KeyType="Special" KeyWidth="1" KeyHeight="1" VirtualKey="32">
<SecondaryKeyInfo LowerText="" ShiftText="" AltText="" CapsLockText="" />
</Telerik.WinControls.VirtualKeyboard.NumpadKey>
<Telerik.WinControls.VirtualKeyboard.NumpadKey SecondaryVirtualKey="46" SecondaryDisplayText="Del" DisplayText="0" KeyType="Normal" KeyWidth="1" KeyHeight="1" VirtualKey="96">
<SecondaryKeyInfo LowerText="" ShiftText="" AltText="" CapsLockText="" />
</Telerik.WinControls.VirtualKeyboard.NumpadKey>
<Telerik.WinControls.VirtualKeyboard.Key DisplayText=" " KeyType="Special" KeyWidth="1" KeyHeight="1" VirtualKey="32" />
</Keys>
</Telerik.WinControls.VirtualKeyboard.Row>
</Rows>
</Telerik.WinControls.VirtualKeyboard.VirtualKeyboardLayout>
</KeyboardLayouts>
</MainLayoutPanel>
</RadVirtualKeyboard>In addition, can you confirm that the scaling of your main monitor is 100% or it has a higher value? If the value of the KeyHeight and KeyWidth properties is not intended to be 1.5, its value could come from the DPI.
Regards,
Dinko | Tech Support Engineer
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 2
Iron
Iron
Iron
Hi Dinko,
Thank you for your answer. Our current layout looks like this:
What we would like to do is to have the same layout, but bigger. That's why I thought to increase the height and width of the keys but unfortunately the window of the keyboard itself doesn't grow. Is there a way to achieve this?
Hi, Jana,
My colleague, Dinko, is currently out of office so I will be assisting you with this case. If you want to enlarge the key buttons and keep the layout as it is, you can use the row/col span for the separate keys, e.g. like the Enter key has RowSpan=3: https://docs.telerik.com/devtools/winforms/controls/virtual-keyboard/default-layouts#customizing-default-layouts
Note that depending on the size of RadVirtualKeyboard and the number of columns/rows in the keyboard layout, the key size is determined automatically. Thus, col/row span allows you to make a button bigger or smaller. I have replaced the default XML that was previously used with a programmatically customizing the layout. The keyboard is docked to fill the entire parent container. Hence, when the parent container is resized, the keyboard and its keys is resized resized respectively:
public RadForm1()
{
InitializeComponent();
// string s = @"..\..\layout.xml";
// this.radVirtualKeyboard1.LoadLayout(s);
radVirtualKeyboard1.Dock = DockStyle.Fill;
radVirtualKeyboard1.LayoutType = Telerik.WinControls.VirtualKeyboard.KeyboardLayoutType.Numpad;
NumpadVirtualKeyboardLayoutPanel numpadLayoutPanel = radVirtualKeyboard1.MainLayoutPanel as NumpadVirtualKeyboardLayoutPanel;
var allKeys = this.radVirtualKeyboard1.MainLayoutPanel.GetAllKeys();
Key divideKey = allKeys.FirstOrDefault(k => k.VirtualKey == (int)System.Windows.Forms.Keys.Divide) as Key;
Row divideRow = this.radVirtualKeyboard1.MainLayoutPanel.FindRowByKey(divideKey);
divideRow.Keys.Remove(divideKey);
divideRow.Keys.Add(new Key(8, KeyType.Special, 1, 1) { DisplayText = "î„€", KeyType = KeyType.Special, VirtualKey = 8, CustomFont = "TelerikWebUI" });
Key multiplyKey = allKeys.FirstOrDefault(k => k.VirtualKey == (int)System.Windows.Forms.Keys.Multiply) as Key;
Row multiplyRow = this.radVirtualKeyboard1.MainLayoutPanel.FindRowByKey(multiplyKey);
multiplyRow.Keys.Remove(multiplyKey);
Key subtractKey = allKeys.FirstOrDefault(k => k.VirtualKey == (int)System.Windows.Forms.Keys.Subtract) as Key;
Row subtractRow = this.radVirtualKeyboard1.MainLayoutPanel.FindRowByKey(subtractKey);
subtractRow.Keys.Remove(subtractKey);
Key decimalKey = allKeys.FirstOrDefault(k => k.VirtualKey == (int)System.Windows.Forms.Keys.Decimal) as Key;
Row decimalRow = this.radVirtualKeyboard1.MainLayoutPanel.FindRowByKey(decimalKey);
decimalRow.Keys.Remove(decimalKey);
Key addKey = allKeys.FirstOrDefault(k => k.VirtualKey == (int)System.Windows.Forms.Keys.Add) as Key;
Row addRow = this.radVirtualKeyboard1.MainLayoutPanel.FindRowByKey(addKey);
addRow.Keys.Remove(addKey);
Key EnterKey = allKeys.FirstOrDefault(k => k.VirtualKey == (int)System.Windows.Forms.Keys.Enter) as Key;
Row EnterRow = this.radVirtualKeyboard1.MainLayoutPanel.FindRowByKey(EnterKey);
EnterRow.Keys.Remove(EnterKey);
multiplyRow.Keys.Add(new Key((int)System.Windows.Forms.Keys.Return, VirtualKeyboardLocalizationProvider.CurrentProvider.GetLocalizedString(VirtualKeyboardStringId.KeyNumpadEnter), KeyType.Special, 1, 3));
numpadLayoutPanel.NumpadButtonsLayout.Rows.RemoveAt(numpadLayoutPanel.NumpadButtonsLayout.Rows.Count - 1);
numpadLayoutPanel.ResetLayout();
}
Rank 2
Iron
Iron
Iron
Hi Dess,
Thank you for your assistance! Are RowSpan and RowCol available in the XML layout file as well? We do not use RadVirtualKeyboard but RadVirtualKeyboardForm and would like to keep the comfortable way of loading the layout from a file. And how can I change the form size of RadVirtualKeyboardForm?
Is there a specific reason why it doesn't work with adjusting keyHeight and keyWidth? Because we use this property in our current layout for the enter key as well and it works fine. The layout only becomes messy when we change keyHeight and keyWidth on other keys
Hi, Jana,
I read all the communication in this forum thread, and if I understand your requirement correctly is to keep the default numpad layout and simply increase the size of the RadVirtualKeyboard buttons.
As far as I saw you are using a RadVirtualKeyboardForm, which is automatically sized when the form is loaded. There is a static property KeyDefaultSize of the VirtualKeyboardLayoutPanel, which is responsible for the layout of the keys. The default value of KeyDefaultSize is 52 x 44 pixels.
So to increase the default size of all the keys you do not need to set any of the KeyWidth, KeyHeight, RowSpan, and ColumnSpan properties in the XML, but only set the KeyDefaultSize to an increased value.
// Increased the size 2 times - 52x44 to 104x88
VirtualKeyboardLayoutPanel.KeyDefaultSize = new SizeF(104f, 88f);By default, the Font size of the keys is changed when the keys are resized, and when you increase the default button size you might also consider increasing the font too.
this.radVirtualKeyboard1.VirtualKeyboardElement.Font = new Font("Segoe UI", 20f);
Rank 2
Iron
Iron
Iron
Hi Todor,
Thank you for the info. How can I reach this static property from a radVirtualKeyboardForm
Hi, Jana,
The VirtualKeyboardLayoutPanel is in the Telerik.WinControls.VirtualKeyboard namespace. You can access the KeyDefaultSize property from everywhere in your code since it is static and is valid for all RadVirtualKeyboard instances. If you want to assign it, it is recommended to do this before the layout of the form(for example in the form's constructor).
Telerik.WinControls.VirtualKeyboard.VirtualKeyboardLayoutPanel.KeyDefaultSize = new SizeF(104f, 88f);