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.
Related
My MVVM WPF application uses Linq2SQL for using SQL Server Express. I noticed after populating the database with real data I get some big delays for the UI to update and thought is was my query/ grouping strategy. But, while some of the data fills take more than 100ms, rarely do they take more than 200ms but I'm seeing a lag of up to 3 seconds on the window refresh. EDIT FOR BREVITY:
I was wrapping my ItemsControl in a ScrollViewer:
<ScrollViewer VerticalScrollBarVisibility="Auto" Grid.Column="0" Grid.Row="3" Grid.ColumnSpan="2" ScrollChanged="ScrollViewer_ScrollChanged">
<ItemsControl x:Name="DivisionItems" ItemsSource="{Binding oObsByDiv}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<uc:ucObservationsHeader/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
But after some hints from below and reading up on Virtualization I now use a ListBox like so:
<ListBox x:Name="DivisionItems" Grid.Column="0" Grid.Row="3" Grid.ColumnSpan="2"
ItemsSource="{Binding oObsByDiv}"
ScrollViewer.CanContentScroll="True"
VirtualizingStackPanel.ScrollUnit="Pixel">
<ListBox.Template>
<ControlTemplate>
<ScrollViewer VirtualizingStackPanel.IsVirtualizing="True"
VirtualizingStackPanel.VirtualizationMode="Recycling">
<ItemsPresenter/>
</ScrollViewer>
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<uc:ucObservationsHeader/>
</DataTemplate>
</ListBox.ItemTemplate>
The user control used for the Items in that template then calls another user control that I'm wrapping in another ListBox in a very similar manner:
<ListBox ItemsSource="{Binding lObs}" Grid.Row="1" Grid.Column="1"
HorizontalContentAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.CanContentScroll="True"
VirtualizingStackPanel.ScrollUnit="Pixel">
<ListBox.Template>
<ControlTemplate>
<ScrollViewer VirtualizingStackPanel.IsVirtualizing="True"
VirtualizingStackPanel.VirtualizationMode="Recycling">
<ItemsPresenter/>
</ScrollViewer>
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<uc:ucObservationsView/>
</DataTemplate>
</ListBox.ItemTemplate>
But the multiple second lag still exists. The outer user control is instantiated 15 times, and the inner one has on average 15 items each. What is it that is breaking virtualization in this case? I keep stripping out the ScrollUnit and CanContentScroll in one or both places, as well as the HorizontalContentAlignement and the HorizontalScrollBar visibility, but those just affect the look without seeming to be the cause for breaking virtualization.
I want my ListView to display the items in a group horizontally as displayed in the image below. I could not find anything relating to this online. This screen was taken from the Groove music application. Since I am new to asking questions here it seems I don't have enough reputation to post images therefore I provided a link to the image in question sorry for the inconvenience.
http://i.imgur.com/boCK9iy.png
Edit:
I am trying to imitate the groove music player for a school project this link below shows my app. Hopefully this give you a better idea of the problem.
http://i.imgur.com/vPJ13Sc.png
My Xaml Code:
<ListView
x:Name="itemGridView"
Grid.Row="1"
ItemsSource="{Binding Source={StaticResource artistsItemsViewSource}}"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
RequestedTheme="Light">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel MaxWidth="200">
<Ellipse Height="150" Width="150">
<Ellipse.Fill>
<ImageBrush Stretch="Fill" ImageSource="Assets/Artist.png"/>
</Ellipse.Fill>
</Ellipse>
<TextBlock Text="{Binding ArtistName}" FontSize="18" HorizontalAlignment="Center" Margin="0,5,0,0" TextWrapping="Wrap"/>
<TextBlock Text="{Binding AlbumCount}" FontSize="15" HorizontalAlignment="Center" Margin="0"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsStackPanel Width="200" HorizontalAlignment="Left" Margin="30,0,0,0"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="0,0,0,2">
<TextBlock Text="{Binding AlphaLetter}" FontSize="20" Foreground="{StaticResource SideButtonBlue}" />
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
I think you can change the view in the listview settings to LargeIcon and then you can set Icons for each value in your listview.
But you could maybe use the ObjectListView its better than the plain ListView and you have more functions. check this out: click
I found something similar on the site of the objectlistview: here
for horizontal placement of the elements in ListView do this:
<ItemsStackPanel
Orientation="Horizontal" />
also, remove Width="200"
also you can use GridView instead of ListView
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>
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>
I have problem with my gridview. I'm displaying grouped data in it and using VariableSizedWrapGrid for displaying items. The problem is that every group has the same width equal to the most item. Even if a group contains only 1 item it has width like it was 20 items there. How to make these ItemsPanels have variable width?
My issue is almost the same as described here but when I use VirtualizingStackPanel as GridView.ItemsPanel my VariableSizedWrapGrid is displayed in one row and I need it to be displayed in two rows.
<SemanticZoom.ZoomedInView>
<GridView ScrollViewer.IsHorizontalScrollChainingEnabled="False"
ScrollViewer.IsVerticalScrollChainingEnabled="False"
ItemTemplate="{StaticResource PatientMediaFileBigItemTemplate}"
ItemsSource="{Binding Source={StaticResource PatientVisits} }"
IsItemClickEnabled="True"
SelectionMode="None"
Margin="0,0,0,0" ItemClick="MediaFileIcon_Click"
>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Button Content="{Binding DateOfVisit, Converter={StaticResource StringFormatConverter}, ConverterParameter='{}{0:dd MMM yyyy}'}" FontSize="28" Foreground="Black" BorderThickness="0" Click="ButtonVisit_OnClick"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0" Width="Auto" Background="BlueViolet"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
</SemanticZoom.ZoomedInView>
You might need to change the ItemsPanel of your GridView to a StackPanel, but note this will limit the number of items you can put in your GridView as it disables virtualization. A better option might be to keep showing a limited number of items in a group, but add a button (really the group header button with a chevron glyph should work) to navigate to a full view of the selected group.