1# Window Title Bar Customization Development (C++)
2## Overview
3### Introduction
4OpenHarmony has a default UX style for window titles. It also allows you to customize the window titles in your own style to accommodate diverse needs.
5### Constraints
6A folder for storing the custom title bar code must be placed in **foundation/arkui/ace_engine/frameworks/core/components_ng/pattern/container_modal**. The build configuration must be specified in **foundation/arkui/ace_engine/frameworks/core/components_ng/pattern/BUILD.gn**.
7## How to Develop
8
9### Development
10To customize the title bar:
111. In the **frameworks/core/components/common/layout/constants.h** file, define the values for **MaximizeMode** – a parameter that specifies the mode for maximizing or minimizing the window. In the following example, **MODE_AVOID_SYSTEM_BAR** and **MODE_FULL_FILL** are the values defined by vendor enhance.
12    ```cpp
13    enum class MaximizeMode : uint32_t {
14        MODE_AVOID_SYSTEM_BAR,
15        MODE_FULL_FILL,
16        MODE_RECOVER,
17    };
18    ```
192. In the **foundation/arkui/ace_engine/frameworks/core/components_ng/pattern/container_modal/container_modal_view_factory.h** file, add code to **ContainerModalViewFactory::GetView** for creating a custom window title bar based on the **MaximizeMode** settings.
20    > **NOTE**
21    >
22> **ContainerModalViewFactory::GetView** is a factory method that creates a window title bar based on the **MaximizeMode** settings. It is expanded as follows:
23
24    ```cpp
25        class ACE_EXPORT ContainerModalViewFactory {
26        public:
27            static RefPtr<FrameNode> GetView(RefPtr<FrameNode>& content, MaximizeMode mode) {
28                if (mode == MaximizeMode::MODE_AVOID_SYSTEM_BAR ||
29                    mode == MaximizeMode::MODE_FULL_FILL) {
30                    return ContainerModalViewEnhance::Create(content);
31                } else {
32                    return ContainerModalView::Create(content);
33                }
34             }
35        };
36    ```
37In the preceding example from vendor enhance, a custom window title bar is created depending on the value of **MaximizeMode** (**MaximizeMode::MODE_AVOID_SYSTEM_BAR** or **MaximizeMode::MODE_FULL_FILL**).
38
393. Create a folder in the **foundation/arkui/ace_engine/frameworks/core/components_ng/pattern/container_modal** directory to store the custom title bar code.
40    > **NOTE**
41    >
42> The entry to a custom title bar has been completed in steps 1 and 2. This step is to write the specific implementation code.
43    >
44    > The structure of the **container_modal** folder is as follows:
45    ```shell
46    ├── container_modal_accessibility_property.cpp
47    ├── container_modal_accessibility_property.h
48    ├── container_modal_pattern.cpp
49    ├── container_modal_pattern.h
50    ├── container_modal_view.cpp
51    ├── container_modal_view_factory.h
52    ├── container_modal_view.h
53    └── enhance
54        ├── container_modal_pattern_enhance.cpp
55        ├── container_modal_pattern_enhance.h
56        ├── container_modal_view_enhance.cpp
57        └── container_modal_view_enhance.h
58```
59    The **container_modal_*** file under **container_modal** contains the code related to the default title bar view. You can add your code file in the created folder for the custom title bar. In the preceding example, the **container_modal_*** file under **enhance** is the code file by vendor enhance.
60
614. Complete the build configuration for .cpp files in **foundation/arkui/ace_engine/frameworks/core/components_ng/pattern/BUILD.gn**.
62
63When the development is complete, you can debug and verify the custom title bar.
64### Debugging and Verification
65Before getting started, prepare the following files in the same directory:
66- **open_maximize.bat**, the content of which is as follows:
67    ```shell
68    hdc shell mount -o rw,remount /sys_prod
69    hdc file send window_manager_config_open.xml sys_prod/etc/window/resources/window_manager_config.xml
70    hdc shell reboot
71    ```
72- **window_manager_config_open.xml**, the content of which is as follows:
73    ```html
74    <?xml version="1.0" encoding="utf-8"?>
75        <Configs>
76          <decor enable="true"/>
77          <modeChangeHotZones>50 50 50</modeChangeHotZones>
78          <maxFloatingWidth>1706</maxFloatingWidth>
79          <maxFloatingHeight>1000</maxFloatingHeight>
80          <minFloatingWidth>398</minFloatingWidth>
81          <minFloatingHeight>528</minFloatingHeight>
82          <floatingBottomPosY>0</floatingBottomPosY>
83          <defaultFloatingWindow>82 121 1068 706</defaultFloatingWindow>
84          <defaultWindowMode>102</defaultWindowMode>
85          <defaultMaximizeMode>0</defaultMaximizeMode>
86          <dragFrameGravity>5</dragFrameGravity>
87          <maxUniRenderAppWindowNumber>10</maxUniRenderAppWindowNumber>
88          <maxFloatingWindowSize>2880</maxFloatingWindowSize>
89          <splitRatios>0.5 0.33 0.67</splitRatios>
90          <keyboardAnimation>
91            <timing>
92              <durationIn>500</durationIn>
93              <durationOut>150</durationOut>
94              <curve name="cubic">0.2 0.0 0.2 1.0</curve>
95            </timing>
96          </keyboardAnimation>
97          <windowAnimation>
98            <timing>
99              <duration>200</duration>
100              <curve name="cubic">0.0 0.0 0.2 1.0</curve>
101            </timing>
102            <scale>0.9 0.9</scale>
103            <rotation>0 0 1 0</rotation>
104            <translate>0 0</translate>
105            <opacity>0</opacity>
106          </windowAnimation>
107          <windowEffect>
108            <appWindows>
109              <cornerRadius>
110                <fullScreen>off</fullScreen>
111                <split>off</split>
112                <float>defaultCornerRadiusL</float>
113              </cornerRadius>
114              <shadow>
115                <focused>
116                  <elevation>0</elevation>
117                  <color>#000000</color>
118                  <offsetX>0</offsetX>
119                  <offsetY>15</offsetY>
120                  <alpha>0.4</alpha>
121                  <radius>34</radius>
122                </focused>
123                <unfocused>
124                  <elevation>0</elevation>
125                  <color>#000000</color>
126                  <offsetX>0</offsetX>
127                  <offsetY>15</offsetY>
128                  <alpha>0.2</alpha>
129                  <radius>17</radius>
130                </unfocused>
131              </shadow>
132            </appWindows>
133          </windowEffect>
134        </Configs>
135    ```
136    > **NOTE**
137    >
138    > **window_manager_config_open.xml** contains configuration items. Among them, change the value of **defaultMaximizeMode** to one of the values you define for **MaximizeMode**. The value is the one obtained by **MaximizeMode maximizeMode = GetWindowManager()->GetWindowMaximizeMode()**. The system loads the title bar according to this value.
139
140Now with the prepared files, debug and verify your title bar as follows:
1411. Burn the image that contains the title bar code to the target device.
1422. Run the **open_maximize.bat** script.
1433. Run the demo to examine the effect.
144