Radio Buttons - Hitbox

How-to Discussions
1

Dear Community,

First of all, Im a still a noob.

I created a little test for Radio Buttons with snippets I found.

I have 2 problems, I couldn’t solve (that im aware of :wink: )

  1. How could I change the “hitbox” of the triggers? (now its on the small circle only, and it would be nice to have it for the whole row)

  2. How can I deactivate all other switches? (now they behave like checkboxes, and I want to simulate a radio button)

file

unselectedv1

selectedv1

file
Askn0vh6zQmj-legacy-files-gBK19IQmOBnEhmip-j4TLTDOJ00CX37CsoCeT7d3i.png318×564

file
xOrZoQNCX6Ys-legacy-files-vGFWn1tcHronvJui-lOguAunV6t1-N0SLxX0I01hX.png317×562

unselectedv2

selectedv2

file
fL6V3KCGwmL0-legacy-files-RL8BJlHCRiv1jgp7-6-h69yqNDVnW6kJCnZEXbcR-.png305×541

file
0pLMCQyMRbBk-legacy-files-f0h5HD8Y8Bl3hMYd-DUNoaHwrYnN9KQVT1IZWXAOp.png305×541

- Here is the Code: (if you want to try it you need to put 1.png - 8.png and typo.otf in assets)

<App>

    <DockPanel Background="#ffffff">

        <StatusBarBackground Dock="Top" Background="#FF2D55"/>
        <BottomFrameBackground Dock="Bottom"  />

        <Text Dock="Top" Value="Blade's RadioBTN-Test" FontSize="24" TextAlignment="Center" Background="#FF2D55" TextColor="#FFF" Padding="0,0,0,5"><Font File="Assets/typo.otf"/> 
    </Text>
    <Image ux:Class="Icon" Margin="8" />


    <ToggleControl ux:Class="MySwitch"  Margin="4,4,4,4" Width="80"
        Height="48" Focus.IsFocusable="true" ux:Name="_switch">
        <Clicked>
            <ToggleSwipeActive Target="swipe" />

        </Clicked>

        <SwipeGesture Length="0" Type="Active" ux:Name="swipe" />

        <WhileSwipeActive Source="swipe">
            <Change Target="_switch.Value" Value="true" />
        </WhileSwipeActive>
        <SwipingAnimation Source="swipe">
            <Change enabledTimeline.TargetProgress="1" />
        </SwipingAnimation>

        <Panel Layer="Background">
            <Circle ux:Name="yzCircle" Alignment="CenterLeft" Width="27" Height="27" Margin="60,0,0,0">
                <SolidColor ux:Name="thumbFill" Color="#fafafaff" />
                <DropShadow Angle="90" Distance="0" Size="2" Spread="0.08" />
                <Timeline ux:Name="enabledTimeline">
                    <Change thumbFill.Color="#FF2D55FF" />
                    <Scale Target="yzCircle" Factor="0.7" />
                </Timeline>
            </Circle>
        </Panel>
    </ToggleControl>

    <Grid Rows="1,1,1,1,1,1,1,1,1*">

        <Rectangle CornerRadius="25" Height="70%" Width="90%" Alignment="Center" ClipToBounds="true">
            <DropShadow Angle="90" Distance="1" Size="5" Spread="0" />
            <Rectangle Opacity="0.8" CornerRadius="25" Layer="Background">
                <SolidColor ux:Name="secondBackgroundColor" Color="#fff" />
            </Rectangle>
            <StackPanel  Margin="10,0,0,0" Orientation="Horizontal" Alignment="CenterLeft">
                <Panel>
                    <Icon Height="30" Width="30" File="Assets/2.png" ux:Name="chat1Front" />
                </Panel>
                <Text FontSize="22" Margin="5,0,0,0" Alignment="Center" ux:Name="secondHeader">Option 1</Text>
            </StackPanel>            <Panel Margin="0,0,10,0">
                <MySwitch Alignment="CenterRight">
                    <WhileTrue>



                        <Change secondHeader.TextColor="#fff" Duration="0" Delay="0" />
                        <Change chat1Front.Color="#fff" Duration="0" Delay="0" Easing="QuadraticOut" />
                        <Change blueColor1.Color="#fafafa" Duration="0" Easing="QuadraticOut" Delay="0" />
                        <Change secondBackgroundColor.Color="#FF2D55" Duration="0.2" Delay="0" />
                    </WhileTrue>
                </MySwitch>
                <Circle>
                    <Translation ux:Name="blueCircleTranslation1" X="0.462" RelativeTo="ParentSize" />
                    <SolidColor ux:Name="blueColor1" Color="#fafafa"  />
                    <Scaling ux:Name="blueScaling1" Factor="0.75" />
                    <DropShadow Angle="90" Distance="0" Size="2" Spread="0.08" />
                </Circle>
            </Panel>
        </Rectangle>

        <Rectangle  Height="70%" Width="90%" Alignment="Center" ClipToBounds="true">
            <DropShadow Angle="90" Distance="1" Size="5" Spread="0" />
            <Rectangle Opacity="0.8" CornerRadius="25" Layer="Background">
                <SolidColor ux:Name="thirdBackgroundColor" Color="#fff" />
            </Rectangle>
            <StackPanel  Margin="10,0,0,0" Orientation="Horizontal" Alignment="CenterLeft">
                <Panel>
                    <Icon Height="30" Width="30" File="Assets/3.png" ux:Name="chat2Front" />
                </Panel>
                <Text FontSize="22" Margin="5,0,0,0" Alignment="Center" ux:Name="thirdHeader">Option 2</Text>
            </StackPanel>            <Panel Margin="0,0,10,0">
                <MySwitch Alignment="CenterRight">
                    <WhileTrue>
                        <Change thirdHeader.TextColor="#fff" Duration="0" Delay="0" />
                        <Change chat2Front.Color="#fff" Duration="0" Delay="0" Easing="QuadraticOut" />
                        <Change blueColor2.Color="#fafafa" Duration="0" Easing="QuadraticOut" Delay="0" />
                        <Change thirdBackgroundColor.Color="#11abfe" Duration="0.2" Delay="0" />
                    </WhileTrue>
                </MySwitch>
                <Circle>
                    <Translation ux:Name="blueCircleTranslation2" X="0.462" RelativeTo="ParentSize" />
                    <SolidColor ux:Name="blueColor2" Color="#fafafa"  />
                    <Scaling ux:Name="blueScaling2" Factor="0.75" />
                    <DropShadow Angle="90" Distance="0" Size="2" Spread="0.08" />
                </Circle>
            </Panel>
        </Rectangle>

        <Rectangle Height="70%" Width="90%" Alignment="Center" ClipToBounds="true">
            <DropShadow Angle="90" Distance="1" Size="5" Spread="0" />
            <Rectangle Opacity="0.8" CornerRadius="25 " Layer="Background">
                <SolidColor ux:Name="fourthBackgroundColor" Color="#fff" />
            </Rectangle>
            <StackPanel  Margin="10,0,0,0" Orientation="Horizontal" Alignment="CenterLeft">
                <Panel>
                    <Icon Height="30" Width="30" File="Assets/4.png" ux:Name="chat3Front" />
                </Panel>
                <Text FontSize="22" Margin="5,0,0,0" Alignment="Center" ux:Name="fourthHeader">Option 3</Text>
            </StackPanel>            <Rectangle CornerRadius="25" Margin="0,0,10,0">
                <MySwitch Alignment="CenterRight">
                    <WhileTrue>
                        <Change fourthHeader.TextColor="#fff" Duration="0" Delay="0" />
                        <Change chat3Front.Color="#fff" Duration="0" Delay="0" Easing="QuadraticOut" />
                        <Change blueColor4.Color="#fafafa" Duration="0" Easing="QuadraticOut" Delay="0" />
                        <Change fourthBackgroundColor.Color="#11abfe" Duration="0.2" Delay="0" />
                    </WhileTrue>
                </MySwitch>
                <Circle>
                    <Translation ux:Name="blueCircleTranslation3" X="0.462" RelativeTo="ParentSize" />
                    <SolidColor ux:Name="blueColor3" Color="#fafafa"  />
                    <Scaling ux:Name="blueScaling3" Factor="0.75" />
                    <DropShadow Angle="90" Distance="0" Size="2" Spread="0.08" />
                </Circle>
            </Rectangle>
        </Rectangle>
        <Rectangle CornerRadius="25"  Height="70%" Width="90%" Alignment="Center" ClipToBounds="true">
            <DropShadow Angle="90" Distance="1" Size="5" Spread="0" />
            <Rectangle Opacity="0.8" CornerRadius="25" Layer="Background">
                <SolidColor ux:Name="fifthBackgroundColor" Color="#fff" />
            </Rectangle>
            <StackPanel  Margin="10,0,0,0" Orientation="Horizontal" Alignment="CenterLeft">
                <Panel>
                    <Icon Height="30" Width="30" File="Assets/5.png" ux:Name="chat4Front" />
                </Panel>
                <Text FontSize="22" Margin="5,0,0,0" Alignment="Center" ux:Name="fifthHeader">Option 4</Text>
            </StackPanel>            <Panel Margin="0,0,10,0">
                <MySwitch Alignment="CenterRight">
                    <WhileTrue>
                        <Change fifthHeader.TextColor="#fff" Duration="0" Delay="0" />
                        <Change chat4Front.Color="#fff" Duration="0" Delay="0" Easing="QuadraticOut" />
                        <Change blueColor4.Color="#11abfe" Duration="0" Easing="QuadraticOut" Delay="0" />
                        <Change fifthBackgroundColor.Color="#11abfe" Duration="0" Delay="0" />
                        <Change blueCircleTranslation4.X="0" Duration="0" DurationBack="0" Delay="0" Easing="CubicInOut"/>
                    </WhileTrue>
                </MySwitch>
                <Circle>
                    <Translation ux:Name="blueCircleTranslation4" X="0" />
                    <SolidColor ux:Name="blueColor4" Color="#ffffffff" />
                    <Scaling ux:Name="blueScaling4" Factor="0" />
                    <DropShadow Angle="90" Distance="0" Size="2" Spread="0.08" />
                </Circle>
            </Panel>
        </Rectangle>

        <Rectangle  Height="70%" Width="90%" Alignment="Center" ClipToBounds="true">
            <DropShadow Angle="90" Distance="1" Size="5" Spread="0" />
            <Rectangle Opacity="0.8" CornerRadius="25" Layer="Background">
                <SolidColor ux:Name="sixthBackgroundColor" Color="#fff" />
            </Rectangle>
            <StackPanel  Margin="10,0,0,0" Orientation="Horizontal" Alignment="CenterLeft">
                <Panel>
                    <Icon Height="30" Width="30" File="Assets/6.png" ux:Name="chat5Front" />
                </Panel>
                <Text FontSize="21" Margin="5,0,0,0" Alignment="Center" ux:Name="sixthHeader">Option 5</Text>
            </StackPanel>            <Panel Margin="0,0,10,0">
                <MySwitch Alignment="CenterRight">
                    <WhileTrue>
                        <Change sixthHeader.TextColor="#fff" Duration="0" Delay="0" />
                        <Change chat5Front.Color="#fff" Duration="0" Delay="0" Easing="QuadraticOut" />
                        <Change blueColor5.Color="#11abfe" Duration="0" Easing="QuadraticOut" Delay="0" />
                        <Change sixthBackgroundColor.Color="#11abfe" Duration="0" Delay="0" />
                        <Change blueCircleTranslation5.X="0" Duration="0" DurationBack="0" Delay="0" Easing="CubicInOut"/>
                    </WhileTrue>
                </MySwitch>
                <Circle>
                    <Translation ux:Name="blueCircleTranslation5" X="0" />
                    <SolidColor ux:Name="blueColor5" Color="#ffffffff" />
                    <Scaling ux:Name="blueScaling5" Factor="0" />
                    <DropShadow Angle="90" Distance="0" Size="2" Spread="0.08" />
                </Circle>
            </Panel>
        </Rectangle>
        <Rectangle CornerRadius="25"  Height="70%" Width="90%" Alignment="Center" ClipToBounds="true">
            <DropShadow Angle="90" Distance="1" Size="5" Spread="0" />
            <Rectangle Opacity="0.8" CornerRadius="25" Layer="Background">
                <SolidColor ux:Name="seventhBackgroundColor" Color="#fff" />
            </Rectangle>
            <StackPanel  Margin="10,0,0,0" Orientation="Horizontal" Alignment="CenterLeft">
                <Panel>
                    <Icon Height="30" Width="30" File="Assets/7.png" ux:Name="chat6Front" />
                </Panel>
                <Text FontSize="22" Margin="5,0,0,0" Alignment="Center" ux:Name="seventhHeader">Option 6</Text>
            </StackPanel>            <Panel Margin="0,0,10,0">
                <MySwitch Alignment="CenterRight">
                    <WhileTrue>
                        <Change blueColor6.Color="#fafafa" Duration="0" Easing="QuadraticOut" Delay="0" />
                    </WhileTrue>
                </MySwitch>
                <Circle>
                    <Translation ux:Name="blueCircleTranslation6" X="0.462" RelativeTo="ParentSize" />
                    <SolidColor ux:Name="blueColor6" Color="#fafafa"  />
                    <Scaling ux:Name="blueScaling6" Factor="0.75" />
                    <DropShadow Angle="90" Distance="0" Size="2" Spread="0.08" />
                </Circle>
            </Panel>
        </Rectangle>

        <Rectangle  Height="70%" Width="90%" Alignment="Center" ClipToBounds="true">
            <DropShadow Angle="90" Distance="1" Size="5" Spread="0" />
            <Rectangle Opacity="0.8" CornerRadius="25" Layer="Background">
                <SolidColor ux:Name="eighthBackgroundColor" Color="#fff" />

            </Rectangle>
            <StackPanel  Margin="10,0,0,0" Orientation="Horizontal" Alignment="CenterLeft">
                <Panel>
                    <Icon Height="30" Width="30" File="Assets/8.png" ux:Name="chat7Front" />
                </Panel>
                <Text FontSize="22" Margin="5,0,0,0" Alignment="Center" ux:Name="eighthHeader">Option 7</Text>
            </StackPanel>            <Panel Margin="0,0,10,0">
                <MySwitch Alignment="CenterRight">
                    <WhileTrue>
                        <Change blueColor7.Color="#fafafa" Duration="0" Easing="QuadraticOut" Delay="0" />
                    </WhileTrue>
                </MySwitch>
                <Circle>
                    <Translation ux:Name="blueCircleTranslation7" X="0.462" RelativeTo="ParentSize" />
                    <SolidColor ux:Name="blueColor7" Color="#fafafa"  />
                    <Scaling ux:Name="blueScaling7" Factor="0.75" />
                    <DropShadow Angle="90" Distance="0" Size="2" Spread="0.08" />
                </Circle>
            </Panel>
        </Rectangle> 




    </Grid>
</DockPanel>



</App>

If anyone could help, it would be really awesome

Gratefully

Blade

P.S.: Tables inside post doesnt display properly

2

Hi!

To make a bigger bitbox for something, wrap it in a <Panel HitTestMode="LocalBoundsAndChildren"> with some Margin and put the triggers on the panel instead of the contents.

In the current version (0.23) you have to write JavaScript logic to implement the radio button behavior. Bind your radio buttons to observables and write JS code that makes sure only one of them are active.

We are working on a new Selection API that will make cases like this much easier in the future, so stay tuned.

3

Anders Lassen wrote:

Hi!

To make a bigger bitbox for something, wrap it in a <Panel HitTestMode="LocalBoundsAndChildren"> with some Margin and put the triggers on the panel instead of the contents.

In the current version (0.23) you have to write JavaScript logic to implement the radio button behavior. Bind your radio buttons to observables and write JS code that makes sure only one of them are active.

We are working on a new Selection API that will make cases like this much easier in the future, so stay tuned.

Thank you soo much for your answer Anders Lassen!!! Hitbox SOLVED!!! SOOOO NICE

Im looking forward to see you nice new api :)))

Do you have got an ETA for that release? (I hate to ask that, because most devs hates users asking for eta) Considering that im such a noob, it would take a long time for me to solve that checkbox->radio problem and if your release is coming soon, I would rather solve one of the other 100 problems i got ^^

4

I think I saw this working internally the other day, but I can’t give any ETA. We never know what ends up in a release after testing etc. It’s just so many variables.