学习010-04-01 Change an Application Logo and About Information（更改应用程序徽标和关于信息）

Change an Application Logo and About Information（更改应用程序徽标和关于信息）

This topic describes how to change an application logo and description text. The following list details where these elements appear depending on the application platform.
本主题介绍如何更改应用程序徽标和描述文本。以下列表详细说明了这些元素的显示位置，具体取决于应用程序平台。

• ASP.NET Web Forms and ASP.NET Core Blazor: the top-left and bottom-left corners of the application’s main page.
  ASP.NETWeb窗体和ASP.NETCore Blazor：应用程序主页的左上角和左下角。
  
  

• Windows Forms: the application’s About window.
  Windows窗体：应用程序的关于窗口。

In Windows Forms and ASP.NET Web Forms applications, you can use an embedded resource image as a logo. You can also use an image file from a web application’s folder.
在Windows窗体和ASP.NETWeb窗体应用程序中，您可以使用嵌入的资源图像作为徽标。您还可以使用Web应用程序文件夹中的图像文件。

Note
In Windows Forms applications, you can use the AboutInfoController.AboutInfoAction Action to invoke the About window. It contains the AboutInfo object’s Detail View (AboutInfo_DetailView).
在Windows窗体应用程序中，您可以使用AboutInfoController. AboutInfoAction Action来调用关于窗口。它包含AboutInfo对象的详细信息视图（AboutInfo_DetailView）。
In ASP.NET Web Forms applications, you can use the AboutInfoControl to display information.
在ASP.NETWeb窗体应用程序中，可以使用AboutInfoControl来显示信息。
ASP.NET Core Blazor applications display the AboutInfoString property value on the Template.
ASP.NETCore Blazor应用程序在模板上显示AboutInfoString属性值。

Specify Application Information（指定申请信息）

In the Model Editor, you can use the following properties or the root Application node to specify application name, description, vendor, copyright, and version:
在模型编辑器中，您可以使用以下属性或根应用程序节点来指定应用程序名称、描述、供应商、版权和版本：

Use a Custom Logo Image（使用自定义徽标图像）

In ASP.NET Core Blazor Applications（ASP.NET核心Blazor应用）

XAF adjusts the specified logo image according to the current theme and renders it as monochromatic (black and white) by default.
XAF根据当前主题调整指定的徽标图像，默认呈现为单色（黑白）。

Depending on your application behavior or corporate style, you can use one of the following techniques:
根据您的应用程序行为或公司风格，您可以使用以下技术之一：

Colorful Logo （彩色标志）

To preserve the colors of your custom logo, specify the background-image attribute.
要保留自定义徽标的颜色，请指定背景图像属性。

1.Add the image you want to use to the MySolution.Blazor.Server\wwwroot\images folder.
将要使用的图像添加到MySolutions. Blazor.Server\wwwroot\image文件夹。

2.Navigate to the YourSolutionName.Blazor.Server\wwwroot\css\site.css file and specify the image’s name in the header-logo CSS class.
导航到YourSolutionName. Blazor.Server\wwwroot\css\site.css文件并在头标CSS类中指定图像的名称。

css.header-logo {
    background-image: url(../images/CustomLogo.svg);
    width: 180px;
    height: 24px;
    /* ... */
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

Black and White Logo （黑白标志）

If you do not want a colored custom logo and prefer that your current theme makes the logo image monochromatic (black and white), use the mask attribute.
如果您不想要彩色自定义徽标，并且希望当前主题使徽标图像单色（黑白），请使用掩码属性。

Set the background-color property to currentColor to use the current color style. This applies to SVG images only.
如果您不想要彩色自定义徽标，并且希望当前主题使徽标图像单色（黑白），请使用掩码属性。

1.Add the image you want to use to the MySolution.Blazor.Server\wwwroot\images folder.
将要使用的图像添加到MySolutions. Blazor.Server\wwwroot\image文件夹。

2.Navigate to the YourSolutionName.Blazor.Server\wwwroot\css\site.css file and specify the image’s name in the header-logo CSS class.
导航到YourSolutionName. Blazor.Server\wwwroot\css\site.css文件并在头标CSS类中指定图像的名称。

css.header-logo {
    -webkit-mask: url('../images/CustomLogo.svg');
    mask: url('../images/CustomLogo.svg');
    width: 180px;
    height: 24px;
    /* ... */
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

In Windows Forms and ASP.NET Web Forms Applications（在Windows窗体和ASP.NETWeb窗体应用程序中）

To use a custom logo, follow the steps below:
要使用自定义徽标，请按照以下步骤操作：

1.Save your custom logo to the Images folder in the module project (for example, MySolution.Module\Images\CustomLogo.png).
将您的自定义徽标保存到模块项目中的图像文件夹（例如，MySolutions. Module\Images\CustomLogo.png）。

2.In Solution Explorer, click the Show All Files toolbar button. In the Images sub-folder, right-click the image you added and choose Include In Project.
在解决方案资源管理器中，单击显示所有文件工具栏按钮。在图像子文件夹中，右键单击您添加的图像，然后选择包含在项目中。

3.Switch to the Properties window. Set the Build Action option to Embedded Resource.
切换到属性窗口。将构建操作选项设置为嵌入式资源。

4.Rebuild the solution and invoke the Model Editor. Focus the root Application node and click the IModelApplication.Logo property’s ellipsis button. In the invoked Image Picker dialog, choose your logo.
重建解决方案并调用模型编辑器。聚焦根应用程序节点并单击IModelApplication. Logo属性的省略号按钮。在调用的图像选择器对话框中，选择您的徽标。

If you enter the image name manually, omit the file extension.
如果手动输入图像名称，则省略文件扩展名。

Note
In Windows Forms applications, the default logo is specified in the user differences layer (individual user settings). To use the logo specified in the user differences, open the Model.xafml file from the application project, navigate to the Application node, and delete the Logo property value.
在Windows窗体应用程序中，默认徽标在用户差异层（单个用户设置）中指定。要使用用户差异中指定的徽标，请从应用程序项目中打开Model. xafml文件，导航到应用程序节点，并删除徽标属性值。

To ensure changes to the logo in a Windows Forms application, run the application and invoke the About window.
要确保更改Windows窗体应用程序中的徽标，请运行应用程序并调用关于窗口。

Refer to the Application Personalization topic for more information on the About window.
有关关于窗口的更多信息，请参阅应用程序个性化主题。

Run the ASP.NET Web Forms application to ensure that it displays the custom logo.
运行ASP.NETWeb窗体应用程序以确保它显示自定义徽标。

Use a Logo Image File from the Web Application Folder（使用Web应用程序文件夹中的徽标图像文件）

In ASP.NET Web Forms applications, you can use a content file instead of the module’s embedded resource. To use a custom PNG image as a logo in a New Web UI, rename your file to Logo.png and copy it to the Images folder in the application project.
在ASP.NETWeb窗体应用程序中，您可以使用内容文件而不是模块的嵌入资源。要在新Web UI中使用自定义PNG图像作为徽标，请将文件重命名为Logo. png并将其复制到应用程序项目中的图像文件夹中。

Follow the steps below to customize the logo image (use a custom file name, non-PNG format, adjust image size):
按照以下步骤自定义徽标图像（使用自定义文件名，非PNG格式，调整图像大小）：

1.Open the Default.aspx.cs (Default.aspx.vb) file and add the Page_Init method to the Default class to handle the Page.Init event. Subscribe to the BaseXafPage.CustomizeTemplateContent event.
打开Default. aspx.cs（Default.aspx.vb）文件并将Page_Init方法添加到Default类以处理Page.Init事件。订阅BaseXafPage。CustomizeTemplateContent事件。

2.Cast the CustomizeTemplateContentEventArgs.TemplateContent parameter or BaseXafPage.TemplateContent property to the IHeaderImageControlContainer interface to access template content.
将CustomizeTemplateContentEventArgs. TemplateContent参数或BaseXafPage.TemplateContent属性转换为IHeaderImageControlContainer接口以访问模板内容。

3.The template content exposes the ThemedImageControl using the HeaderImageControl property. Use the DefaultThemeImageLocation and ImageName properties of this control to specify the image.
模板内容使用HeaderImageControl属性公开ThemedImageControl。使用此控件的DefaultThemeImageLocation和ImageName属性指定图像。

The following code snippet demonstrates how to use an SVG logo in the New Web UI:
以下代码片段演示了如何在New Web UI中使用SVG徽标：

C# 
public partial class Default : BaseXafPage {
    // ...
    protected void Page_Init() {
        CustomizeTemplateContent += (s, e) => {
            IHeaderImageControlContainer content = TemplateContent as IHeaderImageControlContainer;
            if(content == null) return;
            content.HeaderImageControl.DefaultThemeImageLocation = "Images";
            content.HeaderImageControl.ImageName = "CustomLogo.svg";
            content.HeaderImageControl.Width = Unit.Pixel(30);
            content.HeaderImageControl.Height = Unit.Pixel(30);
        };
    }
}

As a result, the application uses the CustomLogo.svg file from the ASP.NET Web Forms application project’s Images folder (for example, MySolution.Web\Images\CustomLogo.svg).
因此，应用程序使用ASP.NETWeb Forms应用程序项目的Images文件夹（例如MySolutions. Web\Images\CustomLogo.svg）中的CustomLogo.svg文件。

Important
If your application has a logon form, make sure the the Web.config file contains the following lines:
如果您的应用程序具有登录表单，请确保Web. config文件包含以下行：

XML<location path="Images">
    <system.web>
      <authorization>
        <allow users="?"/>
      </authorization>
    </system.web>
  </location>