We Keep Coding

WPF Excel-like Arrow key feature with Textboxes

I have about 600 text boxes side-by-side (looks like a matrix). Each of the text box is named by row and column number. i.e.
textbox_12_25 would be textbox in 12th row and 25th column.
Is there way to implement features like Excel using Arrowkeys and Enter?
I am pretty new to C# and WPF, so a detailed and simple answers would be appreciated.

Use a list box and modify the ItemTemplate and ItemsPanel
<ListBox ItemsSource="{Binding ShippingBays}" FontSize="14" Grid.Row="2" SelectedItem="{Binding SelectedBay}" Background="White" FocusVisualStyle="{x:Null}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<TextBlock Text="{Binding Description}" FontWeight="SemiBold" FontFamily="Arial" FontSize="12" Padding="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="{Binding ColumnCount}" Rows="{Binding RowCount}" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
This is some of the code I wrote for a similar application. Though I do not enter information in the boxes, I just display it. I know this isn't an exact answer but its a way to do it even if you had to modify how you are adding the boxes, etc.
My grid appears with A at the bottom because i'm sorting by RowCount descending, otherwise A would be the top row, just like excel.

GridView item height is fixed

I am working on a project where I have a GridView and I need to show an image and 3 TextBlocks. The image has a fixed Height and Width properties and the first TextBlock have either 1 line of text or 2. The other TextBlocks have only 1 line of text.
The problem is that if the first TextBlock has 1 line of text everything is shown perfectly but if the text is longer than one line the last TextBlock is not shown in the GridViewItem and it is pushed down where it gets hidden.
<GridView ItemsSource="{Binding HomeList, Mode=OneWay}">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal" HorizontalAlignment="Center"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate x:DataType="local:ItemHelper">
<UserControl>
<StackPanel>
<Image Name="image" Source="{x:Bind ItemImage}"
Height="144" Width="256" HorizontalAlignment="Center"/>
<TextBlock Name="title" Text="{x:Bind ItemTitle}" Style="{StaticResource OneLinedItemTitle}"/>
<TextBlock Name="section" Text="{x:Bind ItemSection}"/>
<TextBlock Name="pubUpdate" Text="{x:Bind ItemPublishTime}"/>
</StackPanel>
</UserControl>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
I have also tried the above XAML with RelativePanel and the same thing happens. I want the height to be fixed at max height with 2 lines of text for title or adjustable for each item in the GridView.
As you can see that the first item shows 3 TextBlocks but the 2nd item shows only 2 where the first one has 2 lines of text.
I only see the following possible options:
Set the height of the StackPanel to be fixed for the max height of the items
Set the height of the title to be fixed with 2 lines of text
Maybe editing the default Style for GridViewItem would help
Or maybe there is any other possible option which doesn't involve setting the fixed height for any element.
Any suggestions? Thanks.

Why don't you use a Grid inside your UserControl instead of the StackPanel. The StackPanel sizes to content Heights only. I would use a Grid, set the RowDefinition at third Row to Height="*" and the other ones to Height="Auto". I tested this with an ItemsControl (that worked...)
<GridView ItemsSource="{Binding HomeList, Mode=OneWay}">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal" HorizontalAlignment="Center"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate x:DataType="local:ItemHelper">
<UserControl>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Name="image" Source="{x:Bind ItemImage}" Height="144" Width="256" HorizontalAlignment="Center"/>
<TextBlock Grid.Row="1" Name="title" Text="{x:Bind ItemTitle}" Style="{StaticResource OneLinedItemTitle}"/>
<TextBlock Grid.Row="2" Name="section" Text="{x:Bind ItemSection}" TextWrapping="Wrap"/>
<TextBlock Grid.Row="3" Name="pubUpdate" Text="{x:Bind ItemPublishTime}"/>
</Grid>
</UserControl>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>

It seems the first item is not rendering correctly (at least this is what happened to me). Check Justin XL answer, maybe it can help. Apparently the problem (from poor rendering) is solved by setting the ItemHeight property
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid ItemHeight="DesiredHeight"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>

UniformGrid reduce spacing between rows in WPF

I am using a WPF UniformGrid to bind alist of items and the xaml is like this
<ListBox Name="lviewSearch" ItemsSource="{Binding SearchSettingsCollection}" SelectionMode="Multiple">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="2"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<ItemsControl Margin="3" Padding="5">
<DockPanel>
<Label Content="{Binding Label}" HorizontalAlignment="Stretch" Cursor="Hand" />
</DockPanel>
</ItemsControl>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
But if the no of items is less then the spacing between rows is too much like this
http://i.stack.imgur.com/Xr5qy.png
How can i ireduce thi s?

Like people said, your UniformGrid has too much vertical space so it expands the rows to take up all that space (stretches).
What you need to do is prevent this default behavior of stretching by setting
VerticalAlignment="Top"

The whole point of the UniformGrid is that the size of cells is uniform and therefore the same size. If you only have a small number of rows compared to the vertical space then each row is going to be pretty tall. Conversely if you have many rows and little vertical space then each row becomes tiny. If this is not an appropriate appearance then you need to use a different method of laying out.
Without knowing much more about the visual design it becomes impossible to recommend a possible alternative. Is the ListBox always the same size or will it vary in height? Does the number of displayed results vary or stay constant? All these change how you might achieve the required result.

One simple solution is to use grid outside Listbox. Set row height as auto. Now Uniform grid will take minimum space as required.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ListBox Name="lviewSearch" ItemsSource="{Binding SearchSettingsCollection}" SelectionMode="Multiple">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="2"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<ItemsControl Margin="3" Padding="5">
<DockPanel>
<Label Content="{Binding Label}" HorizontalAlignment="Stretch" Cursor="Hand" />
</DockPanel>
</ItemsControl>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>

WPF/MVVM Wrap panel orientation

I'd like to display basically a matrix of buttons, the number of buttons change in runtime.
My problem is that I want them to be next to each other to fill up all the space I give them. I thought WrapPanel is the perfect way to do that but it puts the buttons under each other and I have no idea how to solve it.
<Grid>
<WrapPanel Width="250" Height="50" Orientation="Horizontal" Margin="543,442,73,162" >
<ItemsControl ItemsSource="{Binding States}" >
<ItemsControl.ItemTemplate>
<DataTemplate >
<Button Width="50" Height="25" Content="{Binding StateName}" Padding="0" ></Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</WrapPanel>...</Grid>
States is a list of Items that contains a name and a ID number. If i want to add or remove buttons I modify the list. So the buttons appear but in vertical order and they go beyond the limits of the WrapPanel so if it is not big enough only some appears. They only use 50 width from the 250 and more then the 50 height. In this case if I put 5 buttons in it only shows 2 of them.

Don't wrap ItemsControl inside WrapPanel. Instead set it as ItemsPanel of ItemsControl.
<ItemsControl ItemsSource="{Binding States}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Width="50" Height="25" Content="{Binding StateName}"
Padding="0"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>

WPF Databinding stackpanel

Im a beginner in WPF programming, coming from .NET 2.0 C#.
Im trying to make a horizontal StackPanel which should be filled with data from a table in a database. The problem is that I want it to display an image with some text from the table below and then stack those two items horizontally.
Here's some pseudo-code to display what I want to do:
<StackPanel Orientation="horizontal" ItemsSource="{Binding Path=myTable}">
<StackPanel>
<Image Source="User.png"/>
<Label HorizontalAlignment="Center" Content="{Binding Path=UserName}"></Label>
</StackPanel>
</StackPanel>
I simply cannot figure oout how to do this.

Julien's answer is correct for your written description, however, looking at your XAML, it appears you are looking for something like the following:
<DataTemplate x:Key="UserDataTemplate">
<StackPanel>
<Image Source="User.png"/>
<Label HorizontalAlignment="Center" Content="{Binding Path=UserName}" />
</StackPanel>
</DataTemplate>
<ItemsControl x:Name="UserList" ItemTemplate="{StaticResource UserDataTemplate}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
You definately need an ItemsControl (or some derivation of) to bind your source to. Then you can change the the orientation by setting it's items panel (which I believe is a VirtualizingStackPanel with Vertical orientation by default) so just set it to a VirtualizingStackPanel with Horizontal Orientation. Then you can set the ItemsTemplate for each of your items to the layout you desire (an image stacked on top of text bound from your database).

Basically, you want to use a control capable of displaying an enumeration of objects. The control capable of this is the class ItemsControl and all of its descendants (Selector, ListBox, ListView, etc).
Bind the ItemsSource property of this control to a list of objects you want, here a list of users you've fetched from the database. Set the ItemTemplate of the control to a DataTemplate that will be used to display each item in the list.
Sample code:
In a Resources section (for example Window.Resources):
<DataTemplate x:Key="UserDataTemplate">
<StackPanel Orientation="Horizontal">
<Image Source="User.png"/>
<Label HorizontalAlignment="Center" Content="{Binding Path=UserName}" />
</StackPanel>
</DataTemplate>
In your Window/Page/UserControl:
<ItemsControl x:Name="UserList" ItemTemplate="{StaticResource UserDataTemplate}" />
In your code behind:
UserList.ItemsSource = ... // here, an enumeration of your Users, fetched from your db