Keyboard Map Binding - c#

I'm having some trouble coming up with a xaml page that would bind to a keyboard layout displayed on a page. Originally I have an ObservableCollection of rows that contain a KeyboardKey datatypes that specify the width of a button. The collection is bound to a listbox in the xaml. The problem I'm having is that on some keyboards the the height of a key spans two rows, which the xaml listbox does not support. I would like to avoid hard coding a bunch of keys in the xaml. Any thoughts on how to approach this?

You can create you own layout buy inheriting one of container controls and overriding
ArrangeOverride method.
You can find the example here: http://www.wpftutorial.net/CustomLayoutPanel.html
When I was creating the virtual keyboard, I declined automatic layout and put the buttons manually in designer. I think in some cultures it is better to put key rows with horizontal shift and in others it is better to to place buttons under each other. So I have a flexible layout and can quickly edit it in designer.

Related

WPF App with responsive design

I want to make a WPF app which has a different position of its controls depending on the size of the window.
If MainWindow has Width above, let's say 500, then I want my Grid to be 2x2, and if it's below 500, then 4x1 (4 Rows, 1 Column).
First I made 2 Grids, one 2x2, the other 4x1. I have 4 different UserControls, which represent View part of the MVVM. I thought I'd use VisualStateManager with 1 group, which has 2 states, one for defaultGrid, the other for narrowGrid. First state sets Visibility of the first Grid to Visible, and the second to Collapsed, and the other state reversed (Do I even need them both to do that?). I put GoToElementState in the handler for SizeChanged event. I saw this in a book, but they didn't use UserControls, instead they just copied all the controls from the first Grid into the second one and changed the Row and Column properties for each control. I thought that it's possible for 2 different Grids to share 1 UserControl (that was actually the only reason why I put a dozen or so controls/elements in those 4 UserControls in the first place), but so far I've found that that's not possible (although I could be wrong here).
Now, for some controls I guess I don't mind that I technically have 2 instances of each UserControl, because the bindings make them synchronized, but if I type something in the TextBox and change the window size/visual state, then in "that same" TextBox I have different text.
I've come to the conclusion that I don't need VSM at all and that I don't need any other Grids besides the root Grid. In the handler for SizeChanged I've made rootGrid be either 2x2 or 4x1, depending on the window width. In MainWindow.xaml.cs I've also made those 4 UserControls private fields and instantiated them. They are changing their Row and Column properties according to window width. By doing that I now always have only those 4 UserControl instances, that just change their position in the app. (I don't need multiple instances of any of those UserControls).
What I want to know is: Is there any better/more elegant/possibly conventional way of doing this, that I haven't found?
I had the idea of making just 2 UserControls (2 Views) and using VSM to represent them. Both Views would bind to the same properties of the ViewModel. "Synchronization" of inserted text in the TextBox or selected item of a ComboBox would then be done, for TextBox for instance, by binding the Text property of a TextBox, of the first View, to the Text property of a TextBox of the second View. But this doesn't seem like a better alternative.
I also had the idea of making custom converters for Row and Column bindings of UserControls, but that seemed even worse.
Btw. I'm using C#, VS 2013 and Windows 7. I know UWP have interesting stuff with AdaptiveTriggers in VSM, but I haven't switched to UWP yet, I just started playing with WPF a month ago.
Also I can't use WrapPanel because I need these controls in exactly 2x2 or 4x1 grids. And I can't use UniformGrid because I need them in specific order.
Any input on this would be appreciated.

Should I be using a WPF user control? Or just a Grid?

So I have an application that is split into 2 parts - on the left there is a custom menu, on the right a grid that holds all the "content" (different screens).
It looks something like this:
Also, when the different buttons are hit, the menu on the left will fill up with different buttons (for example, if you hit the review button, the menu would become something along the lines):
Start Date
End Date
Employee
Project
...
I am pretty sure that I want each of the screens (to go on the right) to be their own user controls.
But my question is this: Should each of the menu's be user controls? This makes it a little harder to use them. Then I have to worry about having getters/setters so the main window can listen on the menu's buttons, etc.
The other option is to just programmatically add the buttons in the mainWindow, this way I can just add the listeners right in mainWindow.cs (into a grid)
Which is the better method? Or is there another method which is favoured?
The entire window can be done easily as a Grid.
The left side can just hold a StackPanel or other layout control with your buttons.
You can use a ContentPresenter to hold the content on the right. When you trigger your buttons, just change the bound content, and it will update with your appropriate user controls.
I think you might do it with a grid as Reed told. But if you will need to reuse this in another place, I think you should use a separated UserControl instead.
Maybe I'm misunderstanding you, but I would use a TabControl, with TabStripPlacement="Left".
If you need extra space on the left to display other stuff, you can override the default TabControl's ControlTemplate and add a bunch of margin space to the TabPanel inside the ControlTemplate. Alternatively, you could have the TabItem's header display differently when it is selected versus when it is not selected.

Auto Layout Increasing Number of Controls

I am somewhat new to WPF and hopefully I'm not asking for the world here but I'm looking for advice/direction on how to go about implementing something like the following.
I'd like to have my MainWindow contain N buttons. Each Button performs the same action on a different set of data (i.e. print picture 1, print picture 2, ... , print picture N). I'd like my window to automatically layout the buttons as described below:
Note how the number of buttons increases, the layout automatically adjusts in a pleasing manner. Up to 6, and then the it provides a horizontal scroll to shuffle through the buttons.
I feel like the <Grid> control might be the way to provide this but I'm lost in how to get the automatic layout tweaks short of a lot of brute fore.
Tangentially, I see the power in Data Binding in WPF and ideally the button's info (it's display text, graphic, etc.) would be automatically binded to an observable collection so that as I insert buttons into the collection, the UI automatically updates. Conversely when each button is clicked, I'd like to have a generic handler know button 5 maps to the 5th element in my collection which has all this additional info (i.e. the file name of the picture to print).
That all sounds well and good but again I'm lost a bit in the implementation.
As Allonym said, the most customizable way would be to create a new custom Panel for this.
IMHO, it may also be possible to achieve this using a UniformGrid, and tweaking it a bit with bindings and converters. That is for the layouting.
About your second question, I think using an ItemsControl is the best way. You could pass it your new Panel (or UniformGrid) as its ItemsPanel. Also, you could then create a DataTemplate with a button inside, bind its Command property to a single command (= generic Handler), with as parameter the DataContext of the DataTemplate (= the current item of the list). This part is easier than the layouting.
Does is help?
Antoine
I think you'd have to create a custom Panel class, overriding MeasureOverride and ArrangeOverride to achieve your desired layout. Check out this (very brief) tutorial.

How can I change the default Control template of a TabControl according to my choice

I am trying to develop a Customize TabControl in which I'll divide the Whole TabControl into three Parts:
1)Tab Header
2)Common Region(for all Tab) and
3)Tab Content region for specific Tab
Update:
Please provide your best answers or samples if you have then, any type of help will be appreciated.
Thanks in Advance
You can overwrite the TabControl Template to be anything you want, including making it have a static region that stays visible regardless of which tab is selected.
Within the Template, I normally use a panel with IsItemsHost=True to define where the "Tab" portion of the tab control will be displayed and <ContentPresenter ContentSource="SelectedContent" /> where I want the selected tab content to be displayed.
The TabControl.ItemTemplate can also be overwritten to further define your Tabs, and TabControl.ItemContainer can be overwritten to modify just the TabContent part of the TabControl.
Hmm ... I don't quite understand why one would do this, but if I were you I would implement this using WPF.
I would implement the tab header as a StackPanel filled with Buttons (their style obviously needs to be redone so that it looks like tabs). The content would be a rectangle containing a grid whose content changes on clicking a button. And that's pretty much it for the basic sceleton. I don't understand your Common Region. What is also nice is to add a little "X" inside each tab in order to close it. That can be done with buttons as well.
It might make sense to use Expression Blend to create such a control.
Best wishes,
Christian

What is the best way to embed controls in a list/grid

I have a table of about 450 rows that I would like to display in a graphical list for users to view or modify the line items. The users would be selection options from comboboxes and selecting check boxes etc.
I have found a listview class that extends the basic listview to allow for embeding objects but it seems kind of slugish when I load all the rows into it.
I have used a datagridview in the past for comboboxes and checkboxes, but there was a lot of time invested in getting that up and running...not a big fav of mine.
I am looking for sugestions how I can do this with minimal overhead.
thanks
c#, vs2008, .net 2.0, system.windows.forms
If you have a complicated set of controls for each row, this is the simplest way to do it. However, it won't act like a listbox; you won't be able to highlight your rows or navigate with the keyboard.
Create a usercontrol with public property to point to your row
Draw a panel on your form - you will add instances of your 'row' usercontrol at runtime to this panel.
Set the panel to autoscroll (also set property to make the active control scroll into view)
Set the panel's Anchor property so it sizes w/ the window
You can set the form's max/min size properties so the full usercontrol row always shows (have to do to prevent horiz. scroll bar in panel)
Have a routine to add the rows
In a loop, create new usercontrols, set their properties, including the row in the datatable
Also, set the .Top property to the panel's .controls(pnl.controls.count-1) for all but the first one you add
Very simple, allows complicated 'rows', gets the job done. There are better ways to do this if you want listbox-like functionality without coding it yourself, but you may not need that.

Categories