Develop Reference

How to change the back color of the scrollbar of a panel?

So I am making a dark mode option for my application and I want the scrollbar back color to also change color so that it doesn't look out of place. I have tried to search for a solution but so far I have only found code for a scrollbar as in the control. but I need to change the scrollbar of a panel. Does someone happen to know how to do this? Thanks a lot in advance.

I faced the same challenge when I started to work on custom controls that should support the Dark Mode. The problem with Panel control as well as other controls is that their ScrollBars are managed internally by those controls and there is no way to customize them.
My Idea was to create a custom ScrollBar control that supports custom colors and themes, see my answer https://stackoverflow.com/a/73613059/5514131
And in our custom Panel control, we create the custom ScrollBars internally and use the various Panel properties and events to link the custom ScrollBars to our Panel.
With the help of the Panel VerticalScroll and HorizontalScroll properties, we can know whether the default Panel scrollbars are visible or not and their properties to copy to our custom ScrollBars.
With the help of LocationChanged, SizeChanged, and other Panel events and properties we should bind the custom ScrollBars to our Panel and place them on top of the default ones to completely cover them.
I used the OnMouseWheel and OnScroll to update our custom ScrollBars when the Panel is scrolled using the code or mouse wheel.
We should dispose the custom ScrollBars when the Panel is disposed, or its handle is destroyed.
I know this isn't the best approach, but it should work to prevent the default ugly scrollbars from ruining your beautiful Dark Mode.
This workaround can be applied to other controls, I actually used it with TabControls, however, it will be more complex to implement.
Windows Forms Panel control with custom ScrollBars based on the Flat ScrollBar control https://gist.github.com/ahmedosama007/39f8b76e65300e5969110b753fe0a654

Width of control based on width of window

I'm trying to figure out, how to write Responsive UI in XAML.
I would like to have 2 controls on my window. MinWidth of each control id 400.
If Width of windows is >800, Width of each control should be 50%, if we change widht of window to <800, each control should have 100% of window.
It's pretty simple to set up something like that with HTML/CSS, and right now I'm trying do it in WPF without progress.
Can you help me with that?
I tried to handle that with WrapPanel, but it does not work. It wraps properly, but does not change width of control.

I have two ideas for doing this:
Using a binding converter, and bind the width/height of each item to the container width/height.
Creating a custom panel, with de desired layout.
Only a few ideas, hope helps.

Define resources based on screen revolution.
In design mode, using dynamic key to avoid errors.
In runtime, dynamically add resources into App.

Button Styles via xaml and expression blend

I created a custom control that looks a lot like the tab buttons in VS 2012. In my control I could set a propertiy to posistion the text and sidebar vertical or horizontal. After playing around with the control I figured there was probably a better way to go about this. So i fired up the Expression Blend preview and suprising enough (only second or third time using blend) was able to create a style to achieve a simliar style button. However, Now I want to have control over the text and sidebar being vertical or horizontal. I would also like to have control over the mouse over color. Is this possible to do via one style or am i going to have to create a bunch of different styles?

If I understood correctly you can achieve what you want to do with event triggers.

Parent controls lose manipulation features when child controls ManipulationMode is set to other than 'None'

Basically, I have a SemanticZoom control with a GridView inside it, and the GridView has a custom control inside it, but for simplicity, let's assume it's a simple red Border. The problem is that I'm trying to handle the Border's manipulation when scaling (set ManipulationMode to Scale) so that I can know when the user does a pinch out gesture and "Zoom In" into the Border (which is really another page), but by handling the Manipulation, I lose the ability to (1) use the SemanticZoom and (2) Scrolling the grid.
If you have used the Windows 8 photo app, you'll notice that they implement this feature somehow. If you pinch in into an image, the Page will go into SemanticZoom, but if you pinch out it will go into full screen mode. I want similar functionality, but I don't know how to achieve it.
Any ideas?
Thanks in advance.

I will use 2 SemanticZoom controls to achieve Photo App Effect.

FlowLayoutPanel. Custom Scrollbars

Is it possible to use a third party scroll control inside a FlowLayoutPanel? Thing is that we are using devexpress controls and the FlowLayoutPanel's scrollbar controls does not look good.
Is there a way to custom paint or replace them with devexpress controls.
Any ideas on how to go about this?

I would suggest that you take a look at the XtraLayoutControl Suite that provides a greater functionality in comparison with the FlowLayoutPanel control. Also, please note that our skinning engine works only with DevExpress controls and thus standard controls and their elements are not skinned.
Finally, this is just an idea, and it might work. You should turn off the FlowLayoutControl scrollbars and position our scrollbars near the control. You will have to handle the scrollbars' Scroll event to scroll the FlowLayoutControl programmatically and also synchronize the scrollbars position. This is not an easy task, but I just have no other idea on how this can be done.

I had the same need and came up with a solution combining the standard FlowLayoutPanel with the DevExpress XtraScrollableControl. See my post here.