VirtualKeyboard EmptySpace breaks layout

Progress® Telerik® UI for WPF Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Under Review

Last Updated: 21 Nov 2024 12:28 by Walter

Walter

Created on: 14 Nov 2024 14:36

Category: VirtualKeyboard

Type: Bug Report

VirtualKeyboard EmptySpace breaks layout

Hello,

I found a bug where the EmptySpace element breaks the layout. When I use a Key-Button instead, the layout shifts to the correct position. However, I don't actually want to have any button in this position at all.

EmptySpace Element:

<RadVirtualKeyboard xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> 
    <Grid> 
        <KeysLayout KeySpacing="0.1"> 
            <Rows> 
                <Row> 
                    <Keys>
                        <Key KeyType="Normal" Width="1" Height="1" VirtualKey="81" /> 
                        <Key KeyType="Normal" Width="1" Height="1" VirtualKey="87" /> 
                        <Key KeyType="Normal" Width="1" Height="1" VirtualKey="69" /> 
                        <Key KeyType="Normal" Width="1" Height="1" VirtualKey="82" /> 
                        <Key KeyType="Normal" Width="1" Height="1" VirtualKey="84" />
                        <Key KeyType="Normal" Width="1" Height="1" VirtualKey="89" />
                        <Key KeyType="Normal" Width="1" Height="1" VirtualKey="85" /> 
                        <Key KeyType="Normal" Width="1" Height="1" VirtualKey="73" /> 
                        <Key KeyType="Normal" Width="1" Height="1" VirtualKey="79" /> 
                        <Key KeyType="Normal" Width="1" Height="1" VirtualKey="80" />
                        <Key DisplayText="&#xf55a;" KeyType="Special" Width="2" Height="1" VirtualKey="8" />
					</Keys> 
                </Row> 
                <Row> 
                    <Keys>
	                    <EmptySpace Width="0.5" Height="1" />
	                    <Key KeyType="Normal" Width="1" Height="1" VirtualKey="65" />
	                    <Key KeyType="Normal" Width="1" Height="1" VirtualKey="83" />
	                    <Key KeyType="Normal" Width="1" Height="1" VirtualKey="68" />
	                    <Key KeyType="Normal" Width="1" Height="1" VirtualKey="70" />
	                    <Key KeyType="Normal" Width="1" Height="1" VirtualKey="71" />
	                    <Key KeyType="Normal" Width="1" Height="1" VirtualKey="72" />
	                    <Key KeyType="Normal" Width="1" Height="1" VirtualKey="74" />
	                    <Key KeyType="Normal" Width="1" Height="1" VirtualKey="75" />
	                    <Key KeyType="Normal" Width="1" Height="1" VirtualKey="76" />
						<EmptySpace Width="1" Height="1" />
						<Key DisplayText="&#xe331;" KeyType="Special" Width="1.5" Height="2" VirtualKey="13" />
                    </Keys> 
                </Row> 
                <Row> 
                    <Keys>
						<Key DisplayText="&#xf357;" KeyType="Lock" Width="1.5" Height="1" VirtualKey="20" />
						<Key KeyType="Normal" Width="1" Height="1" VirtualKey="90" />
						<Key KeyType="Normal" Width="1" Height="1" VirtualKey="88" />
						<Key KeyType="Normal" Width="1" Height="1" VirtualKey="67" />
						<Key KeyType="Normal" Width="1" Height="1" VirtualKey="86" />
						<Key KeyType="Normal" Width="1" Height="1" VirtualKey="66" />
						<Key KeyType="Normal" Width="1" Height="1" VirtualKey="78" />
						<Key KeyType="Normal" Width="1" Height="1" VirtualKey="77" />
						<Key DisplayText="," KeyType="Normal" Width="1" Height="1" />
						<Key DisplayText="." KeyType="Normal" Width="1" Height="1" />
					</Keys> 
                </Row> 
                <Row> 
                    <Keys>	               
	                    <Key DisplayText="&amp;123" KeyType="Special" Width="2" Height="1" VirtualKey="113" />
                        <Key DisplayText="" KeyType="Special" Width="10" Height="1" VirtualKey="32" />	                
					</Keys> 
                </Row> 
            </Rows> 
        </KeysLayout> 
   </Grid> 
</RadVirtualKeyboard>

Key-Element (Layout desired with EmptySpace):

<RadVirtualKeyboard xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> 
    <Grid> 
        <KeysLayout KeySpacing="0.1"> 
            <Rows> 
                <Row> 
                    <Keys>
                        <Key KeyType="Normal" Width="1" Height="1" VirtualKey="81" /> 
                        <Key KeyType="Normal" Width="1" Height="1" VirtualKey="87" /> 
                        <Key KeyType="Normal" Width="1" Height="1" VirtualKey="69" /> 
                        <Key KeyType="Normal" Width="1" Height="1" VirtualKey="82" /> 
                        <Key KeyType="Normal" Width="1" Height="1" VirtualKey="84" />
                        <Key KeyType="Normal" Width="1" Height="1" VirtualKey="89" />
                        <Key KeyType="Normal" Width="1" Height="1" VirtualKey="85" /> 
                        <Key KeyType="Normal" Width="1" Height="1" VirtualKey="73" /> 
                        <Key KeyType="Normal" Width="1" Height="1" VirtualKey="79" /> 
                        <Key KeyType="Normal" Width="1" Height="1" VirtualKey="80" />
                        <Key DisplayText="&#xf55a;" KeyType="Special" Width="2" Height="1" VirtualKey="8" />
					</Keys> 
                </Row> 
                <Row> 
                    <Keys>
	                    <EmptySpace Width="0.5" Height="1" />
	                    <Key KeyType="Normal" Width="1" Height="1" VirtualKey="65" />
	                    <Key KeyType="Normal" Width="1" Height="1" VirtualKey="83" />
	                    <Key KeyType="Normal" Width="1" Height="1" VirtualKey="68" />
	                    <Key KeyType="Normal" Width="1" Height="1" VirtualKey="70" />
	                    <Key KeyType="Normal" Width="1" Height="1" VirtualKey="71" />
	                    <Key KeyType="Normal" Width="1" Height="1" VirtualKey="72" />
	                    <Key KeyType="Normal" Width="1" Height="1" VirtualKey="74" />
	                    <Key KeyType="Normal" Width="1" Height="1" VirtualKey="75" />
	                    <Key KeyType="Normal" Width="1" Height="1" VirtualKey="76" />
	                    <Key DisplayText="'" KeyType="Normal" Width="1" Height="1" />
						<Key DisplayText="&#xe331;" KeyType="Special" Width="1.5" Height="2" VirtualKey="13" />
                    </Keys> 
                </Row> 
                <Row> 
                    <Keys>
						<Key DisplayText="&#xf357;" KeyType="Lock" Width="1.5" Height="1" VirtualKey="20" />
						<Key KeyType="Normal" Width="1" Height="1" VirtualKey="90" />
						<Key KeyType="Normal" Width="1" Height="1" VirtualKey="88" />
						<Key KeyType="Normal" Width="1" Height="1" VirtualKey="67" />
						<Key KeyType="Normal" Width="1" Height="1" VirtualKey="86" />
						<Key KeyType="Normal" Width="1" Height="1" VirtualKey="66" />
						<Key KeyType="Normal" Width="1" Height="1" VirtualKey="78" />
						<Key KeyType="Normal" Width="1" Height="1" VirtualKey="77" />
						<Key DisplayText="," KeyType="Normal" Width="1" Height="1" />
						<Key DisplayText="." KeyType="Normal" Width="1" Height="1" />
					</Keys> 
                </Row> 
                <Row> 
                    <Keys>	               
	                    <Key DisplayText="&amp;123" KeyType="Special" Width="2" Height="1" VirtualKey="113" />
                        <Key DisplayText="" KeyType="Special" Width="10" Height="1" VirtualKey="32" />	                
					</Keys> 
                </Row> 
            </Rows> 
        </KeysLayout> 
   </Grid> 
</RadVirtualKeyboard>

2 comments

Walter

Posted on: 21 Nov 2024 12:28

Hello, I marked the button with a X, there should be a empty place

But the result is:

ADMIN

Stenly

Posted on: 21 Nov 2024 11:05

Hello Walter,

Thank you for the shared information.

Before continuing, may I ask if it would be possible to share the expected end result on your end with the custom layout? How should the buttons in it be positioned and how much empty space does it require?

I will be awaiting your reply.

Regards,
Stenly
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.