C# Note18: 使用wpf制作about dialog(关于对话框)

前言

基本上任何software或application都会在help菜单中，有着一个关于对话框，介绍产品的版权、版本等信息，还有就是对第三方的引用（add author credits）。

首先，看下常用软件的关于对话框：

言归正传，进入正题，介绍下我在进行这部分开发时的三种方法：

由于用到了很多需要credit的icons，几种方法主要的区别便在于如何显示这些icons，并加上作者信息。

（1）使用ListView显示，并制作DataTemplate模板

MainWindow.xaml

<Window x:Class="AboutApplicationTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:AboutApplicationTest"
        mc:Ignorable="d"
        Title="XXXXX Application" Height="460" Width="580" Icon="/images/about.png">
    <Window.Resources>
        <DataTemplate x:Key="MyTemplate" DataType="{x:Type local:IconInfo}">
            <Label Height="30" Width="500">
                <Label.Content>
                    <DockPanel>
                        <Image Source="{Binding Icon}" DockPanel.Dock="Left" Width="20" Height="20"/>
                        <TextBlock Text=" Icon made by " DockPanel.Dock="Left" Margin="10,0,0,0"/>
                        <TextBlock DockPanel.Dock="Left">
                                <Hyperlink NavigateUri="{Binding Url}" Name="linkHelp" ToolTip="Author Credits" Click="linkHelp_Click_1">
                                    <Hyperlink.Inlines>
                                        <Run Text="{Binding Author}"/>
                                    </Hyperlink.Inlines>
                                </Hyperlink>
                        </TextBlock>
                        <TextBlock Text="from www.flaticon.com" DockPanel.Dock="Left" Margin="5,0,0,0"/>
                    </DockPanel>
                </Label.Content>
            </Label>
        </DataTemplate>
    </Window.Resources>
    <Grid Background="LightGray">
        <Grid Margin="0,0,0,0" VerticalAlignment="Top" Width="580" Height="440" HorizontalAlignment="Left" Background="LightGray">
            <Image Source="/Images/user.png" Width="60" Height="60" HorizontalAlignment="Left" Margin="50,10,0,0" VerticalAlignment="Top"/>
            <Label Content="XXXXX Application" FontWeight="Bold" FontSize="16" HorizontalAlignment="Left" Margin="160,10,0,0" VerticalAlignment="Top"></Label>
            <Label Content="Copyright © 2017 by XXXXXX Corporation. All Rights Reserved." HorizontalAlignment="Left" Margin="160,40,0,0" VerticalAlignment="Top"></Label>
            <GroupBox BorderBrush="DarkGreen"  Header="Product Information:" HorizontalAlignment="Left" Height="60" Margin="50,80,0,0" VerticalAlignment="Top" Width="460">
                <Label Name="pbc_version" Content="" HorizontalAlignment="Left" Margin="135,5,0,0" VerticalAlignment="Top"/>
            </GroupBox>

            <Label Content="Included third parties:" HorizontalAlignment="Left" Margin="10,150,0,0" VerticalAlignment="Top"></Label>
            <ListView x:Name="lvIconInfo" ItemTemplate="{StaticResource  MyTemplate}"  Height="180" Width="545" Margin="10,175,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"/>
            <Label Name="WarningInfo" Content="Warning:" HorizontalAlignment="Left" Margin="5,360,0,0" VerticalAlignment="Top" Width="555"></Label>
        </Grid>
    </Grid>
</Window>

MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Diagnostics;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace AboutApplicationTest
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private ObservableCollection<IconInfo> iconInfoList;
        public MainWindow()
        {
            this.WindowStartupLocation = System.Windows.WindowStartupLocation.CenterScreen;

            InitializeComponent();

            WarningInfo.Content += " This computer program is protected by copyright law and international treaties. Unauthoized"
            + "
" + "reproduction or distribution of this program, or any portion of it, may result in severe civil and criminal"
            + "
" + "penalties, and will be prosecuted to the maximum extent possible under the law.";

            pbc_version.Content = "Version:     " + System.Reflection.Assembly.GetExecutingAssembly().GetName().Version.ToString(); //利用反射的方式获取assembly的version信息

            iconInfoList = new ObservableCollection<IconInfo>();

            iconInfoList.Add(new IconInfo("/Images/user.png", "https://www.flaticon.com/authors/chanut-is-industries", "Chanut is Industries"));
            iconInfoList.Add(new IconInfo("/Images/password.png", "https://www.flaticon.com/authors/freepik", "Freepik"));
            iconInfoList.Add(new IconInfo("/Images/user.png", "https://www.flaticon.com/authors/chanut-is-industries", "Chanut is Industries"));
            iconInfoList.Add(new IconInfo("/Images/password.png", "https://www.flaticon.com/authors/freepik", "Freepik"));
            iconInfoList.Add(new IconInfo("/Images/user.png", "https://www.flaticon.com/authors/chanut-is-industries", "Chanut is Industries"));
            iconInfoList.Add(new IconInfo("/Images/password.png", "https://www.flaticon.com/authors/freepik", "Freepik"));
            iconInfoList.Add(new IconInfo("/Images/user.png", "https://www.flaticon.com/authors/chanut-is-industries", "Chanut is Industries"));
            iconInfoList.Add(new IconInfo("/Images/password.png", "https://www.flaticon.com/authors/freepik", "Freepik"));

            this.lvIconInfo.ItemsSource = iconInfoList;
        }

        private void linkHelp_Click_1(object sender, RoutedEventArgs e)
        {
            //Hyperlink link = sender as Hyperlink;
            //Process.Start(new ProcessStartInfo(link.NavigateUri.AbsoluteUri));
            if (sender.GetType() != typeof(Hyperlink))
                return;
            string link = ((Hyperlink)sender).NavigateUri.ToString();
            Process.Start(link);
        }
    }

    public class IconInfo
    {
        private string icon;
        private string url;
        private string author;

        public IconInfo(string icon, string url, string author)
        {
            this.icon = icon;
            this.url = url;
            this.author = author;
        }

        public string Icon
        {
            get
            {
                return this.icon;
            }
            set
            {
                this.icon = value; 
            }
        }

        public string Url
        {
            get
            {
                return this.url;
            }
            set
            {
                this.url = value;
            }
        }

        public string Author
        {
            get
            {
                return this.author;
            }
            set
            {
                this.author = value;
            }
        }
    }
}

运行效果图：

（2）使用StackPanel包裹Label控件，然后外加滚动条

部分代码：　　

<Grid Background="LightGray">
        <Grid Margin="0,0,0,0" VerticalAlignment="Top" Width="580" Height="440" HorizontalAlignment="Left" Background="LightGray">
            <Image Source="/Images/pbc_icon.png" Width="120" Height="50" HorizontalAlignment="Left" Margin="30,10,0,0" VerticalAlignment="Top"/>
            <Label Content="XXXXX Application" FontWeight="Bold" FontSize="16" HorizontalAlignment="Left" Margin="160,10,0,0" VerticalAlignment="Top"></Label>
            <Label Content="Copyright © 2017 by XXXXXX Corporation. All Rights Reserved." HorizontalAlignment="Left" Margin="160,40,0,0" VerticalAlignment="Top"></Label>
            <GroupBox BorderBrush="DarkGreen"  Header="Product Information:" HorizontalAlignment="Left" Height="60" Margin="50,80,0,0" VerticalAlignment="Top" Width="460">
                <Label Name="XXX_version" Content="" HorizontalAlignment="Left" Margin="135,5,0,0" VerticalAlignment="Top"/>
            </GroupBox>

            <Label Content="Included third parties:" HorizontalAlignment="Left" Margin="10,150,0,0" VerticalAlignment="Top"></Label>
            <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Height="180" Margin="10,175,0,0" HorizontalAlignment="Left" VerticalAlignment="Top">
                <StackPanel Background="White" Width="535">
                    <Label Height="30" Width="535">
                        <Label.Content>
                            <DockPanel>
                                <Image Source="/Images/user.png" DockPanel.Dock="Left" Width="20" Height="20"/>
                                <TextBlock Text=" Icon made by " DockPanel.Dock="Left" Margin="10,0,0,0"/>
                                <TextBlock DockPanel.Dock="Left">
                                <Hyperlink NavigateUri="https://www.flaticon.com/authors/chanut-is-industries" Name="linkHelp" Click="linkHelp_Click">Chanut is Industries
                                </Hyperlink>
                                </TextBlock>
                                <TextBlock Text="from www.flaticon.com" DockPanel.Dock="Left" Margin="5,0,0,0"/>
                            </DockPanel>
                        </Label.Content>
                    </Label>
                    <Label Height="30" Width="535">
                        <Label.Content>
                            <DockPanel>
                                <Image Source="/Images/password.png" DockPanel.Dock="Left" Width="20" Height="20"/>
                                <TextBlock Text=" Icon made by " DockPanel.Dock="Left" Margin="10,0,0,0"/>
                                <TextBlock DockPanel.Dock="Left">
                                <Hyperlink NavigateUri="https://www.flaticon.com/authors/freepik" Name="linkHelp1" Click="linkHelp_Click">Freepik
                                </Hyperlink>
                                </TextBlock>
                                <TextBlock Text="from www.flaticon.com" DockPanel.Dock="Left" Margin="5,0,0,0"/>
                            </DockPanel>
                        </Label.Content>
                    </Label>
                    <Label Height="30" Width="535">
                        <Label.Content>
                            <DockPanel>
                                <Image Source="/Images/verifyPassword.png" DockPanel.Dock="Left" Width="20" Height="20"/>
                                <TextBlock Text=" Icon made by " DockPanel.Dock="Left" Margin="10,0,0,0"/>
                                <TextBlock DockPanel.Dock="Left">
                                <Hyperlink NavigateUri="https://www.flaticon.com/authors/freepik" Name="linkHelp2" Click="linkHelp_Click">Freepik
                                </Hyperlink>
                                </TextBlock>
                                <TextBlock Text="from www.flaticon.com" DockPanel.Dock="Left" Margin="5,0,0,0"/>
                            </DockPanel>
                        </Label.Content>
                    </Label>
                    <Label Height="30" Width="535">
                        <Label.Content>
                            <DockPanel>
                                <Image Source="/Images/description.png" DockPanel.Dock="Left" Width="20" Height="20"/>
                                <TextBlock Text=" Icon made by " DockPanel.Dock="Left" Margin="10,0,0,0"/>
                                <TextBlock DockPanel.Dock="Left">
                                <Hyperlink NavigateUri="https://www.flaticon.com/authors/Picol" Name="linkHelp3" Click="linkHelp_Click">Picol
                                </Hyperlink>
                                </TextBlock>
                                <TextBlock Text="from www.flaticon.com" DockPanel.Dock="Left" Margin="5,0,0,0"/>
                            </DockPanel>
                        </Label.Content>
                    </Label>
                    <Label Height="30" Width="535">
                        <Label.Content>
                            <DockPanel>
                                <Image Source="/Images/role.png" DockPanel.Dock="Left" Width="20" Height="20"/>
                                <TextBlock Text=" Icon made by " DockPanel.Dock="Left" Margin="10,0,0,0"/>
                                <TextBlock DockPanel.Dock="Left">
                                <Hyperlink NavigateUri="https://www.flaticon.com/authors/Vectors-Market" Name="linkHelp4" Click="linkHelp_Click">Vectors Market
                                </Hyperlink>
                                </TextBlock>
                                <TextBlock Text="from www.flaticon.com" DockPanel.Dock="Left" Margin="5,0,0,0"/>
                            </DockPanel>
                        </Label.Content>
                    </Label>
                    <Label Height="30" Width="535">
                        <Label.Content>
                            <DockPanel>
                                <Image Source="/Images/error.png" DockPanel.Dock="Left" Width="20" Height="20"/>
                                <TextBlock Text=" Icon made by " DockPanel.Dock="Left" Margin="10,0,0,0"/>
                                <TextBlock DockPanel.Dock="Left">
                                <Hyperlink NavigateUri="https://www.flaticon.com/authors/Pixel-Buddha" Name="linkHelp5" Click="linkHelp_Click">Pixel Buddha
                                </Hyperlink>
                                </TextBlock>
                                <TextBlock Text="from www.flaticon.com" DockPanel.Dock="Left" Margin="5,0,0,0"/>
                            </DockPanel>
                        </Label.Content>
                    </Label>
                    <Label Height="30" Width="535">
                        <Label.Content>
                            <DockPanel>
                                <Image Source="/Images/alarm.png" DockPanel.Dock="Left" Width="20" Height="20"/>
                                <TextBlock Text=" Icon made by " DockPanel.Dock="Left" Margin="10,0,0,0"/>
                                <TextBlock DockPanel.Dock="Left">
                                <Hyperlink NavigateUri="https://www.flaticon.com/authors/freepik" Name="linkHelp6" Click="linkHelp_Click">Freepik
                                </Hyperlink>
                                </TextBlock>
                                <TextBlock Text="from www.flaticon.com" DockPanel.Dock="Left" Margin="5,0,0,0"/>
                            </DockPanel>
                        </Label.Content>
                    </Label>
                </StackPanel>
            </ScrollViewer>
            <Label Name="WarningInfo" Content="Warning:" HorizontalAlignment="Left" Margin="5,360,0,0" VerticalAlignment="Top" Width="555"></Label>
        </Grid>
    </Grid>

（3）在第一种方法的基础上，不用hardcode的方式，而是增加一个xml配置文件，从中读取icons的credit数据。　

　　

附：Example using Hyperlink in WPF