1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
/****************************************************************************
**
** Copyright (C) 2016 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the documentation of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:FDL$
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** GNU Free Documentation License Usage
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
** Foundation and appearing in the file included in the packaging of
** this file. Please review the following information to ensure
** the GNU Free Documentation License version 1.3 requirements
** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
** $QT_END_LICENSE$
**
****************************************************************************/
/*!
\page styling-gauge.html
\title Styling Gauge
\brief Tutorial for styling the Gauge control.
\ingroup stylingtutorials
As GaugeStyle's documentation adequately covers common use cases, this
tutorial will cover a different scenario: one where the gauge's tickmarks
cover the value bar, instead of being aligned to the left or right of it.
\target styling-gauge-valueBar
\section2 The Value Bar Component
The \l {QtQuick.Controls.Styles::GaugeStyle::}{valueBar}
component is resized according to the gauge's value; if the value is low,
the bar will be small, and vice versa.
Starting from the default style, we'll change the color of the value bar to
orange, and increase its width slightly:
\snippet styling-gauge.qml valueBar
\image styling-gauge-valueBar.png
As mentioned in the documentation for GaugeStyle, \c implicitWidth needs to
be set when defining your own value bar.
\target styling-gauge-foreground
\section2 The Foreground Component
The \l {QtQuick.Controls.Styles::GaugeStyle::}{foreground}
component covers the full width and height of the value bar, even when the
value bar is not at its highest. By default, the foreground component
provides a "sheen". We'll choose to discard this, and leave it empty
instead:
\snippet styling-gauge.qml foreground
\image styling-gauge-foreground.png
\target styling-gauge-tickmark
\section2 The Tickmark Component
The \l {QtQuick.Controls.Styles::GaugeStyle::}{tickmark}
component sits to the left or right of the value bar, depending on the
control's \l {Gauge::tickmarkAlignment}{tickmarkAlignment}. In order to
have the tickmarks cover the width of the value bar instead, we need to do
two things:
\list 1
\li Remove the space the tickmarks previously assumed so that there is
just enough space for margins between the tickmarks and value bar.
\li Position the tickmarks according to the control's orientation and
tickmark alignment.
\endlist
\snippet styling-gauge.qml tickmark
In this case we chose \c 8 pixel margins, so we set the \c implicitWidth of
the tickmarks to that.
We account for every possible orientation and tickmark alignment, something
that is not necessary if the gauge will only ever have one orientation and
alignment. For example, if the gauge will always be of a vertical
orientation and the tickmarks left-aligned, then it is enough to set the
\c x property of the \c Rectangle to the following:
\code
x: parent.implicitWidth
\endcode
The value bar is \c 28 pixels wide, so we give the same width to our
tickmarks so that they cover the width of it.
\image styling-gauge-tickmark.png
\target styling-gauge-minorTickmark
\section2 The Minor Tickmark Component
The \l {QtQuick.Controls.Styles::GaugeStyle::}{minorTickmark}
component is almost identical to its larger counterpart, except that its
width does not affect the layout of the gauge's components. We'll do
similar adjustments to the ones in the previous section - the only
difference being the height:
\snippet styling-gauge.qml minorTickmark
\image styling-gauge-minorTickmark.png
\target styling-gauge-font-size
\section2 Adjusting Font Size
Finally, we increase the \l {Gauge::font}{font} size to \c 15 pixels:
\snippet styling-gauge.qml font-size
\image styling-gauge-font-size.png
\target styling-gauge-complete
\section2 Complete Source Code
\snippet styling-gauge.qml all
*/
|
