How can I use the Two-Way Binding in a ListBox?

Question

I have a ListBox including an ItemTemplate with a StackPanel.I assign a generic List to my Listbox itemsource.I want to change that stackpanel's visibility. (Change it's visibility to collapsed when i click mouseleftbutton "closeAll" and close all stackPanel items in Listbox).I want to do that with stackpanel visibility={Binding Acikmi}. I have PastAndOr Class and its property "Acikmi" and its first value is "visible". How Can I Change "Acikmi" value from "visible" to "collapsed" with using binding two way mode?

public static List<PastAndOr> GetPastOr()
{
    string connStr = "server=localhost;user=root;database=carbovisor;port=3306;password=12345";
    MySqlConnection conn = new MySqlConnection(connStr);
    conn.Open();
    MySqlCommand cmd = new MySqlCommand("SELECT s.sarjno as sarjno,s.createdate as createdate,m.adi as madi,mp.parcakodu as parcakodu,mp.parcaadi as parcaadi,mp.malzeme as malzeme,mr.kodu as musterikodu,mr.adi as musteriadi FROM  t_sepetler s JOIN  t_mamul m ON m.adi=@receteadi OR m.id=s.mamulid LEFT JOIN t_musteriparca mp ON mp.firmaid=s.musteriid LEFT JOIN t_musteriler mr ON mr.id=mp.firmaid  WHERE s.createdate >= @tarih1 AND s.createdate <= @tarih2  GROUP BY sarjno,madi  ORDER BY createdate DESC", conn);
    cmd.Parameters.AddWithValue("@tarih1", PastProcess.tarih1);
    cmd.Parameters.AddWithValue("@tarih2", PastProcess.tarih2);
    cmd.Parameters.AddWithValue("@receteadi", PastProcess.receteadi);
    cmd.Parameters.AddWithValue("@sarjno", PastProcess.sarjno);

    MySqlDataReader dataReader = cmd.ExecuteReader();
    List<PastAndOr> or = new List<PastAndOr>();
    PastAndOr kayit2;
    int IDSayac = 1;
    while (dataReader.Read())
    {
        kayit2 = new PastAndOr();

        kayit2.Adi = dataReader["madi"].ToString();
        kayit2.SarjNo = dataReader["sarjno"].ToString();
        kayit2.CreateDate = dataReader["createdate"].ToString();
        kayit2.ParcaKodu = dataReader["parcakodu"].ToString();
        kayit2.ParcaKoduAdi = dataReader["parcakodu"].ToString() + " - " + dataReader["parcaadi"].ToString();
        kayit2.Malzeme = dataReader["malzeme"].ToString();
        kayit2.MusteriKodu = dataReader["musterikodu"].ToString();
        kayit2.MusteriKoduAdi = dataReader["musterikodu"].ToString() + " - " + dataReader["musteriadi"].ToString();

        kayit2.Acikmi = Visibility.Visible;

        kayit2.ID = IDSayac;

        or.Add(kayit2);
        IDSayac++;
    }

    conn.Close();

    return or;
}

private void closeAll_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    // what goes here?
}


public class PastAndOr
{
    public Visibility Acikmi { get; set; }
    public int ID { get; set; }
    public string Adi { get; set; }
    public string SarjNo { get; set; }
    public string CreateDate { get; set; }
    public string ParcaKodu { get; set; }
    public string ParcaKoduAdi { get; set; }
    public string Malzeme { get; set; }
    public string MusteriKodu { get; set; }
    public string MusteriKoduAdi { get; set; }
}

XAML CODE

<ListBox x:Name="listBoxEditPast"  SelectionMode="Single"  Margin="0" Background="#272B34" ScrollViewer.VerticalScrollBarVisibility="Visible">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition/>
                                    <RowDefinition/>
                                </Grid.RowDefinitions>
                                <Border Grid.Row="0"   BorderThickness="4,0,0,0" Margin="2,0,0,0" Height="29"  Background="#2E323B" Width="1050" BorderBrush="#1373A9" MouseLeftButtonDown="Border_MouseLeftButtonDown">
                                    <DockPanel Name="dockPanelPast" Margin="0,4,0,0">
                                        <Image Name="imgArrow" Source="images/down-arrow.png" HorizontalAlignment="Left" Width="20" Height="18"/>
                                        <TextBlock Text="{Binding CreateDate}" Name="txtTarih" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="16"/>
                                        <TextBlock Text="{Binding SarjNo}" Name="txtSarjNo" Foreground="#FF9CA518" HorizontalAlignment="Stretch" VerticalAlignment="Center" FontSize="16" Margin="50,0,0,0" Width="90"/>
                                        <TextBlock Text="{Binding Adi}" Name="txtReceteAdi" Foreground="#FF26A053"  VerticalAlignment="Center" FontSize="16" Margin="40,0,0,0" HorizontalAlignment="Stretch"/>
                                        <Button Content="Detaylar" Style="{StaticResource BlueButton}" HorizontalAlignment="Right" VerticalAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" DockPanel.Dock="Right"/>
                                    </DockPanel>
                                </Border>
                                <StackPanel Grid.Row="1"  Name="stackPanelDetay" Tag="{Binding ID}" Visibility="{Binding Acikmi,Mode=TwoWay}">
                                    <DockPanel>
                                        <TextBlock Text="Sipariş No" Foreground="#D9480F" VerticalAlignment="Center" />
                                        <TextBlock Text="Parça" Foreground="#AF0FD9" VerticalAlignment="Center" Margin="50,0,0,0" Width="200" />
                                        <TextBlock Text="Malzeme" Foreground="White" VerticalAlignment="Center" Margin="150,0,0,0" Width="90"/>
                                        <TextBlock Text="Müşteri" Foreground="#AF0FD9" VerticalAlignment="Center" Margin="70,0,0,0" />
                                    </DockPanel>
                                    <DockPanel>
                                        <TextBlock Text="{Binding ID}" Foreground="White"  VerticalAlignment="Center" Width="100"/>
                                        <TextBlock Text="{Binding ParcaKoduAdi}" Foreground="White"  VerticalAlignment="Center" Margin="5,0,0,0" Width="200"  />
                                        <TextBlock Text="{Binding Malzeme}" Foreground="White"  VerticalAlignment="Center" Margin="152,0,0,0" Width="90" />
                                        <TextBlock Text="{Binding MusteriKoduAdi}" Foreground="White"  VerticalAlignment="Center" Margin="70,0,0,0" />
                                    </DockPanel>
                                </StackPanel>
                            </Grid>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>

Welcome to StackOverflow! Please make sure you have read the [How to Ask](https://stackoverflow.com/help/asking) help pages first. We'd like to see a [mcve] (pay close attention to that **minimal** word). I also modified your question's title because it shouldn't contain forced tags. — dymanoid, Jul 31 '17 at 14:51
The Binding should not be TwoWay. Instead, your button action should directly set the `Acikmi` property of all `PastAndOr` items that should be invisible. The class should therefore implement the INotifyPropertyChanged interface and fire the PropertyChanged event when the property value changes. — Clemens, Jul 31 '17 at 14:59

Ramankingdom · Accepted Answer · 2017-07-31T18:47:58.020

Your class should implement INoyifyPropertyChanged interface. Read about WPF INoyifyPropertyChanged for more details.

 public class PastAndOr:INotifyPropertyChanged
{
    public Visibility _acikmi;
    public Visibility Acikmi
    {
        get {return _acikmi; }
        set
        {
            _acikmi = value;
            OnPropertyChaged(nameof(Acikmi));
        }
    }
    public int ID { get; set; }
    public string Adi { get; set; }
    public string SarjNo { get; set; }
    public string CreateDate { get; set; }
    public string ParcaKodu { get; set; }
    public string ParcaKoduAdi { get; set; }
    public string Malzeme { get; set; }
    public string MusteriKodu { get; set; }
    public string MusteriKoduAdi { get; set; }

    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChaged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

And XAML be like

<StackPanel Grid.Row="1"  Name="stackPanelDetay" Tag="{Binding ID}" Visibility="{Binding Acikmi}">

Removed `Mode=TwoWay` and `UpdateSourceTrigger=PropertyChanged`. Both didn't make any sense. Besides that, "You class should be like this" does not explain anything. You may want to add some explanatory details to your answer. — Clemens, Jul 31 '17 at 18:21
Thanks Ramankingdom and Clemens for your answers.But how can i set Acikmi property in the "closeAll_MouseLeftButtonDown" method,what can i do for it?I want to set the "Acikmi" property to visibility.collapsed. — Barsblue, Aug 01 '17 at 06:20

score 0 · Answer 2 · answered Aug 01 '17 at 07:44

To best do this in MVVM you would use an ICommand. A good example of an ICommand implementation can be found here

Basically ICommands can be bound to the ButtonBase.Command property however in your case you would like to link it to the MouseLeftButtonDown event. Interactivity triggers exist precisely for this purpose.

Add the Expressions Blend SDK to your project via NuGet. Add the interactivity xmlns to your namespaces:

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"

And finally link to your ICommand property using a trigger and an action, like this:

<Border>
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="MouseLeftButtonDown">
                <i:InvokeCommandAction Command="{Binding Path=MyCommand}"></i:InvokeCommandAction>
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </Border>

How can I use the Two-Way Binding in a ListBox?

2 Answers2