Visual Studio系列教程：使用XAML工具创建用户界面（三）

本教程主要介绍Microsoft旗下Visual Studio关于利用XAML工具创建用户界面的相关知识 。

Visual Studio最新版本免费下载试用

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

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

修改项容器

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 负责为你重新排列图像，但是当为某些宽度时，应用窗口右侧会有大量空间。 如果图像居中放置，则看起来更美观。 接下来，我们将执行这项操作。

当然，如果你想要尝试一下其他效果，可以将 Background和Margin 属性设置为不同的值，并查看一下效果如何。

标签：IDE集成开发环境 XML代码管控工具IDE