WPF placement of Intellisense like PopUp below the selection start - c#

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;

Related

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.

FocusManager.FocusedElement does not work in a Menu

I was using binding to pass FocusManager.FocusedElement as parameter.
<Button Cursor="Hand" x:Name="NetworkModel" Width="Auto" Height="Auto" Background="Transparent" BorderBrush="Transparent" Foreground="#FF0398E2"
Command="{Binding Path=MenuSelectCommand}" CommandParameter="{Binding ElementName=root, Path=(FocusManager.FocusedElement)}">
<Grid Width="145">
<materialDesign:PackIcon Kind="GraphOutline" VerticalAlignment="Center"/>
<TextBlock HorizontalAlignment="Center" Text="Network Model" FontFamily="Champagne & Limousines"/>
</Grid>
</Button>
And it works as it should. Now i created Menu, but Command Parameter is null. Does anyone know why is not working for Button in Menu but works for just Button outside of Menu.
<Menu FontSize="14" VerticalAlignment="Center" Background="#FF303030" FontFamily="Champagne & Limousines" Foreground="#FF0398E2" HorizontalAlignment="Center" Height="28" FontWeight="Bold">
<MenuItem Background="#FF303030" Height="28" Width="Auto">
<MenuItem.Header>
<Grid Width="Auto">
<materialDesign:PackIcon Kind="ViewGrid" VerticalAlignment="Center"/>
<TextBlock Width="Auto" Text="Summaries" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="20,0,0,0"/>
</Grid>
</MenuItem.Header>
<Button Cursor="Hand" x:Name="SignalsSummary" Width="Auto" Height="Auto" Background="#FF303030" BorderBrush="Transparent" Foreground="#FF0398E2"
Command="{Binding Path=MenuSelectCommand}" CommandParameter="{Binding ElementName=root, Path=(FocusManager.FocusedElement)}">
<Grid Width="145">
<TextBlock HorizontalAlignment="Center" Text="Signals Summary" FontFamily="Champagne & Limousines"/>
</Grid>
</Button>
<Button Cursor="Hand" x:Name="EventSummary" Width="Auto" Height="Auto" Background="#FF303030" BorderBrush="Transparent" Foreground="#FF0398E2"
Command="{Binding Path=MenuSelectCommand}" CommandParameter="{Binding ElementName=root, Path=(FocusManager.FocusedElement)}">
<Grid Width="145">
<TextBlock HorizontalAlignment="Center" Text="Event Summary" FontFamily="Champagne & Limousines"/>
</Grid>
</Button>
<Button Cursor="Hand" x:Name="LoggesSummary" Width="Auto" Height="Auto" Background="#FF303030" BorderBrush="Transparent" Foreground="#FF0398E2"
Command="{Binding Path=MenuSelectCommand}" CommandParameter="{Binding ElementName=root, Path=(FocusManager.FocusedElement)}">
<Grid Width="145">
<TextBlock HorizontalAlignment="Center" Text="Logges Summary" FontFamily="Champagne & Limousines"/>
</Grid>
</Button>
</MenuItem>
</Menu>
I did`t solved why is sending null but i change approach. I added this in every button
<i:Interaction.Triggers>
<i:EventTrigger EventName="PreviewMouseLeftButtonDown">
<i:CallMethodAction MethodName="OnMouseClick" TargetObject="{Binding}" />
</i:EventTrigger>
</i:Interaction.Triggers>
So now i have this:
<Button Cursor="Hand" x:Name="LoggesSummary" Width="Auto" Height="Auto" Background="Transparent" BorderBrush="Transparent" Foreground="#FF0398E2">
<i:Interaction.Triggers>
<i:EventTrigger EventName="PreviewMouseLeftButtonDown">
<i:CallMethodAction MethodName="OnMouseClick" TargetObject="{Binding}" />
</i:EventTrigger>
</i:Interaction.Triggers>
<Grid Width="145">
<TextBlock HorizontalAlignment="Center" Text="Logges Summary" FontFamily="Champagne & Limousines"/>
</Grid>
</Button>

Text not showing in Textbox

I've been stuck on this question for a while, the text in textbox shows in the visualiser but not when I run the program. Can anyone please help me?
<TextBox x:Name="SearchKey" Text ="hello" BorderThickness="0" Width="Auto" Background="White" Margin="21.724,4,20.999,4">
<TextBox.InputBindings>
<KeyBinding Key="Enter"
Command="{Binding SearchTemplatesCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:EmailComposerWindow}}}"
CommandParameter="{Binding Text, ElementName=SearchKey}"
/>
<KeyBinding Key="Esc"
Command="{Binding ResetSearchCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:EmailComposerWindow}}}"
/>
</TextBox.InputBindings>
</TextBox>

How to get bind to base viewmodel from contextmenu inside treeview?

I'm having trouble getting the selection in a contextMenu to bind to my command EditCommand. The buttons in my tree-view bind to it fine, but in the menu it fails. I have read this is most likely due to the contextMenu being in a different UI tree, but solutions using findAncestor and tags have not worked for me. Is there anyway to do bind and still be able to pass the treeViewItem to the method?
My XAML:
<TreeView Background="Transparent"
Margin="10"
Grid.Column="0" Grid.Row="1"
ItemsSource="{Binding Path=TreeViewItems}">
<TreeView.ItemTemplate >
<HierarchicalDataTemplate DataType="{x:Type model:TreeViewSelection}" ItemsSource="{Binding Configs}" >
<DockPanel HorizontalAlignment="Stretch" Background="Transparent"><!--Transparency allows context click on whole row-->
<DockPanel.ContextMenu>
<ContextMenu DataContext="{Binding PlacementTarget.DataContext, RelativeSource={RelativeSource Self}}">
<MenuItem
Header="Edit"
Command="{Binding ElementName=userControl, Path=DataContext.EditCommand}"<!--Doesn't work-->
CommandParameter="{Binding}">
<MenuItem.Icon>
<Image Source="../Images/edit.png" />
</MenuItem.Icon>
</MenuItem>
</ContextMenu>
</DockPanel.ContextMenu>
<TextBlock DockPanel.Dock="Left" Text="{Binding Title}" />
<StackPanel DockPanel.Dock="Right"
Orientation="Horizontal"
HorizontalAlignment="Right">
<Button Height="23" Width="23"
Command="{Binding ElementName=userControl, Path=DataContext.EditCommand}"<!--Works-->
CommandParameter="{Binding}"
Style="{DynamicResource ImageNoTextButton}"
inf:AttachedProperties.Image="../Images/edit.png"
inf:AttachedProperties.ImageMouseOver="../Images/editMouseOver.png" />
</StackPanel>
</DockPanel>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
Try this:
<DockPanel HorizontalAlignment="Stretch" Background="Transparent"
Tag="{Binding RelativeSource={RelativeSource AncestorType=UserControl}}">
<DockPanel.ContextMenu>
<ContextMenu>
<MenuItem
Header="Edit"
Command="{Binding Path=PlacementTarget.Tag.DataContext.EditCommand, RelativeSource={RelativeSource AncestorType=ContextMenu}}"
CommandParameter="{Binding}">
<MenuItem.Icon>
<Image Source="../Images/edit.png" />
</MenuItem.Icon>
</MenuItem>
</ContextMenu>
</DockPanel.ContextMenu>
...
</DockPanel>

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}" />

Categories

Resources