question

Imilio-3053 avatar image
0 Votes"
Imilio-3053 asked Sarah-3412 commented

Add line under Button

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:
186508-buttons.png


windows-wpf
buttons.png (4.4 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi,@Imilio-3053 . Is there an update to your question? Did my solution work for you? If yes, you can accept it as the answer. This is helpful for community members with similar issues.

0 Votes 0 ·
HuiLiu-MSFT avatar image
0 Votes"
HuiLiu-MSFT answered Sarah-3412 commented

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:
194986-33.gif


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.


4.gif (37.3 KiB)
8.gif (75.7 KiB)
image.png (9.9 KiB)
33.gif (63.4 KiB)
· 5
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi @HuiLiu-MSFT , Thank you for the update. That is exactly what I want. Only one small thing: BorderBrush with BorderThickness="1" in my style was only displayed via IsMouseOver. Now it is always there

0 Votes 0 ·

Hi,@Imilio-3053.I updated my answer, you could check it out.

0 Votes 0 ·

Hi @HuiLiu-MSFT , Style wise it is what I want. The only problem is when I click on anything in the UI, the bottom line disappears. This must not happen. The bottom line must only disappear when another button is clicked with the same style. This effect can be found for example in Visual Studio Code.

0 Votes 0 ·
Show more comments
Imilio-3053 avatar image
0 Votes"
Imilio-3053 answered HuiLiu-MSFT commented

Hi @HuiLiu-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>



· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi,@Imilio-3053.I updated my answer, you could check it out.

0 Votes 0 ·