zoukankan      html  css  js  c++  java
  • [WPF系列]-数据邦定之DataTemplate 对 ItemsControl 进行样式和模板处理

    引言

    即使 ItemsControl 不是 DataTemplate 所用于的唯一控件类型,将 ItemsControl 绑定到集合仍然很常见。 在 DataTemplate 中有哪些内容一节中,我们讨论了您的 DataTemplate 定义应当仅与数据表示相关。

    为了明确何时不适合使用 DataTemplate,有必要了解 ItemsControl 提供的不同样式和模板属性。

    实例演示

    下面的示例旨在演示这些属性中每一个属性的功能。 本示例中的 ItemsControl 绑定到与前面示例中的 Tasks 集合。

    为便于演示,本示例中的样式和模板都进行了内联声明。

    <ItemsControl Margin="10"
                  ItemsSource="{Binding Source={StaticResource myTodoList}}">
      <!--The ItemsControl has no default visual appearance.
          Use the Template property to specify a ControlTemplate to define
          the appearance of an ItemsControl. The ItemsPresenter uses the specified
          ItemsPanelTemplate (see below) to layout the items. If an
          ItemsPanelTemplate is not specified, the default is used. (For ItemsControl,
          the default is an ItemsPanelTemplate that specifies a StackPanel.-->
      <ItemsControl.Template>
        <ControlTemplate TargetType="ItemsControl">
          <Border BorderBrush="Aqua" BorderThickness="1" CornerRadius="15">
            <ItemsPresenter/>
          </Border>
        </ControlTemplate>
      </ItemsControl.Template>
      <!--Use the ItemsPanel property to specify an ItemsPanelTemplate
          that defines the panel that is used to hold the generated items.
          In other words, use this property if you want to affect
          how the items are laid out.-->
      <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
          <WrapPanel />
        </ItemsPanelTemplate>
      </ItemsControl.ItemsPanel>
      <!--Use the ItemTemplate to set a DataTemplate to define
          the visualization of the data objects. This DataTemplate
          specifies that each data object appears with the Proriity
          and TaskName on top of a silver ellipse.-->
      <ItemsControl.ItemTemplate>
        <DataTemplate>
          <DataTemplate.Resources>
            <Style TargetType="TextBlock">
              <Setter Property="FontSize" Value="18"/>
              <Setter Property="HorizontalAlignment" Value="Center"/>
            </Style>
          </DataTemplate.Resources>
          <Grid>
            <Ellipse Fill="Silver"/>
            <StackPanel>
              <TextBlock Margin="3,3,3,0"
                         Text="{Binding Path=Priority}"/>
              <TextBlock Margin="3,0,3,7"
                         Text="{Binding Path=TaskName}"/>
            </StackPanel>
          </Grid>
        </DataTemplate>
      </ItemsControl.ItemTemplate>
      <!--Use the ItemContainerStyle property to specify the appearance
          of the element that contains the data. This ItemContainerStyle
          gives each item container a margin and a width. There is also
          a trigger that sets a tooltip that shows the description of
          the data object when the mouse hovers over the item container.-->
      <ItemsControl.ItemContainerStyle>
        <Style>
          <Setter Property="Control.Width" Value="100"/>
          <Setter Property="Control.Margin" Value="5"/>
          <Style.Triggers>
            <Trigger Property="Control.IsMouseOver" Value="True">
              <Setter Property="Control.ToolTip"
                      Value="{Binding RelativeSource={x:Static RelativeSource.Self},
                              Path=Content.Description}"/>
            </Trigger>
          </Style.Triggers>
        </Style>
      </ItemsControl.ItemContainerStyle>
    </ItemsControl>

    效果如图示:

    ItemsControl 示例屏幕快照

    请注意,您可以使用 ItemTemplateSelector,而不是 ItemTemplate。同样,可以选择使用 ItemContainerStyleSelector,而不是 ItemContainerStyle

    这里未显示 ItemsControl 的其他两个与样式相关的属性,它们是 GroupStyleGroupStyleSelector

    参考

    http://msdn.microsoft.com/zh-cn/library/ms742521(v=vs.110).aspx

  • 相关阅读:
    页面显示时间
    如何用JavaScript实现获取验证码的效果
    CSS中style用法详解
    html 样式之style属性的使用
    使用JavaScript实现弹出层效果的简单实例
    [转]创建一个JavaScript弹出DIV窗口层的效果
    eclipse环境下如何配置tomcat,并且把项目部署到Tomcat服务器上
    关于eclipse部署项目后,在tomcat中的webapps文件夹下没有项目
    jsp页面提示“Multiple annotations found at this line:
    Maven3路程(三)用Maven创建第一个web项目(1)
  • 原文地址:https://www.cnblogs.com/HQFZ/p/4169656.html
Copyright © 2011-2022 走看看