How to Create an Expander Control that Behaves like a Radio Button Based On Toggle Button in WPF

Question

How to Create an Expander Control that Behaves like a Radio Button Based On Toggle Button in WPF

Mesh Ka 345

I have a side menu with Radio Buttons which are based on Toggle Buttons and within my side menu i also have expanders, everything else works smoothly but what i was unable to do is to make the expanders behave like those buttons so that my user only selects one thing at a time in the side menu, Can Somebody help or correct me if i am wrong please

Here is my XAML code and there is no any code behind my Project.

<Window x:Class="MyWPFApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:fa="http://schemas.awesome.incremented/wpf/xaml/fontawesome.sharp"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" WindowStartupLocation="CenterScreen" Background="#7f7cf1">

    <Window.Resources>
 
        <!--MenuRadioButtons Style-->
        <Style x:Key="menuRadioButtonStyle" BasedOn="{StaticResource {x:Type ToggleButton}}" TargetType="RadioButton">
            <Setter Property="Foreground" Value="#707db2"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="Margin" Value="5 0 0 0"/>
            <Setter Property="Height" Value="45"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="Tag" Value="#6673b7"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RadioButton">
                        <Border Background="{TemplateBinding Background}" BorderThickness="4 0 0 0" BorderBrush="Transparent">
                            <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Foreground" Value="#bccaf1"/>
                    <Setter Property="Foreground" Value="#bccaf1"/>
                </Trigger>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Foreground" Value="#bccaf1"/>
                    <Setter Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="0, 0.5" EndPoint="1, 0.5">
                                <GradientStop Color="#31407b" Offset="0"/>
                                <GradientStop Color="#495385" Offset="3"/>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="RadioButton">
                                <Border Background="{TemplateBinding Background}" BorderThickness="4 0 0 0" BorderBrush="#a5a1f5">
                                    <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>

            </Style.Triggers>
        </Style>

        <!--MenuRadioButtonIcons Style-->
        <Style x:Key="menuRadioButtonIconStyle" TargetType="fa:IconImage">
            <Setter Property="Width" Value="23"/>
            <Setter Property="Height" Value="23"/>
            <Setter Property="Margin" Value="5 0 0 0"/>
            <Setter Property="Foreground" Value="{Binding Path=Tag, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type RadioButton}}}"/>
        </Style>

        <!--MenuRadioButtonTextBlock Style-->
        <Style x:Key="menuRadioButtonTextBlockStyle" TargetType="TextBlock">
            <Setter Property="FontSize" Value="13"/>
            <Setter Property="Margin" Value="10 0 0 0"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Foreground" Value="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type RadioButton}}}"/>
        </Style>

        
        
        <!--MenuButtons Style-->
        <Style x:Key="menuButtonStyle" TargetType="Button">
            <Setter Property="Foreground" Value="#707db2"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="Margin" Value="5 0 0 0"/>
            <Setter Property="Height" Value="45"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="Tag" Value="#6673b7"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Background="{TemplateBinding Background}" BorderThickness="4 0 0 0" BorderBrush="Transparent">
                            <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Foreground" Value="#bccaf1"/>
                    <Setter Property="Foreground" Value="#bccaf1"/>
                    <Setter Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="0, 0.5" EndPoint="1, 0.5">
                                <GradientStop Color="#31407b" Offset="0"/>
                                <GradientStop Color="#495385" Offset="3"/>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="Button">
                                <Border Background="{TemplateBinding Background}" BorderThickness="4 0 0 0" BorderBrush="#a5a1f5">
                                    <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>

        <!--MenuButtonIcons Style-->
        <Style x:Key="menuButtonIconStyle" TargetType="fa:IconImage">
            <Setter Property="Width" Value="23"/>
            <Setter Property="Height" Value="23"/>
            <Setter Property="Margin" Value="5 0 0 0"/>
            <Setter Property="Foreground" Value="{Binding Path=Tag, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}"/>
        </Style>
        
        <!--MenuButtonTextBlock Style-->
        <Style x:Key="menuButtonTextBlockStyle" TargetType="TextBlock">
            <Setter Property="FontSize" Value="13"/>
            <Setter Property="Margin" Value="10 0 0 0"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Foreground" Value="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}"/>
        </Style>
        
        <!--ExpanderStyle1-->
        <Style x:Key="ExpanderHeaderFocusVisual1">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Border>
                            <Rectangle Margin="0" StrokeDashArray="1 2" Stroke="Black" SnapsToDevicePixels="true" StrokeThickness="1"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="ExpanderDownHeaderStyle1" TargetType="{x:Type ToggleButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Border Padding="{TemplateBinding Padding}">
                            <RadioButton Style="{StaticResource menuRadioButtonStyle}" HorizontalContentAlignment="Left">
                                <Grid Background="Transparent" SnapsToDevicePixels="False" Width="{Binding Path=Width, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type RadioButton}}}">
                                    <Ellipse x:Name="circle" Margin="200 0 0 0" Grid.Column="2" Fill="Transparent" HorizontalAlignment="Center" Height="19" Stroke="Transparent" 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="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type RadioButton}}}" SnapsToDevicePixels="false" StrokeThickness="2" VerticalAlignment="Center"/>
                                    <ContentPresenter Grid.Column="1" HorizontalAlignment="Left" Margin="4,0,0,0" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Center"/>
                                </Grid>
                            </RadioButton>
                        </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="arrow" Value="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type RadioButton}}}"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter Property="Stroke" TargetName="arrow" Value="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type RadioButton}}}"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Stroke" TargetName="arrow" Value="{Binding Path=Foreground, ElementName=BtnHome}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="ExpanderStyle1" 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 ExpanderHeaderFocusVisual1}" 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="-0.8 0 0 0" MinWidth="0" MinHeight="0" Padding="{TemplateBinding Padding}" Style="{StaticResource ExpanderDownHeaderStyle1}" 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="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        
    </Window.Resources>
    
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="250"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
         
        <!--Left Menu-->
        <Border x:Name="RightMenuBorder" CornerRadius="10 0 0 10" Grid.Column="0">
            <Border.Background>
                <LinearGradientBrush StartPoint="0, 0.5" EndPoint="1, 0.5">
                    <GradientStop Color="#27396b" Offset="0"/>
                    <GradientStop Color="#223266" Offset="2"/>
                </LinearGradientBrush>
            </Border.Background>
            <StackPanel>
                <!--Drop Down Side Menu-->

                <RadioButton Style="{StaticResource menuRadioButtonStyle}">
                    <StackPanel Orientation="Horizontal">
                        <fa:IconImage Icon="Home" Style="{StaticResource menuRadioButtonIconStyle}"/>
                        <TextBlock Text="Home" Style="{StaticResource menuRadioButtonTextBlockStyle}"/>
                    </StackPanel>
                </RadioButton>
                <RadioButton Style="{StaticResource menuRadioButtonStyle}">
                    <StackPanel Orientation="Horizontal">
                        <fa:IconImage Icon="Home" Style="{StaticResource menuRadioButtonIconStyle}"/>
                        <TextBlock Text="Home" Style="{StaticResource menuRadioButtonTextBlockStyle}"/>
                    </StackPanel>
                </RadioButton>
                <RadioButton Style="{StaticResource menuRadioButtonStyle}">
                    <StackPanel Orientation="Horizontal">
                        <fa:IconImage Icon="Home" Style="{StaticResource menuRadioButtonIconStyle}"/>
                        <TextBlock Text="Home" Style="{StaticResource menuRadioButtonTextBlockStyle}"/>
                    </StackPanel>
                </RadioButton>
                <Expander Style="{DynamicResource ExpanderStyle1}" Background="Transparent">
                    <Expander.Header>
                        <StackPanel Orientation="Horizontal" Margin="-5 0 0 0">
                            <fa:IconImage Icon="DollarSign" Style="{StaticResource menuRadioButtonIconStyle}"/>
                            <TextBlock Text="Sales" Style="{StaticResource menuRadioButtonTextBlockStyle}"/>
                        </StackPanel>
                    </Expander.Header>
                    <StackPanel>
                        <Button Style="{StaticResource menuButtonStyle}">
                            <TextBlock Text="New Invoice" Style="{StaticResource menuButtonTextBlockStyle}" Margin="62 0 0 0"/>
                        </Button>
                        <Button Style="{StaticResource menuButtonStyle}">
                            <TextBlock Text="Manage Invoices" Style="{StaticResource menuButtonTextBlockStyle}" Margin="62 0 0 0"/>
                        </Button>
                    </StackPanel>
                </Expander>
                <Expander Style="{DynamicResource ExpanderStyle1}" Background="Transparent">
                    <Expander.Header>
                        <StackPanel Orientation="Horizontal" Margin="-5 0 0 0">
                            <fa:IconImage Icon="DollarSign" Style="{StaticResource menuRadioButtonIconStyle}"/>
                            <TextBlock Text="Sales" Style="{StaticResource menuRadioButtonTextBlockStyle}"/>
                        </StackPanel>
                    </Expander.Header>
                    <StackPanel>
                        <Button Style="{StaticResource menuButtonStyle}">
                            <TextBlock Text="New Invoice" Style="{StaticResource menuButtonTextBlockStyle}" Margin="62 0 0 0"/>
                        </Button>
                        <Button Style="{StaticResource menuButtonStyle}">
                            <TextBlock Text="Manage Invoices" Style="{StaticResource menuButtonTextBlockStyle}" Margin="62 0 0 0"/>
                        </Button>
                    </StackPanel>
                </Expander>
                <Expander Style="{DynamicResource ExpanderStyle1}" Background="Transparent">
                    <Expander.Header>
                        <StackPanel Orientation="Horizontal" Margin="-5 0 0 0">
                            <fa:IconImage Icon="DollarSign" Style="{StaticResource menuRadioButtonIconStyle}"/>
                            <TextBlock Text="Sales" Style="{StaticResource menuRadioButtonTextBlockStyle}"/>
                        </StackPanel>
                    </Expander.Header>
                    <StackPanel>
                        <Button Style="{StaticResource menuButtonStyle}">
                            <TextBlock Text="New Invoice" Style="{StaticResource menuButtonTextBlockStyle}" Margin="62 0 0 0"/>
                        </Button>
                        <Button Style="{StaticResource menuButtonStyle}">
                            <TextBlock Text="Manage Invoices" Style="{StaticResource menuButtonTextBlockStyle}" Margin="62 0 0 0"/>
                        </Button>
                    </StackPanel>
                </Expander>
            </StackPanel>
        </Border>
        
    </Grid>
    
</Window>

Accepted answer

0 additional answers

Your answer

Answer 1

Hi,@Mesh Ka. Welcome Microsoft Q&A. You could update your style as follows.

<Style x:Key="menuRadioButtonStyle" BasedOn="{StaticResource {x:Type ToggleButton}}" TargetType="{x:Type RadioButton}">
            <Setter Property="Foreground" Value="#707db2"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="Margin" Value="5 0 0 0"/>
            <Setter Property="Height" Value="45"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="Tag" Value="#6673b7"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RadioButton">
                        <Border Background="{TemplateBinding Background}" BorderThickness="4 0 0 0" BorderBrush="Transparent">
                            <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Foreground" Value="#bccaf1"/>
                    <Setter Property="Foreground" Value="#bccaf1"/>
                </Trigger>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Foreground" Value="#bccaf1"/>
                    <Setter Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="0, 0.5" EndPoint="1, 0.5">
                                <GradientStop Color="#31407b" Offset="0"/>
                                <GradientStop Color="#495385" Offset="3"/>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="RadioButton">
                                <Border Background="{TemplateBinding Background}" BorderThickness="4 0 0 0" BorderBrush="#a5a1f5">
                                    <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>

            </Style.Triggers>
        </Style>
        <Style x:Key="ExpanderDownHeaderStyle1" TargetType="{x:Type ToggleButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Border Padding="{TemplateBinding Padding}">
                            <RadioButton Style="{StaticResource menuRadioButtonStyle}" GroupName="ExpanderGroup1"  HorizontalContentAlignment="Left">
                                <Grid Background="Transparent" SnapsToDevicePixels="False" Width="{Binding Path=Width, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type RadioButton}}}">
                                    <Ellipse x:Name="circle" Margin="200 0 0 0" Grid.Column="2" Fill="Transparent" HorizontalAlignment="Center" Height="19" Stroke="Transparent" 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="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type RadioButton}}}" SnapsToDevicePixels="false" StrokeThickness="2" VerticalAlignment="Center"/>
                                    <ContentPresenter Grid.Column="1" HorizontalAlignment="Left" Margin="4,0,0,0" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Center"/>
                                </Grid>
                            </RadioButton>
                        </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="arrow" Value="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type RadioButton}}}"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter Property="Stroke" TargetName="arrow" Value="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type RadioButton}}}"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Stroke" TargetName="arrow" Value="{Binding Path=Foreground, ElementName=BtnHome}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
       
        <Style x:Key="ExpanderStyle1" 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 ExpanderHeaderFocusVisual1}" 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="-0.8 0 0 0" MinWidth="0" MinHeight="0" Padding="{TemplateBinding Padding}" 
                                              Style="{StaticResource ExpanderDownHeaderStyle1}" 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="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

The result:

Update:

 <Style x:Key="expanderTextBlockStyle" TargetType="{x:Type TextBlock}">
            <Setter Property="FontSize" Value="13"/>
            <Setter Property="Margin" Value="10 0 0 0"/>
            <Setter Property="Width" Value="180"   />


            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Foreground" Value="#707db2 "/>

            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Foreground" Value="#bccaf1"/>

                </Trigger>

            </Style.Triggers>
        </Style>

        <Style x:Key="menuRadioButtonStyle" BasedOn="{StaticResource {x:Type ToggleButton}}" TargetType="{x:Type RadioButton}">
            <Setter Property="Foreground" Value="#707db2"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="Margin" Value="5 0 0 0"/>
            <Setter Property="Height" Value="45"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="Tag" Value="#6673b7"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="GroupName" Value="name1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RadioButton}">
                        <Border Background="{TemplateBinding Background}" BorderThickness="4 0 0 0" BorderBrush="Transparent">
                            <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Foreground" Value="#bccaf1"/>
                    <Setter Property="Foreground" Value="#bccaf1"/>
                </Trigger>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Foreground" Value="#bccaf1"/>
                    <Setter Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="0, 0.5" EndPoint="1, 0.5">
                                <GradientStop Color="#31407b" Offset="0"/>
                                <GradientStop Color="#495385" Offset="3"/>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="RadioButton">
                                <Border Background="{TemplateBinding Background}" BorderThickness="4 0 0 0" BorderBrush="#a5a1f5">
                                    <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>

            </Style.Triggers>
        </Style>
        <Style x:Key="ExpanderDownHeaderStyle1" TargetType="{x:Type RadioButton}">
            <Setter Property="Foreground" Value="#707db2"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="Margin" Value="5 0 0 0"/>
            <Setter Property="Height" Value="45"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="Tag" Value="#6673b7"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="GroupName" Value="name1"/>
            <Setter Property="Template">
                <Setter.Value>
                
                    <ControlTemplate TargetType="{x:Type RadioButton}" >
                        <Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}" BorderThickness="4 0 0 0" BorderBrush="Transparent">
                          
                                <Grid Background="Transparent" SnapsToDevicePixels="False" Width="{TemplateBinding Width}" >
                               
                                <Ellipse x:Name="circle" Margin="200 0 0 0" Grid.Column="2" Fill="Transparent" HorizontalAlignment="Center" Height="19" Stroke="Transparent"
                                             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="#707db2" SnapsToDevicePixels="false"
                                          StrokeThickness="2" VerticalAlignment="Center" />

                              
                                    <ContentPresenter Grid.Column="1" TextElement.Foreground="#707db2" 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="arrow" Value="#bccaf1"/>
                                <Setter Property="Foreground"  Value="#bccaf1"/>
                                
                               
                            </Trigger>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter Property="Stroke" TargetName="arrow" Value="#bccaf1"/>
                                <Setter Property="Foreground"  Value="#bccaf1"/>
                             
                                
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Stroke" TargetName="arrow" Value="{Binding Path=Foreground, ElementName=BtnHome}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                        
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Foreground" Value="#bccaf1"/>
                    <Setter Property="Foreground" Value="#bccaf1"/>
                </Trigger>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Foreground" Value="#bccaf1"/>
                    <Setter Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="0, 0.5" EndPoint="1, 0.5">
                                <GradientStop Color="#31407b" Offset="0"/>
                                <GradientStop Color="#495385" Offset="3"/>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="RadioButton">
                                <Border Background="{TemplateBinding Background}" BorderThickness="4 0 0 0" BorderBrush="#a5a1f5">
                                    <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>

            </Style.Triggers>
        </Style>
       
        <Style x:Key="ExpanderStyle1" 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>
                                <RadioButton x:Name="HeaderSite" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}"
                                              ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}" DockPanel.Dock="Top" FontStretch="{TemplateBinding FontStretch}"
                                              Foreground="{TemplateBinding Foreground}" FocusVisualStyle="{StaticResource ExpanderHeaderFocusVisual1}" 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="-0.8 0 0 0" MinWidth="0" MinHeight="0"
                                              Padding="{TemplateBinding Padding}" 
                                              Style="{StaticResource ExpanderDownHeaderStyle1}" 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="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

usage:

 <Expander Style="{DynamicResource ExpanderStyle1}" Background="Transparent"  >
                    <Expander.Header >
                        <StackPanel Orientation="Horizontal" Margin="-5 0 0 0">
                            <fa:IconImage Icon="DollarSign" Style="{StaticResource menuRadioButtonIconStyle}"/>
                            <TextBlock Text="Sales" Style="{StaticResource expanderTextBlockStyle}"/>
                        </StackPanel>
                    </Expander.Header>
                    <StackPanel>
                        <Button Style="{StaticResource menuButtonStyle}">
                            <TextBlock Text="New Invoice" Style="{StaticResource menuButtonTextBlockStyle}" Margin="62 0 0 0"/>
                        </Button>
                        <Button Style="{StaticResource menuButtonStyle}">
                            <TextBlock Text="Manage Invoices" Style="{StaticResource menuButtonTextBlockStyle}" Margin="62 0 0 0"/>
                        </Button>
                    </StackPanel>
                </Expander>

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.

Mesh Ka 345 Reputation points

2023-08-23T04:50:31.32+00:00

@Hui Liu-MSFT , Thanks for the response but still there is a problem there;

I wanted only i button to be selected among all the buttons in the side menu (in your fix the three first button are working together and the three expanders are working together).

The Expanders are not working, i wanted it to work because inside the expanders there are buttons for my users to select.

Here is the problem:
Hui Liu-MSFT 48,651 Reputation points Microsoft External Staff

2023-08-23T08:42:22.34+00:00

Hi,@Mesh Ka. I updated the answer, you could check it out. I set a fixed Width for the TextBox for the effect. You can modify as needed.

By the way, could you check your following thread to see if my answer helps you? Has the problem been solved?

https://learn.microsoft.com/en-us/answers/questions/1350053/how-can-i-change-the-toggle-button-in-wpf-expander
Mesh Ka 345 Reputation points

2023-08-23T16:01:35.61+00:00

@Hui Liu-MSFT Thanks, Keep it Up, Stay Connected to my Questions I have a lot for you, i am new to C# and Wpf and i am trying to create a complex app and untill now i found you the most active to my questions, And I think you will get almost 5000+ points from me!

How can i update you when i post a new question, Please reply.

Share via

How to Create an Expander Control that Behaves like a Radio Button Based On Toggle Button in WPF

0 additional answers

Your answer