Search code examples
c#wpfradio-buttondatatemplategroupname

Radio Button Groups in DataTemplate with multiple Items


I made a DataTemplate that will auto generate some questions (load from my dataview). Each question has four radio buttons, and I group all four buttons on GroupName.

My problem is - if I have 2 or 3 questions, anytime I check a radio button on one question, the radio button on the question above will be unchecked. Anyone have solution for this?

Here is my XAML:

<ItemsControl Name="itmCntrl" >
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Horizontal" ></WrapPanel>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Name="stk">
                <StackPanel Margin="5,2,0,0">
                    <WrapPanel Margin="10,10,10,5" Height="Auto">
                        <TextBlock TextWrapping="Wrap" x:Name="tbC"  FontSize="18" FontFamily="Times New Roman" FontWeight="Bold" HorizontalAlignment="Left" VerticalAlignment="Center" Foreground="Black" Text="Question : "/>
                        <TextBlock TextWrapping="Wrap" Text="{Binding NOIDUNG}" FontSize="18" FontFamily="Times New Roman" FontWeight="Bold" HorizontalAlignment="Left" VerticalAlignment="Center" Foreground="Black"/>
                    </WrapPanel>
                    <WrapPanel Margin="10,5,10,5" Height="Auto">
                        <RadioButton x:Name="rdoA" GroupName="DA"/>
                        <TextBlock TextWrapping="Wrap" Name="A" Text="{Binding A}" FontSize="15" FontFamily="Times New Roman" FontWeight="Bold" VerticalAlignment="Center" Foreground="Black" Margin="3,0,0,0"/>
                        <RadioButton x:Name="rdoB" GroupName="DA" Margin="10,0,0,0"/>
                        <TextBlock TextWrapping="Wrap" Name="B" Text="{Binding B}" FontSize="15" FontFamily="Times New Roman" FontWeight="Bold" HorizontalAlignment="Right" VerticalAlignment="Center" Foreground="Black" Margin="3,0,0,0"/>
                    </WrapPanel>
                    <WrapPanel Margin="10,5,10,5" Height="Auto">
                        <RadioButton x:Name="rdoC" GroupName="DA"/>
                        <TextBlock TextWrapping="Wrap" Name="C" Text="{Binding C}" FontSize="15" FontFamily="Times New Roman" FontWeight="Bold" HorizontalAlignment="Left" VerticalAlignment="Center" Foreground="Black" Margin="3,0,0,0"/>
                        <RadioButton x:Name="rdoD" GroupName="DA" Margin="10,0,0,0"/>
                        <TextBlock TextWrapping="Wrap" Name="D" Text="{Binding D}" FontSize="15" FontFamily="Times New Roman" FontWeight="Bold" HorizontalAlignment="Right" VerticalAlignment="Center" Foreground="Black" Margin="3,0,0,0"/>
                    </WrapPanel>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Solution

  • The RadioButton.GroupName Property is a DependencyProperty, so that means that you can data bind unique values for each group:

    <DataTemplate>
        <StackPanel Name="stk">
            <StackPanel Margin="5,2,0,0">
                <WrapPanel Margin="10,10,10,5" Height="Auto">
                    <TextBlock TextWrapping="Wrap" x:Name="tbC"  FontSize="18" FontFamily="Times New Roman" FontWeight="Bold" HorizontalAlignment="Left" VerticalAlignment="Center" Foreground="Black" Text="Question : "/>
                    <TextBlock TextWrapping="Wrap" Text="{Binding NOIDUNG}" FontSize="18" FontFamily="Times New Roman" FontWeight="Bold" HorizontalAlignment="Left" VerticalAlignment="Center" Foreground="Black"/>
                </WrapPanel>
                <WrapPanel Margin="10,5,10,5" Height="Auto">
                    <RadioButton x:Name="rdoA" GroupName="{Binding GroupName}"/>
                    <TextBlock TextWrapping="Wrap" Name="A" Text="{Binding A}" FontSize="15" FontFamily="Times New Roman" FontWeight="Bold" VerticalAlignment="Center" Foreground="Black" Margin="3,0,0,0"/>
                    <RadioButton x:Name="rdoB" GroupName="{Binding GroupName}" Margin="10,0,0,0"/>
                    <TextBlock TextWrapping="Wrap" Name="B" Text="{Binding B}" FontSize="15" FontFamily="Times New Roman" FontWeight="Bold" HorizontalAlignment="Right" VerticalAlignment="Center" Foreground="Black" Margin="3,0,0,0"/>
                </WrapPanel>
                <WrapPanel Margin="10,5,10,5" Height="Auto">
                    <RadioButton x:Name="rdoC" GroupName="{Binding GroupName}"/>
                    <TextBlock TextWrapping="Wrap" Name="C" Text="{Binding C}" FontSize="15" FontFamily="Times New Roman" FontWeight="Bold" HorizontalAlignment="Left" VerticalAlignment="Center" Foreground="Black" Margin="3,0,0,0"/>
                    <RadioButton x:Name="rdoD" GroupName="{Binding GroupName}" Margin="10,0,0,0"/>
                    <TextBlock TextWrapping="Wrap" Name="D" Text="{Binding D}" FontSize="15" FontFamily="Times New Roman" FontWeight="Bold" HorizontalAlignment="Right" VerticalAlignment="Center" Foreground="Black" Margin="3,0,0,0"/>
                </WrapPanel>
            </StackPanel>
        </StackPanel>
    </DataTemplate>
    

    To make this example work, you would just need to add a GroupName property into the view model that you are data binding to in the DataTemplate, ie. the object that has the A, B, C and D properties in.