Develop Reference

Adding Static Button to MenuItem when binded to ItemSouce

i have an observable collection as ItemSource for my menuitems.
i want a simple button (see commented part) at end of menu item list that can add new item to this collection.
it seem simple But it throw a System.Windows.Markup.XamlParseException in my code telling the collection is already in use.
what is the correct way to achieve this?
<Menu Background="Transparent">
<MenuItem Header="WorkSpace" Background="Transparent" ItemsSource="{Binding NosWorkSpaces}">
<ItemsControl.ItemTemplate>
<DataTemplate >
<StackPanel Orientation="Horizontal">
<Label Content="{Binding Original.Title}"></Label>
<Button Content="Select" Tag="WorkSpace_Load" Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=mah:MetroWindow}, Path=DataContext.SelectWorkspaceCommand}" CommandParameter="{Binding }" />
<Button Content="Load" Tag="WorkSpace_Load" Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=mah:MetroWindow}, Path=DataContext.LoadBinaryWorkspace}" CommandParameter="{Binding }" />
<Button Content="Save" Tag="WorkSpace_Save" Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=mah:MetroWindow}, Path=DataContext.SaveWorkspaceCommand}" CommandParameter="{Binding }" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
<!-- <Button Content="New " /> this wont work -->
</MenuItem>
</Menu>

Well i found a solution mixing some answer, even i find it not so easy for a simple menu.
<Menu Height="24" VerticalAlignment="Top">
<Menu.Resources>
<CollectionViewSource Source="{Binding NosWorkSpaces}" x:Key="YourMenuItems"/>
</Menu.Resources>
<MenuItem Header="WorkSpaces" >
<MenuItem.ItemsSource>
<CompositeCollection>
<CollectionContainer Collection="{Binding Source={StaticResource YourMenuItems}}" />
<Separator></Separator>
<MenuItem Header="Add Worspace" />
</CompositeCollection>
</MenuItem.ItemsSource>
<MenuItem.ItemTemplate>
<DataTemplate >
<StackPanel Orientation="Horizontal">
<Label Content="{Binding Original.Title}"></Label>
<Button Content="Select" Tag="WorkSpace_Load" Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=mah:MetroWindow}, Path=DataContext.SelectWorkspaceCommand}" CommandParameter="{Binding }" />
<Button Content="Load" Tag="WorkSpace_Load" Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=mah:MetroWindow}, Path=DataContext.LoadBinaryWorkspace}" CommandParameter="{Binding }" />
<Button Content="Save" Tag="WorkSpace_Save" Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=mah:MetroWindow}, Path=DataContext.SaveWorkspaceCommand}" CommandParameter="{Binding }" />
</StackPanel>
</DataTemplate>
</MenuItem.ItemTemplate>
</MenuItem>
</Menu>
giving a mixed menu with itemSource and datatemplate.

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;

Is there anyway to bind a command to all instances of a button in a user control in XAML / WPF / MVVM

My problem is that I have a lot of code doing the same thing. All the buttons in my stackpanel trigger a command and with that command I want to send a parameter to a method in my view model.
I have the following XAML code, as you can see it is ridiculously repetitive:
<StackPanel x:Name="Row" Grid.Row="4">
<Button Content="z"
Command="{Binding ButtonClickCommand}"
CommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=Content}" />
<Button Content="x"
Command="{Binding ButtonClickCommand}"
CommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=Content}" />
<Button Content="c"
Command="{Binding ButtonClickCommand}"
CommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=Content}" />
<Button Content="v"
Command="{Binding ButtonClickCommand}"
CommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=Content}" />
<Button Content="b"
Command="{Binding ButtonClickCommand}"
CommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=Content}" />
<Button Content="n"
Command="{Binding ButtonClickCommand}"
CommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=Content}" />
<Button Content="m"
Command="{Binding ButtonClickCommand}"
CommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=Content}" />
</StackPanel>
Is there a way I can reduce the amount of repetitive code, either in the XAML or View Model?
Thanks in advance

Simple solution that works, assuming you have buttons and command binding done at one place or else the first answer (seen the answer after my post) gives you easiest way by putting under an ItemsControl and do the stuff.
<StackPanel x:Name="Row" Grid.Row="4">
<StackPanel.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Command" Value="{Binding ButtonClickCommand}" />
<Setter Property="CommandParameter" Value="{Binding RelativeSource={RelativeSource Self}, Path=Content}"
/>
</Style>
</StackPanel.Resources>
<Button Content="z" />
<Button Content="x" />
<Button Content="c" />
<Button Content="v" />
<Button Content="b" />
<Button Content="n" />
<Button Content="m" />
</StackPanel>
Hope this helps you :)

Create a list of items in your ViewModel, for example
public IEnumerable<string> Values { get; set; } = new List<string> { "x", "c", "v", "..." };
And assign it to the ItemsControl
<ItemsControl x:Name="Row" Grid.Row="4" ItemsSource="{Binding Values}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Content="{Binding }"
Command="{Binding Path=DataContext.ButtonClickCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}"
CommandParameter="{Binding }"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
ItemsControl.ItemsPanel says what container to use for these items and ItemTemplate defines what each element of StackPanel should look like.
Binding inside DataTemplate refers to string that's why in order to get to the ButtonClickCommand we have to go back to ItemsControl's context.

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>

red outline displays on Combobox in C# wpf

I am having an Wpf application it has a Combobox.
which contains a checkbox and Textblock when i click on the checkbox
it shows the selected country string in the combobox but if i click on text it shows me a error string as shown in image.
I want to show the country name even if the user clicks on the textblock.
My xaml looks like this
<ComboBox Text="{Binding CurrentCountries}" ToolTip="{Binding CurrentCountries}" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left" Name="cmbCountry" IsEditable="True" IsReadOnly="True" TextSearch.TextPath="{Binding CountryName}" HorizontalContentAlignment="Left" Margin="80,14,0,0" VerticalAlignment="Top" Width="100 " ItemsSource="{Binding Country, Mode=TwoWay}" SelectedItem="{Binding SelectedCountry,Mode= TwoWay}" Height="22" TabIndex="1">
<ComboBox.ItemTemplate>
<DataTemplate>
<CheckBox Name="Country" HorizontalAlignment="Left" Grid.Column="0" Content="{Binding CountryName}" IsChecked="{Binding IsChecked}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Checked">
<Commands:EventToCommand Command="{Binding DataContext.CountryCheckedCmd,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type telerik:RadWindow}}}" CommandParameter="{Binding ElementName=Country}" ></Commands:EventToCommand>
</i:EventTrigger>
<i:EventTrigger EventName="Unchecked">
<Commands:EventToCommand Command="{Binding DataContext.CountryUnCheckedCmd,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type telerik:RadWindow}}}" CommandParameter="{Binding ElementName=Country}" ></Commands:EventToCommand>
</i:EventTrigger>
</i:Interaction.Triggers>
</CheckBox>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
thank you!

If you want to multiselection ComboBox you should use CheckComboBox from WPF Extended Toolkit.
It's very easy to using, example:
<xctk:CheckComboBox x:Name="_combo"
HorizontalAlignment="Center"
VerticalAlignment="Center"
DisplayMemberPath="Color"
ValueMemberPath="Level"
SelectedValue="{Binding SelectedValue}"
SelectedItems="{Binding SelectedItems}" />