Visual Studio是一款完备的工具和服务，可帮助您为Microsoft平台和其他平台创建各种各样的应用程序。在本系列教程中将介绍如何为图像编辑创建基本的用户界面，有任何建议或提示请在下方评论区留言，我们会及时处理。

第 4 部分：修改项容器样式

项的控件模板包含用于显示状态的视觉对象，例如选择、将指针悬停在上方和对焦。 这些视觉对象呈现在数据模板的顶部或下方。 在此，你将修改控件模板的 Background 和 Margin 属性，以为 GridView 项提供灰色背景。

修改项容器

1. 在“文档大纲”中，右键单击 ImageGridView。 在上下文菜单中，选择编辑其他模板 > 编辑生成的项目容器 (ItemContainerStyle) > 编辑副本...。创建资源对话框将会打开。

2. 在此对话框中，将“名称”（键）值更改为 ImageGridView_DefaultItemContainerStyle，然后单击确定。

   默认样式副本会添加到 XAML 的 Page.Resources 部分中。

   <Style x:Key="ImageGridView_DefaultItemContainerStyle" TargetType="GridViewItem">
       <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
       <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
       <Setter Property="Background" Value="{ThemeResource GridViewItemBackground}"/>
       <Setter Property="Foreground" Value="{ThemeResource GridViewItemForeground}"/>
       <Setter Property="TabNavigation" Value="Local"/>
       <Setter Property="IsHoldingEnabled" Value="True"/>
       <Setter Property="HorizontalContentAlignment" Value="Center"/>
       <Setter Property="VerticalContentAlignment" Value="Center"/>
       <Setter Property="Margin" Value="0,0,4,4"/>
       <Setter Property="MinWidth" Value="{ThemeResource GridViewItemMinWidth}"/>
       <Setter Property="MinHeight" Value="{ThemeResource GridViewItemMinHeight}"/>
       <Setter Property="AllowDrop" Value="False"/>
       <Setter Property="UseSystemFocusVisuals" Value="True"/>
       <Setter Property="FocusVisualMargin" Value="-2"/>
       <Setter Property="FocusVisualPrimaryBrush" Value="{ThemeResource GridViewItemFocusVisualPrimaryBrush}"/>
       <Setter Property="FocusVisualPrimaryThickness" Value="2"/>
       <Setter Property="FocusVisualSecondaryBrush" Value="{ThemeResource GridViewItemFocusVisualSecondaryBrush}"/>
       <Setter Property="FocusVisualSecondaryThickness" Value="1"/>
       <Setter Property="Template">
           <Setter.Value>
               <ControlTemplate TargetType="GridViewItem">
               <!-- XAML removed for clarity
                   <ListViewItemPresenter ... />
               -->   
               </ControlTemplate>
           </Setter.Value>
       </Setter>
   </Style>
   
   

   GridViewItem 默认样式将设置大量属性。 你始终应该从默认样式的副本开始，同时仅修改必需属性。 否则，视觉对象可能不按预期方式显示，因为某些属性未正确设置。

   像在上一步中一样，GridView 的 ItemContainerStyle 属性会设置为新的 Style 资源。

   <GridView x:Name="ImageGridView"
                 Margin="0,0,0,8"
                 RelativePanel.AlignLeftWithPanel="True"
                 RelativePanel.AlignRightWithPanel="True"
                 RelativePanel.Below="TitleTextBlock"
                 ItemTemplate="{StaticResource ImageGridView_DefaultItemTemplate}"
                 ItemContainerStyle="{StaticResource ImageGridView_DefaultItemContainerStyle}"/>
   

3. 将 Background 属性的值更改为 Gray。

   之前

   <Setter Property="Background" Value="{ThemeResource GridViewItemBackground}"/>
   

   之后

   <Setter Property="Background" Value="Gray"/>
   

4. 将 Margin 属性的值更改为 8。

   之前

   <Setter Property="Margin" Value="0,0,4,4"/> 
   

   之后

   <Setter Property="Margin" Value="8"/>
   

立即运行应用并查看其外观。 调整应用窗口大小。 GridView 负责为你重新排列图像，但是当为某些宽度时，应用窗口右侧会有大量空间。 如果图像居中放置，则看起来更美观。 接下来，我们将执行这项操作。