Как добавить стиль для каждого списка. Элемент в коде?

Я пытаюсь добавить разные стили для каждого списка. Элемент в моем проекте. Может ли кто-нибудь помочь мне в этом?

`



            foreach (var item in orderList)
            {
                var itm = new ListBoxItem();

                if (item.CustomOrder)
                {
                    itm.Content = item;
                    itm.Style = customOrderStyle;
                    listbox.Items.Add(itm);


                }
                else
                {
                    itm.Content = item;
                    itm.Style = newOrderStyle;
                    listbox.Items.Add(itm);


                }
            }

`

Я знаю, что добавляю элемент списка в список, поэтому содержимое не отображается. Я тоже пробую разные вещи, но до сих пор не знаю, как это решить.

Вы хотите другой стиль для всех 4 элементов пользовательского интерфейса? Или другой стиль, когда item.CustomOrder == true ?

Shai Cohen 20.11.2022 00:15

Лучше, конечно, сделать это на XAML с помощью селектора стиля или шаблона, но я не вижу ошибки в вашем коде. Объясните подробнее, что не так с выводом? Он должен быть другим? Если да, то какой?

EldHasp 20.11.2022 00:17

Вы должны использовать DataTemplate вместо Style. Обзор шаблонов данных

BionicCode 20.11.2022 09:08

@ShaiCohen Я хочу другой стиль для всех элементов. Например, если заказ индивидуальный, он должен быть другого стиля. Но если это нормально, то это должен быть нормальный стиль.

Ali 20.11.2022 13:13

@EldHasp Данные, которые должны отображаться, должны отличаться для пользовательских заказов. Поэтому я использую стиль ListboxItem и привязываю элементы к привязке данных.

Ali 20.11.2022 13:19

@BionicCode Я уже делаю это, но я делаю это в стилях элементов списка, потому что они должны быть разными для каждого заказа.

Ali 20.11.2022 13:21
Как настроить Tailwind CSS с React.js и Next.js?
Как настроить Tailwind CSS с React.js и Next.js?
Tailwind CSS - единственный фреймворк, который, как я убедился, масштабируется в больших командах. Он легко настраивается, адаптируется к любому...
LeetCode запись решения 2536. Увеличение подматриц на единицу
LeetCode запись решения 2536. Увеличение подматриц на единицу
Увеличение подматриц на единицу - LeetCode
Переключение светлых/темных тем
Переключение светлых/темных тем
В Microsoft Training - Guided Project - Build a simple website with web pages, CSS files and JavaScript files, мы объясняем, как CSS можно...
Отношения "многие ко многим" в Laravel с методами присоединения и отсоединения
Отношения "многие ко многим" в Laravel с методами присоединения и отсоединения
Отношения "многие ко многим" в Laravel могут быть немного сложными, но с помощью Eloquent ORM и его моделей мы можем сделать это с легкостью. В этой...
В PHP
В PHP
В большой кодовой базе с множеством различных компонентов классы, функции и константы могут иметь одинаковые имена. Это может привести к путанице и...
Карта дорог Беладжар PHP Laravel
Карта дорог Беладжар PHP Laravel
Laravel - это PHP-фреймворк, разработанный для облегчения разработки веб-приложений. Laravel предоставляет различные функции, упрощающие разработку...
2
6
59
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Пример более типичной для WPF реализации:

namespace Core2022.SO.Ali.ListBoxItemStyleSelector
{
    public class OrderItem
    {
        public bool CustomOrder { get; set; }

        public int Id { get; set; }
    }
}
using System.Collections.ObjectModel;

namespace Core2022.SO.Ali.ListBoxItemStyleSelector
{
    public class OrderViewModel
    {
        public ObservableCollection<OrderItem> Orders { get; } = new ObservableCollection<OrderItem>();

        public OrderViewModel()
        {
            for (int i = 0; i < 10; i++)
            {
                Orders.Add(new OrderItem() { Id = i, CustomOrder = i % 2 == 0 });
            }
        }
    }
}
using System;
using System.Windows;
using System.Windows.Controls;

namespace Core2022.SO.Ali.ListBoxItemStyleSelector
{
    public class CustomOrderStyleSelector : StyleSelector
    {
        public Style? CustomOrderTrue { get; set; }
        public Style? CustomOrderFalse { get; set; }

        public override Style SelectStyle(object item, DependencyObject container)
        {
            if (item is OrderItem order)
            {
                return (order.CustomOrder ? CustomOrderTrue : CustomOrderFalse)
                    ?? throw new NullReferenceException(); ;
            }
            return base.SelectStyle(item, container);
        }
    }
}
<Window x:Class = "Core2022.SO.Ali.ListBoxItemStyleSelector.OrdersWindow"
        xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local = "clr-namespace:Core2022.SO.Ali.ListBoxItemStyleSelector"
        mc:Ignorable = "d"
        Title = "OrdersWindow" Height = "300" Width = "200"
        DataContext = "{DynamicResource vm}">
    <FrameworkElement.Resources>
        <local:OrderViewModel x:Key = "vm"/>
        <local:CustomOrderStyleSelector x:Key = "customOrderStyleSelector">
            <local:CustomOrderStyleSelector.CustomOrderTrue>
                <Style TargetType = "ListBoxItem">
                    <Setter Property = "Foreground" Value = "Green"/>
                    <Setter Property = "FontSize" Value = "15"/>
                </Style>
            </local:CustomOrderStyleSelector.CustomOrderTrue>
            <local:CustomOrderStyleSelector.CustomOrderFalse>
                <Style TargetType = "ListBoxItem">
                    <Setter Property = "Background" Value = "Coral"/>
                    <Setter Property = "HorizontalContentAlignment" Value = "Center"/>
                </Style>
            </local:CustomOrderStyleSelector.CustomOrderFalse>
        </local:CustomOrderStyleSelector>
    </FrameworkElement.Resources>
    <Grid>
        <ListBox ItemsSource = "{Binding Orders}"
                 DisplayMemberPath = "Id"
                 ItemContainerStyleSelector = "{DynamicResource customOrderStyleSelector}"/>
    </Grid>
</Window>

Проверьте ссылку Обзор шаблонов данных и перейдите к разделу «Создание DataTemplate как ресурса» (а также прочитайте следующий раздел). Он показывает, как определить DataTemplate как ресурс и как использовать свойство DataTemplate.DataType. Просто не ставьте шаблону x:Key, чтобы WPF мог автоматически выбрать правильный шаблон на основе типа элемента.

Затем определите модель данных для каждого отдельного выглядящего элемента и прекратите то, что вы делаете: не создавайте ListBoxItem явно (пусть WPF сделает это через DataTemplate). И вместо проверки свойства CustomOrder введите связанные классы моделей, например. DefaultOrder и CustomOrder. Затем добавьте элементы этих типов в общую исходную коллекцию, которую вы привязываете к своему ListBox:

IOrder.cs

interface IOrder
{
  ...
}

DefaultOrder.cs

class DefaultOrder : IOrder
{
  ...
}

CustomOrder.cs

class CustomOrder : IOrder
{
  ...
}

MainWindow.xaml

<Window>
  <ListBox x:Name = "OrdersOverview">
    <ListBox.Resources>
      <DataTemplate DataType = "{x:Type local:DefaultOrder}">
        ...
      </DataTemplate>

      <DataTemplate DataType = "{x:Type local:CustomOrder}">
        ...
      </DataTemplate>
    </ListBox.Resources>
  </ListBox>
</Window>

MainWindow.xaml.cs

prtial class MainWindow : Window
{
  private ObservableCollection<IOrder> Orders { get; }

  public MainWindow()
  {
    InitializeComponent();

    this.Orders = new ObservableCollection<IOrder>();
    this.OrdersOverview.ItemsSource = this.Orders;
  }

  private void CreateDefaultOrder()
  {
    var newOrder = new DefaultOrder();

    // Show the new order in the ListBox
    this.Orders.Add(newOrder);
  }


  private void CreateCustomOrder()
  {
    var newOrder = new CustomOrder();

    // Show the new order in the ListBox
    this.Orders.Add(newOrder);
  }
}

Я не использовал разные заказы, в объекте заказа есть логический раздел, но он будет работать для другого раздела моего проекта, спасибо, что поделились, это очень поможет. :)

Ali 20.11.2022 15:30

Я знаю, что вы используете bool. Я предлагал лучший дизайн, который также обеспечивает расширяемость и сокращает код. Я рекомендую изменить дизайн ваших классов. Обычно лучше ввести новый тип данных для вариаций типа, например. относительно поведения или атрибутов. Использование логических флагов для управления поведением типа обычно является плохой идеей. Если у вас разные типы ордеров, вы должны ввести разные типы данных, а не флаги или перечисления. В любом случае удачи вашему проекту!

BionicCode 20.11.2022 16:17

О, теперь я понимаю. Я обязательно буду создавать свои сущности таким образом в своих новых проектах. Еще раз спасибо, вы меня многому научили.

Ali 20.11.2022 19:13

Другие вопросы по теме