Merge branch 'clemensmanert-RadioBox'

examples/gallery/button/ButtonPage.cpp

@@ -8,6 +8,7 @@
 #include <QskSwitchButton.h>
 #include <QskPushButton.h>
 #include <QskCheckBox.h>
+#include <QskRadioBox.h>
 #include <QskSeparator.h>
 #include <QskLinearBox.h>
 
@@ -154,6 +155,9 @@ namespace
 
             auto button3 = new QskCheckBox( "Error", this );
             button3->setSkinStateFlag( QskCheckBox::Error );
+            new QskRadioBox( { "One", "Two", "Three" }, this );
+            auto radios = new QskRadioBox( { "One", "Two", "Three" }, this );
+            radios->setLayoutMirroring(true);
         }
     };
 }

skins/material3/QskMaterial3Skin.cpp

@@ -23,6 +23,7 @@
 #include <QskPageIndicator.h>
 #include <QskPushButton.h>
 #include <QskProgressBar.h>
+#include <QskRadioBox.h>
 #include <QskScrollView.h>
 #include <QskSegmentedBar.h>
 #include <QskSeparator.h>
@@ -139,6 +140,7 @@ namespace
         void setupPageIndicator();
         void setupPopup();
         void setupProgressBar();
+        void setupRadioBox();
         void setupPushButton();
         void setupScrollView();
         void setupSegmentedBar();
@@ -199,6 +201,7 @@ void Editor::setup()
     setupPopup();
     setupProgressBar();
     setupPushButton();
+    setupRadioBox();
     setupScrollView();
     setupSegmentedBar();
     setupSeparator();
@@ -464,6 +467,44 @@ void Editor::setupProgressBar()
     setGradient( Q::Bar | Q::Disabled, m_pal.onSurface38 );
 }
 
+void Editor::setupRadioBox()
+{
+    using Q = QskRadioBox;
+    using A = QskAspect;
+
+    setAnimation( Q::Ripple | A::Metric | A::Position, qskDuration );
+    
+    setSpacing( Q::Panel, 10_dp );
+    
+    setStrutSize( Q::Button, { 20_dp, 20_dp } );
+    setStrutSize( Q::Symbol, { 10_dp, 10_dp } );
+    setStrutSize( Q::Ripple, { 40_dp, 40_dp } );
+
+    setAlignment( Q::Symbol, Qt::AlignCenter );
+    setAlignment( Q::Text, Qt::AlignBottom );
+    
+    setMargin( Q::Text, QskMargins( 10_dp, 0, 10_dp, 0 ) );
+    
+    setBoxShape( Q::Button, 20_dp );
+    setBoxShape( Q::Ripple, 40_dp );
+    setBoxBorderMetrics( Q::Button, 2_dp );
+    setBoxBorderColors( Q::Button, m_pal.onBackground );
+    setColor( Q::Text, m_pal.onBackground );
+    setColor( Q::Symbol, m_pal.primary );
+    setColor( Q::Ripple, stateLayerColor( m_pal.onSurface, m_pal.focusOpacity ) );
+
+    // Selected
+    setColor( Q::Ripple | Q::Selected,
+	stateLayerColor( m_pal.primary, m_pal.focusOpacity ) );
+    setBoxBorderColors( Q::Button | Q::Selected, m_pal.primary );
+
+    // Disabled
+    setBoxBorderColors( Q::Button | Q::Disabled, m_pal.onSurface38 );
+    setBoxBorderColors( Q::Button | Q::Disabled | Q::Selected, m_pal.onSurface38 );
+    setColor( Q::Text | Q::Disabled, m_pal.onSurface38 );
+    setColor( Q::Symbol | Q::Disabled, m_pal.onSurface38 );
+}
+
 void Editor::setupFocusIndicator()
 {
     using Q = QskFocusIndicator;

skins/squiek/QskSquiekSkin.cpp

@@ -19,6 +19,7 @@
 #include <QskPopup.h>
 #include <QskProgressBar.h>
 #include <QskPushButton.h>
+#include <QskRadioBox.h>
 #include <QskScrollView.h>
 #include <QskSeparator.h>
 #include <QskSegmentedBar.h>
@@ -144,6 +145,7 @@ namespace
         void setupPopup();
         void setupProgressBar();
         void setupPushButton();
+        void setupRadioBox();
         void setupScrollView();
         void setupSegmentedBar();
         void setupSeparator();
@@ -259,6 +261,7 @@ void Editor::setup()
     setupPopup();
     setupProgressBar();
     setupPushButton();
+    setupRadioBox();
     setupScrollView();
     setupSegmentedBar();
     setupSeparator();
@@ -607,6 +610,39 @@ void Editor::setupPushButton()
     setAlignment( Q::Graphic, Qt::AlignCenter );
 }
 
+void Editor::setupRadioBox()
+{
+    using Q = QskRadioBox;
+
+    setSpacing(Q::Panel, qskDpiScaled( 10 ) );
+    
+    setStrutSize( Q::Button, { qskDpiScaled( 20 ), qskDpiScaled( 20 ) } );
+    setStrutSize( Q::Symbol, { qskDpiScaled( 9 ), qskDpiScaled( 9 ) }) ;
+    
+    setBoxShape( Q::Button, qskDpiScaled( 20 ) );
+    setBoxShape( Q::Ripple, qskDpiScaled( 40 ) );
+    setBoxBorderMetrics( Q::Button, qskDpiScaled( 1 ) );
+
+    setBoxBorderColors( Q::Button, m_pal.darker125 );
+    setBoxBorderColors( Q::Button | Q::Disabled, m_pal.theme );
+
+    setColor( Q::Text, m_pal.themeForeground );
+    setColor( Q::Symbol, m_pal.themeForeground );
+    setColor( Q::Panel, m_pal.lighter125 );
+    setColor( Q::Panel | Q::Disabled, m_pal.lighter125 );
+
+    setColor( Q::Button | Q::Disabled, m_pal.lighter110 );
+    
+    setColor( Q::Text | Q::Disabled, m_pal.darker200 );
+
+    setColor( Q::Symbol | Q::Disabled, m_pal.darker200 );
+
+    setMargin( Q::Text, QskMargins( qskDpiScaled( 10 ), 0, qskDpiScaled( 10 ), 0 ));
+
+    setAlignment( Q::Symbol, Qt::AlignCenter );
+    setAlignment( Q::Text, Qt::AlignBottom );
+}
+
 void Editor::setupDialogButtonBox()
 {
     using Q = QskDialogButtonBox;

src/controls/QskRadioBox.cpp

@@ -0,0 +1,246 @@
+#include "QskRadioBox.h"
+#include "QskEvent.h"
+#include "QskAnimationHint.h"
+#include "QskSkinlet.h"
+
+QSK_SUBCONTROL( QskRadioBox, Panel )
+QSK_SUBCONTROL( QskRadioBox, Button )
+QSK_SUBCONTROL( QskRadioBox, Symbol )
+QSK_SUBCONTROL( QskRadioBox, Text )
+QSK_SUBCONTROL( QskRadioBox, Ripple )
+
+QSK_STATE( QskRadioBox, Selected, QskAspect::FirstUserState << 1 )
+QSK_STATE( QskRadioBox, Pressed, QskAspect::FirstUserState << 2 )
+QSK_STATE( QskRadioBox, Focused, QskAspect::FirstUserState << 3 )
+
+class QskRadioBox::PrivateData {
+public:
+    QStringList items;
+    int selectedIndex = -1;
+    int focusedIndex = -1;
+    int pressedIndex = -1;
+};
+
+QskRadioBox::QskRadioBox( QQuickItem* parent ) :
+    Inherited( parent ),
+    m_data( new PrivateData{} ) {
+    setFocusPolicy( Qt::NoFocus );
+    setAcceptedMouseButtons( Qt::LeftButton );
+
+    connect(this, &QskRadioBox::itemsChanged, this,
+        [this]( const QStringList& items ) {
+	    if( items.count() > 0 ) {
+		setFocusPolicy( Qt::StrongFocus );
+	    } else {
+		setFocusPolicy( Qt::NoFocus );
+	    }
+	});
+
+    setFocusedIndex( -1 );
+}
+
+QskRadioBox::QskRadioBox( const QStringList& list, QQuickItem* parent ) :
+    QskRadioBox( parent ) {
+    setItems( list );
+}
+
+QskRadioBox::QskRadioBox( const QStringList& items,
+    int selectedIndex, QQuickItem* parent ) :
+    QskRadioBox( items, parent ) {
+    if( selectedIndex >= 0 && selectedIndex < items.count() )
+    {
+	m_data->selectedIndex = selectedIndex;
+    }
+}
+
+QRectF QskRadioBox::focusIndicatorRect() const {
+    if( m_data->focusedIndex > -1) {
+	auto textRect = effectiveSkinlet()->sampleRect( this,
+	    contentsRect(), QskRadioBox::Text, m_data->focusedIndex );
+
+	auto buttonRect = effectiveSkinlet()->sampleRect( this,
+	       contentsRect(), QskRadioBox::Button, m_data->focusedIndex );
+
+	if( textRect == QRectF() ) {
+	    return buttonRect;
+	}
+	
+	auto result = QRectF(
+	    qMin( textRect.x(), buttonRect.x() ),
+            qMin( textRect.y(), buttonRect.y() ),
+            buttonRect.width() + textRect.width(),
+	    qMax( buttonRect.height(), textRect.height() ));
+
+	if( layoutMirroring() ) {
+	    result.setWidth(
+		result.width() + marginHint( Text ).right()
+		+ marginHint( Button ).left() );
+	} else {
+	    result.setWidth(
+		result.width() + marginHint( Text ).left()
+		+ marginHint( Button ).right() );
+	}
+
+	return result;
+    }
+
+    return QRectF();
+}
+
+int QskRadioBox::selectedIndex() const {
+    return m_data->selectedIndex;
+}
+
+const QStringList& QskRadioBox::items() const {
+    return m_data->items;
+}
+
+int QskRadioBox::pressedIndex() const {
+    return m_data->pressedIndex;
+}
+
+void QskRadioBox::setSelectedIndex( int index ) {
+    if( index == m_data->selectedIndex
+        || index >= m_data->items.count() ) {
+    	return;
+    }
+
+    if( index < 0 ) {
+	m_data->selectedIndex = -1;
+    } else {
+	m_data->selectedIndex = index;
+    }
+   
+    selectedIndexChanged( m_data->selectedIndex );
+}
+
+void QskRadioBox::setItems( const QStringList& items ){
+    if( m_data->items == items ) {
+	return;
+    }
+
+    m_data->items = items;
+    itemsChanged( items );
+    setSelectedIndex( m_data->selectedIndex );
+
+    if( m_data->focusedIndex > items.size() ) {
+	setFocusedIndex( 0 );
+    }
+}
+
+void QskRadioBox::keyPressEvent( QKeyEvent* event )
+{
+    switch ( event->key() )
+    {
+    case Qt::Key_Up:
+    case Qt::Key_Left:
+	m_data->selectedIndex = qMax( m_data->selectedIndex - 1, 0 );
+	setFocusedIndex( m_data->selectedIndex );
+	event->setAccepted( true );
+	update();
+	return;
+    case Qt::Key_Down:
+    case Qt::Key_Right:
+	m_data->selectedIndex = qMin( m_data->selectedIndex + 1,
+				    items().size() - 1 );
+	setFocusedIndex( m_data->selectedIndex );
+	event->setAccepted( true );
+	update();
+	return;
+    case Qt::Key_Select:
+    case Qt::Key_Return:
+    case Qt::Key_Space:
+	m_data->selectedIndex = m_data->focusedIndex;
+	event->setAccepted( true );
+	update();
+	return;
+    }
+
+    auto currentTabIndex = m_data->focusedIndex;
+    auto nextTabIndex = currentTabIndex + qskFocusChainIncrement( event );
+    if( nextTabIndex >= items().size()
+	|| nextTabIndex < 0 ) {	
+	Inherited::keyPressEvent( event );
+	setFocusedIndex( -1 );	
+	update();
+    } else {
+	event->setAccepted( true );
+        setFocusedIndex( ( float ) nextTabIndex );
+
+	const auto aspect = Ripple | QskAspect::Metric | QskAspect::Position;
+	auto hint = animationHint(aspect | skinStates());
+	if( hint.isValid()) {
+	    startTransition( aspect, hint,
+	        ( float ) currentTabIndex, ( float ) nextTabIndex );
+	}
+
+	update();
+
+    }
+}
+
+void QskRadioBox::keyReleaseEvent( QKeyEvent* e )
+{
+    e->setAccepted( true );
+}
+
+void QskRadioBox::mousePressEvent( QMouseEvent* e )
+{
+    auto indexAtPosition = indexAt( e->localPos() );
+
+    m_data->pressedIndex = indexAtPosition;
+    m_data->selectedIndex = -1;
+
+    setFocusedIndex( indexAtPosition );
+
+    e->setAccepted( true );
+    update();
+}
+
+void QskRadioBox::mouseReleaseEvent( QMouseEvent* e )
+{
+    auto index = indexAt( e->localPos() );
+    if( index == m_data->pressedIndex ) {    
+	setSelectedIndex( index );
+    }
+
+    e->setAccepted( true );
+    update();
+}
+
+void QskRadioBox::focusInEvent( QFocusEvent* e ) {
+    if( e->reason() == Qt::TabFocusReason ) {
+	setFocusedIndex(0 );
+    } else if( e->reason() == Qt::BacktabFocusReason ) {
+	setFocusedIndex( items().size() - 1 );
+    }
+
+    update();
+    Inherited::focusInEvent( e );
+}
+
+void QskRadioBox::focusOutEvent( QFocusEvent* e ) {
+    setFocusedIndex( -1 );
+    update();
+    
+    Inherited::focusOutEvent( e );
+}
+
+int QskRadioBox::indexAt( const QPointF& target ) const {
+    auto itemHeight = contentsRect().height() / items().size();
+    auto index = target.y() / itemHeight;
+
+    if( index < 0 || index >= items().size() ) {
+	return -1;
+    }
+
+    return index;
+}
+
+void QskRadioBox::setFocusedIndex( int index ) {
+    m_data->focusedIndex = index;
+    setPositionHint( Ripple, index );
+    focusIndicatorRectChanged();
+}
+
+#include "moc_QskRadioBox.cpp"

src/controls/QskRadioBox.h

@@ -0,0 +1,64 @@
+#ifndef QSK_RADIO_BOX_H
+#define QSK_RADIO_BOX_H
+
+#include "QskControl.h"
+
+#include <QStringList>
+
+class QSK_EXPORT QskRadioBox : public QskControl
+{
+    Q_OBJECT
+
+    Q_PROPERTY( int selectedIndex
+        READ selectedIndex
+        WRITE setSelectedIndex
+        NOTIFY selectedIndexChanged FINAL )
+
+    Q_PROPERTY( QStringList items
+        READ items
+        WRITE setItems
+        NOTIFY itemsChanged FINAL )
+
+    using Inherited = QskControl;
+
+  public:
+    QSK_SUBCONTROLS( Panel, Button, Symbol, Text, Ripple )
+    QSK_STATES( Selected, Pressed, Focused )
+
+    QskRadioBox( QQuickItem* parent = nullptr );
+    QskRadioBox( const QStringList&, QQuickItem* parent = nullptr );
+    QskRadioBox( const QStringList&, int, QQuickItem* parent = nullptr );
+
+    QRectF focusIndicatorRect() const override;
+
+    const QStringList& items() const;
+    int selectedIndex() const;
+    int pressedIndex() const;
+
+  public Q_SLOTS:
+    void setSelectedIndex( int );
+    void setItems( const QStringList& );
+
+  Q_SIGNALS:
+    void selectedIndexChanged( int );
+    void itemsChanged( const QStringList& );
+
+  protected:
+    void keyPressEvent( QKeyEvent* ) override;
+    void keyReleaseEvent( QKeyEvent* ) override;
+
+    void mousePressEvent( QMouseEvent* ) override;
+    void mouseReleaseEvent( QMouseEvent* ) override;
+
+    void focusInEvent( QFocusEvent* ) override;
+    void focusOutEvent( QFocusEvent* ) override;
+
+    int indexAt( const QPointF& ) const;
+
+  private:
+    void setFocusedIndex( int index );
+    class PrivateData;
+    std::unique_ptr< PrivateData > m_data;
+};
+
+#endif

src/controls/QskRadioBoxSkinlet.cpp

@@ -0,0 +1,298 @@
+#include "QskRadioBoxSkinlet.h"
+
+#include "QskAspect.h"
+#include "QskRadioBox.h"
+
+#include "QskSkinStateChanger.h"
+#include "QskStandardSymbol.h"
+#include "QskColorFilter.h"
+#include "QskGraphic.h"
+#include "QskFunctions.h"
+#include "QskSkin.h"
+
+namespace {
+    using Q = QskRadioBox;
+};
+
+QskRadioBoxSkinlet::QskRadioBoxSkinlet( QskSkin* )
+{
+    setNodeRoles( { PanelRole, ButtonRole, SymbolRole, TextRole, RippleRole } );
+}
+
+QskRadioBoxSkinlet::~QskRadioBoxSkinlet()
+{
+}
+
+QskAspect::States statesForIndex( const QskRadioBox* radio, int index ) {
+    auto states = radio->skinStates();
+    
+    if( radio->selectedIndex() == index ) {
+	states |= Q::Selected;
+    }
+
+    if( radio->pressedIndex() == index ) {
+	states |= Q::Pressed;
+    }
+
+    if( radio->positionHint( Q::Ripple ) == index ) {
+	states |= Q::Focused;
+    }
+
+    return states;
+}
+
+QRectF QskRadioBoxSkinlet::subControlRect( const QskSkinnable* skinnable,
+    const QRectF& contentsRect, QskAspect::Subcontrol subcontrol ) const
+{
+    auto radio = static_cast< const QskRadioBox* >( skinnable );
+
+    if( subcontrol == Q::Ripple ) {
+	return rippleRect( radio, contentsRect );	
+    } 
+
+    return contentsRect;
+}
+
+QSizeF QskRadioBoxSkinlet::sizeHint( const QskSkinnable* skinnable,
+    Qt::SizeHint, const QSizeF& ) const
+{
+    auto radio = static_cast< const QskRadioBox* >( skinnable );
+
+    const auto font = skinnable->effectiveFont( Q::Text );
+    const auto textMargins = skinnable->marginHint( Q::Text );
+    const auto buttonMargins = skinnable->marginHint( Q::Button );
+    const auto symbolMargins = skinnable->marginHint( Q::Symbol );
+			 
+    qreal maxTextWidth = 0;
+    for( auto& item : radio->items() ) {
+	maxTextWidth = std::max( maxTextWidth, qskHorizontalAdvance( font, item ) );
+    }
+
+    auto buttonWidth = radio->strutSizeHint( Q::Button ).width();
+    auto symbolWidth = radio->strutSizeHint( Q::Symbol ).width();
+
+    maxTextWidth += textMargins.left() + textMargins.right();
+    buttonWidth += buttonMargins.left() + buttonMargins.right();
+    symbolWidth += symbolMargins.left() + symbolMargins.right();
+
+    auto spacing = radio->spacingHint( Q::Panel );
+    return QSizeF( maxTextWidth + qMax( buttonWidth, symbolWidth ),
+        ( lineHeight( radio ) + spacing ) * radio->items().size() - spacing );
+}   
+
+QSGNode* QskRadioBoxSkinlet::updateSubNode( const QskSkinnable* skinnable,
+    quint8 nodeRole, QSGNode* node ) const
+{
+    auto radio = static_cast< const QskRadioBox* >( skinnable );
+
+    switch( nodeRole )
+    {
+        case PanelRole:
+	    return updateBoxNode( skinnable, node, Q::Panel );
+
+        case ButtonRole:
+	    return updateSeriesNode( radio, Q::Button, node );
+
+        case SymbolRole:
+	    return updateSeriesNode( radio, Q::Symbol, node );
+	    
+        case TextRole:
+	    return updateSeriesNode( radio, Q::Text, node );
+
+        case RippleRole:
+	{
+	    QskSkinStateChanger changer( radio );
+	    auto ripplePosition = radio->positionHint( Q::Ripple );
+	    changer.setStates( statesForIndex( radio, ripplePosition ) );
+
+	    return updateBoxNode( radio, node, Q::Ripple );
+	}
+    };
+
+    return Inherited::updateSubNode( skinnable, nodeRole, node );
+}
+
+qreal QskRadioBoxSkinlet::lineHeight(const QskRadioBox* target) const {
+    auto strutHight = qMax( target->strutSizeHint( Q::Button ).height(),
+        target->strutSizeHint( Q::Text ).height() );
+    const auto textMargins = target->marginHint( Q::Text );
+    auto fontHeight = target->effectiveFontHeight( Q::Text );
+    fontHeight += textMargins.top() + textMargins.bottom();
+
+    return qMax( strutHight, fontHeight );    
+}
+
+int QskRadioBoxSkinlet::sampleCount( const QskSkinnable* skinnable, QskAspect::Subcontrol ) const {
+    const auto radio = static_cast< const QskRadioBox* >( skinnable );
+    return radio->items().count();
+}
+
+QSizeF QskRadioBoxSkinlet::buttonSymbolSize( const QskRadioBox* radio ) const {
+    auto buttonStrut = radio->strutSizeHint( Q::Button );
+    auto symbolStrut = radio->strutSizeHint( Q::Symbol );
+
+    buttonStrut = buttonStrut.grownBy( radio->marginHint( Q::Button ) );
+    symbolStrut = symbolStrut.grownBy( radio->marginHint( Q::Symbol ) );
+
+    return QSizeF(
+        qMax( buttonStrut.width(), symbolStrut.width() ),
+        qMax( buttonStrut.height(), symbolStrut.height() ) );
+}
+
+QRectF QskRadioBoxSkinlet::rippleRect( const QskRadioBox* radio, const QRectF& rect ) const {
+    auto ripplePosition = radio->positionHint( Q::Ripple );
+
+    if( ripplePosition < 0 ) {
+	return QRectF();
+    }
+    
+    auto button = buttonRect( radio, Q::Button, rect, ripplePosition );
+    auto rippleSize = radio->strutSizeHint( Q::Ripple );
+    button.moveLeft( button.x() - ( rippleSize.width() - button.width() ) / 2 );
+    button.moveTop( button.y() - ( rippleSize.height() - button.height() ) / 2 );
+    button.setSize( rippleSize );
+    return button;
+}
+
+QRectF QskRadioBoxSkinlet::buttonRect( const QskRadioBox* radio,
+    const QskAspect::Subcontrol target, const QRectF& rect, double index ) const {
+    if( index < 0 ) {
+	return QRectF();
+    }
+
+    auto result = rect;
+    result.setSize( radio->strutSizeHint( target ) );
+
+    auto spacing = radio->spacingHint( Q::Panel );
+    result.moveTop( ( lineHeight( radio ) + spacing ) * index );
+
+    auto margins = radio->marginHint( target );
+    auto withMargins = result.size().grownBy( margins );
+
+    auto maxSize = buttonSymbolSize( radio );
+    auto alignment = radio->alignmentHint( target );
+
+    // Vertical positioning
+    auto alignHeight = maxSize.height() - withMargins.height();
+    if( alignment.testFlag( Qt::AlignVCenter ) ) {
+	result.moveTop( result.top() + alignHeight / 2 );
+    } else if( alignment.testFlag( Qt::AlignBottom ) ) {
+	result.moveTop( result.top() + alignHeight );
+    }
+    result.moveTop( result.top() + margins.top() );
+
+    // Horizontal positioning
+    auto alignWidth = 0;
+    if( alignment.testFlag( Qt::AlignHCenter ) ) {
+	alignWidth = ( maxSize.width() - withMargins.width() ) / 2;
+    } else if ( alignment.testFlag( Qt::AlignRight )) {
+	alignWidth = maxSize.width() - withMargins.width();
+    }
+
+    if( radio->layoutMirroring() ) {
+	result.moveRight( rect.width() - ( alignWidth + margins.right() ) );
+    } else {
+	result.moveLeft( margins.left() + alignWidth );	
+    }
+ 
+    return result;
+}
+
+QRectF QskRadioBoxSkinlet::textRect( const QskRadioBox* radio,
+    const QRectF& rect, int index ) const {
+    auto text = radio->items()[ index ];
+
+    if(text.isEmpty()) {
+	return QRectF();
+    }
+
+    QRectF result = rect;
+    auto spacing = radio->spacingHint( Q::Panel );
+    auto lh = lineHeight( radio );
+    const auto textMargins = radio->marginHint( Q::Text );
+    const auto font = radio->effectiveFont( Q::Text );
+
+    result.moveTop( index * ( lh + spacing )
+        + lh - radio->effectiveFontHeight( Q::Text )
+	+ textMargins.top());
+
+    result.setHeight( lh );
+    result.setWidth( qskHorizontalAdvance( font, text ) );
+
+    auto button = buttonRect( radio, Q::Button, rect, index );
+    auto buttonsMargins = radio->marginHint( Q::Button );
+    auto buttonWidth = button.marginsAdded( buttonsMargins ).width();
+
+    if( radio->layoutMirroring() ) {
+	result.moveLeft( rect.width() - textMargins.right()
+	    - result.width() - buttonWidth);
+    } else {
+	result.moveLeft( buttonWidth + textMargins.left() );
+    }
+
+    return result;
+}
+
+QRectF QskRadioBoxSkinlet::sampleRect( const QskSkinnable* skinnable,
+    const QRectF& rect, QskAspect::Subcontrol subcontrol, int index ) const {
+
+    const auto radio = static_cast< const QskRadioBox* >( skinnable );
+
+    if( subcontrol == Q::Text ) {
+	return textRect( radio, rect, index );
+    } 
+
+    return buttonRect( radio, subcontrol, rect, index);
+}
+
+QskAspect::States QskRadioBoxSkinlet::sampleStates( const QskSkinnable* skinnable,
+				QskAspect::Subcontrol subControl, int index ) const {
+
+    auto radio = static_cast< const QskRadioBox* >( skinnable );
+    auto states =  Inherited::sampleStates( skinnable, subControl, index );
+
+    return states | statesForIndex( radio, index );
+}
+
+QSGNode* QskRadioBoxSkinlet::updateSampleNode(  const QskSkinnable* skinnable,
+    QskAspect::Subcontrol subcontrol, int index, QSGNode* node ) const {
+
+    auto radio = static_cast< const QskRadioBox* >( skinnable );
+
+    auto rect = sampleRect( skinnable, radio->contentsRect(),
+        subcontrol, index );
+    
+    if( subcontrol == Q::Text ) {
+	return QskSkinlet::updateTextNode( radio, node, rect, Qt::AlignLeft,
+	    radio->items()[ index ], subcontrol );
+    } else if ( subcontrol == Q::Button ) {
+	return QskSkinlet::updateBoxNode( radio, node, rect, subcontrol );
+    } else if( subcontrol == Q::Symbol ) {
+        auto symbol = QskStandardSymbol::NoSymbol;
+	auto color = radio->color( subcontrol ).rgb();
+
+	if( radio->selectedIndex() == index ) {
+	    symbol = QskStandardSymbol::Bullet;
+	    color = radio->color( subcontrol | Q::Selected ).rgb();
+	}
+    
+	auto graphic = radio->effectiveSkin()->symbol( symbol );
+
+	/*
+        Our default skins do not have the concept of colorRoles
+        implemented. Until then we do the recoloring manually here
+	*/
+	QskColorFilter filter;
+	filter.addColorSubstitution( Qt::black, color );
+	auto colorSub = radio->color( subcontrol | statesForIndex( radio, index ) );
+	filter.addColorSubstitution( Qt::black, colorSub.rgb() );
+
+	QskGraphic::fromGraphic( graphic, filter );
+
+	return updateGraphicNode( radio, node, graphic, filter, rect );
+    }
+
+    return node;
+}
+
+#include "moc_QskRadioBoxSkinlet.cpp"

src/controls/QskRadioBoxSkinlet.h

@@ -0,0 +1,61 @@
+#ifndef QSK_RADIO_BOX_SKINLET_H
+#define QSK_RADIO_BOX_SKINLET_H
+
+#include "QskSkinlet.h"
+
+class QskRadioBox;
+
+class QSK_EXPORT QskRadioBoxSkinlet : public QskSkinlet
+{
+    Q_GADGET
+
+    using Inherited = QskSkinlet;
+
+  public:
+    enum NodeRole
+    {
+        PanelRole,
+        ButtonRole,
+        SymbolRole,
+        TextRole,
+        RippleRole,
+
+        RoleCount
+    };
+
+    Q_INVOKABLE QskRadioBoxSkinlet( QskSkin* = nullptr );
+    ~QskRadioBoxSkinlet() override;
+
+    QRectF subControlRect( const QskSkinnable*,
+        const QRectF&, QskAspect::Subcontrol ) const override;
+
+    QSizeF sizeHint( const QskSkinnable*,
+        Qt::SizeHint, const QSizeF& ) const override;
+
+    int sampleCount( const QskSkinnable*, QskAspect::Subcontrol ) const override;
+
+    QRectF sampleRect( const QskSkinnable*,
+        const QRectF&, QskAspect::Subcontrol, int index ) const override;
+
+    QSizeF buttonSymbolSize( const QskRadioBox* radio ) const;
+    QRectF textRect( const QskRadioBox*, const QRectF&, int ) const;
+    QRectF buttonRect( const QskRadioBox*, const QskAspect::Subcontrol target, const QRectF&,
+        double ) const;
+    QRectF rippleRect( const QskRadioBox*, const QRectF& ) const;
+
+
+    QskAspect::States sampleStates( const QskSkinnable*,
+        QskAspect::Subcontrol, int index ) const override;
+
+  protected:
+    QSGNode* updateSubNode( const QskSkinnable*,
+        quint8 nodeRole, QSGNode* ) const override;
+
+    QSGNode* updateSampleNode( const QskSkinnable*,
+        QskAspect::Subcontrol, int index, QSGNode* ) const override;
+
+  private:
+    qreal lineHeight( const QskRadioBox* target ) const;
+};
+
+#endif

src/controls/QskSkin.cpp

@@ -56,6 +56,9 @@ QSK_QT_PRIVATE_END
 #include "QskProgressBar.h"
 #include "QskProgressBarSkinlet.h"
 
+#include "QskRadioBox.h"
+#include "QskRadioBoxSkinlet.h"
+
 #include "QskPushButton.h"
 #include "QskPushButtonSkinlet.h"
 
@@ -178,6 +181,7 @@ QskSkin::QskSkin( QObject* parent )
     declareSkinlet< QskTextLabel, QskTextLabelSkinlet >();
     declareSkinlet< QskTextInput, QskTextInputSkinlet >();
     declareSkinlet< QskProgressBar, QskProgressBarSkinlet >();
+    declareSkinlet< QskRadioBox, QskRadioBoxSkinlet >();
 
     const QFont font = QGuiApplication::font();
     setupFonts( font.family(), font.weight(), font.italic() );

src/graphic/QskStandardSymbol.cpp

@@ -206,6 +206,12 @@ static void qskCrossMarkGraphic( QPainter* painter )
     painter->drawLine( 0.0, 1.0, 1.0, 0.0 );
 }
 
+static void qskBulletGraphic( QPainter* painter )
+{
+    painter->setPen( QPen( Qt::black, 1.0 ) );
+    painter->drawEllipse( QRectF( 0.0, 0.0, 1.0, 1.0 ) );
+}
+
 QskGraphic QskStandardSymbol::graphic( Type symbolType )
 {
     static QskGraphic graphics[ SymbolTypeCount ];
@@ -263,6 +269,11 @@ QskGraphic QskStandardSymbol::graphic( Type symbolType )
             case QskStandardSymbol::SegmentedBarCheckMark:
             {
                 qskCheckMarkGraphic( &painter );
+		break;
+	    }
+            case QskStandardSymbol::Bullet:
+            {
+                qskBulletGraphic( &painter );
                 break;
             }
             case QskStandardSymbol::NoSymbol:

src/graphic/QskStandardSymbol.h

@@ -34,6 +34,8 @@ namespace QskStandardSymbol
         ComboBoxSymbolPopupClosed,
         ComboBoxSymbolPopupOpen,
 
+        Bullet,
+
         SymbolTypeCount
     };
 

src/src.pro

@@ -205,6 +205,8 @@ HEADERS += \
     controls/QskQuick.h \
     controls/QskQuickItem.h \
     controls/QskQuickItemPrivate.h \
+    controls/QskRadioBox.h \
+    controls/QskRadioBoxSkinlet.h \
     controls/QskScrollArea.h \
     controls/QskScrollBox.h \
     controls/QskScrollView.h \
@@ -297,6 +299,8 @@ SOURCES += \
     controls/QskScrollArea.cpp \
     controls/QskScrollBox.cpp \
     controls/QskScrollView.cpp \
+    controls/QskRadioBox.cpp \
+    controls/QskRadioBoxSkinlet.cpp \
     controls/QskScrollViewSkinlet.cpp \
     controls/QskSegmentedBar.cpp \
     controls/QskSegmentedBarSkinlet.cpp \