How to add button group instead radio button-CodePudding

I want to ad button group instead radio button.. there is three buttons. all three buttons are same color(blue). when user click on 1st button it will change that button color as red. But when user click on second button, first button must turn into blue color and clicked button(2nd button) must turn in to red. In my code that's not change. Help me

    <Button Background="#0D47A1" Command="{Binding LanguageChangeCommand}" CommandParameter="Sinhala" Content="සිංහල" Grid.Column="3" HorizontalAlignment="Left" Margin="0,10,0,0" Grid.Row="3" FontSize="20" VerticalAlignment="Top" Foreground="White" Height="37" Width="81">
        <Button.Style>
            <Style TargetType="Button">
                <Style.Triggers>
                    <Trigger Property="IsPressed" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" To="#2E8B57"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
        <Button.Resources>
            <Style TargetType="Border">
                <Setter Property="CornerRadius" Value="10"/>
            </Style>
        </Button.Resources>
    </Button>
    <Button Command="{Binding LanguageChangeCommand}" Background="#0D47A1" CommandParameter="English" Content="English" Grid.Column="3" HorizontalAlignment="Left" Margin="110,15,0,0" Grid.Row="3" FontSize="20" VerticalAlignment="Top">
        <Button.Style>
            <Style TargetType="Button">
                <Style.Triggers>
                    <Trigger Property="IsPressed" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" To="#2E8B57"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
        <Button.Resources>
            <Style TargetType="Border">
                <Setter Property="CornerRadius" Value="10"/>
            </Style>
        </Button.Resources>
    </Button>
    <Button Command="{Binding LanguageChangeCommand}" Background="#0D47A1" CommandParameter="Tamil" Content="தமிழ்" Grid.Column="3" HorizontalAlignment="Left" Margin="215,15,0,0" Grid.Row="3" FontSize="20" VerticalAlignment="Top" Foreground="#DDFDF9F9">
        <Button.Style>
            <Style TargetType="Button">
                <Style.Triggers>
                    <Trigger Property="IsPressed" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" To="#2E8B57"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
        <Button.Resources>
            <Style TargetType="Border">
                <Setter Property="CornerRadius" Value="10"/>
            </Style>
        </Button.Resources>
    </Button>

CodePudding user response：

You can freely change the appearance of RadioButton so that it looks like a plain button but works as a RadioButton. In fact, RadioButton inherits from ToggleButton.

Looking at your code, the following Style will make RadioButton look like your Button.

<Style x:Key="RadioButtonStyle" TargetType="{x:Type RadioButton}" BasedOn="{StaticResource {x:Type RadioButton}}">
    <Setter Property="Width" Value="80"/>
    <Setter Property="Height" Value="30"/>
    <Setter Property="Background" Value="#0D47A1"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="FontSize" Value="20"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type RadioButton}">
                <Border CornerRadius="10"
                        Background="{TemplateBinding Background}">
                    <ContentPresenter Margin="{TemplateBinding Padding}"
                                      HorizontalAlignment="Center"
                                      VerticalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsChecked" Value="True">
            <Setter Property="Background" Value="#2E8B57"/>
        </Trigger>
    </Style.Triggers>
</Style>

CodePudding user response：

Button Group? Another idea is ListBox with styled ListBoxItem.

<ListBox VerticalAlignment="Top">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Border x:Name="border"
                                Padding="3" Background="SkyBlue"
                                BorderBrush="DeepSkyBlue" BorderThickness="1">
                            <ContentPresenter />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="border" Property="BorderBrush" Value="OrangeRed" />
                                <Setter TargetName="border" Property="Background" Value="HotPink" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListBox.ItemContainerStyle>
    <ListBoxItem Content="1" />
    <ListBoxItem Content="2" IsSelected="True" />
    <ListBoxItem Content="3" />
    <ListBoxItem Content="4" />
</ListBox>

The benefit of ListBox is that you can use binding and easily to get the value of selected "button" by the user.