es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Agrupación de botones de radio.

06 Aug, 2023 Programación

Quiero crear un grupo de botones de radio como se muestra en la salida esperada (agregada en el enlace). He agregado una foto a continuación. Por favor, ayúdame a corregir mi error.

<Page.Resources>
     <Style x:Key="GroupToggleStyle" TargetType="RadioButton" BasedOn="{StaticResource {x:Type ToggleButton}}">
    <Setter Property="Foreground" Value="Blue"/>
    <Style.Triggers>
        <DataTrigger Binding="{Binding IsChecked, RelativeSource={RelativeSource Self}}" 
                 Value="True">
            <DataTrigger.Setters>
                <Setter Property="Foreground" Value="Red"/>
            </DataTrigger.Setters>
        </DataTrigger>
    </Style.Triggers>
</Style>
</Page.Resources>

    <RadioButton GroupName="LanguageGroup" Command="{Binding LanguageChangeCommand}" 
         CommandParameter="English" Content="English" Width="80"  
         Style="{StaticResource GroupToggleStyle}" Margin="8,15,162,21" FontSize="30" Grid.Column="3" Grid.Row="3" BorderBrush="#FF860707"/>
    <RadioButton GroupName="LanguageGroup" Command="{Binding LanguageChangeCommand}" 
         CommandParameter="Sinhala" Content="Sinhala" Width="80" 
         Style="{StaticResource GroupToggleStyle}" Margin="78,19,77,21" FontSize="30" Grid.Column="3" Grid.Row="3"/>
    <RadioButton GroupName="LanguageGroup" Command="{Binding LanguageChangeCommand}" 
         CommandParameter="Tamil" Content="தமிழ்" Width="80" 
         Style="{StaticResource GroupToggleStyle}" Margin="165,10,10,21" FontSize="30" Grid.Column="3" Grid.Row="3"/>[enter image description here][1]

esta es la salida esperada
pero mi salida es esta

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema con el código actual es que los botones de radio no están alineados correctamente. Para solucionar esto, puedes agregar un Grid para contener los botones de radio y establecer las ColumnDefinitions del Grid para espaciar uniformemente los botones. Aquí tienes un fragmento de código actualizado:

    <page.resources>
    <style x:key="GroupToggleStyle" targettype="RadioButton" basedon="{StaticResource {x:Type ToggleButton}}">
        <Setter Property="Foreground" Value="Blue"/>
        <Style.Triggers>
            <DataTrigger Binding="{Binding IsChecked, RelativeSource={RelativeSource Self}}" 
                         Value="True">
                <DataTrigger.Setters>
                    <Setter Property="Foreground" Value="Red"/>
                </DataTrigger.Setters>
            </DataTrigger>
        </Style.Triggers>
    </style>
</page.resources>

<grid>
    <grid.columndefinitions>
        <columndefinition width="*"></columndefinition>
        <columndefinition width="*"></columndefinition>
        <columndefinition width="*"></columndefinition>
    </grid.columndefinitions>

    <radiobutton groupname="LanguageGroup" command="{Binding LanguageChangeCommand}" commandparameter="English" content="English" width="80" style="{StaticResource GroupToggleStyle}" margin="8,15,0,0" fontsize="30" borderbrush="#FF860707" grid.column="0"></radiobutton>
    <radiobutton groupname="LanguageGroup" command="{Binding LanguageChangeCommand}" commandparameter="Sinhala" content="Sinhala" width="80" style="{StaticResource GroupToggleStyle}" margin="0,19,0,0" fontsize="30" grid.column="1"></radiobutton>
    <radiobutton groupname="LanguageGroup" command="{Binding LanguageChangeCommand}" commandparameter="Tamil" content="தமிழ்" width="80" style="{StaticResource GroupToggleStyle}" margin="0,10,10,0" fontsize="30" grid.column="2"></radiobutton>
</grid>

    En este código actualizado, hemos agregado un Grid y establecido sus ColumnDefinitions para espaciar uniformemente los botones de radio. También hemos ajustado los valores de Margen para cada botón de radio para alinearlos correctamente dentro del Grid. Esto debería producir el resultado esperado como se muestra en el enlace que proporcionaste.

Comments are closed.