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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • stm32H747_STM32H743的cache

    stm32H747_STM32H743的cache一、H.264的来源和特点H.264是国际标准化组织(ISO)和国际电信联盟(ITU)共同提出的继MPEG4之后的新一代数字视频压缩格式,它即保留了以往压缩技术的优点和精华又具有其它压缩技术无法比拟的许多优点。 1.低码流和MPEG2和MPEG4ASP等压缩技术相比,在同等图像质量下,采用H.264技术压缩后的数据量只有MPEG2的1/8,MPEG4的1/3。 2.高

    2022年9月19日
    0
  • Python爬虫100例教程导航帖(已完结)

    Python爬虫100例教程导航帖(已完结)Python爬虫入门教程导航,目标100篇。

    2022年9月19日
    0
  • Python处理xml文件_文件格式怎么转换

    Python处理xml文件_文件格式怎么转换由于项目组中原来的文件使用的XML格式作为配置,扩展性很好,但是编辑与阅读不是很直观,特别一些规则的二维表,所以为了方便阅读与编辑,花了一些时间写了一个Python脚本,以实现将XML文件转为Excel文件。这里支持XML文件转为一个Sheet或者多个Sheet:如果第二层所有标签都相同则会转为一个Sheet,所有第二层的标签都会作为行数据如果第二层的标签有多种,则会把第二层的不同标签作为…

    2022年8月22日
    3
  • Sql Prompt 10激活成功教程[通俗易懂]

    Sql Prompt 10激活成功教程[通俗易懂]1.下载安装文件待审核…2.激活成功教程修改hosts文件(如若跳过此步骤,虽然可以激活成功教程成功,但是重启电脑之后,又得重新激活成功教程)首先系统HOSTS文件添加以下屏蔽网络HOSTS路径:C:\Windows\System32\drivers\etc127.0.0.1red-gate.com127.0.0.1www.red-gate.com127.0.0.1licensing.red-gate.com127.0.0.1productlogin.red-ga…

    2022年7月26日
    103
  • java中%c%n是什么意思_在编码时如何使用\r与\n,两者的区别

    java中%c%n是什么意思_在编码时如何使用\r与\n,两者的区别\r与\n到底有何区别,编码的时候又应该如何使用,我们下面来了解一下。区别:\r:全称:carriagereturn(carriage是“字车”的意思,打印机上的一个部件)简称:return缩写:rASCII码:13作用:把光标移动到当前行的最左边\n:全称:newline别名:linefeed缩写:nASCII码:10作用:把光标向下移动一行不同操作系统怎样表示“回车+换行”(即一行的结…

    2022年7月8日
    26
  • Pytest(10)assert断言[通俗易懂]

    Pytest(10)assert断言[通俗易懂]前言断言是写自动化测试基本最重要的一步,一个用例没有断言,就失去了自动化测试的意义了。什么是断言呢?简单来讲就是实际结果和期望结果去对比,符合预期那就测试pass,不符合预期那就测试failed

    2022年7月30日
    3

发表回复

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

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