这个功能相对比较单一,就是把与这个项目相关的一些技术文章做了个网页超链接,单击图片位置区域就可以跳转到之前讲解的内容:
界面如下:
下面展示源码:
前台首先是定义了几个控件的样式,这里没有加键值,即默认全局应用
<UserControl.Resources> <Style TargetType="Image"> <Setter Property="Width" Value="30"/> <Setter Property="Height" Value="30"/> <Setter Property="Margin" Value="5"/></Style> <Style TargetType="Label"> <Setter Property="HorizontalAlignment" Value="Center"/> <Setter Property="VerticalAlignment" Value="Center"/></Style> <Style TargetType="Border"> <Setter Property="BorderBrush" Value="Yellow"/> <Setter Property="BorderThickness" Value="2"/> <Setter Property="Background" Value="LightGreen"/> <Setter Property="CornerRadius" Value="5"/> <Setter Property="Margin" Value="2"/></Style> </UserControl.Resources>
顶端的说明区域采用Dev的LayoutGroup和LayoutItem实现:
<dxlc:LayoutGroup Orientation="Vertical" View="GroupBox" > <dxlc:LayoutGroup.Header> <dxlc:LayoutItem Label="Help Documentation" Background="CadetBlue" /> </dxlc:LayoutGroup.Header> <dxlc:LayoutItem Label="Please click the image position to get help documents." /> </dxlc:LayoutGroup>
下面的每个图片都加了超链接,放在了WrapPanel下,功能都一样,这里只列举第一个的写法:
<Border> <StackPanel Orientation="Vertical"> <Image Source="/Images/build.png" cal:Message.Attach="[Event MouseLeftButtonUp]=[BuildClick()]" /> <Label Content="框架搭建"/> </StackPanel> </Border>
后台逻辑基本就是为了响应下鼠标的左键弹起的事件:
public void BuildClick() { string url = "https://mp.weixin.qq.com/s?__biz=MjM5MjIzMjk4OA==&mid=2247483866&idx=1&sn=73ca9185b2be655d5c965f1600972a03&chksm=a6a822a991dfabbff983d54f358624a7c5e510b7407c50774981a44bd9ada13201b7364bf0b6&token=1300577902&lang=zh_CN#rd"; Process ie = Process.Start("iexplore.exe",url); }
即通过process的start方法去获取并打开文档地址.
联系客服