For this question, it would be helpful if you download these two images:
DataGrid in Main TabItem:
Very Similar DataGrid in Secondary TabItem:
If you switch them rapidly with the Windows Viewer, you will notice some subtle differences:
(a) The background color
(b) The margins
Since my objective is to make those TabItems almost identical (minus a couple extra fields in the 2nd one), I am told that all I need to do is modify the value some border and/or margin (??).
I wouldn't know where to start implementing that advice. All I need is a TabControl with the two lower tabs; they should have 3 sides with the upper being borderless, joining the upper region. Nothing else. No trembling, no shaking upon switching.
How would I go about that? Please be specific.
Does Microsoft provide XAML source code for standard controls?
TIA.
Related
Is it possible to achieve the following visual effect in .NET MAUI/XAML:
The main concern is the outline (or lack thereof on the bottom) of the selected tab and the underline of the unselected tabs.
The goal is to be able to define an arbitrary number of Tabs for the application.
Is this possible with XAML alone?
Any help would be greatly appreciated
If I had to create custom controls I would go with the GraphicsView.
Create a custom control Tab with a canvas that draw it in function of it state, you can use StackLayout to stack them and TapGestureRecognizer to manage clicks events.
One of the main problem of a GraphicsView is that you can't attach click event to shapes you are drawing (one solution there) so you can't be really precise on the events if you don't want to manage bounding box yourself.
Or you can just use ImageButton for the tabs with a label in front for the text, it would be way easier but less flexible (tabs should all be the same sizes).
Alright, so I'm trying to figure out the best way to accomplish this for my rather unique case. I have a fullscreen WPF application where controls are added to a Grid dynamically and the user is given the option to freely move/resize them. The controls can be individually moved or resized anywhere on the parent Grid but I have prevented them from overlapping via their MouseMove events. They also cannot be moved outside of their container. Since the app will be running on machines with different monitor sizes, I need to take that into consideration when making the original layout. I have an initial layout that I would like to use, but it would seem that I'm out of options:
I first tried using rows and columns just to (initially) place the controls that are added. This method places them correctly but becomes a problem when I need to move or resize the elements because the control is already assigned to a particular row and column. I could try to use this method and then remove any rows/columns after placing the controls, but I don't think that would work well.
I've also considered a Viewbox, but that's not practical in my case for fairly obvious reasons (as it merely resizes the controls to fit the screen). I'd prefer not to use this because I would only need it to standardize my initial layout. That's it. I also don't want to mess up any text that will be displayed on the window.
So yeah, this is more of a "best practice" question because any solution I can think of would not look very professional or elegant. Feel free to ask any questions if you need clarification.
Edit: As an additional note, I'd prefer to stick with a Grid as opposed to a Canvas as my container.
Edit 2: Just to be clear, I would not need the specific (inital) layout after the first launch. When the program exits, the layout (Margins, Width & Heights, etc. for each element) is saved to a file to use for the next launch.
I've developed a number of kiosk/interactive applications using WPF. If you are trying to show the element transitions (while moving), then it might be best to use a parent Canvas and bind the Canvas.Left and Canvas.Top properties. You can mimic the grid alignment, using a Canvas, if you put in place mechanisms (e.g. Manipulation/Mouse events, converters) to make sure that the Canvas attached properties adjust to the row/column offsets.
It is not uncommon at all to use the Viewbox to mitigate display differences (and your use case is not "rather unique"). You set the Viewbox to a target resolution (e.g. 1920x1080) and allow the control to fill the available space. The other alternative would be to dynamically apply a content template based on the application window size/ratio.
After looking at multiple options, I've decided to just use a calculation to (sort of) simulate the behavior of rows/columns. Because my application is fullscreen, I can take my SystemParameters.PrimaryScreenWidth and SystemParameters.PrimaryScreenHeight to orient my layout. Using a combination of universal padding (static values) and ratio-based calculations (dynamic values), I can smoothly set my initial layout.
For instance, I'm dividing the width of my monitor by 6 (rounded up to avoid decimals) and using that (minus half the control's width) as the control's Margin.Left property, centering it on a 'column' of sorts.
Honestly, my initial layout is fairly simple right now, so we'll see if this will suffice going forward. Thanks to everyone who contributed to the question, and sorry if I was unclear on what I was asking.
Following the guide here, I have created a full-screen WPF application. But I met a problem: the various size & resolution of screens. For example, I want to put several sprites on the screen as buttons; but they are located at different positions in each screen, and even different to what shown in the XAML designer.
I have searched all over without a clue got. How can I fix this problem? (to make the buttons appears the exact place (in the center), and better, help the xaml designer reflect exactly what will happens when the program is running). Any help will be appreciated.
UPDATE: I'm defining my page as a Canvas inside the Window element. Actually I like Canvas more, cause I can easily put my sprites anywhere, not like a grid.
In general, you should not use pixel values in WPF.
Instead, you should layout your content in <Grid>s with rows and columns, and it will automatically expand to fill the screen (based on the alignments and row / column definitions).
Avoid using the canvas. Also, do not rely too much on the designer to build your layout. Using Grids, Stackpanels and/or Dockpanels will give much better results (and scale when resizing your window). For example, if you use only the designer and drag-and-dropp all your elements, the designer often puts huge margins a bit randomly and this will not always scale properly if you resize your window.
I have been using WinForms since the first framework introduced and invested a lot of time and effort in it. Now I am attempting to move to WPF and, honestly, it's not so easy.
Now I have a task, I need to implement a simple wizard, each page of which has a aligned to center group of controls. The group contains a set of buttons, four button in a row. Width of the group is constant, height is variable -- it depends on the number of buttons inside.
It's a simple task for WinForms, but I have no idea how to do it using XAML.
I have three questions:
1). Obviously, the buttons inside a group is a WrapPanel which is placed in a Grid's cell. It's simple. But how to calculate height of the WrapPanel not using code behind?
2). Which is recommended way to implement wizard? Data template or some kind of Tab Control? I probably will need to have some transition effects when switching pages.
3). Is it acceptable in WPF world to use binding as a way to repositioning controls?
Thank you in advance!
The WrapPanel will auto-adjust its height based on its contents by default. WPF is a big advancement from WinForms precisely because of the new layout paradigms. No code behind is needed for anything you've mentioned.
As for 2; there are a lot of ways to implement this, depending on how close you adhere to MVVM (if at all); I'd recommend using a styled TabControl at first (you can adjust the style to present visually the steps in the wizard as tabs, without letting the user jump between tabs), as it's easiest. Also, it's possible to bind pretty much everything to the TabControl.
3 is possible, but should be rarely needed. And I mean it.
Now then; a simple example to show you the power of WPF.
You can have in your ViewModel (if you're not familiar with MVVM google it or read any of Josh Smith's articles or book or... wow there's such a wealth of information on it I don't know which to choose) a collection of objects, let's say Step classes, which you can bind to the ItemsSource of the TabControl. The TabControl will automatically create a tab for each of your Step.
Inside your Step class, you can have a collection of items, let's say... um, Collection<Push> (I'm struggling not to use known classes like Action or Button). If the ItemTemplate of the TabControl contains anything that recognizes that collection, as in a ListBox styled internally to use a WrapPanel for its ItemsContainer, you're done: the template will show the list of Pushes in a WrapPanel and that's that.
Now, I probably shouldn't write a full tutorial here anyway, but that should get you started. Read up on DataTemplates, ItemsControl etc. (again, I'm having difficulties picking resources... Dr. WPF has awesome articles on both, but they might be a bit advanced) and you should be good to go. Just remember that there's a good reason why WPF features a lot more fluid layouts than any previous desktop technology, you should become familiar with that.
I have a Windows Mobile project built in C#.
I have a lot of ready made forms having various controls on it, from Listviews to Editfields.
When user changes orientation some elements are not refreshing correctly. For example the Listview's columns are same and doesn't accommodate the new screen width change (scrollbars appear or half of the screen is filled).
How do you handle these changes?
Do I need to call for each form these fixes by hand, or I can create some kind of global way to fix this? I would like to go with the simplest method if possible.
I would like to avoid the classic way, to add code to all of my forms. So I am looking for better ways, and I would like to see more ideas.
I'm assuming that most of your controls are using a DockStyle, and that will get you 90% of the way in terms of updating the GUI on orientation changes. For the ListView, you'll have to add in some code.
You can add an event handler on Form.Resize, and there put in code to resize the ListView columns. You can tell portrait vs landscape by comparing width vs height. There's also a way to add an event handler on an actual orientation change, but it's interop and I don't remember the code offhand. Form.Resize should be sufficient for most cases.
You can check out an example here