locked
Creating equal sized elements which are spaced equal apart inside grid RRS feed

  • Question

  • Hi,

    I am creating a custom onscreen keyboard for my application. The layout of the keyboard in given below.I selected Grid to create such layout with each key as button.

    All the buttons are of equal size and they are placed at equal distance from each other. One more thing is first row has 10 buttons and second row has 9 buttons. The second row buttons are arranged starting from middle leaving the remaining space on left and right side. What is the best way to create such kind of layout. I know this can be achieved by setting margins to every button but that is not the good solution.

    Regards,

    Sharda

    Thursday, July 5, 2012 5:46 AM

Answers

  • Hi Sharda Iyer,

    1, as for enter key, you could use ColumnSpan property.

    2. alignement of second row could control by margin as well, additional, one row is one stackpanel, so there is no problem with second row.


    Sheldon _Xiao[MSFT]
    MSDN Community Support | Feedback to us
    Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Sheldon _Xiao Friday, July 20, 2012 7:47 AM
    Friday, July 6, 2012 7:20 AM

All replies

  • Hi Sharda,

     

    There are many ways to achieve this kind of layout. My choice would be ListBoxes within ListBoxes:

     

    MainWindow.xaml

    <Window
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	x:Class="WpfApplication62.MainWindow"
    	x:Name="Window"
    	Title="MainWindow"
    	Width="640" Height="480">
    
    	<StackPanel>
    
    		<ListBox ItemsSource="{Binding KeyboardRows}" ItemTemplate="{DynamicResource DataTemplate1}" HorizontalContentAlignment="Center" BorderThickness="0">
    			<ListBox.Resources>
    				<DataTemplate x:Key="DataTemplate1">
    					<ListBox ItemsSource="{Binding}" ItemsPanel="{DynamicResource ItemsPanelTemplate1}" ItemTemplate="{DynamicResource DataTemplate1}" BorderThickness="0">
    						<ListBox.Resources>
    							<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
    								<UniformGrid Rows="1" IsItemsHost="True"/>
    							</ItemsPanelTemplate>
    							<DataTemplate x:Key="DataTemplate1">
    								<Grid >
    									<Button Content="{Binding}" Margin="8" Width="30" Height="30" />
    								</Grid>
    							</DataTemplate>
    						</ListBox.Resources>
    					</ListBox>
    				</DataTemplate>
    			</ListBox.Resources>
    		</ListBox>
    
    	</StackPanel>
    </Window>

     

    MainWindow.xaml.cs

    using System.Windows;
    using System.Collections.Generic;
    
    namespace WpfApplication62
    {
    	public partial class MainWindow : Window
    	{
            public List<List<string>> KeyboardRows { get; set; }
    
    		public MainWindow()
    		{
    			this.InitializeComponent();
                		KeyboardRows = new List<List<string>> 
                		{ 
                    		new List<string> { "Q", "W", "E", "R", "T", "Y" },
                   			new List<string> { "A", "S", "D", "F", "G" },
                    		new List<string> { "Z", "X", "C", "V", "B", "N" }
                		};
    
                		DataContext = this;
    		}
    	}
    }
      

    Regards,
    Pete


    #PEJL

    • Proposed as answer by Sheldon _Xiao Friday, July 6, 2012 3:11 AM
    Thursday, July 5, 2012 11:02 AM
  • Hi Sharda Iyer,

    Additional, I think set margin property is no problem, you could also layout them into Grid with three rows and each rows include a stackpanel to layout button.

    best regards,


    Sheldon _Xiao[MSFT]
    MSDN Community Support | Feedback to us
    Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Friday, July 6, 2012 3:13 AM
  • But if we consider keyboard layout there are some keys like Enter, Tab, CapLock etc in a row which are of different size. How can we take care of those. Also, how to take care of alignement of second row which has less number of keys and should leave spaces from side.

    Regards,

    Sharda.

    Friday, July 6, 2012 6:50 AM
  • Hi Sharda Iyer,

    1, as for enter key, you could use ColumnSpan property.

    2. alignement of second row could control by margin as well, additional, one row is one stackpanel, so there is no problem with second row.


    Sheldon _Xiao[MSFT]
    MSDN Community Support | Feedback to us
    Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Sheldon _Xiao Friday, July 20, 2012 7:47 AM
    Friday, July 6, 2012 7:20 AM
  • Hi Sharda Iyer,
     
    I am marking your issue as "Answered", if you have new findings about your issue, please let me know.


    Best regards,


    Sheldon _Xiao[MSFT]
    MSDN Community Support | Feedback to us
    Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Friday, July 20, 2012 7:47 AM