Add label offset to Show Grid

* Add label offset option

* Update screenshot

* update color names

* remove unused property

CppSamples/DisplayInformation/ShowGrid/README.md

@@ -10,7 +10,7 @@ Grids are often used on printed maps, but can also be helpful on digital 2D maps
 
 ## How to use the sample
 
-Tap on the `Change Grid` button in the toolbar to open a settings view. You can change the view from 2D or 3D, select the type of grid from `Grid Type` (LatLong, MGRS, UTM, and USNG) and modify its properties like label visibility, grid line color, grid label color, and label formatting.
+Tap on the `Change Grid` button in the toolbar to open a settings view. You can change the view from 2D or 3D, select the type of grid from `Grid Type` (LatLong, MGRS, UTM, and USNG) and modify its properties like label visibility, grid line color, grid label color, label formatting, and label offset.
 
 ## How it works
 
@@ -19,14 +19,13 @@ Tap on the `Change Grid` button in the toolbar to open a settings view. You can
 3. The label position can be set with `setLabelPosition(labelPosition)` method on the grid.
    * Note that as of 200.6, MGRS, UTM, and USNG grids in a SceneView only support the `Geographic` label position.
 4. For the `LatitudeLongitudeGrid` type, you can specify a label format of `DECIMAL_DEGREES` or `DEGREES_MINUTES_SECONDS`.
-5. To set the grid, use the `setGrid(grid)` method on the map view or scene view.
+5. For all screen-aligned label placement strategies, you can set the labels' offset in device-independent pixels (DIPs) from the screen edge with `setLabelOffset(offset)`.
+6. To set the grid, use the `setGrid(grid)` method on the map view or scene view.
 
 ## Relevant API
 
 * ArcGISGrid
 * LatitudeLongitudeGrid
-* LatitudeLongitudeGridLabelFormat::DecimalDegrees
-* LatitudeLongitudeGridLabelFormat::DegreesMinutesSeconds
 * MapView
 * MGRSGrid
 * SceneView

CppSamples/DisplayInformation/ShowGrid/ShowGrid.cpp

@@ -62,8 +62,11 @@ ShowGrid::ShowGrid(QObject* parent /* = nullptr */):
   constexpr double targetScale = 6450785;
   m_map->setInitialViewpoint(Viewpoint(Point(-10336141.70018318, 5418213.05332071, SpatialReference::webMercator()), targetScale));
 
-  // Set the intial grid to LatitudeLongitudeGrid
+  // Set the initial grid to LatitudeLongitudeGrid
   m_grid = new LatitudeLongitudeGrid(this);
+
+  // Most values are populated from the UI, but we need to set some initial values
+  m_currentLabelOffset = m_grid->labelOffset();
 }
 
 ShowGrid::~ShowGrid() = default;
@@ -173,6 +176,7 @@ void ShowGrid::setGridType(const QString& gridType)
   setLabelColor(m_currentLabelColor);
   setLabelPosition(m_currentLabelPosition);
   setLabelFormat(m_currentLabelFormat);
+  setLabelOffset(m_currentLabelOffset);
 
   emit gridTypeChanged();
 }
@@ -200,7 +204,7 @@ void ShowGrid::setLabelsVisible(bool visible)
 }
 
 void ShowGrid::setLineColor(const QString& lineColor)
-{  
+{
   m_currentLineColor = lineColor;
 
   SimpleLineSymbol* lineSymbol = static_cast<SimpleLineSymbol*>(m_grid->lineSymbol(0));
@@ -264,3 +268,10 @@ void ShowGrid::setLabelFormat(const QString& labelFormat)
 
   emit labelFormatChanged();
 }
+
+void ShowGrid::setLabelOffset(double offset)
+{
+  m_currentLabelOffset = offset;
+  m_grid->setLabelOffset(offset);
+  emit labelOffsetChanged();
+}

CppSamples/DisplayInformation/ShowGrid/ShowGrid.h

@@ -53,6 +53,7 @@ class ShowGrid : public QObject
   Q_PROPERTY(QStringList labelFormats MEMBER m_labelFormats CONSTANT)
   Q_PROPERTY(QString currentLabelFormat MEMBER m_currentLabelFormat NOTIFY labelFormatChanged)
   Q_PROPERTY(QStringList labelPositions MEMBER m_labelPositions CONSTANT)
+  Q_PROPERTY(double currentLabelOffset MEMBER m_currentLabelOffset NOTIFY labelOffsetChanged)
 
 public:
   explicit ShowGrid(QObject* parent = nullptr);
@@ -68,6 +69,7 @@ class ShowGrid : public QObject
   Q_INVOKABLE void setLabelColor(const QString& labelColor);
   Q_INVOKABLE void setLabelPosition(const QString& labelPosition);
   Q_INVOKABLE void setLabelFormat(const QString& labelFormat);
+  Q_INVOKABLE void setLabelOffset(double offset);
 
 signals:
   void mapViewChanged();
@@ -80,6 +82,7 @@ class ShowGrid : public QObject
   void labelColorChanged();
   void labelPositionChanged();
   void labelFormatChanged();
+  void labelOffsetChanged();
 
 private:
   // Declare private methods
@@ -104,6 +107,7 @@ class ShowGrid : public QObject
   QString m_currentLabelColor;
   QString m_currentLabelPosition;
   QString m_currentLabelFormat;
+  double m_currentLabelOffset = 0.0;
 
   // Constants
   const QString s_mapView = QStringLiteral("MapView");

CppSamples/DisplayInformation/ShowGrid/ShowGrid.qml

@@ -379,6 +379,47 @@ Item {
                 }
             }
 
+            Text {
+                Layout.leftMargin: 10
+                text: "Label offset"
+                enabled: offsetSlider.enabled
+                color: enabled ? "black"  : "gray"
+            }
+
+            Slider {
+                id: offsetSlider
+                Layout.minimumWidth: leftPadding + rightPadding
+                Layout.rightMargin: 10
+                Layout.fillWidth: true
+                from: 0
+                to: 150
+                value: gridSample.currentLabelOffset
+                enabled: (gridSample.currentLabelPosition !== "Geographic" && gridSample.currentLabelPosition !== "Center")
+                onValueChanged: {
+                    if (value !== gridSample.currentLabelOffset)
+                        gridSample.setLabelOffset(value);
+                }
+
+                handle: Rectangle {
+                    x: offsetSlider.leftPadding + offsetSlider.visualPosition * (offsetSlider.availableWidth - width)
+                    y: offsetSlider.topPadding + offsetSlider.availableHeight / 2 - height / 2
+                    implicitWidth: 26
+                    implicitHeight: 26
+
+                    color: offsetSlider.enabled ? "white" : "lightgrey"
+                    border.color: "gray"
+                    Text {
+                        anchors.centerIn: parent
+                        text: offsetSlider.value.toFixed(0)
+                        font.pixelSize: 14
+                        color: offsetSlider.enabled ? "black" : "gray"
+                        onWidthChanged: {
+                            parent.width = Math.max(width + 10, 26)
+                        }
+                    }
+                }
+            }
+
             // Button to hide the styling window
             Rectangle {
                 id: hideButton