【问题标题】:How do I style the text wrapping on ListViewItems in a ListView if I've fixed the HeightProperty of all ListViewItems?如果我已修复所有 ListViewItems 的 HeightProperty,如何设置 ListView 中 ListViewItems 上的文本环绕样式?
【发布时间】:2013-07-11 15:25:18
【问题描述】:

这是我的代码(你可以在 VS 中新建一个 WPF 项目并运行它,只需将 MainWindow 的 XAML 中的 Grid 的名称设置为 MainGrid):

namespace WPFTesting
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {

        ObservableCollection<Message> messages = new ObservableCollection<Message>();

        public MainWindow()
        {
            InitializeComponent();
            messages.Add(new Message(DateTime.Now, "This is a test."));
            messages.Add(new Message(DateTime.Now, "This is a multi-line message.\nThis is a multi-line message."));
            messages.Add(new Message(DateTime.Now, "This is a multi-line message.\nThis is a multi-line message."));
            messages.Add(new Message(DateTime.Now, "This is a multi-line message.\nThis is a multi-line message.")); 
            ListView listView = new ListView();
            Style style = new Style();
            style.TargetType = typeof(ListViewItem);
            DataTrigger trigger = new DataTrigger();
            trigger.Binding = new Binding("Text");
            trigger.Value = "This is a test.";
            trigger.Setters.Add(new Setter(ListViewItem.BackgroundProperty, Brushes.Pink));
            style.Triggers.Add(trigger);
            style.Setters.Add(new Setter(ListViewItem.HeightProperty, 20.0));
            style.Setters.Add(new Setter(ListViewItem.MarginProperty, new Thickness(0)));
            style.Setters.Add(new Setter(ListViewItem.BorderThicknessProperty, new Thickness(0)));
            listView.ItemContainerStyle = style;
            GridView gridView = new GridView();
            listView.View = gridView;
            GridViewColumn timeStampColumn = new GridViewColumn();
            timeStampColumn.DisplayMemberBinding = new Binding("Date");
            GridViewColumnHeader timeStampHeader = new GridViewColumnHeader();
            timeStampHeader.Content = "Time";
            timeStampColumn.Header = timeStampHeader;
            gridView.Columns.Add(timeStampColumn);
            GridViewColumn messageColumn = new GridViewColumn();
            messageColumn.DisplayMemberBinding = new Binding("Text");
            GridViewColumnHeader messageHeader = new GridViewColumnHeader();
            messageHeader.Content = "Message";
            messageColumn.Header = messageHeader;
            gridView.Columns.Add(messageColumn);
            Binding binding = new Binding();
            binding.Source = messages;
            listView.SetBinding(ItemsControl.ItemsSourceProperty, binding);
            MainGrid.Children.Add(listView);
        }

        public class Message
        {

            public Message(DateTime aDate, String aText)
            {
                Date = aDate;
                Text = aText;
            }

            public DateTime Date { get; set; }
            public String Text { get; set; }
        }
    }
}

如您所见,由于我将每个 ListViewItem 的高度限制为 20.0.我真的只想显示文本消息的第一行。我怎样才能实现这种行为?

【问题讨论】:

  • Alexandru 您选择在代码隐藏中创建所有这些东西是有原因的吗?理想情况下,您应该在 XAML 中定义您的 ListView 并将其设置为 ItemsSource 等……同时在某个单独的 viewModel 类中定义您的“消息”。这将减轻很多复杂性,并允许您通过定义 ItemTemplate 来自定义每个 ListViewItem 的外观。我将执行我为您解释的内容并发布。
  • @user1631520 - 是的,请在此处查看我的其他问题;我在 cmets 中进行推理:stackoverflow.com/questions/17594349/…
  • 好吧,我发布了一个解决您的问题的答案(尽管我没有添加您的标题列)...您可能只需将其转换为代码隐藏
  • 另外我不想评论其他帖子,所以我会在这里发表评论。您可以将 ListView 保留在代码中,并将我在下面的 DataTemplate 分离到 ResourceDictionary。然后,您所要做的就是通过查找该资源将 ItemTemplate 分配给后面代码中的 ListView。祝你好运。希望我已经很好地回答了你的问题。
  • @user1631520 - 是的,这是一个很棒的解决方案。非常感谢你。我正在考虑以编程方式做到这一点! :D

标签: c# wpf listview styling listviewitem


【解决方案1】:

这是解决您问题的一种方法。很抱歉格式化...我仍然无法让 SOverFlow 的格式化为我正常工作。

  1. 我已经从 XAML 的代码隐藏文件中删除了所有创建代码。我将 Messages 的定义移至它自己的 ViewModel 类 (MSGviewModel.cs)

  2. 在主窗口的 XAML 中,我定义了 ListView 并设置了一个简单的 ItemTemplate。这个 ItemTemplate 将显示日期和消息文本。用于显示消息文本的 TextBLock 的最大高度限制为 20。

  3. 我为该 TextBlock 定义了一个工具提示。该工具提示绑定到消息的完整文本属性。这样您就可以将鼠标悬停在单行消息上并显示全文。

主窗口 XAML:

<Window x:Class="FixListView.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid Name="MainGrid">
        <ListView ItemsSource="{Binding Messages}">
          <ListView.ItemTemplate>        
            <DataTemplate>          
              <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Text}" MaxHeight="20">
                  <TextBlock.ToolTip>
                    <TextBlock Text="{Binding Text}"/>
                  </TextBlock.ToolTip>
                </TextBlock>
                <TextBlock Text=" -- "/>
                <TextBlock Text="{Binding Date}"/>
              </StackPanel>
            </DataTemplate>
          </ListView.ItemTemplate>
        </ListView>
      </Grid>
    </Window>

主窗口 - 隐藏代码:

public partial class MainWindow : Window
{
  public MainWindow()
  {
    this.DataContext = new MSGviewModel();
    InitializeComponent();
  }
}

VIEWMODEL 类:

public class MSGviewModel
{
private ObservableCollection<Message> messages = new ObservableCollection<Message>();
public ObservableCollection<Message> Messages
{
  get { return messages; }
}


public MSGviewModel()
{
  messages.Add(new Message(DateTime.Now, "This is a test."));
  messages.Add(new Message(DateTime.Now, "This is a multi-line message.\nThis is a multi-line message."));
  messages.Add(new Message(DateTime.Now, "This is a multi-line message.\nThis is a multi-line message."));
  messages.Add(new Message(DateTime.Now, "This is a multi-line message.\nThis is a multi-line message.")); 
}
}

public class Message
{

  public Message(DateTime aDate, String aText)
  {
    Date = aDate;
    Text = aText;
  }

  public DateTime Date { get; set; }
  public String Text { get; set; }
}
}

【讨论】:

    【解决方案2】:

    这是在保持当前代码的同时执行此操作的一种方法:

    namespace WPFTesting
    {
        /// <summary>
        /// Interaction logic for MainWindow.xaml
        /// </summary>
        public partial class MainWindow : Window
        {
    
            ObservableCollection<Message> messages = new ObservableCollection<Message>();
    
            public MainWindow()
            {
                InitializeComponent();
                messages.Add(new Message(DateTime.Now, "This is a test."));
                messages.Add(new Message(DateTime.Now, "This is a multi-line message.\nThis is a multi-line message."));
                messages.Add(new Message(DateTime.Now, "This is a multi-line message.\nThis is a multi-line message."));
                messages.Add(new Message(DateTime.Now, "This is a multi-line message.\nThis is a multi-line message.")); 
                ListView listView = new ListView();
                Style style = new Style();
                style.TargetType = typeof(ListViewItem);
                DataTrigger trigger = new DataTrigger();
                trigger.Binding = new Binding("Text");
                trigger.Value = "This is a test.";
                trigger.Setters.Add(new Setter(ListViewItem.BackgroundProperty, Brushes.Pink));
                style.Triggers.Add(trigger);
                style.Setters.Add(new Setter(ListViewItem.HeightProperty, 20.0));
                style.Setters.Add(new Setter(ListViewItem.MarginProperty, new Thickness(0)));
                style.Setters.Add(new Setter(ListViewItem.BorderThicknessProperty, new Thickness(0)));
                listView.ItemContainerStyle = style;
                GridView gridView = new GridView();
                listView.View = gridView;
                GridViewColumn timeStampColumn = new GridViewColumn();
                timeStampColumn.DisplayMemberBinding = new Binding("Date");
                GridViewColumnHeader timeStampHeader = new GridViewColumnHeader();
                timeStampHeader.Content = "Time";
                timeStampColumn.Header = timeStampHeader;
                gridView.Columns.Add(timeStampColumn);
                GridViewColumn messageColumn = CreateGridViewColumn("Message", "Text");
                gridView.Columns.Add(messageColumn);
                Binding binding = new Binding();
                binding.Source = messages;
                listView.SetBinding(ItemsControl.ItemsSourceProperty, binding);
                MainGrid.Children.Add(listView);
            }
    
            private static GridViewColumn CreateGridViewColumn(string header, string bindingPath)
            {
                GridViewColumn gridViewColumn = new GridViewColumn();
                gridViewColumn.Header = new GridViewColumnHeader() { Content = header };
                string xaml = @"
                <DataTemplate xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation"" xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml""> 
                  <StackPanel Orientation=""Horizontal"">
                    <TextBlock Text=""{Binding Text}"" MaxHeight=""20"">
                      <TextBlock.ToolTip>
                        <TextBlock Text=""{Binding Text}""/>
                      </TextBlock.ToolTip>
                    </TextBlock>
                    <TextBlock Text="" -- ""/>
                    <TextBlock Text=""{Binding Date}""/>
                  </StackPanel>
                </DataTemplate>";
                StringReader stringReader = new StringReader(xaml);
                XmlReader xmlReader = XmlReader.Create(stringReader);
                gridViewColumn.CellTemplate = XamlReader.Load(xmlReader) as DataTemplate;
    
                return gridViewColumn;
            }
    
            public class Message
            {
    
                public Message(DateTime aDate, String aText)
                {
                    Date = aDate;
                    Text = aText;
                }
    
                public DateTime Date { get; set; }
                public String Text { get; set; }
            }
        }
    }
    

    【讨论】:

      猜你喜欢
      • 2010-09-10
      • 1970-01-01
      • 2014-09-29
      • 1970-01-01
      • 2015-04-19
      • 1970-01-01
      • 2012-04-17
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多