欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

[WPF自定义控件库] 给WPF一个HyperlinkButton

程序员文章站 2023-11-06 10:30:04
1. 在WPF怎么在UI上添加超级链接 这篇文章的目的是介绍怎么在WPF里创建自定义的HyperlinkButton控件。很神奇的,WPF居然连HyperlinkButton都没有,不过它提供了另一种方式用于在UI上添加超级链接: 如果需要在超级链接里放图片或其它东西,代码如下: 这真是很怪,为什么 ......

1. 在wpf怎么在ui上添加超级链接

这篇文章的目的是介绍怎么在wpf里创建自定义的hyperlinkbutton控件。很神奇的,wpf居然连hyperlinkbutton都没有,不过它提供了另一种方式用于在ui上添加超级链接:

<textblock fontsize="20">           
    <hyperlink navigateuri="http://www.google.com" requestnavigate="hyperlink_requestnavigate">
        click here
    </hyperlink>
</textblock>
private void hyperlink_requestnavigate(object sender, requestnavigateeventargs e)
{
    process.start(new processstartinfo(e.uri.absoluteuri));
    e.handled = true;
}

[WPF自定义控件库] 给WPF一个HyperlinkButton

如果需要在超级链接里放图片或其它东西,代码如下:

<textblock fontsize="20">           
    <hyperlink navigateuri="https://www.microsoft.com"
               requestnavigate="hyperlink_requestnavigate">
        <stackpanel orientation="horizontal">
            <image source="microsoft-logo1.jpg" height="20" width="20"/>
            <textblock text="microsoft"  margin="4,0,0,0" />
        </stackpanel>
    </hyperlink>        
</textblock>

[WPF自定义控件库] 给WPF一个HyperlinkButton

这真是很怪,为什么要先有textblock然后再有hyperlink,为什么textblock里面可以放image,这真的很难理解。

2. hyperlink怎么设置样式

要给hyperlink设置样式也有点难搞,因为在对象树上hyperlink毫无存在感,所以也没办法使用blend创建它的style。

[WPF自定义控件库] 给WPF一个HyperlinkButton

我的做法是用ilspy拿到它的style再修改。例如我需要mouseover状态下文字不是红色而是紫色,可以使用下面的style:

<style x:key="{x:type hyperlink}"
       targettype="{x:type hyperlink}">
    <setter property="textelement.foreground"
            value="{dynamicresource {x:static systemcolors.hottrackbrushkey}}" />
    <setter property="inline.textdecorations"
            value="underline" />
    <style.triggers>
        <multidatatrigger>
            <multidatatrigger.conditions>
                <condition binding="{binding path=(systemparameters.highcontrast)}"
                           value="false" />
                <condition binding="{binding path=ismouseover, relativesource={relativesource self}}"
                           value="true" />
            </multidatatrigger.conditions>
            <setter property="textelement.foreground"
                    value="#ffff00ff" />
        </multidatatrigger>
        <trigger property="contentelement.isenabled"
                 value="false">
            <setter property="textelement.foreground"
                    value="{dynamicresource {x:static systemcolors.graytextbrushkey}}" />
        </trigger>
        <trigger property="contentelement.isenabled"
                 value="true">
            <setter property="frameworkcontentelement.cursor"
                    value="hand" />
        </trigger>
    </style.triggers>
</style>

[WPF自定义控件库] 给WPF一个HyperlinkButton

3. 自定义一个hyperlinkbutton

自定义一个hyperlinkbutton有什么好处?因为用起来简单啊,不需要codebehind的代码,绑定内容和command都简单,而且xaml更加简单直观。在外观上,很多人喜欢hyperlink下面的横线在鼠标mouseover才显示,另外如上面图片所示插入图片后hyperlink下面有一条横线,这很奇怪但又取消不了。

silverlight和uwp都很普通地提供了hyperlinkbutton。不过在silverlight中为了显示mouseover时出现的下划线使用了两层内容,一层用于正常显示(contentpresenter),另一层用于显示下划线(underlinetextblock),如果hyperlinkbutton的内容是文本,当mouseover时underlinetextblock就会显示underlinetextblock。

<textblock x:name="underlinetextblock"
     text="{templatebinding content}"
     textdecorations="underline"
     visibility="collapsed"/>
<contentpresenter x:name="contentpresenter"
     content="{templatebinding content}"/>

但是这样效果十分差,重叠在一起的文本看上去变得模糊。

[WPF自定义控件库] 给WPF一个HyperlinkButton

而uwp中的hyperlinkbutton的下划线是代码里写死的,大概是这样:

if (visualtreehelper.getchildrencount(contentpresenter) == 1 && visualtreehelper.getchild(contentpresenter, 0) is textblock textblock)
{
    textblock.textdecorations = text.textdecorations.underline;
}

而且它还没有提供任何方法关闭或修改这个下划线。我很讨厌这种代码里控制样式的行为,ui和代码应该足够解耦。uwp很多使用代码控制样式的行为,通常宣称理由是为了性能,但button是整个ui中最不需要性能的部分,毕竟一个ui中不可能有几百个button,就算有几百个hyperlinkbutton,现代的ui框架也不可能仅仅因为下划线就导致性能下降。所以我认为没必要在代码里控制下划线的显示。

而无论silverlight还是uwp,只要hyperlinkbutton的content不是纯文本就不能显示下划线,这应该也算一个功能缺陷。

我在kino.toolkit.wpf里也提供了一个hyperlinkbutton,使用方式如下:

<kino:hyperlinkbutton content="github"
      navigateuri="https://github.com/dinochan/kino.toolkit.wpf" />

不仅使用起来简单,hyperlinkbutton的代码也很简单。

public uri navigateuri
{
    get => getvalue(navigateuriproperty) as uri;
    set => setvalue(navigateuriproperty, value);
}

protected override void onclick()
{
    base.onclick();
    if (navigateuri != null && navigateuri.isabsoluteuri)
    {
        try
        {
            process.start(new processstartinfo(navigateuri.absoluteuri));
        }
        catch (win32exception)
        {
        }
    }
}

上面是hyperlinkbutton的核心代码,需要一个hyperlinbutton被点击后导航到的navigateuri属性,以及在onclick函数中使用process.start在新进程打开目标uri。关于process和processstartinfo的具体用法可见本文最后给出的参考链接。

xaml的部分基本上照抄silverlight的hyperlinkbutton,不过关于下划线的处理稍有不同。

<controltemplate.resources>
    <style targettype="textblock">
        <style.triggers>
            <datatrigger binding="{binding relativesource={relativesource findancestor, ancestortype=buttonbase}, path=ismouseover}"
                         value="true">
                <setter property="textdecorations"
                        value="underline" />
            </datatrigger>
        </style.triggers>
    </style>
</controltemplate.resources>
<grid cursor="{templatebinding cursor}"
      background="{templatebinding background}">
    <visualstatemanager.visualstategroups>
        <visualstategroup x:name="commonstates">
            <visualstate x:name="normal" />
            <visualstate x:name="mouseover" />
            <visualstate x:name="pressed">
                <!--some xaml-->
            </visualstate>
            <visualstate x:name="disabled">
                <!--some xaml-->
            </visualstate>
        </visualstategroup>
    </visualstatemanager.visualstategroups>

    <contentpresenter x:name="contentpresenter"
                      content="{templatebinding content}"
                      contenttemplate="{templatebinding contenttemplate}"
                      verticalalignment="{templatebinding verticalcontentalignment}"
                      horizontalalignment="{templatebinding horizontalcontentalignment}"
                      margin="{templatebinding padding}">
        <contentpresenter.resources>
            <style targettype="textblock">
                <style.triggers>
                    <datatrigger binding="{binding relativesource={relativesource findancestor, ancestortype=buttonbase}, path=ismouseover}"
                                 value="true">
                        <setter property="textdecorations"
                                value="underline" />
                    </datatrigger>
                </style.triggers>
            </style>
        </contentpresenter.resources>
    </contentpresenter>
</grid>

上面是hyperlinkbutton的defaultstyle的大致内容。pressed和disabled的状态使用visualstate控制外观,这部分略过。在controltemplate.resources中添加了一个textblock的全局样式,里面的datatrigger设置为当鼠标进入父节点的hyperlinkbutton时textdecorations变为underline。运行效果如下:

<kino:hyperlinkbutton navigateuri="https://www.microsoft.com/"
                      margin="0,16,0,0"
                      fontsize="20">
    <stackpanel orientation="horizontal">
        <image height="20"
               width="20"
               source="/kino.toolkit.wpf.samples;component/assets/images/microsoft_logo.png" />
        <textblock text="microsoft"
                   margin="4,0,0,0"
                   resources="{x:null}" />
    </stackpanel>
</kino:hyperlinkbutton>

[WPF自定义控件库] 给WPF一个HyperlinkButton

在下面的contentpresenter.resources中也添加了同样的datatrigger,这是为了应对下面这种情况:

<kino:hyperlinkbutton content="microsoft"
                      navigateuri="https://www.microsoft.com/"
                      margin="0,16,0,0"
                      fontsize="20">
    <buttonbase.contenttemplate>
        <datatemplate>
            <stackpanel orientation="horizontal">
                <image height="20"
                       width="20"
                       source="/kino.toolkit.wpf.samples;component/assets/images/microsoft_logo.png" />
                <textblock text="microsoft"
                           margin="4,0,0,0" />
            </stackpanel>
        </datatemplate>
    </buttonbase.contenttemplate>
</kino:hyperlinkbutton>

这里textblock不是hyperlinkbutton的逻辑树上的子元素,或许就是因为这样它不能应用controltemplate.resources中的textblock的全局样式。

最后记得在最外层的grid上设置background:

<grid cursor="{templatebinding cursor}" background="{templatebinding background}">

如果不设置一个透明的background的话,就只有文字部分能捕获鼠标点击事件,这样hyperlinkbutton就会很难点中。(我记得在uwp中就没有这个问题,uwp的contentpresenter自带透明背景)

4. 结语

hyperlinkbutton明明很重要但wpf又不提供,幸好自己写起来也很简单。

这么简单的一个控件我也能水这么长的文章,我也很佩服我自己。

5. 参考

hyperlink class (system.windows.documents) microsoft docs

process class (system.diagnostics) microsoft docs

processstartinfo class (system.diagnostics) microsoft docs

6. 源码

hyperlinkbutton.cs at master