WPF HyperLink Button using Style and Control Template

WPF: HyperLink Button using Style and Control Template

Using this post, you will be able to create a button, which will look like Hyperlink.

To achieve this you need to create a style for a button and in that style you need to modify the template of the button so that it looks like hyperlink.

Also, mostly we see that in hyperlink, the color changes whenever the mouse hovers on it. So using Control Template triggers, we will change the foreground color of the hyperlink.

Here is the Hyperlink button style which you need to define in the Resources section of XAML.

<Style  x:Key='HyperLinkButtonStyle'TargetType='Button'>

   <Setter Property='Template'>

      <Setter.Value>

        <ControlTemplate   TargetType='Button'>

            <TextBlock  TextDecorations='Underline'>

                <ContentPresenter TextBlock.FontFamily='Segoe UI' TextBlock.FontSize='13'/>

      </TextBlock>

        </ControlTemplate>

    </Setter.Value>

   </Setter>

   <Setter Property='Foreground'        Value='#195AE0' />

   <Style.Triggers>

<Trigger Property='IsMouseOver' Value='true'>

     <Setter   Property='Foreground'    Value='Red' />

     <Setter Property='Cursor' Value='Hand' />

 </Trigger>                   

   </Style.Triggers>

 </Style>

Note that we have named the style as “HyperLinkButtonStyle”. We will refer this style using this key from the button.

Here is the code for button from where we refer the HyperLinkButtonStyle.

<Button Style="{StaticResource HyperLinkButtonStyle}" Content="Click Me!" HorizontalAlignment="Center" VerticalAlignment="Center"/>

Also, note that in triggers, we have written a trigger which gets fired whenever mouse pointer is hovered on the button. Whenever this mouse over trigger is fired the color of hyperlink will turn red.

Screenshots of how the hyperlink button will look like after applying the style.

Normal Hyperlink                                                                                

 

 Mouse Over Hyperlink