zoukankan      html  css  js  c++  java
  • WPF Snippet Tutorial Aligning ListView Items

    WPF is powerful. So powerful in fact, that sometimes it's hard to find styles and settings to make it do what you want. Aligning ListView items was one such example for me. This snippet tutorial will show you how to use a style to vertically and horizontally align the contents of ListView cells.

    I came across the need to vertically align the contents of my ListView when I had columns that contained elements that were different heights. By default, the ListView vertically aligns all of the content to the middle. I wanted them aligned to the top.

    Here's a quick application I threw together to demonstrate what I'm talking about. It has a ListView bound to a collection of VideoGame objects. Each video game contains the title and an image of the box art. First, the object and some code to populate it:

    public class VideoGame
    {
    public string Name
    {
    get;
    set;
    }
    public string Image
    {
    get;
    set;
    }
    }

    ...

    public partial class Window1 : Window
    {
    private ObservableCollection<VideoGame> _games =
    new ObservableCollection<VideoGame>();
    public ObservableCollection<VideoGame> Games
    {
    get { return _games; }
    }
    public Window1()
    {
        _games.Add(new VideoGame() {
          Name = "Crysis",
    Image = @"C:\Crysis_Boxart_Final.jpg" });
        _games.Add(new VideoGame() {
          Name = "Unreal Tournament 3",
    Image = @"C:\Gearsofwar.JPG" });
        _games.Add(new VideoGame() {
          Name = "Gears of War",
    Image = @"C:\Crysis_Boxart_Final.jpg" });
        InitializeComponent();
    }
    }

    And here's the XAML that displays this information:

    <Window x:Class="VerticalAlignSnippet.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="512" Width="512" Name="myWindow">
    <Grid>
    <ListView Name="myListView"
    ItemsSource="{Binding ElementName=myWindow, Path=Games}">
    <ListView.View>
    <GridView>
    <GridViewColumn Header="Title" DisplayMemberBinding="{Binding Name}" />
    <GridViewColumn Header="Image">
    <GridViewColumn.CellTemplate>
    <DataTemplate>
    <Grid>
    <Image Source="{Binding Image}" />
    </Grid>
    </DataTemplate>
    </GridViewColumn.CellTemplate>
    </GridViewColumn>
    </GridView>
    </ListView.View>
    </ListView>
    </Grid>
    </Window>

    When you launch this application, you'll get something that looks like this:

    Unaligned Items Screenshot

    As you can see, each title is centered vertically to the image. I want to align it to the top. Here's the style needed to accomplish this:

    <ListView.ItemContainerStyle>
    <Style TargetType="ListViewItem">
    <Setter Property="VerticalContentAlignment" Value="Top" />
    </Style>
    </ListView.ItemContainerStyle>

    Now if we slap that into our ListView, we'll get exactly what we're looking for:

    <Window x:Class="VerticalAlignSnippet.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="512" Width="512" Name="myWindow">
    <Grid>
    <ListView Name="myListView"
    ItemsSource="{Binding ElementName=myWindow, Path=Games}">
    <ListView.ItemContainerStyle>
    <Style TargetType="ListViewItem">
    <Setter Property="VerticalContentAlignment" Value="Top" />
    </Style>
    </ListView.ItemContainerStyle>
    <ListView.View>
    <GridView>
    <GridViewColumn Header="Title" DisplayMemberBinding="{Binding Name}" />
    <GridViewColumn Header="Image">
    <GridViewColumn.CellTemplate>
    <DataTemplate>
    <Grid>
    <Image Source="{Binding Image}" />
    </Grid>
    </DataTemplate>
    </GridViewColumn.CellTemplate>
    </GridViewColumn>
    </GridView>
    </ListView.View>
    </ListView>
    </Grid>
    </Window>

    Aligned Top Items Screenshot

    We can also use this style to horizontally align the content. Let's say I wanted to align all of the titles to the right as well as the top. All we'd have to do is change our style to this:

    <ListView.ItemContainerStyle>
    <Style TargetType="ListViewItem">
    <Setter Property="VerticalContentAlignment" Value="Top" />
    <Setter Property="HorizontalContentAlignment" Value="Right" />
    </Style>
    </ListView.ItemContainerStyle>

    Aligned Top Right Items Screenshot

  • 相关阅读:
    参考阿里规范,优秀的 Java 项目代码该如何分层?
    SpringBoot 中实现跨域的5种方式
    美团一面:你既然写过Mybatis插件,说说它底层是怎么加载一个自定义插件的
    陌陌面试官:说说Spring AOP 的原理、SpringMVC 的处理过程?
    这16条规范代码,同事,拍桌子 大喊 “666”
    微服务很简单,用一张架构图了解一下
    K8S部署Metrics-Server服务
    cookie
    html标签默认样式整理
    html 语义化标签
  • 原文地址:https://www.cnblogs.com/umlchina/p/1809830.html
Copyright © 2011-2022 走看看