Skip to content

Commit 3a9b813

Browse files
Add changes after review (fresh eye)
1 parent e989e32 commit 3a9b813

File tree

1 file changed

+13
-50
lines changed

1 file changed

+13
-50
lines changed

Readme.md

Lines changed: 13 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -7,59 +7,14 @@
77

88
# WPF AppBar - Display a Top or Bottom Window Menu Inspired by Windows 10
99

10-
This example adds an [`AppBar`](https://docs.devexpress.com/WPF/DevExpress.Xpf.WindowsUI.AppBar) to a WPF application and allows users to place primary commands at the top or bottom of the window. The bar contains standard and toggle buttons, groups related actions, includes a built-in **Exit** button and a button with a flyout (context) menu.
10+
This example uses the WPF [`AppBar`](https://docs.devexpress.com/WPF/DevExpress.Xpf.WindowsUI.AppBar) control to display a Windows 10–style menu at the top or bottom of a window.
11+
12+
Commands appear as circular buttons, including the built-in **Exit** command, the **Pin** command that works as a toggle, and the **Rotate** button that opens a flyout (context) menu with related actions. **Top** and **Bottom** buttons align the `AppBar` to the corresponding edge of the window.
13+
14+
The [`AppBar.HideMode`](https://docs.devexpress.com/WPF/DevExpress.Xpf.WindowsUI.AppBar.HideMode) property is set to `Sticky` so the command bar remains visible until the user hides it manually with the **Exit** button.
1115

1216
![ Display a Top or Bottom Window Menu Inspired by Windows 10 - WPF AppBar, DevExpress](./Images/app-bar.jpg)
1317

14-
## Implementation Details
15-
16-
If you set the [`AppBar.HideMode`](https://docs.devexpress.com/WPF/DevExpress.Xpf.WindowsUI.AppBar.HideMode) property to `Sticky`, the `AppBar` remains visible until a user hides it manually through the **Exit** button. To display the predefined **Exit** button, enable the [IsExitButtonEnabled](https://docs.devexpress.com/WPF/DevExpress.Xpf.WindowsUI.AppBar.IsExitButtonEnabled). The following XAML markup configures bar layout, visibility, and command structure:
17-
18-
```xaml
19-
<dxwui:AppBar ...
20-
IsOpen="True"
21-
HideMode="Sticky"
22-
IsExitButtonEnabled="True">
23-
<!-- Define "Top" and "Bottom" buttons -->
24-
<dxwui:AppBarButton Content="T" Label="Top" Click="OnMoveAppBarTop"/>
25-
<dxwui:AppBarButton Content="B" Label="Bottom" Click="OnMoveAppBarBottom"/>
26-
27-
!-- Define "Zoom in" and "Zoom out" buttons -->
28-
<dxwui:AppBarButton Label="Zoom in" Glyph="{dx:DXImageGrayscale Image=ZoomIn_32x32.png}" />
29-
<dxwui:AppBarButton Label="Zoom out" Glyph="{dx:DXImageGrayscale Image=ZoomOut_32x32.png}" />
30-
<dxwui:AppBarSeparator />
31-
32-
<!-- Define "Actual Size" and "Rotate" buttons -->
33-
<dxwui:AppBarButton Label="Actual Size" Glyph="{dx:DXImageGrayscale Image=Zoom_32x32.png}" />
34-
<dxwui:AppBarButton Label="Rotate" HorizontalAlignment="Right" Glyph="{dx:DXImage Image=DrillDown_32x32.png}" >
35-
<!-- Define the Flyout control that appears when a user clicks the "Rotate" button-->
36-
<dxwui:AppBarButton.Flyout>
37-
<dxwui:MenuFlyout ShowIndicator="True">
38-
<dxwui:MenuFlyoutItem Content="90° clockwise" />
39-
<dxwui:MenuFlyoutItem Content="90° counter clockwise" />
40-
<dxwui:MenuFlyoutSeparator />
41-
<dxwui:MenuFlyoutItem Content="Reset" />
42-
</dxwui:MenuFlyout>
43-
</dxwui:AppBarButton.Flyout>
44-
</dxwui:AppBarButton>
45-
46-
<dxwui:AppBarSeparator HorizontalAlignment="Right" />
47-
<dxwui:AppBarToggleButton Label="Pin" HorizontalAlignment="Right">&#xE141;</dxwui:AppBarToggleButton>
48-
</dxwui:AppBar>
49-
```
50-
51-
**Top** and **Bottom** buttons move the `AppBar` to the corresponding edge of the window. Each button is bound to the corresponding handler:
52-
53-
```csharp
54-
private void OnMoveAppBarTop(object sender, RoutedEventArgs e) {
55-
appBar.Alignment = AppBarAlignment.Top;
56-
}
57-
58-
private void OnMoveAppBarBottom(object sender, RoutedEventArgs e) {
59-
appBar.Alignment = AppBarAlignment.Bottom;
60-
}
61-
```
62-
6318
## Files to Review
6419

6520
* [MainWindow.xaml](./CS/AppBarExample/MainWindow.xaml) (VB: [MainWindow.xaml](./VB/AppBarExample/MainWindow.xaml))
@@ -76,6 +31,14 @@ private void OnMoveAppBarBottom(object sender, RoutedEventArgs e) {
7631
* [CommandButton.Glyph](https://docs.devexpress.com/WPF/DevExpress.Xpf.WindowsUI.CommandButton.Glyph)
7732
* [MenuFlyout](https://docs.devexpress.com/WPF/DevExpress.Xpf.WindowsUI.MenuFlyout)
7833

34+
## More Examples
35+
36+
* [WPF Data Grid – Specify Custom Content for Column Chooser Headers](https://github.com/DevExpress-Examples/wpf-data-grid-custom-content-for-column-chooser-headers)
37+
* [WPF Data Grid – Handle Drag and Drop Operations](https://github.com/DevExpress-Examples/wpf-grid-handle-drag-and-drop)
38+
* [WPF Data Grid – Bind to Dynamic Data](https://github.com/DevExpress-Examples/wpf-bind-gridcontrol-to-dynamic-data)
39+
* [WPF Scheduler - Filter Time Regions](https://github.com/DevExpress-Examples/wpf-scheduler-filter-time-regions)
40+
* [WPF Scheduler - Apply User Restrictions](https://github.com/DevExpress-Examples/wpf-scheduler-apply-end-user-restrictions)
41+
7942
<!-- feedback -->
8043
## Does this example address your development requirements/objectives?
8144

0 commit comments

Comments
 (0)