XAML advice for implementing tab-bar - c#

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).

Related

Need to show usercontrol on the top in WPF

I have a user control that I am using for some purpose and it's movable on the screen. Actually I am creating an application using Leap Motion. SO wherever I move my figure on the screen a big circular cursor moves accordingly. But on some place it gets cut off or I would say it gets hide or overlapped due to some other controls. So I want to know, how can I placed it on the top of the mainwindow view. Is it possible using adorner layer? If yes, So can you please tell me how to do that in WPF?
I found few examples on net but they are creating a rectangle or some thing on adorner layer using drwaingcontext object, however I just need to show my user control on the top.
Please give me some idea
Thanks & Regards,
Vinod
You shouldn't need to use the Adorner layer to simply show a UserControl on top of other controls... of course that depends on exactly what is 'overlapping' or hiding it. If they are just other UI controls, then you can fix your problem in two ways.
The first is to simply declare your UserControl that you want to be on top of the other controls at the bottom of the XAML, eg. define that element last.
The second solution is to use the Panel.ZIndex Attached Property to place that element above all others:
<UserControl Panel.ZIndex="10" />

Make Multiple Controls Use Same Tool Tip Message (c# Client App.)

I would like the same tool tip message (the one entered in the "ToolTip on myControlId" field) to be displayed when the mouse is hovered over an area which contains multiple controls. I tried putting the controls inside a Panel and GroupBox, but it only works when the mouse is in the "white space" area of the Panel/GroupBox, and, of course, does not work when the mouse is on a control within the Panel/GroupBox.
I'm from the web dev world so I'm open to suggestions for a new approach if I'm going about this the wrong way.
In standart windows developmern (WindowsForms) tootltip or tooltip control is associated to a single control. But you can use ToolTip control (see example how: ToolTip: Windows Forms .NET) and assign to all controls that recieve mouseover event.
If you're in WPF, the story becomes easier as you have message routing so usually it's enought to have subscription in one place.
Hope this helps.

How to center selected grid row/column at the center of the window?

I just wasted my entire evening on something which I thought would be very simple but it seems WPF and Google are letting me down completely.
I need a grid, 6x6 of which I fill every row and column with a custom control. I want to be able to navigate through this grid via the keyboard (I can get those events, no problem) but I cannot seem to find how I can always have the selected grid row/column in the center of my window.
I found some carousel alike implementations, but most of them only work in a single direction and I want two way navigation, yet none seem to support this nor can I extend them to do this.
I essentially want to create a PSP alike grid navigation.
One easy way is to do this:
Create a scrollable form.
Add a 6x6 grid of child controls.
In the GotFocus (or similar) event for all the controls, set the parent form scroll offset to an appropriate position to centre the child.
This is pretty straight-forward thing to implement, with a little bit of maths to work out how to centre the x,y position of a control by setting the scroll offsets (it can be tricky/confusing, but as long as you understand the coordinate systems used for scrolling, not too bad)
Or, another approach that avoids scrolling via the windows APIs and using custom controls:
Create a form
Override OnPaint to draw your grid of 6x6 "controls" as simple graphical shapes or bitmap images centred on the selected "control".
Handle keyboard (KeyDown/Up) and mouse handling (MouseDown/Up) events to make the 36 areas of the graphic respond to user inputs in the way you desire. You'll have to track the selected item and force the window to redraw its graphics to show the new state. Enable double buffering to stop it flickering.
The first approach gives you a lot of windows-based handling for free (tabbing between controls, remembering where the input focus is, and directing events to separate classes for each "control", for example). The second approach strips away all this "help" but gives you complete control over everything, which can often help avoid unintended behaviours (e.g. it won't move the input focus when the user presses Tab unless you specifically write the code to make it do that).

How can I assign a custom backcolor or background image to a TabPage control?

How can I assign a background image to tabpage control in Visual Studio C# 2010? I am able to provide background image to each of the tab separately, but I cannot do it so for the whole tabpage control, due to which a portion of tabpage control remain with different background and each of the tab pages has ok and fine background.
Here is the picture of my form:
See the 'grey-colored' region in the tabs line. How can I cover the whole tabpage control with one single background?
The header area that contains the tabs is not part of your tab page. It's part of the parent TabControl, which is automatically drawn for you by Windows.
If you want to change how it looks, you'll have to draw it yourself. That's called owner-drawing, and it's not exactly a trivial undertaking, especially for a complicated control like this one. For starters, you can't just use OwnerDrawFixed, because that just allows you to custom draw the contents of the tabs (for example, to change the font). You will need to owner draw the entire tab control.
I can't imagine a good reason that you would ever want do this, but you'll find a few samples online that might help get you started. For example:
http://homepage.ntlworld.com/mdaudi100/alternate/tabcontrols.html
http://www.codeproject.com/KB/tabs/flattabcontrol.aspx

Space-filling ToolBar item in WPF

How can I make an item inside a ToolBar fill all the remaining available space? Or, how to right-align some items, since that would give me the same effect in my case.
Note that solutions which involve nesting another container (like a Grid) inside the ToolBar don't work since that disables the special behaviour ToolBar gives to it's items (like no normal borders and look, simple outline border on hover, not receiving focus after click, etc.).
Additionally, anyone knows how to get rid of the little button that would show additional icons that overflowed from the toolbar if I had any?
I ended up using this solution:
http://karlshifflett.wordpress.com/2008/01/23/wpf-sample-series-stretch-toolbar-width-of-window/
It's not ideal, but it works. I still don't know how to get rid of the dropdown on the end though.
You can remove the button at the end by re-templating the toolbar. You can likely solve your other query this way too.
I wrote up a soluton for creating a "space filling" label that dynamically sizes to allow to you "right-align" items in a toolbar. Check it out: WPF Toolbar Items HorizontalAligment="Right"

Categories