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

相关推荐

  • pychram 激活码【最新永久激活】

    (pychram 激活码)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html…

    2022年3月31日
  • vue2 renrne 引入tinymce[通俗易懂]

    vue2 renrne 引入tinymce[通俗易懂]tinymce1.引入和原始使用下载地址:https://www.tiny.cloud/get-tiny/self-hosted/语言包地址:https://www.tiny.clou

    2022年7月2日
  • PHP本地web服务器搭建教程(通俗易懂版)

    PHP本地web服务器搭建教程(通俗易懂版)PHP本地服务器搭建教程(通俗易懂)

    2022年7月17日
  • 局域网内实现不同网段ip通信_局域网不同网段互访

    局域网内实现不同网段ip通信_局域网不同网段互访1.使用场景电脑使用网段ip为172.23.0.0/16,设备ip为192.168.1.0/24。将电脑和设备通过交换机连接起来,满足了电脑和设备处于同一局域网不同网段,不能进行网络通信。为了能够进行通信,比如,进行设备的密码重置等,都需要能够通信才能完成。2.参考方案可以在电脑的网络设置里的高级配置中,添加一个和设备处于同一网段的ip。需要注意的是,添加的ip之前要先使用ping命令判断局域网中是否存在相同ip的设备,为了避免ip冲突。有时你会发现ping不通的ip,添加之后也有不通的情况。这

    2022年9月12日
  • Okgo「建议收藏」

    GET请求publicvoidgetString(){OkGo.<String>get(“http://www.qubaobei.com/ios/cf/dish_list.php?stage_id=1&limit=20&page=1”).execute(newStringCallback(){@Override…

    2022年4月12日
  • Java static关键字与static{}语句块

    Java static关键字与static{}语句块目录直通车一、类的加载特性与时机1、 类加载的特性2、类加载的时机二、static的三个常用1、修饰成员变量2、修饰成员方法3、 静态块(static{})一、类的加载特性与时机在进入static之前,先补一下关于类的脑。1、 类加载的特性在JVM的生命周期里,每个类只会被加载一次。类加载的原则:延迟加载,能少加载就少加载,因为虚拟机的空…

    2022年7月17日

发表回复

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

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