We Keep Coding

How can I disable the selection event on this WPF ComboBox without disabling it?

I have the following ComboBox XAML:
<ComboBox Width="350" ItemsSource="{Binding RunSets}" SelectedItem="{Binding SelectedRunSet, Mode=OneWay}" VerticalAlignment="Center" Height="20" Margin="5,1,0,0" Background="DimGray" Foreground="White" >
<ComboBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</ComboBox.ItemsPanel>
<ComboBox.ItemTemplate>
<DataTemplate>
<Grid Width="320">
<CheckBox IsChecked="{Binding IsSelected}" Margin="2,2,10,0" Visibility="{Binding ExchangeMarketNamesVisibility}" PreviewMouseDown="RunsetComboBoxItem_PreviewMouseDown">
<CheckBox.Content>
<StackPanel PreviewMouseDown="RunsetComboBoxItem_PreviewMouseDown">
<StackPanel Orientation="Horizontal" PreviewMouseDown="RunsetComboBoxItem_PreviewMouseDown">
<TextBlock Text="{Binding DisplayName}" PreviewMouseDown="RunsetComboBoxItem_PreviewMouseDown"/>
</StackPanel>
<StackPanel PreviewMouseDown="RunsetComboBoxItem_PreviewMouseDown">
<TextBlock Text="{Binding ExchangeMarketNames, StringFormat=🢒 {0}}" Visibility="{Binding ExchangeMarketNamesVisibility}" Margin="2,2,0,2" Foreground="LightGray" PreviewMouseDown="RunsetComboBoxItem_PreviewMouseDown" />
</StackPanel>
</StackPanel>
</CheckBox.Content>
</CheckBox>
<TextBlock Text="Select Items..." Visibility="{Binding DefaultItemVisibility}"/>
</Grid>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
The goal I'm trying to achieve is to have the ComboBox present a set of selectable ComboBoxItems. It should always display "Select Items" when closed:
And when opened I would like it to display the following:
When the highlighted area is clicked it should check the checkbox without closing the combobox. I have managed to get most of the behaviour I want by hacking the Visibility property to hide the checkbox in the "Select Items..." ComboBoxItem. Together with capturing the PreviewMouseDown event:
private void RunsetComboBoxItem_PreviewMouseDown(object sender, MouseButtonEventArgs e)
{
var checkBox = sender as CheckBox;
if(checkBox != null)
{
checkBox.IsChecked = !checkBox.IsChecked;
e.Handled = true;
}
}
This is almost working perfectly, but there are two issues that I can't resolve:
If I click on the border between the ComboBoxItems in the dropdown it will select that ComboBoxItem. I want it to never select any of them. I have managed to work around for clicks inside the highlighted area by capturing the preview mouse down event on the Grid in the and marking it handled. Unfortunately in the border this doesn't get triggered and the SelectedItemChanged event gets triggered on the ComboBox. This causes the selected item to change (as mentioned, I want the ComboBox to always display the "Select Items..." ComboBoxItem.
The "Select Items..." is shown twice when the combo box is expaned. I would like it to show just once.
I have managed to get most of the behaviour I want by hacking the Visibility property to hide the checkbox in the "Select Items..." ComboBoxItem together with capturing the PreviewMouseDown event.
I have read through many stack overflow posts about this, and I have not found a way of doing this. I tried capturing the SelectionChange and marking it handled but it closed the combobox anyway, and there is no PreviewSelectionChange event. When an item is selected I'd like the combobox to stay open.
Is there any way I can achieve this? Please let me know if there's any more information I can add to clarify my problem. Thanks!

How to automatically begin editing when adding a new row to a datagrid in uwp?

I have a community toolkit datagrid bound to an observable collection. I also have an "add" button bound to a command that adds a new element to the collection and thus adds a new row to the datagrid. Now I want to automatically start editing the first cell of the new row when the button is clicked.
I tried adding this to the end of my command:
MyDataGrid.Focus(FocusState.Programmatic);
MyDataGrid.SelectedIndex = MyCollection.Count;
MyDataGrid.CurrentColumn = MyDataGrid.Columns[0];
MyDataGrid.BeginEdit();
Though this only works when the focus was already on the datagrid before the button is clicked. Does anyone have any idea how to solve this ?
Thanks in advance

I did this in XAML Studio for the known namespaces in settings. It's an ObservableCollection bound to the ItemsSource of the DataGrid.
In addition to having a button for the Add action and putting code in its callback, you need to add an event handler on the DataGrid for the PreparingCellForEdit event.
So in your add method, you can create a new element in your collection and start editing the new item like so:
private void AddNamespaceButton_Click(object sender, RoutedEventArgs e)
{
// Add new Row and begin editing
KnownNamespaces.Insert(0, new XmlnsNamespace(string.Empty, string.Empty));
NamespaceDataGrid.SelectedIndex = 0;
NamespaceDataGrid.ScrollIntoView(NamespaceDataGrid.SelectedItem, null);
NamespaceDataGrid.Focus(FocusState.Keyboard);
NamespaceDataGrid.BeginEdit();
}
The next piece is the key for the DataGridTextColumn type to ensure the focus of the cell gets transferred to the focus of the TextBox inside when editing:
private void NamespaceDataGrid_PreparingCellForEdit(object sender, Microsoft.Toolkit.Uwp.UI.Controls.DataGridPreparingCellForEditEventArgs e)
{
if (e.EditingElement is TextBox t)
{
t.Focus(FocusState.Keyboard);
}
}
It's also important to note that the class that your ObservableCollection consists of should implement the IEditableObject interface to work properly with the DataGrid.
Here's my XAML for completeness:
<StackPanel Margin="{StaticResource SettingsSubheaderMargin}">
<StackPanel Orientation="Horizontal">
<TextBlock x:Uid="SettingsPanel_KnownNamespaces"
Margin="0,8,0,12"
Style="{StaticResource BodyTextStyle}" />
<Button x:Uid="SettingsPanel_KnownNamespaces_Button_Add" Click="AddNamespaceButton_Click" Style="{StaticResource VSCodeAppBarHeaderButtonStyle}">
<SymbolIcon Symbol="Add" />
</Button>
</StackPanel>
<controls:DataGrid x:Name="NamespaceDataGrid"
MaxHeight="450"
AutoGenerateColumns="False"
Background="{ThemeResource Brush-Blue-Dark-1}"
CanUserReorderColumns="False"
CanUserSortColumns="True"
IsReadOnly="False"
ItemsSource="{x:Bind KnownNamespaces, Mode=OneWay}"
PreparingCellForEdit="NamespaceDataGrid_PreparingCellForEdit"
RowEditEnded="DataGrid_RowEditEnded">
<controls:DataGrid.Columns>
<controls:DataGridTextColumn Width="SizeToCells"
Binding="{Binding Name}"
FontSize="20"
Header="Shortcut" />
<controls:DataGridTextColumn Width="SizeToCells"
Binding="{Binding Path}"
FontSize="20"
Header="Namespace" />
<controls:DataGridTemplateColumn>
<controls:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button x:Uid="SettingsPanel_KnownNamespaces_Button_Remove"
Click="RemoveNamespaceButton_Click"
CommandParameter="{Binding}"
Style="{StaticResource VSCodeAppBarHeaderButtonStyle}">
<SymbolIcon Symbol="Delete" />
</Button>
</DataTemplate>
</controls:DataGridTemplateColumn.CellTemplate>
</controls:DataGridTemplateColumn>
</controls:DataGrid.Columns>
</controls:DataGrid>
</StackPanel>
I use the RowEditEnding event to save my data model back to disk.

Enter Key = Tab Key... Not Working

I've researched all this morning how to modify the behavior of a RadGridView (in WPF) for moving focus from one control to the next, just like the Tab key does... and like many other examples I've seen, I want to do the same thing: just make the Enter (or Return) key mimic the Tab key. But my code is not working.
If I have the following code in XAML:
<telerik:GridViewDataColumn Name="MyColumn" CellStyleSelector="{DynamicResource MyColorStyle}" Width="64">
<telerik:GridViewDataColumn.Header>
<TextBlock Text="My Column" TextAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" />
</telerik:GridViewDataColumn.Header>
<telerik:GridViewDataColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding MyNumber}" TextAlignment="Right"></TextBlock>
</DataTemplate>
</telerik:GridViewDataColumn.CellTemplate>
<telerik:GridViewColumn.CellEditTemplate>
<DataTemplate>
<TextBox Name="MyNumberTextBox" Text="{Binding MyNumber, Mode=TwoWay}" IsTabStop="True" TabIndex="27" PreviewKeyDown="MyNumberTextBox_PreviewKeyDown" MaxLength="10" HorizontalAlignment="Stretch" VerticalAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" />
</DataTemplate>
</telerik:GridViewColumn.CellEditTemplate>
</telerik:GridViewDataColumn>
And I have this code in the code-behind:
private void MyNumberTextBox_PreviewKeyDown(object sender, KeyEventArgs e)
{
if ((e.Key == Key.Enter) || (e.Key == Key.Return))
{
e.Handled = true;
(sender as TextBox).MoveFocus(new TraversalRequest(System.Windows.Input.FocusNavigationDirection.Next));
}
}
The focus does not advance to the next column immediately to the right on the RadGridView row; it instead advances back to the top of the screen (to a pulldown menu control). I have TabStops explicitly set for every textbox in my column(s).
Could use some help here to determine what I am not doing properly, or what I may be missing. Thanks in advance for your help.

DataGridCellEditEnding event is not firing when I am changing dropdown inside my datagrid in WPF

I am using the following code to use a ComboBox inside my DataGridTemplateColumn:
<DataGridTemplateColumn Header="MyHeader" Width="50">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Width="Auto" Text="{Binding Path=MyVal}" ToolTip="{Binding MyDisplayName}"></TextBlock>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<ComboBox Width="50" Height="17" ItemsSource="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type UserControl}},Path=DataContext.MyList}"
SelectedValuePath="MyValPath" SelectedValue="{Binding MySelectedVal}" SelectedItem="{Binding MyObject}" DisplayMemberPath="MyDisplayName"
FontSize="12" >
</ComboBox>
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
</DataGridTemplateColumn>
CellTemplate is for showing my text (custom text for selected value) and CellEditingTemplate contains my ComboBox which has the actual list.
When I select a value from my drop-down, I have to click on another part of the data grid to get DataGridDiagnosticCellEditEnding fired.
I want to get it fired as soon as I select a value or change a value from my ComboBox.
I tried adding the following code, but it didn't work:
<ComboBox Width="50" Height="17" ItemsSource="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type UserControl}},Path=DataContext.MyList}"
SelectedValuePath="MyValPath" SelectedValue="{Binding MySelectedVal}" SelectedItem="{Binding MyObject, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" DisplayMemberPath="MyDisplayName" FontSize="12" >
Also I tried adding IsSynchronizedWithCurrentItem="True".

I gave a try to your code, and ve got a fix :
On the ComboBox of the DataGrid Column, subscribe to the closing event
Implement the event Handler and raise a routed Event.
CommitEditCommand belongs to the DataGrid class :
private void ComboBoxDropDownClosed(object sender, EventArgs e)
{
DataGrid.CommitEditCommand.Execute(datagrid1,datagrid1);
}
From there you fall in the DataGrid.CellEditting breakpoint
Here is the working solution : http://1drv.ms/1LFB5Gc
Regards

how to commit the edit without moving to next cells in the datagrid

I am using ComboBox inside a DataGrid which is in CellEditingTemplate.
I insert the selected item to the textblock in same cell, which is in CellTemplate. the insertion will happen only when I move to next cell.
what I want is when I select item from the ComboBox it should insert it in the TextBlock
without moving to the next cell.
here is my xaml.
<DataGrid.Columns>
<DataGridTextColumn Header="Hours" Binding="{Binding time}" FontSize="14" FontWeight="Bold" IsReadOnly="True" Width="100"/>
<DataGridTemplateColumn Header="Monday" Width="100">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel >
<TextBlock x:Name="mon" Text="{Binding Path=SelectedSubject}"></TextBlock>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<!--<ComboBox x:Name="monday" Width="50" IsSynchronizedWithCurrentItem="true" Loaded="monday_Loaded" SelectionChanged="monday_SelectionChanged"></ComboBox>-->
<ComboBox x:Name="monday" Width="50" ItemsSource="{Binding Path=Subjects}" SelectedItem="{Binding Path=SelectedSubject}" IsSynchronizedWithCurrentItem="true" Loaded="monday_Loaded" SelectionChanged="monday_SelectionChanged"></ComboBox>
<ComboBox x:Name="staff" Width="50" Loaded="staff_Loaded"></ComboBox>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
Is it possible to do this?
If any one have any idea about how to do it please help me.

Sorry i have use above code but it was not giving perfect answer.
Use mouse leave event of monday combo box and commit edit in that event it will work fine. :)
private void monday_MouseLeave(object sender, MouseEventArgs e)
{
this.myGrid.CommitEdit();
}

If you add a name to your DataGrid you can access it from monday_SelectionChanged and commit the edits:
<Grid x:Name="myGrid" ....>
in the handler of the ComboBox selection changed event
private void monday_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
myGrid.CommitEdit();
// Rest of your implementation ....
}