Develop Reference

Wpf ComboBox with Checkbox Performance Problems

I've got a WPF Combobox with about 1000 rows.
Each Row has a checkbox to allow selecting mulltiple rows.
If nothing has been selected it opens just fine. Howeve if I've already selected something and now want to change my selection it takes about 30s for the ComboBox to open and it has for some reason scrolled to the bottom.
I'm using VirtualizingStackPanel but it doesn't seem to fix the problem.
<ComboBox
x:Name="cbStockCat"
Grid.Column="1"
Margin="2,0,2,0"
Padding="2,10,0,4"
materialDesign:HintAssist.Hint="Stock Category"
materialDesign:HintAssist.IsFloating="True"
StaysOpenOnEdit="True"
customProperties:EnterKeyTraversalExtension.IsEnabled="True"
AllowDrop="True"
IsEditable="True"
ToolTip="{Binding StockCategoryCollection.ToolTipText}"
TabIndex="{Binding StockCatTabIndex, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
Text="{Binding StockCategoryCollection.Text, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
ItemsSource="{Binding StockCategoryCollection}"
Cursor="Hand">
<ComboBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</ComboBox.ItemsPanel>
<ComboBox.ItemTemplate>
<DataTemplate >
<CheckBox
IsChecked="{Binding IsChecked, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Content="{Binding}"
Background="{StaticResource BrushPrimaryLighter}"
CommandParameter="{Binding}" >
</CheckBox>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
Any ideas?

WPF placement of Intellisense like PopUp below the selection start

Hi I want to place a WPF Popup below the last character typed in a textbox just like we know it from intellisense in VS.
My actual Code looks like this is there a way to place it according the coordinates of the textboxex text?:
<local:TextBoxAutoSuggestion Text="{Binding InputText, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
x:Name="SearchPathTextBox"
local:FocusExtension.IsFocused="{Binding IsFocusOnInputTextBox, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
HorizontalAlignment="Stretch"
Foreground="{DynamicResource Menu.Static.Foreground}"
Background="Transparent"
VerticalAlignment="Stretch"
VerticalContentAlignment="Center"
Height="45"
Padding="5,0,30,0"
Margin="0,0,0,0"
CaretBrush="White"
BindableSelectionStart="{Binding SelectionLengthInputText,Mode=TwoWay}">
<i:Interaction.Triggers >
<i:EventTrigger EventName="GotFocus">
<i:InvokeCommandAction Command="{Binding TextBoxFocusedChangedCommand}" />
</i:EventTrigger>
<i:EventTrigger EventName="LostFocus">
<i:InvokeCommandAction Command="{Binding TextBoxFocusedChangedCommand}" />
</i:EventTrigger>
</i:Interaction.Triggers>
<local:TextBoxAutoSuggestion.InputBindings>
<KeyBinding Command="{Binding EnterKeyPressedCommand}"
Key="Return" />
<KeyBinding Command="{Binding TabKeyPressedCommandinTextBox}"
Key="Tab" />
<KeyBinding Command="{Binding BackSpacePressedCommand}"
Key="Backspace" />
<KeyBinding Command="{Binding SelectNextItemCommand}"
Key="Down" />
<KeyBinding Command="{Binding SelectPreviousItemCommand}"
Key="Up" />
</local:TextBoxAutoSuggestion.InputBindings>
</local:TextBoxAutoSuggestion>
<Popup
Width="300"
Margin="0,0,0,0"
StaysOpen="False"
Visibility="{Binding IsPopUpOpened, Converter={StaticResource BooleanToVisibilityConverter}}"
IsOpen="{Binding IsPopUpOpened, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
PlacementTarget="{Binding ElementName=SearchPathTextBox}"
Placement="Bottom"
IsEnabled="{Binding IsPopUpEnabled, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
>
<ListBox Margin="0,0,0,0"
Visibility="{Binding IsPopUpOpened, Converter={StaticResource BooleanToVisibilityConverter}}"
ItemsSource="{Binding FilteredPossibleSegments}"
Foreground="{DynamicResource Menu.Static.Foreground}"
Background="Transparent"
SelectedItem="{Binding SelectedSegment,Mode=TwoWay}"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
Height="200"
>
</ListBox>
</Popup>
The placement which I use right now is "Bottom".

I used horizontal offset property of the pop up and set it according the text length:
<Popup
Width="300"
Margin="0,0,0,0"
StaysOpen="False"
Visibility="{Binding IsPopUpOpened, Converter={StaticResource BooleanToVisibilityConverter}}"
IsOpen="{Binding IsPopUpOpened, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
PlacementTarget="{Binding ElementName=SearchPathTextBox}"
Placement="RelativePoint"
IsEnabled="{Binding IsPopUpEnabled, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
HorizontalOffset="{Binding HorizontalPopUpPosition, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
VerticalOffset="50"
>
I experimented with the horizontal and found the best with this you need to find the best option for your position in your window.
HorizontalPopUpPosition =330+ InputText.Length*5;

SelectionChanged event of datagrid is not firing in mvvm way

//I am having a Nested datagrid
and i need to fire the event when inner grid row selection changes.
<DataGrid ScrollViewer.CanContentScroll="True"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
HeadersVisibility="Row"
Height="{Binding ElementName=itemsgrid,Path=ActualHeight}"
Grid.Row="1"
RowDetailsVisibilityMode="Visible"
CanUserAddRows="false"
VerticalAlignment="Top"
AutoGenerateColumns="False"
SelectedItem="{Binding SelectedBasketItem}"
ItemsSource="{Binding SelectedOrderBasketItems}"
CanUserDeleteRows="True">
<DataGrid.RowDetailsTemplate>
<DataTemplate>
<DataGrid ScrollViewer.CanContentScroll="True"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
CanUserAddRows="false"
HeadersVisibility="Row"
AutoGenerateColumns="False"
ItemsSource="{Binding SelectedBasketItems}"
SelectedValue="{Binding SelectedBasketItemValue}"
SelectedIndex="{Binding SelectedOrderItemIndex}"
SelectedItem="{Binding SelectedSpecificItemInBasket, Mode=TwoWay}"
DataGrid.SelectionMode="Single"
Style="{StaticResource GridItemsControlStyle}"
ctrls:DragDrop.DropHandler="{Binding DropHandler}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<i:InvokeCommandAction Command="{Binding DataContext.DgSelectionChangedCommand,
RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"
CommandParameter="{Binding}" />
</i:EventTrigger>
</i:Interaction.Triggers>
<DataGrid.Columns>
<DataGridTextColumn IsReadOnly="True"
Binding="{Binding Path=ItemName}"
Width="195">
</DataGridTextColumn>
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Label Content="{Binding Path=RulesCount}"
Background="{Binding Path=RulesCount ,Converter={StaticResource ItemColourConverter}}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Width="115">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Label Content="{Binding Path=LinkedOrderCount}"
Background="{Binding Path=LinkedOrderCount ,Converter={StaticResource ItemColourConverter}}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Width="55">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Label Content="{Binding Path=SDICount}">
<Label.Background>
<MultiBinding Converter="{StaticResource SdiItemColourConverter}">
<Binding ElementName="SDIMaxCnt"
Path="Value" />
<Binding Path="SDICount" />
</MultiBinding>
</Label.Background>
</Label>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</DataTemplate>
</DataGrid.RowDetailsTemplate>
//My Delegate Command initialization in ViewModel
protected override void InitializeCommands()
{
DgSelectionChangedCommand= new DelegateCommand<object>(DGSelectionChanged);
}
//My Method in the view model to be called when selection changed event is fired
void DGSelectionChanged(object obj)
{
//Logic
}
The event gets fired when i use the same event in code behind . i am trying to use interaction trigger to achieve the same in mvvm way .Not sure what i am missing .Any help is greatly appreciated.

Set the AncestorLevel of the RelativeSource to 2:
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<i:InvokeCommandAction Command="{Binding DataContext.DgSelectionChangedCommand,
RelativeSource={RelativeSource AncestorType={x:Type DataGrid}, AncestorLevel=2}}"
CommandParameter="{Binding}" />
</i:EventTrigger>
</i:Interaction.Triggers>

Autopostback is the mechanism, by which the page will be posted back to the server automatically based on some events in the web controls. In some of the web controls, the property called auto post back.
which if set to true, will send the request to the server when an event happens in the control.
AutoPostBack=True;
please go through the link for more:
Difference between AutoPostBack=True and AutoPostBack=False?

WPF Command Binding of ContextMenu Item inside ItemsControl

My Application consists of a MainWindow with a ContentControl and I change the ViewModel depending on the selected menu.
One of the UserControls I display as content contains the following WrapPanel:
<UserControl ...>
<Grid>
<WrapPanel>
<ItemsControl ItemsSource="{Binding Connections}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Command="{Binding DataContext.ConnectionSelectCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}"
CommandParameter="{Binding}"
FocusManager.FocusedElement="{Binding ElementName=InstanceName}"
Style="{DynamicResource DashboardButton}">
<TextBlock TextWrapping="Wrap" HorizontalAlignment="Center" Text="{Binding Name}" />
<Button.ContextMenu>
<ContextMenu>
<MenuItem Header="Delete"
Command="{Binding ConnectionRemoveCommand}"
CommandParameter="{Binding}" />
</ContextMenu>
</Button.ContextMenu>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</WrapPanel>
</Grid>
</UserControl>
The Command on the ContextMenu doesn't work because it tries to call ConnectionRemoveCommand on the Connection object instead of the ConnectionViewModel which is the DataContext of the UserControl.
How do I bind the Command to the ConnectionViewModel with the CommandParameter being the Connection object?

If you bind the Tag property of the Button to the DataContext of the ItemsControl, you could then bind to it using the PlacementTarget of the ContextMenu:
<Button Command="{Binding DataContext.ConnectionSelectCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}"
CommandParameter="{Binding}"
FocusManager.FocusedElement="{Binding ElementName=InstanceName}"
Style="{DynamicResource DashboardButton}"
Tag="{Binding DataContext, RelativeSource={RelativeSource AncestorType=ItemsControl}}">
<TextBlock TextWrapping="Wrap" HorizontalAlignment="Center" Text="{Binding Name}" />
<Button.ContextMenu>
<ContextMenu>
<MenuItem Header="Delete"
Command="{Binding PlacementTarget.Tag.ConnectionRemoveCommand, RelativeSource={RelativeSource AncestorType=ContextMenu}}"
CommandParameter="{Binding}" />
</ContextMenu>
</Button.ContextMenu>
</Button>

WPF MVVM: EventTrigger is not working inside CheckBox

I'm building an application with WPF in MVVM style. I'm trying to make filter on my DataGrid when I check or uncheck several CheckBoxes for filtering.
I've found solution with Interaction.Triggers, but it's not working for me in this case.
Here is my code:
<ListBox
ItemsSource="{Binding PortsFilterSource}"
Background="LightGray"
BorderThickness="0"
Grid.Column="1">
<ListBox.ItemTemplate>
<DataTemplate>
<CheckBox
Content="{Binding Name}"
IsChecked="{Binding IsChecked}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Unchecked">
<i:InvokeCommandAction Command="{Binding FilterCommand}"/>
</i:EventTrigger>
<i:EventTrigger EventName="Checked">
<i:InvokeCommandAction Command="{Binding FilterCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</CheckBox>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Everything is working great except FilterCommand. I have this in my C# code:
public DelegateCommand<object> FilterCommand { get; set; }
...
FilterCommand = new DelegateCommand<object>(Filter);
Filter(object obj) is a function, but it is not entered when I check or uncheck any of my CheckBoxes.
Any help would be very appreciated.

The problem is, that the data context of the list item is of type FilterModel, but the FilterCommand is in the parent view model.
Try the following binding for the command:
{Binding DataContext.FilterCommand, RelativeSource={RelativeSource AncestorType={x:Type ListBox}}}

this is work for me.
<DataGridTemplateColumn Header="IsApved" IsReadOnly="False" CanUserSort="False" Width="55">
<DataGridTemplateColumn.CellTemplate >
<DataTemplate>
<CheckBox
Content="{Binding Name}"
IsChecked="{Binding IsSelect,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Unchecked">
<i:InvokeCommandAction Command="{Binding DataContext.CheckCommand,RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
</i:EventTrigger>
<i:EventTrigger EventName="Checked">
<i:InvokeCommandAction Command="{Binding DataContext.CheckCommand,RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</CheckBox>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>