ComboBox with ItemTemplate that includes a button - wpf

So, lets say I have a ComboBox with a custom data template. One of the items in the data template is a button:
<ComboBox Width="150" ItemsSource="{Binding MyItems}">
<ComboBox.ItemTemplate>
<DataTemplate>
<Button Content="ClickMe" />
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
The problem with this is that the button eats the click, and the item does not get selected if the button is selected. This means that the pull-down does not go away, and no item is selected.
I get WHY this is happening.
Is there a way to work around it? Possibly a way to process the button click (I am binding to a command) and tell it to continue up the chain so the combo box can also process the click?
Note: I am seeing my problem in Silverlight, but I am guessing that the exact same behavior can be seen with WPF.

OK, I got it figured out. It is a total hack, but it still lets me bind my command to the button and continue to have Combo-box behavior for selecting the item:
<ComboBox x:Name="MyCombo" Width="150" ItemsSource="{Binding MyItems}">
<ComboBox.ItemTemplate>
<DataTemplate>
<Button Content="ClickMe" Click="Button_Click" />
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
And in the code behind:
private void Button_Click(object sender, RoutedEventArgs e)
{
MyCombo.SelectedItem = (sender as Button).DataContext;
MyCombo.IsDropDownOpen = false;
}
If I really wanted to, I could bind the SelectedItem and IsDropDownOpen to properties in my ViewModel but I decided against it to keep this behavior as a hack extension of the XAML, in an effort to keep my ViewModel clean.

Your best bet would probably be to set the SelectedItem in the button's command.

I found another possibility for the MVVM context. I used an derived class for ComboBox and if an item is adden which derives from ButtonBase I attach to the Click event to close the ComboBox.
This works for my project - but just, because the items itself are buttons, it would not work if they just contain buttons as a child element.
public class MyComboBox : ComboBox
{
public MyComboBox()
{
// use Loaded event to modify inital items.
Loaded += OnLoaded;
}
private void OnLoaded(object sender, RoutedEventArgs routedEventArgs)
{
if (Items != null)
{
foreach (var item in Items)
{
var button = item as ButtonBase;
if (button != null)
{
ModifyButtonItem(button);
}
}
}
}
protected override void OnItemsChanged(System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{
base.OnItemsChanged(e);
// Check added items. If an item is a button, modify the button.
if (e.NewItems != null)
{
foreach (var item in e.NewItems)
{
var button = item as ButtonBase;
if (button != null)
{
ModifyButtonItem(button);
}
}
}
}
private void ModifyButtonItem(ButtonBase button)
{
button.Click += (sender, args) => { IsDropDownOpen = false; };
}
}

I don't know if there is a way to do what you want. If you were to put a Button in a ListBox, for example, the same behavior occurs - clicking the Button does not cause its item in the ListBox to be selected. In fact, this is the case for any control in an ItemsControl that supports selection.
You might be able to do something with the Click event and mark it as not handled so that it continues up the visual tree, but even then I'm not sure if that would work or not.

Related

mahapps SplitButton expand on click

I defined a SplitButton in WPF(C#) with a binded item source.
The item list will be expanded only when the user clicks on the arrow at the right of the SplitButton.
How to expand the list when the user clicks on the SplitButton area?
I tried to handle the click event and set the property IsExpanded=true, but it automatically disappears after one second.
<Controls:SplitButton Name="SplitButton_Test"
Width="100"
HorizontalAlignment="Left"
HorizontalContentAlignment="Left"
ItemsSource="{Binding Dictionary_Test}"
DisplayMemberPath="Value"
SelectedValuePath="Key"
Click="Test_Click">
<Controls:SplitButton.Icon>
<iconPacks:PackIconMaterial Margin="6" Kind="Alert" />
</Controls:SplitButton.Icon>
</Controls:SplitButton>
private void Test_Click(object sender, RoutedEventArgs e)
{
if (SplitButton_Test.IsExpanded == false)
{
e.Handled = true;
SplitButton_Test.IsExpanded = true; //Doesn't work, closes automatically after 1 second
}
}
This code in MahApps is closing it:
//Make popup close even if no selectionchanged event fired (case when user select the save item as before)
void ListBoxPreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
var item = ContainerFromElement(_listBox, e.OriginalSource as DependencyObject) as ListBoxItem;
if (item != null)
{
IsExpanded = false;
}
}
currently at https://github.com/MahApps/MahApps.Metro/blob/develop/src/MahApps.Metro/MahApps.Metro.Shared/Controls/SplitButton.cs#L339
You need to remove that event handler. How? That's whole other question.

How can I make a textbox select all text after a new item is added to a listbox?

I've got a ListBox on my page which contains the names of some items. To the right of the ListBox is an area that displays information about the selected items.
When the user clicks the "Add Item" button, a new item is created with an auto-generated name, such as "New Item". What I would like to be able to do is immediately after the item is added to the ListBox, focus on the TextBox and select all of the selected text so that if they start typing it immediately replaces what was auto-generated.
Here's an idea of what it would look like:
I've created a behavior which I attached to the ListBox which gives the TextBox focus when a new item is created. However, I'm having a problem when trying to select the text. At the time my behavior executes, the new name is not yet bound. So for example if I have "Item Three" selected and then click the Add Item button, when the behavior executes the text of the text box is still "Item Three", and I select all that, but then the binding of the TextBox updates and changes it to "New Item", and the text is no longer selected.
Here's my Behavior:
public class ListBoxFocusAnotherControlOnAddBehavior : Behavior<ListBox>
{
public static readonly DependencyProperty AttachedTextBoxProperty = DependencyProperty.Register("AttachedTextBox", typeof (TextBox),
typeof (ListBoxFocusAnotherControlOnAddBehavior), new PropertyMetadata(default(TextBox)));
public TextBox AttachedTextBox
{
get { return (TextBox)GetValue(AttachedTextBoxProperty); }
set { SetValue(AttachedTextBoxProperty, value); }
}
protected override void OnAttached()
{
((INotifyCollectionChanged)AssociatedObject.Items).CollectionChanged += onListBoxCollectionChanged;
}
private void onListBoxCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
{
if (e.Action == NotifyCollectionChangedAction.Add)
{
AttachedTextBox.Focus();
AttachedTextBox.SelectAll();
// The problem being that at the time of this SelectAll, the TextBox's Text binding hasn't updated yet.
}
}
}
Related XAML:
<ListBox Name="ThingsList" ItemsSource="{Binding Things}" SelectedItem="{Binding SelectedThing}">
<i:Interaction.Behaviors>
<behaviors:ListBoxFocusAnotherControlOnAddBehavior AttachedTextBox="{Binding ElementName=ThingNameTextBox}" />
</i:Interaction.Behaviors>
<ListBox.ItemTemplate>
<DataTemplate DataType="{x:Type ThingViewModel}">
<TextBlock Text="{Binding Path=Name, UpdateSourceTrigger=PropertyChanged}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBox Name="ThingNameTextBox" Text="{Binding Path=SelectedThing.Name, UpdateSourceTrigger=PropertyChanged}" />
What can I do to get the behavior I'm looking for?
I did find a workable solution that involves subscribing to the TextChanged event from the handler, selecting all text when it's handled, and then removing the event, but this feels completely terrible and I'd like something that's less of a hack.
private void onListBoxCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
{
if (e.Action == NotifyCollectionChangedAction.Add)
{
AttachedTextBox.Focus();
AttachedTextBox.TextChanged += AttachedTextBox_TextChanged;
}
}
private void AttachedTextBox_TextChanged(object sender, TextChangedEventArgs e)
{
AttachedTextBox.SelectAll();
AttachedTextBox.TextChanged -= AttachedTextBox_TextChanged;
}

Silverlight Datagrid Row Click

I have a datagrid with a column containing a checkbox. I want to change the value of the bound Selected property when the row is clicked:
alt text http://lh4.ggpht.com/_L9TmtwXFtew/Sw6YtzRWGEI/AAAAAAAAGlQ/pntIr2GU6Mo/image_thumb%5B3%5D.png
NOTE: I don't want to use the SelectedItemChanged event because this doesn't work properly when there is only one row in the grid.
As is often the way i have found my own solution for this:
Add a MouseLeftButtonUp event to the datagrid:
<data:DataGrid x:Name="dgTaskLinks"
ItemsSource="{Binding TaskLinks}"
SelectedItem="{Binding SelectedTaskLink, Mode=TwoWay}"
MouseLeftButtonUp="dgTaskLinks_MouseLeftButtonUp"
>...
And walk the visual tree to get the data grid row:
private void dgTaskLinks_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
///get the clicked row
DataGridRow row = MyDependencyObjectHelper.FindParentOfType<DataGridRow>(e.OriginalSource as DependencyObject);
///get the data object of the row
if (row != null && row.DataContext is TaskLink)
{
///toggle the IsSelected value
(row.DataContext as TaskLink).IsSelected = !(row.DataContext as TaskLink).IsSelected;
}
}
Once found, it is a simple approach to toggle the bound IsSelected property :-)
Hope this helps someone else.
Here is an even simpler solution
XAML
<data:DataGrid
x:Name="dgMyDataGrid"
ItemsSource="{Binding MyList}"
SelectedItem="{Binding MyList, Mode=TwoWay}"
MouseLeftButtonUp="dgMyDataGrid_MouseLeftButtonUp">...
CS
private void dgMyDataGrid_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
DataGrid dg = (sender as DataGrid);
var allObjects = dg.DataContext as List<MyCustomObject>;
foreach(var o in allObjects)
{
o.Selected = false;
}
MyCustomObject SelectedObject = (MyCustomObject)dg.SelectedItem;
SelectedObject.Selected = true;
}
Note: this as well as the other example assumes your class that you are binding to the control implements INotifyPropertyChanged

WPF ListBox drag & drop interferes with ContextMenu?

I'm implementing drag & drop from a ListBox, but I'm seeing some strange behaviour with a ContextMenu elsewhere in the window. If you open the context menu and then start a drag from the ListBox, the context menu closes but won't open again until after you perform another drag.
Does this make sense? Anybody got any ideas what might be going on?
<ListBox Grid.Row="0" ItemsSource="{Binding SourceItems}" MultiSelectListboxDragDrop:ListBoxExtension.SelectedItemsSource="{Binding SelectedItems}" SelectionMode="Multiple" PreviewMouseLeftButtonDown="HandleLeftButtonDown" PreviewMouseLeftButtonUp="HandleLeftButtonUp" PreviewMouseMove="HandleMouseMove"/>
<ListBox Grid.Row="1" ItemsSource="{Binding DestinationItems}" AllowDrop="True" Drop="DropOnToDestination" />
<Button Grid.Row="2">
<Button.ContextMenu>
<ContextMenu x:Name="theContextMenu">
<MenuItem Header="context 1"/>
<MenuItem Header="context 2"/>
<MenuItem Header="context 3"/>
</ContextMenu>
</Button.ContextMenu>
Button with context menu
</Button>
...
public partial class Window1
{
private bool clickedOnSourceItem;
public Window1()
{
InitializeComponent();
DataContext = new WindowViewModel();
}
private void DropOnToDestination(object sender, DragEventArgs e)
{
var viewModel = (WindowViewModel)e.Data.GetData(typeof(WindowViewModel));
viewModel.CopySelectedItems();
}
private void HandleLeftButtonDown(object sender, MouseButtonEventArgs e)
{
var sourceElement = (FrameworkElement)sender;
var hitItem = sourceElement.InputHitTest(e.GetPosition(sourceElement)) as FrameworkElement;
if(hitItem != null)
{
clickedOnSourceItem = true;
}
}
private void HandleLeftButtonUp(object sender, MouseButtonEventArgs e)
{
clickedOnSourceItem = false;
}
private void HandleMouseMove(object sender, MouseEventArgs e)
{
if(clickedOnSourceItem)
{
var sourceItems = (FrameworkElement)sender;
var viewModel = (WindowViewModel)DataContext;
DragDrop.DoDragDrop(sourceItems, viewModel, DragDropEffects.Move);
clickedOnSourceItem = false;
}
}
}
It seemed to be something to do with the mouse capture!?
The normal sequence of events during a drag goes something like this...
The PreviewMouseLeftButtonDown
handler gets called and
ListBox.IsMouseCaptureWithin is
false.
The PreviewMouseMove handler
gets called. By this time
ListBox.IsMouseCaptureWithin is true.
During the PreviewMouseMove handler
DragDrop.DoDragDrop gets called and
sometime during this the mouse
capture is released from the ListBox.
But, what seems to happening for a drag started when the context menu is open is...
The PreviewMouseLeftButtonDown
handler gets called and
ListBox.IsMouseCaptureWithin is
false.
The PreviewMouseMove handler gets
called. But this time
ListBox.IsMouseCaptureWithin is
still false.
Sometime after the end of the
PreviewMouseMove handler the
ListBox then gets the mouse capture
(ListBox.IsMouseCaptureWithin
becomes true)
The result of this is that after the drag, the ListBox still has the mouse capture so any clicks on the button to open the context menu are actually going to the listbox not the button.
Adding the following code to the start of the PreviewMouseLeftButtonDown handler seems to help by swallowing up the click that closes that context menu rather than trying to start a drag from it...
if (!contextMenuCloseComplete)
{
sourceElement.CaptureMouse();
return;
}
...with the contextMenuCloseComplete bool getting set in handlers for the context menu's Closed and Opened events.
Does that make sense? Does anyone understand where this mouse capture behaviour is coming from?

How to automatically select a WPF ListViewItem

I have a ListView in my WPF UserControl using an ItemTemplate to display the items. Within the template is a button. When I select one item and then click on the button of another item, the previously selected item is still selected. I wonder how to automatically select the item the button is in when the button is clicked.
Xaml
<UserControl.Resources>
<DataTemplate x:Key="ItemTemplate">
<Border>
<Grid>
<!-- lots of stuff go here -->
<Button Click="MyButton_Click">Clickme</Button>
</Grid>
</Border>
</DataTemplate>
</UserControl.Resources>
<ListView x:Name="_listView"
ItemTemplate="{StaticResource ItemTemplate}">
</ListView>
C# Code behind
void MyButton_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show( string.Format( "clicked on {0}",
this._listView.SelectedItem.ToString() ) ) ;
}
I would do it by getting the data context of the sender object. Assuming your listview is a list of objects of type MyObject... then something like this would allow you to reference the selected object.
void MyButton_Click(object sender, RoutedEventArgs e)
{
Button b = sender as Button;
if (b == null)
{
return;
}
MyObject o = b.DataContext as MyObject;
if (o != null)
{
// Put stuff for my object here
}
}
When you press the button your click / mouse down event is handled by the button and therefore does not route through to the ListView control.
A possible way to solve this is to manually set the listview.SelectedItem in the button click event.

Resources