Skip to content

Commit e989e32

Browse files
sergepilipchuksergepilipchuk
committed
Update Readme file (new template)
1 parent e4e8d64 commit e989e32

File tree

2 files changed

+66
-12
lines changed

2 files changed

+66
-12
lines changed

‎Images/app-bar.jpg‎

47.1 KB
Loading

‎Readme.md‎

Lines changed: 66 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,77 @@
44
[![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
55
[![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives)
66
<!-- default badges end -->
7-
<!-- default file list -->
8-
*Files to look at*:
97

10-
* [MainWindow.xaml](./CS/AppBarExample/MainWindow.xaml) (VB: [MainWindow.xaml](./VB/AppBarExample/MainWindow.xaml))
11-
* [MainWindow.xaml.cs](./CS/AppBarExample/MainWindow.xaml.cs) (VB: [MainWindow.xaml.vb](./VB/AppBarExample/MainWindow.xaml.vb))
12-
<!-- default file list end -->
13-
# WPF AppBar - Display a top or bottom window menu inspired by Windows 10
8+
# WPF AppBar - Display a Top or Bottom Window Menu Inspired by Windows 10
9+
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.
11+
12+
![ Display a Top or Bottom Window Menu Inspired by Windows 10 - WPF AppBar, DevExpress](./Images/app-bar.jpg)
13+
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 />
1431

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>
1545

16-
<p>This example shows how to create an app bar containing custom regular and toggle buttons, the predefined <em>Exit</em> button, and the button that displays a flyout when clicked.</p>
17-
<p>In this example, the <a href="https://documentation.devexpress.com/WPF/clsDevExpressXpfWindowsUIAppBartopic.aspx">AppBar</a> control is populated with the <a href="https://documentation.devexpress.com/WPF/clsDevExpressXpfWindowsUIAppBarButtontopic.aspx">AppBarButton</a> and <a href="https://documentation.devexpress.com/WPF/clsDevExpressXpfWindowsUIAppBarToggleButtontopic.aspx">AppBarToggleButton</a> objects, which are divided into groups using the <a href="https://documentation.devexpress.com/WPF/clsDevExpressXpfWindowsUIAppBarSeparatortopic.aspx">AppBarSeparator</a> objects. To display the predefined <em>Exit</em> button, the <a href="https://documentation.devexpress.com/WPF/DevExpressXpfWindowsUIAppBar_IsExitButtonEnabledtopic.aspx">IsExitButtonEnabled</a> property is set to <strong>True</strong>.</p>
18-
<p>The button captions are specified using the <a href="https://documentation.devexpress.com/WPF/DevExpressXpfWindowsUIAppBarButton_Labeltopic.aspx">AppBarButton.Label</a> property. The <strong>HorizontalAlignment</strong> property specifies the button alignment relative to the app bar.</p>
19-
<p>The <a href="https://documentation.devexpress.com/WPF/DevExpressXpfWindowsUICommandButton_Glyphtopic.aspx">CommandButton.Glyph</a> property is used to provide the buttons with icons from the DX Image Gallery. The glyph theming feature is enabled for all buttons and the glyph height is set using the Style declared in the app bar's <strong>Resources</strong>. You can also use the button's <strong>Content</strong> property to specify the button icons. See the <em>Pin</em> button — the icon for this button is specified using the Unicode symbol that corresponds to the glyph in the Segoe UI Symbol font. For more information about how to use Segoe UI Symbol icons, see <a href="https://msdn.microsoft.com/en-us/library/windows/apps/jj841126.aspx">Guidelines</a> on MSDN.</p>
20-
<p>The <em>Rotate</em> button displays the flyout when clicked. The button's <strong>Flyout</strong> property allows you associate the <a href="https://documentation.devexpress.com/WPF/clsDevExpressXpfWindowsUIFlyouttopic.aspx">Flyout</a> or <a href="https://documentation.devexpress.com/WPF/clsDevExpressXpfWindowsUIMenuFlyouttopic.aspx">MenuFlyout</a> control with the button.</p>
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+
63+
## Files to Review
64+
65+
* [MainWindow.xaml](./CS/AppBarExample/MainWindow.xaml) (VB: [MainWindow.xaml](./VB/AppBarExample/MainWindow.xaml))
66+
* [MainWindow.xaml.cs](./CS/AppBarExample/MainWindow.xaml.cs) (VB: [MainWindow.xaml.vb](./VB/AppBarExample/MainWindow.xaml.vb))
2167

22-
<br/>
68+
## Documentation
2369

70+
* [AppBar](https://docs.devexpress.com/WPF/DevExpress.Xpf.WindowsUI.AppBar)
71+
* [AppBarButton](https://docs.devexpress.com/WPF/DevExpress.Xpf.WindowsUI.AppBarButton)
72+
* [AppBarToggleButton](https://docs.devexpress.com/WPF/DevExpress.Xpf.WindowsUI.AppBarToggleButton)
73+
* [AppBarSeparator](https://docs.devexpress.com/WPF/DevExpress.Xpf.WindowsUI.AppBarSeparator)
74+
* [IsExitButtonEnabled](https://docs.devexpress.com/WPF/DevExpress.Xpf.WindowsUI.AppBar.IsExitButtonEnabled)
75+
* [AppBarButton.Label](https://docs.devexpress.com/WPF/DevExpress.Xpf.WindowsUI.AppBarButton.Label)
76+
* [CommandButton.Glyph](https://docs.devexpress.com/WPF/DevExpress.Xpf.WindowsUI.CommandButton.Glyph)
77+
* [MenuFlyout](https://docs.devexpress.com/WPF/DevExpress.Xpf.WindowsUI.MenuFlyout)
2478

2579
<!-- feedback -->
2680
## Does this example address your development requirements/objectives?

0 commit comments

Comments
 (0)