listview binding c#

Agregar userControl a listbox

Question

Estoy trabajando en un pequeño proyecto para un concurso en mi ciudad ... y acabo de golpear una pared de ladrillos. La cuestión es: estoy creando un UserControl en Blend (digamos un lienzo, en el que tengo un reactangle ... un bloque de texto y una imagen). Mi problema es que no puedo agregar esto al listboxitem en WPF por código. Addin el userControl uno por uno en el diseñador parece funcionar ... pero el software va a funcionar con una cantidad variable de elementos para el listbox.

    private void mainPane1_Loaded(object sender, RoutedEventArgs e)
    {
         MessageBox.Show("layout updated");
        questions cq;
        Button btn;

        for (int i = 1; i <= 10; i++)
        {
            btn = new Button();
            btn.Content = "intreb" + i.ToString();
            cq = new questions();
            Canvas.SetZIndex(cq, 17);
            //cq.questionHolder.Text = "intrebare" + i.ToString();
            listaintrebari.Items.Add(cq);
            MessageBox.Show("intrebare" + i.ToString());
            listaintrebari.Items.Add(btn);
            //MessageBox.Show("layout updated");

        }

    }

preguntas es mi UserControl y listaintrebari es el listbox. Intenté agregar algunos botones y funciona muy bien ... pero parece que odia mi userControl.

Estoy esperando sus ideas sobre cómo resolver este problema, y ​​si tiene alguna sugerencia sobre qué otro es mejor usar en mi situación y cómo ... sería genial. ¡Gracias!

Answer 1

La forma correcta de manejar este tipo de situación es tener un modelo de datos con una colección de sus preguntas. A continuación, enlace su ListBox.ItemsSource a la colección y proporcione un DataTemplate que use su UserControl.

Answer 2

Necesita crear una colección (por ejemplo, Lista) de su control y vincular la colección al ListBox.

Answer 3

Ok, aquí hay un código real que podría ayudarte. Usaré varios conceptos de WPF que tal vez desee estudiar más a fondo: DataBinding, DataTemplates, ImageSources, ObservableCollections

Primero necesita crear (si aún no lo tiene) una clase subyacente para sus Preguntas. Lo más simple que puedes obtener sería algo como esto:

 internal class Question
 {
     public ImageSource QuestionImage { get; set; }
     public string QuestionText { get; set; }
 }

Luego, en el código de la pantalla que está detrás (sí, todavía no estamos en MVVM), debe crear una ObservableCollection of Question y ponerlas en una lista con sus preguntas. Tengo algo así:

public ObservableCollection<Question> Questions { get; private set; }
public MainWindow()
{
    InitializeComponent();
    this.DataContext = this;
    Questions = new ObservableCollection<Question>();

    for (int i = 1; i <= 10; i++)
    {
        var newQ = new Question { QuestionText = "intrebarea " + i.ToString(), QuestionImage = _get your image as a ImageSource here_ };
        Questions.Add(newQ);
    }
}

• El this.DataContext = esto es muy importante, de lo contrario su enlace de datos no funcionará.

En su área de diseño, cree una lista y vincúlela a la colección de Preguntas que creó. La forma en que se muestra la pregunta en la lista es impulsada por "ItemTemlpate" como se muestra a continuación.

<ListBox ItemsSource="{Binding Questions}">
  <ListBox.ItemTemplate>
    <StackPanel>
      <Image Source="{Binding QuestionImage}" Height="20" Width="20"/>
      <TextBlock Margin="5" Text="{Binding QuestionText}" />
    </StackPanel>
  </ListBox.ItemTemplate>
</ListBox>

• Puede reemplazar el que tengo allí con su contenido UserControl o evento el UserControl sí mismo, pero asegúrese de preservar los enlaces a los objetos en su clase de pregunta.

Como dije antes, es posible que muchas cosas no tengan sentido en este momento, así que asegúrese de leer sobre ellas: ¿Qué es un enlace de datos? ¿Qué es un DataContext ?, ¿Qué es un ObservableCollection? Además, intente mirar MVVM cuando tenga la oportunidad ...

Por último, si no está seguro de cómo obtener un ImageSource cuando tiene un archivo jpg o png en su proyecto:

public ImageSource GetImagesource(string location)
{
  var res = new BitmapImage()
  res.BeginInit();
  res.UriSource = new Uri("pack://application:,,,/ApplicationName;component/" + location);
  res.EndInit();

  return res;
}

Answer 4

Use la ItemTemplate de ListBox para definir cómo quiere que se vea cada instancia de su objeto, luego vincule ItemsSource de ListBox a una colección de ese tipo.