Add line under Button

Question

I have a series of buttons next to each other. When clicking one button, I want a line to appear under that button. This line should then disappear when another button is clicked and be displayed under the new clicked button.Does anyone know how to do this in WPF?

This effect can be found for example in Visual Studio Code:

Answer 1

You could try to style the Button by referring to the code below.

<Grid>  
        <TabControl Margin="10" BorderBrush="Gainsboro">  
            <TabControl.Resources>  
                <Style TargetType="TabItem">  
                    <Setter Property="Template">  
                        <Setter.Value>  
                            <ControlTemplate TargetType="TabItem">  
                                <Border Name="Border" CornerRadius="8"  BorderThickness="{TemplateBinding BorderThickness}"  
                                  BorderBrush="{TemplateBinding BorderBrush}"   Margin="2,0">  
                                    <Border.Background>  
                                        <RadialGradientBrush GradientOrigin="0.496,1.052">  
                                            <RadialGradientBrush.RelativeTransform>  
                                                <TransformGroup>  
                                                    <ScaleTransform CenterX="0.5" CenterY="0.5"    ScaleX="1.5" ScaleY="1.5"/>  
                                                    <TranslateTransform X="0.02" Y="0.3"/>  
                                                </TransformGroup>  
                                            </RadialGradientBrush.RelativeTransform>  
                                            <GradientStop Offset="15" Color="#00000000"/>  
                                            <GradientStop Offset="0.01" Color="#FFFFFFFF"/>  
                                        </RadialGradientBrush>  
                                    </Border.Background>  
                                    <ContentPresenter x:Name="ContentSite"  VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header"  Margin="10,2"/>  
                                      
                                </Border>  
                                <ControlTemplate.Triggers>  
                                    <Trigger Property="IsSelected" Value="True">  
                                        <Setter TargetName="Border" Property="Background" Value="LightSkyBlue" />  
                                        <Setter Property="BorderBrush" Value="Red"/>  
                                        <Setter Property="BorderThickness" Value="0 0 0 2"/>  
                                    </Trigger>  
                                    <Trigger Property="IsSelected" Value="False">  
                                        <Setter TargetName="Border" Property="Background" Value="GhostWhite" />  
                                    </Trigger>  
                                    <Trigger Property="IsMouseOver" Value="True">  
                                        <Setter Property="BorderBrush" TargetName="Border" Value="green"/>  
                                        <Setter Property="BorderThickness" Value="1"/>  
                                    </Trigger>  
                                </ControlTemplate.Triggers>  
                            </ControlTemplate>  
                        </Setter.Value>  
                    </Setter>  
                </Style>  
            </TabControl.Resources>  
            <TabItem Header="General">  
                <Label Content="Content goes here..." />  
            </TabItem>  
            <TabItem Header="Security" />  
            <TabItem Header="Details" />  
        </TabControl>  
    </Grid>  

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.

Answer 2

Hi @Hui Liu-MSFT , I already use the following style for my buttons. I tried to integrate your code. But unfortunately it didn't work for me.

<Style x:Key="RoundCorner" TargetType="{x:Type Button}">  
        <Setter Property="Template">  
            <Setter.Value>  
                <ControlTemplate TargetType="{x:Type Button}">  
                    <Grid x:Name="grid">  
                        <Border x:Name="border" CornerRadius="8" BorderBrush="Transparent" BorderThickness="1">  
                            <Border.Background>  
                                <RadialGradientBrush GradientOrigin="0.496,1.052">  
                                    <RadialGradientBrush.RelativeTransform>  
                                        <TransformGroup>  
                                            <ScaleTransform CenterX="0.5" CenterY="0.5"   
                                                        ScaleX="1.5" ScaleY="1.5"/>  
                                            <TranslateTransform X="0.02" Y="0.3"/>  
                                        </TransformGroup>  
                                    </RadialGradientBrush.RelativeTransform>  
                                    <GradientStop Offset="15" Color="#00000000"/>  
                                    <GradientStop Offset="0.01" Color="#FFFFFFFF"/>  
                                </RadialGradientBrush>  
                            </Border.Background>  
                            <ContentPresenter HorizontalAlignment="Center"  
                                          VerticalAlignment="Center"  
                                          TextElement.FontWeight="Bold">  
                            </ContentPresenter>  
                        </Border>  
                    </Grid>  
                    <ControlTemplate.Triggers>  
                        <Trigger Property="IsPressed" Value="True">  
                            <Setter Property="Background" TargetName="border">  
                                <Setter.Value>  
                                    <RadialGradientBrush GradientOrigin="0.496,1.052">  
                                        <RadialGradientBrush.RelativeTransform>  
                                            <TransformGroup>  
                                                <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.5" ScaleY="1.5"/>  
                                                <TranslateTransform X="0.02" Y="0.3"/>  
                                            </TransformGroup>  
                                        </RadialGradientBrush.RelativeTransform>  
                                        <GradientStop Color="blue" Offset="1"/>  
                                        <GradientStop Color="red" Offset="0.3"/>  
                                    </RadialGradientBrush>  
                                </Setter.Value>  
                            </Setter>  
                        </Trigger>  
                        <Trigger Property="IsMouseOver" Value="True">  
                            <Setter Property="BorderBrush" TargetName="border" Value="green"/>  
                        </Trigger>  
                        <Trigger Property="IsEnabled" Value="False">  
                            <Setter Property="Opacity" TargetName="grid" Value="0.25"/>  
                            <Setter Property="BorderThickness" Value="0 0 0 2"/>  
                        </Trigger>  
                        <Trigger Property="IsFocused" Value="True">  
                            <Setter Property="Background" Value="Gray"/>  
                            <Setter Property="BorderBrush" Value="Red"/>  
                            <Setter Property="BorderThickness" Value="0 0 0 2"/>  
                        </Trigger>  
                    </ControlTemplate.Triggers>  
                </ControlTemplate>  
            </Setter.Value>  
        </Setter>  
    </Style>