Visual Studio系列教程：使用XAML工具創(chuàng)建用戶界面（三）

Visual Studio是一款完備的工具和服務(wù)，可幫助您為Microsoft平臺(tái)和其他平臺(tái)創(chuàng)建各種各樣的應(yīng)用程序。在本系列教程中將介紹如何為圖像編輯創(chuàng)建基本的用戶界面，有任何建議或提示請(qǐng)?jiān)谙路皆u(píng)論區(qū)留言，我們會(huì)及時(shí)處理。

第 4 部分：修改項(xiàng)容器樣式

項(xiàng)的控件模板包含用于顯示狀態(tài)的視覺對(duì)象，例如選擇、將指針懸停在上方和對(duì)焦。 這些視覺對(duì)象呈現(xiàn)在數(shù)據(jù)模板的頂部或下方。 在此，你將修改控件模板的 Background 和 Margin 屬性，以為 GridView 項(xiàng)提供灰色背景。

修改項(xiàng)容器

1. 在“文檔大綱”中，右鍵單擊 ImageGridView。 在上下文菜單中，選擇編輯其他模板 > 編輯生成的項(xiàng)目容器 (ItemContainerStyle) > 編輯副本...。創(chuàng)建資源對(duì)話框?qū)?huì)打開。

2. 在此對(duì)話框中，將“名稱”（鍵）值更改為 ImageGridView_DefaultItemContainerStyle，然后單擊確定。

   默認(rèn)樣式副本會(huì)添加到 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 默認(rèn)樣式將設(shè)置大量屬性。 你始終應(yīng)該從默認(rèn)樣式的副本開始，同時(shí)僅修改必需屬性。 否則，視覺對(duì)象可能不按預(yù)期方式顯示，因?yàn)槟承傩晕凑_設(shè)置。

   像在上一步中一樣，GridView 的 ItemContainerStyle 屬性會(huì)設(shè)置為新的 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"/>
   

立即運(yùn)行應(yīng)用并查看其外觀。 調(diào)整應(yīng)用窗口大小。 GridView 負(fù)責(zé)為你重新排列圖像，但是當(dāng)為某些寬度時(shí)，應(yīng)用窗口右側(cè)會(huì)有大量空間。 如果圖像居中放置，則看起來(lái)更美觀。 接下來(lái)，我們將執(zhí)行這項(xiàng)操作。