ListBox and Checkbox - XAML/C# - Windows 8 App - checkbox

I have a little problem with my Project. I have an ListBox with a Checkbox for each item. The Checkbox takes the Content from ListBox, but how do I connect the Selection of the Item and the IsChecked from the Checkbox?
My plan is that when you Check the Checkbox that the line with the Checked Checkbox will be deleted. How do I do that?
My XAML so far:
<ListBox x:Name="To_do_Liste" ItemsSource="{Binding}" Height="593"
Margin="0,85,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5"
BorderBrush="#FDFFE818" Background="#FFFFE818"
IsSynchronizedWithCurrentItem="False" IsDoubleTapEnabled="True"
IsHoldingEnabled="True" IsRightTapEnabled="True"
ScrollViewer.VerticalScrollBarVisibility="Auto" ManipulationMode="All"
FontFamily="SketchFlow Print" HorizontalAlignment="Left" Width="320"
SelectionMode="Extended">
<ListBox.ItemTemplate>
<DataTemplate>
<ListBoxItem HorizontalContentAlignment="Stretch">
<CheckBox x:Name="CheckBox1" Foreground="Black"
BorderBrush="#FF007FFF" Content="{Binding}" FontFamily="SketchFlow Print"
FontSize="26" />
</ListBoxItem>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

you can add selectionchange eventhandler to listbox and here you can check which checkbox is selected either using selectedindex of some other property of checkbox and now update your OBSERVABLECOLLECTION to with you listbox is binded.
private void ListBox_SelectionChanged_1(object sender, SelectionChangedEventArgs e)
{
CheckBox chkbx = sender as CheckBox;
}

Related

Get clicked object from ItemsControl and populate Popup with its properties

I've got an ItemsControl which displays objects from a list from my viewmodel. I also have code to display a Popup when the user click on an item in the ItemsControl. However I don't know how to get the actual object from the clicked item to read its properties and display them in the Popup.
I've got a Click event handler for the Button (which is used to display my items in the ItemsControl) and I tried to see in the debugger if the button contains the desired object but apparently it doesn't.
How else can I get the object and populate the popup with its properties?
<ItemsControl ItemsSource="{Binding RecipientsNames}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button x:Name="btnConvoContact" Click="BtnConvoContact_Click"
Background="White" Foreground="Black" Cursor="Hand"
Width="Auto" Height="14" Padding="0" BorderThickness="0" Margin="0 0 6 0" HorizontalAlignment="Left" VerticalAlignment="Top">
<TextBlock Text="{Binding Path=Name}" FontSize="12" Margin="0 -2 0 -2"/>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Cast the DataContext of the sender argument in the event handler to your data type:
private void BtnConvoContact_Click(object sender, RoutedEventArgs e)
{
Button btn = sender as Button;
var dataObject = btn.DataContext as YourDataClass;
}

Get ListView control values in combobox selection changed Event

I am adding Label and Combo box dynamically to ListView control in combo box Selection Changed Event.
I want to get label content for the selected list view Item
You can use VisualTreeHelper to navigate Label from the SelectedItem;
or
Simple Way, you can do like below(but do add null checks where ever necessary);
XAML Code:
<StackPanel>
<ListView SelectionChanged="Selector_OnSelectionChanged">
<ListViewItem>
<StackPanel>
<Label Content="Label1"/>
<ComboBox>
<ComboBoxItem>1</ComboBoxItem>
<ComboBoxItem>2</ComboBoxItem>
</ComboBox>
</StackPanel>
</ListViewItem>
<ListViewItem>
<StackPanel>
<Label Content="Label2"/>
<ComboBox>
<ComboBoxItem>1</ComboBoxItem>
<ComboBoxItem>2</ComboBoxItem>
</ComboBox>
</StackPanel>
</ListViewItem>
</ListView>
<TextBlock x:Name="TextBlock1" FontSize="25"/>
</StackPanel>
C# Code:
private void Selector_OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
string content =
((((e.AddedItems[0] as ListViewItem).Content) as StackPanel).Children[0] as
Label).Content.ToString();
TextBlock1.Text = "Selected Item's Label content is :" + content;
}
For simple solution, I have navigated programmatically;
((((e.AddedItems[0] as ListViewItem).Content) as StackPanel).Children[0] as Label).Content

Getting current Object in Control template

<ControlTemplate TargetType="{x:Type ListBoxItem}">
<StackPanel>
<StackPanel Margin="0,0,28,0" Orientation="Horizontal" Visibility="{Binding IsEditable,Converter={StaticResource BooleanToVisibilityConverter}}">
<TextBlock Foreground="Gray" Text="{Binding DateCreated,Converter={StaticResource DateTimeConverter}}" FontFamily="/Assets/Fonts/Berthold Akzidenz Grotesk BE Regular.ttf" FontSize="16"/>
<TextBlock Text=":" Foreground="Gray"/>
<TextBlock Width="20"/>
<TextBox ScrollViewer.HorizontalScrollBarVisibility="Disabled" BorderThickness="0" Name="TrainerNoteText" Text="{Binding TrainerNote}" FontFamily="/Assets/Fonts/Berthold Akzidenz Grotesk BE Regular.ttf" Foreground="Black" FontSize="16" TextWrapping="Wrap" KeyUp="EditTrainerNote" Width="400"/>
</StackPanel>
</StackPanel>
</ControlTemplate>
The above control template is in a listview. The textbox inside is editable. So when user presses the enter key, I need to get the current object associated with that. How to do this?
You can listen to KeyDown RoutedEvent at ListView level.
http://msdn.microsoft.com/en-us/library/system.windows.input.keyboard.keydown.aspx
Its an attached event and its handler can be placed anywhere in VisualTree.
Here is an example:
<StackPanel TextBox.KeyDown="OnKeyDownHandler">
<TextBox Width="300" Height="20"/>
</StackPanel>
And this is the handler:
public void OnKeyDownHandler(object sender, KeyEventArgs e)
{
if (e.Key == Key.Return)
{
TextBox tbx = (TextBox)sender;
tbx.....
}
}
You know, you really should define what your items look like in a DataTemplate defined in the ListBox.ItemTemplate property and not the ListBoxItem.Template property. Based on the example from the linked page:
<ListBox Width="400" Margin="10" ItemsSource="{Binding YourCollectionProperty}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Path=TaskName}" />
<TextBlock Text="{Binding Path=Description}"/>
<TextBlock Text="{Binding Path=Priority}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
When Binding a collection property to the ListBox.Items property, all of the UI elements inside the DataTemplate will have access to the properties of the type that is in the collection. In this example, the type that populates the YourCollectionProperty collection has TaskName, Description and Priority properties in it. You can replace these properties with those from the type that is in your collection property.
If you set up your properties to implement the INotifyPropertyChanged interface (or use DependencyProperties then any updates in the UI elements will automatically be updated in the data objects in the view model/code behind. Therefore, there is no need to add KeyDown or KeyUp handlers. For more information, please read the Data Binding Overview page on MSDN.

Databinding and bound buttons

I have an ItemsControl bound to a list of objects.
It basically displays a list of bound properties on screen with a textbox and button next to each one to allow you to add additional information to each database field.
In the onclick of the button I need to take the string in the textbox and store it in the object for that item. The XAML looks a bit like this
<ItemsControl x:Name="ListDatabaseFields" ItemsSource="{Binding Path=SelectedImport.ColumnMappings}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<StackPanel>
<TextBlock Text="{Binding DatabaseColumn.Name}" TextWrapping="Wrap" Grid.Column="0"/>
<TextBox Name="txtNewFileField" Width="100"/>
<Button Name="Add" Content="Add File Field" Style="{StaticResource LinkButton}" Width="50" Click="Add_Click"/>
</StackPanel>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Whats the best way in the XAML to access the ColumnMapping the itemcontrol is bound to for that item and change its file field property.
I'm not sure if i understood your question correctly, please clarify if this is not what you are looking for.
I have adapted this to my test application, my DataTemplate looks like this:
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}"/>
<TextBox MinWidth="100" Name="tbNewName"/>
<Button MinWidth="100"
Tag="{x:Reference tbNewName}" Click="ButtonNewName_Click"
Content="Do Stuff"/>
</StackPanel>
</DataTemplate>
Notice the Button.Tag which references the TextBox, i can use it in the handler like this:
private void ButtonNewName_Click(object sender, RoutedEventArgs e)
{
Employee emp = (sender as FrameworkElement).DataContext as Employee;
TextBox tbNewName = (sender as FrameworkElement).Tag as TextBox;
emp.Name = tbNewName.Text;
}
The DataContext is inherited, so the sender (the Button) contains the data-item, in your case a ColumnMapping, the Tag gives me the TextBox and that is all i need for changing a property.
If you need to reference more controls you could create an array in the Tag.

WPF ListBoxItem selection problem

I have a listbox where the items contain checkboxes:
<ListBox Style="{StaticResource CheckBoxListStyle}" Name="EditListBox">
<ListBox.ItemTemplate>
<DataTemplate>
<CheckBox Click="Checkbox_Click" IsChecked="{Binding Path=IsChecked, Mode=TwoWay}" Content="{Binding Path=DisplayText}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The problem I'm having is that when I click on the checkbox or its content, the parent ListBoxItem does not get selected. If I click on the white space next to the checkbox, the ListBoxItem does get selected.
The behavior that I'm trying to get is to be able to select one or many items in the list and use the spacebar to toggle the checkboxes on and off.
Some more info:
private void Checkbox_Click(object sender, RoutedEventArgs e)
{
CheckBox chkBox = e.OriginalSource as CheckBox;
}
In the code above when I click on a checkbox, e.Handled is false and chkBox.Parent is null.
Kent's answer put me down the right path, here's what I ended up with:
<ListBox Style="{StaticResource CheckBoxListStyle}" Name="EditListBox" PreviewKeyDown="ListBox_PreviewKeyDown">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox IsChecked="{Binding Path=IsChecked, Mode=TwoWay}" />
<TextBlock Text="{Binding DisplayText}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I had to use PreviewKeyDown because by default when you hit the spacebar in a list box, it deselects everything except for the most recently selected item.
To begin with, put the content outside the CheckBox:
<StackPanel Orientation="Horizontal">
<CheckBox IsChecked="{Binding IsChecked}"/>
<TextBlock Text="{Binding DisplayText}"/>
</StackPanel>
After that, you will need to ensure that pressing space on a ListBoxItem results in the CheckBox being checked. There are a number of ways of doing this, including a simple event handler on the ListBoxItem. Or you could specify a handler for UIElement.KeyUp or whatever in your DataTemplate:
<CheckBox IsChecked="{Binding IsChecked}" UIElement.KeyUp="..."/>
You can also bind the IsChecked property of the CheckBox and IsSelected property of the ListBoxItem:
<ListBox>
<ListBox.ItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding DisplayText}" IsChecked="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
In your use case it would be way simpler to use a ItemsControl instead of a list box. A ItemsControl is similar to a Listbox except that it doesn't contain the automatic selection behaviour. Which means that using it to host a list of what are essentially checkboxes is very simple and you don't have to workaround the ListBox's selection behaviour.
Simply switching to ItemsControl will give you exactly what you need:
<ItemsControl Style="{StaticResource CheckBoxListStyle}" Name="EditListBox">
<ItemsControl .ItemTemplate>
<DataTemplate>
<CheckBox Click="Checkbox_Click" IsChecked="{Binding Path=IsChecked, Mode=TwoWay}" Content="{Binding Path=DisplayText}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
You can click on text to check checkboxes (default behavior) and you can use the keyboard too without having to wire up any event handlers.

Resources