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 負責為你重新排列圖像，但是當為某些寬度時，應用窗口右側會有大量空間。 如果圖像居中放置，則看起來更美觀。 接下來，我們將執行這項操作。