keyboardnavigation | 基于 React 简洁实用键盘导航组件 | Frontend Framework library

I encourage you to use the library's options to reduce the complexity of your implementation and stop unwanted behavior.

According to the documentation, there are two functions renderPrevButton and renderNextButton with the AliceCarousel to render your custom component (any elements, icons, buttons, ...) for the Prev and Next item on the gallery.

So, instead of defining a custom button with a custom action handler, pass your desired component to the mentioned function and give them some styles for customization.

I added this part to within element. It fixed the problem.

add Loaded event handler:

Try to load accessibility module like import inside Chart.vue component.

More information on how to set up Vue and Highcharts you will find at our wrapper https://github.com/highcharts/highcharts-vue#using

The AvalonDock implementation is pretty weird. I remember having some troubles too when I had to use this control in a project. I think I know this control quite well. It is very badly implemented, in my opinion. Because they, for some reason, decided to implement this control itself using MVVM instead of making it simply MVVM ready. This makes it very inconvenient to use in advanced scenarios.
Semantics are also quite confusing. For example, containers are not the controls that render data. Containers are assigned to the Model property of the controls. Data is not assigned to the DataContext. But it looks good.

Also, the tab header placement behavior is broken (only allows tab headers at the bottom). My fix could be of interest for you, especially in context of dynamic tab header placement. See the Style below to get the expected tab header placement behavior. It simply wraps the content of the LayoutAnchorablePaneControl into a DockingPanel and rotates the header host, so that you get tab header alignment you have in Visual Studio (stacked by width). That's all. If you wish to stack the headers by their height (no rotation) simply replace the AnchorablePaneTabPanel with a e.g., StackPanel and remove the rotation triggers.
The provided example is based on that Style below. Otherwise you won't be able to propagate tab header position to the view.

Another big pain is the lack of events that are exposed by the DockingManager class and AvalonDock in general. This means there is no chance to observe the drag and drop actions. As a matter of fact, DockingManager only exposes three quite uninteresting events. Same to the content hosts like the LayoutAnchorablePaneControl.
Since AvalonDock does not use the WPF framework's Drag & Drop API, handling those events is not a solution.

To overcome the short comings, you must handle one of the few model events, the LayoutRoot.Updated event in this case.

The solution only targets the LayoutAnchorablePane and LayoutAnchorableGroupPane. To address advanced grouping or the LayoutDocumentPane you can simple extend the example by following the pattern.
Since you only require/requested a two column layout, the algorithm will do the job. Other more advanced layout arrangements are supported, but the behavior is not perfect as not all conditions are currently tracked. The focus is on a two column layout. It's a quick (but not so dirty) and very simple solution.
You should consider to disallow any layout arrangement other than the two column layout explicitly.

Additionally, AvalonDock does not provide an event to indicate when the visual layout process is completed. You only get a notification via the LayoutRoot.Updated event when the layout model is added/removed to/from the layout model tree. But you never know when exactly the visual tree is updated. We need to have access to the visual containers in order to set the LayoutPanelControl.TabStripPlacement property based on the new position of this control.
To overcome this, I used the Dispatcher to defer the access to the then initialized and rendered LayoutAnchorablePaneControl. Otherwise the tab header arrangement would be premature, because the control's layout index is yet to change. AvalonDock only allows to track very few layout model modifications but no observation of actual docking operations at all.

So the algorithm is basically

1. Handle the LayoutRoot.Updated event and start the actual positioning algorithm deferred using the Dispatcher
2. Iterate over all pane controls to update the tab header placement. In case nesting is allowed, you will have a layout tree that you have to traverse recursively, like it is done in this example for group panes.
3. Identify the position of the pane in the layout based on their index.
4. Set the LayoutPanelControl.TabStripPlacement property according to the index: an index of 0 means left and an index that equals the item count means right. Every other index is in between. The tab headers are placed based on the pane's position in the layout.
5. The DockingPanel will layout the tab items accordingly. Triggers are used to rotate the tab headers if they are positioned left or right.

There can be multiple LayoutPanelControl elements in the layout (except you disallow "illegal" layout arrangements to enforce the two column layout).

MainWindow.xaml.cs

You can add DataTriggers to your ToggleButton styles that change the CornerRadius depending on the IsDropDownOpen property of the ComboBox, which indicates if the Popup is shown.

You must modify the ToggleButton template. The ToggleButton is responsible for the border. You have currently set the BorderThickness to a fixed value. Simply bind it to the parent ComboBox:

You would have to iterate the item containers and accumulate the item width. Then get ScrollViewer of the TabPanel and collect the visible items based on the ScrollViewer.HorizontalOffset (start position) and ScrollViewer.ViewportWidth (to determine the aactual visible items).
The point is that the scroll viewer's width is measured in DIP and not items. The algorithm is more precise when you can ensure that all item containers have the same width.

You can find an iomplementation of FindVisualChild at How to: Find DataTemplate-Generated Elements.

The offset comes from your border surrounding the template not the button, thus adding to its thicknes.

this will work for you: