Styling a ListView with a Horizontal ItemsPanel and a Header

Styling a ListView with a Horizontal ItemsPanel and a Header

原文 http://eblog.cloudplush.com/2012/05/23/styling-a-listview-with-a-horizontal-itemspanel-and-a-header/

I had to create a specific ListView for my WPF project. A Horizontal alignment of items, with a header column, containing a templated item with a templated checkbox. The final effect looks like this:

Styling a ListView with a Horizontal ItemsPanel and a Header

If we decompose the panel, here are the elements:
Black box: ListView with Template containing a Grid with 2 columns
Red box: The Header column in the ListView template on Grid.Column=”0″
Yellow box: The ListView item panel (ItemsPresenter) located on Grid.Column=”1″ containing an templates ItemsPanelTemplate which is a StackPanel with an Orientation=”Horizontal”.
Green box: The ListView’s ItemTemplate which is a StackPanel with an Orientation=”Vertical” containing a TextBlock with a RotateTransform LayoutTransform and a Templated Checkbox which uses an Ellipse as it’s main shape.

Styling a ListView with a Horizontal ItemsPanel and a Header

<ListView ItemsSource="{Binding OpUnitList}" Grid.Row="1" Name="FilterListBox">
 <ListView.ItemsPanel>
   <ItemsPanelTemplate>
     <StackPanel Orientation="Horizontal" IsItemsHost="True">
     </StackPanel>
   </ItemsPanelTemplate>
 </ListView.ItemsPanel>
 <ListView.ItemTemplate>
   <DataTemplate>
     <StackPanel Orientation="Vertical">
       <TextBlock Text="{Binding OpUnitName}" Width="60" Margin="2">
         <TextBlock.LayoutTransform>
           <RotateTransform Angle="-90"/>
         </TextBlock.LayoutTransform>
       </TextBlock>
       <CheckBox IsChecked="{Binding FilterValue}" Name="RgDot" IsThreeState="True" Style="{StaticResource EllipseCheckBoxStyle}"/>
     </StackPanel>
   </DataTemplate>
 </ListView.ItemTemplate>
 <ListView.Template>
   <ControlTemplate>
     <Grid HorizontalAlignment="Left"> 
       <Grid.ColumnDefinitions>
         <ColumnDefinition Width="Auto"></ColumnDefinition>
         <ColumnDefinition Width="*"></ColumnDefinition>
       </Grid.ColumnDefinitions>
       <StackPanel Orientation="Vertical" Grid.Column="0">
         <TextBlock Margin="2" Height="60">OpUnit Name</TextBlock>
         <TextBlock Margin="2">Filter</TextBlock>
       </StackPanel>
       <ItemsPresenter Grid.Column="1"></ItemsPresenter>
     </Grid>
   </ControlTemplate>
 </ListView.Template>
</ListView>

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/101581.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • JavaScript小白教程6JS高级教程

    JavaScript小白教程6JS高级教程JavaScript对象所有事物都是对象JavaScript提供多个内建对象,比如String、Date、Array等等。对象只是带有属性和方法的特殊数据类型。布尔型可以是一个对象。

    2022年8月4日
    5
  • 开心网教父外挂「建议收藏」

    开心网教父外挂「建议收藏」-实现定时执行任务,打开最小化到托盘,让这个小东西帮你自动打工赚钱吧,哈哈!欢迎使用,如果有好的建议请相互交流一下。后续会加入等多功能。下载29738673@qq.com新增自动火拼和自动追杀令功能!淘宝完整版注:需安装.net2.0运行环境,微软官方下载开心网教父验证码版只要5元,淘宝地址…

    2025年11月7日
    2
  • PetShop4分析随手贴

    PetShop4分析随手贴 PetShop4简析  跟踪顺序为1.Web/Controls/ItemsControl.ascx.cs2./BLL/Item.cs(此处用工厂实现下面的Item)3./IDAL/IItem.cs/DALFactory/DataAccess.cs(工厂)/Web/web.config(path)/SQLServerDAL/Item.cs(IItem的实

    2022年10月10日
    3
  • 数据库设计工具MySQLWorkBench[通俗易懂]

    数据库设计工具MySQLWorkBench[通俗易懂]  该工具为MySQL官方提供地址:http://dev.mysql.com/downloads/workbench/小伙伴们注意按自己的操作系统选择下载版本。·       注意事项:安装后将环境语言配置成简体中文,否则中文乱码工作步骤新建模型后,会进入此页面。 1./2.切换数据库表设计与ER图。3. 创建/管理ER图4. 创建/管理表结构1….

    2022年7月11日
    20
  • java与数据库连接的步骤_java与数据库的连接怎么实现

    java与数据库连接的步骤_java与数据库的连接怎么实现1.加载驱动Class.forname(数据库驱动名);2.建立数据库连接使用DriverManager类的getConnection()静态方法来获取数据库连接对象,其语法格式如下所示:Connectionconn=DriverManager.getConnection(Stringurl,Stringuser,Stringpass);其中url–数据库连接字符串….

    2022年9月16日
    3
  • springmvc上传文件过程(c菜鸟教程)

    UploadControllerpackagecom.jege.spring.mvc;importjava.io.File;importjava.io.FileOutputStream;importjava.io.InputStream;importjavax.servlet.http.HttpServletRequest;importorg.apache.co

    2022年4月11日
    95

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号