Problem in listbox in windows store app

Question

Hi,

We are getting problem in implementing listbox in windows store app. We have listbox and one of the column is textbox inside it. Problem is,

1.whenever text changed in textbox event is fired, and now we also want to know which row of listbox has fired this event.

2. UI issue. we are getting blue thick border whenever we click on any row inside listbox which we want to remove.

code is :

 <ListBox Name="ListView1" Grid.Row="2" Grid.Column="1" 
                          ItemsSource="{Binding Images}" 
                          TabNavigation="Local"
                         Padding="-10 0 -10 -10"
                         Margin="5 0 0 0"
                         SelectionChanged="ListView1_SelectionChanged" >
                    <ListBox.ItemTemplate>

                        <DataTemplate>

                            <Grid Background="White">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="60"></RowDefinition>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="150"></ColumnDefinition>
                                    <ColumnDefinition Width="150"></ColumnDefinition>
                                    <ColumnDefinition Width="150"></ColumnDefinition>
                                    <ColumnDefinition Width="150"></ColumnDefinition>
                                </Grid.ColumnDefinitions>

                                <Rectangle Grid.Column="0" Style="{StaticResource rectangleStyle}" Margin="0 -20 0 0"/>
                                <TextBlock Grid.Column="0" Text="{Binding ImagePath,Mode=TwoWay}" Style="{StaticResource textBlockStyle}" />

                                <Rectangle Grid.Column="1" Style="{StaticResource rectangleStyle}" Margin="0 -20 0 0"/>
                                <TextBlock Grid.Column="1"  Text="{Binding Ordinal,Mode=TwoWay}" Style="{StaticResource textBlockStyle}"/>

                                <Rectangle  Grid.Column="2" Style="{StaticResource rectangleStyle}" Margin="0 -20 0 0"/>
                                <TextBox Grid.Column="2" Text="{Binding Width,Mode=TwoWay}" Style="{StaticResource textBoxStyle}" TextChanged="text_TextChanged" Height="Auto" />

                                <Rectangle Grid.Column="3" Style="{StaticResource rectangleStyle}" Margin="0 -20 0 0"/>
                                <TextBox Grid.Column="3" Text="{Binding Height,Mode=TwoWay}" Style="{StaticResource textBoxStyle}" TextChanged="text_TextChanged"/>
                            </Grid>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                    
                </ListBox>

PFA screenshot.

Answer 1

If you are using data binding why use the text changed event?  you can use the property setter to be notified when the text changed and will know what record it happened in

Answer 2

Hi,

Can you please provide the sample for the same??

We have implemented

INotifyPropertyChanged

Answer 3

Hi Vaibhav,

Modify your image class and add a property to hold the index in image array, bind this property in TextBox property and get it when ListBox selection changes. Code snippet looks like the following.

Image class.

public  class CustomImage

    {

       public int OrderID { get; set; }


       public string ImagePath { get; set; }


       public string Ordinal { get; set; }


       public int Width { get; set; }


       public int Height { get; set; }

}

Init images array.

Images = new List<CustomImage>();

            Random rnd = new Random();

            for (int i = 0; i < 50; i++)

            {

                CustomImage img = new CustomImage();

                img.OrderID = i + 1;

                img.ImagePath = "path:" + i.ToString();

                img.Ordinal = i.ToString();

                img.Width = rnd.Next(0, 101);

                img.Height = rnd.Next(0, 101);

                Images.Add(img);

            }

            ListView1.ItemsSource = Images;

XAML.

   

 <ListBox Name="ListView1" Grid.Row="2" Grid.Column="1" 

                          TabNavigation="Local"

                         Padding="-10 0 -10 -10"

                         Margin="5 0 0 0"

                       SelectionChanged="ListView1_SelectionChanged" Style="{StaticResource ListBoxStyle1}" >

                <ListBox.ItemTemplate>

                    <DataTemplate>

                        <Grid Background="White">

                            <Grid.RowDefinitions>

                                <RowDefinition Height="60"></RowDefinition>

                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions>

                                <ColumnDefinition Width="150"></ColumnDefinition>

                                <ColumnDefinition Width="150"></ColumnDefinition>

                                <ColumnDefinition Width="150"></ColumnDefinition>

                                <ColumnDefinition Width="150"></ColumnDefinition>

                            </Grid.ColumnDefinitions>

                            <Rectangle Grid.Column="0" Margin="0 -20 0 0"/>

                            <TextBlock Grid.Column="0" Text="{Binding ImagePath,Mode=TwoWay}"/>

                            <Rectangle Grid.Column="1"  Margin="0 -20 0 0"/>

                            <TextBlock Grid.Column="1"  Text="{Binding Ordinal,Mode=TwoWay}" />

                            <Rectangle  Grid.Column="2" Margin="0 -20 0 0"/>

                            <TextBox Grid.Column="2" Text="{Binding Width,Mode=TwoWay}" Tag="{Binding OrderID}" TextChanged="TextBox_TextChanged"  Height="Auto" />

                            <Rectangle Grid.Column="3" Margin="0 -20 0 0"/>

                            <TextBox Grid.Column="3" Text="{Binding Height,Mode=TwoWay}"  Tag="{Binding OrderID}" TextChanged="TextBox_TextChanged_1"  />

                        </Grid>

                    </DataTemplate>

                </ListBox.ItemTemplate>

            </ListBox>

XAML.cs.

       

private void TextBox_TextChanged(object sender, TextChangedEventArgs e)

        {

            TextBox txtbox = sender as TextBox;

            int index = (int)txtbox.Tag;

            Debug.WriteLine(index);

        }

For your second question, I think that blue stuff is the selection background. You can change that color using ListBox Item container style. Right click on the ListBox control in XAML, Edit Additional Templates, Edit Generated Item Container style. See details from the following image. In the generated XAML, you just need to modify the color in VisualStateManager.VisualStateGroups.

Regards,

---

We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. Click HERE to participate the survey.

Answer 4

Hi Herro,

Thank you for your response.

First solution is working fine.

I am facing different problem now, When app is run and textboxes (txtWidth/txtHeight) values are changed for first time then the UI is getting changed but now when I changed values for second time(without restarting the app),the UI is not getting reflected.

I debug the solution,I found that when I First time change value from say txtWidth textbox ,txtWidth_TextChanged  is getting called twice and txtHeight_TextChanged  also getting called(Though I havn't changed anything in Height TextBox).

When I again changed values from any textboxes the respective event is getting called only once.

The Question is Why the textChanged Event for particular textbox is getting called twice and also for other textbox's textchanged event is getting called though its value not changed ??

Answer 5

Please share a repro project for me to debug. Use your OneDrive and paste a link here.

---

We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. Click HERE to participate the survey.