How can I change the Toggle Button in WPF Expander to Radio Button so that i can only select one expander in a group of expanders?

Question

In my side Menu i have some expanders like five of them, i wanted my user to only select one expander at a time, then i thought of using expanders based on radio buttons, in the default style of wpf expanders i found this xaml below where i thought it is the place to achieve my goal when i change the toggle button in the Control Template to radio button but with no idea, Can Somebody help, or Correct me if i am wrong

Here is the an extraction of XAML from the default expander style

        <Style x:Key="ExpanderStyle" TargetType="{x:Type Expander}">             <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>             <Setter Property="Background" Value="Transparent"/>             <Setter Property="HorizontalContentAlignment" Value="Stretch"/>             <Setter Property="VerticalContentAlignment" Value="Stretch"/>             <Setter Property="BorderBrush" Value="Transparent"/>             <Setter Property="BorderThickness" Value="1"/>             <Setter Property="Template">                 <Setter.Value>                     <ControlTemplate TargetType="{x:Type Expander}">                         <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3" SnapsToDevicePixels="true">                             <DockPanel>                                 <ToggleButton x:Name="HeaderSite" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}" DockPanel.Dock="Top" FontStretch="{TemplateBinding FontStretch}" Foreground="{TemplateBinding Foreground}" FocusVisualStyle="{StaticResource ExpanderHeaderFocusVisual}" FontStyle="{TemplateBinding FontStyle}" FontFamily="{TemplateBinding FontFamily}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" Margin="1" MinWidth="0" MinHeight="0" Padding="{TemplateBinding Padding}" Style="{StaticResource ExpanderDownHeaderStyle}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>                                 <ContentPresenter x:Name="ExpandSite" DockPanel.Dock="Bottom" Focusable="false" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Visibility="Collapsed"/>                             </DockPanel>                         </Border>                         <ControlTemplate.Triggers>                             <Trigger Property="IsExpanded" Value="true">                                 <Setter Property="Visibility" TargetName="ExpandSite" Value="Visible"/>                             </Trigger>                             <Trigger Property="ExpandDirection" Value="Right">                                 <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Right"/>                                 <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Left"/>                                 <Setter Property="Style" TargetName="HeaderSite" Value="{StaticResource ExpanderRightHeaderStyle}"/>                             </Trigger>                             <Trigger Property="ExpandDirection" Value="Up">                                 <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Top"/>                                 <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Bottom"/>                                 <Setter Property="Style" TargetName="HeaderSite" Value="{StaticResource ExpanderUpHeaderStyle}"/>                             </Trigger>                             <Trigger Property="ExpandDirection" Value="Left">                                 <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Left"/>                                 <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Right"/>                                 <Setter Property="Style" TargetName="HeaderSite" Value="{StaticResource ExpanderLeftHeaderStyle}"/>                             </Trigger>                             <Trigger Property="IsEnabled" Value="false">                                 <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>                             </Trigger>                         </ControlTemplate.Triggers>                     </ControlTemplate>                 </Setter.Value>             </Setter>         </Style>
        ```

Answer 1

Hi,@Mesh Ka. Welcome Microsoft Q&A.

You could use a RadioButton instead of a ToggleButton, and its IsChecked property is bound to the Expander's IsExpanded property. This way, when you check a radio button, the corresponding expander will expand, while the other expanders will automatically collapse, since the RadioButton only selects one option in the same group.

You could update your style as follows.

  <Style x:Key="ExpanderDownHeaderStyle" TargetType="{x:Type RadioButton}">
                <Setter Property="Template">
                    <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RadioButton}">
                            <Border Padding="{TemplateBinding Padding}">
                                <Grid Background="Transparent" SnapsToDevicePixels="False">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="19"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <Ellipse x:Name="circle" Margin="200 0 0 0" Grid.Column="2" Fill="{StaticResource Expander.Static.Circle.Fill}" HorizontalAlignment="Center" Height="19" Stroke="{StaticResource Expander.Static.Circle.Stroke}" VerticalAlignment="Center" Width="19"/>
                                    <Path x:Name="arrow" Margin="200 0 0 0" Grid.Column="2" Data="M 1,1.5 L 4.5,5 L 8,1.5" HorizontalAlignment="Center" Stroke="{StaticResource Expander.Static.Arrow.Stroke}" SnapsToDevicePixels="false" StrokeThickness="2" VerticalAlignment="Center"/>
                                    <ContentPresenter Grid.Column="1" HorizontalAlignment="Left" Margin="4,0,0,0" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Center"/>
                                </Grid>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsChecked" Value="true">
                                    <Setter Property="Data" TargetName="arrow" Value="M 1,4.5  L 4.5,1  L 8,4.5"/>
                                </Trigger>
                                <Trigger Property="IsMouseOver" Value="true">
                                    <Setter Property="Stroke" TargetName="circle" Value="{StaticResource Expander.MouseOver.Circle.Stroke}"/>
                                    <Setter Property="Fill" TargetName="circle" Value="{StaticResource Expander.MouseOver.Circle.Fill}"/>
                                    <Setter Property="Stroke" TargetName="arrow" Value="{StaticResource Expander.MouseOver.Arrow.Stroke}"/>
                                </Trigger>
                                <Trigger Property="IsPressed" Value="true">
                                    <Setter Property="Stroke" TargetName="circle" Value="{StaticResource Expander.Pressed.Circle.Stroke}"/>
                                    <Setter Property="StrokeThickness" TargetName="circle" Value="1.5"/>
                                    <Setter Property="Fill" TargetName="circle" Value="{StaticResource Expander.Pressed.Circle.Fill}"/>
                                    <Setter Property="Stroke" TargetName="arrow" Value="{StaticResource Expander.Pressed.Arrow.Stroke}"/>
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="false">
                                    <Setter Property="Stroke" TargetName="circle" Value="{StaticResource Expander.Disabled.Circle.Stroke}"/>
                                    <Setter Property="Fill" TargetName="circle" Value="{StaticResource Expander.Disabled.Circle.Fill}"/>
                                    <Setter Property="Stroke" TargetName="arrow" Value="{StaticResource Expander.Disabled.Arrow.Stroke}"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

<Style x:Key="ExpanderStyle" TargetType="{x:Type Expander}">
               ...
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Expander}">
                            <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3" SnapsToDevicePixels="true">
                                <DockPanel>
                                <RadioButton x:Name="HeaderSite" GroupName="ExpanderGroup" ContentTemplate="{TemplateBinding HeaderTemplate}" 
                                                  Content="{TemplateBinding Header}" ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}" DockPanel.Dock="Top" FontStretch="{TemplateBinding FontStretch}" 
                                                  Foreground="{TemplateBinding Foreground}" FocusVisualStyle="{StaticResource ExpanderHeaderFocusVisual}"
                                                  FontStyle="{TemplateBinding FontStyle}" FontFamily="{TemplateBinding FontFamily}" 
                                                  FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                  IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" Margin="1"                                                 
                                                  MinWidth="0" MinHeight="0" Padding="{TemplateBinding Padding}" Style="{StaticResource ExpanderDownHeaderStyle}" 
                                                  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                              
                                <ContentPresenter x:Name="ExpandSite" DockPanel.Dock="Bottom" Focusable="false" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"
                                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Visibility="Collapsed"/>
                                </DockPanel>
                            </Border>
                           ...
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

The result:

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.