Why does my dropdown feel so clunky? - c#

I have a XAML UserControl embedded in a WinForms/WPF Interop ElementHost control. The control is pretty simple - it's just a dropdown with a button - here's the entire markup:
<UserControl x:Class="Rubberduck.UI.FindSymbol.FindSymbolControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Rubberduck.UI.FindSymbol"
mc:Ignorable="d"
d:DesignHeight="27" d:DesignWidth="270">
<UserControl.Resources>
<local:DeclarationImageConverter x:Key="DeclarationImageConverter" />
</UserControl.Resources>
<UserControl.CommandBindings>
<CommandBinding Command="local:FindSymbolControl.GoCommand"
Executed="CommandBinding_OnExecuted"
CanExecute="CommandBinding_OnCanExecute"/>
</UserControl.CommandBindings>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="32" />
</Grid.ColumnDefinitions>
<ComboBox IsEditable="True"
ItemsSource="{Binding MatchResults}"
SelectedItem="{Binding SelectedItem, UpdateSourceTrigger=PropertyChanged}"
Text="{Binding SearchString, UpdateSourceTrigger=PropertyChanged}"
IsTextSearchCaseSensitive="False"
IsTextSearchEnabled="True"
TextSearch.TextPath="IdentifierName">
<ComboBox.ItemTemplate>
<DataTemplate DataType="local:SearchResult">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<Image Height="16" Width="16" Margin="2,0,2,0" Source="{Binding Declaration, Converter={StaticResource DeclarationImageConverter}}" />
<TextBlock Margin="2,0,2,0" Text="{Binding IdentifierName}" FontWeight="Bold" MinWidth="140" />
<TextBlock Margin="2,0,2,0" Text="{Binding Location}" />
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<Button Grid.Column="1"
Command="local:FindSymbolControl.GoCommand">
<Image Height="16" Source="pack://application:,,,/Rubberduck;component/Resources/arrow.png" />
</Button>
</Grid>
</UserControl>
The problem is that it doesn't work reliably, and far from instinctively.
If I type something in the box that actually matches an item, nothing happens until I manually select that item in the dropdown. Like here, I typed "sleepD", the box autocompleted to "sleepDelay", but the command is still disabled:
Once I've selected the item in the dropdown, the command button gets enabled as expected (although the image on the button doesn't show up grayed-out when the button is disabled, so it's not exactly as obvious as I intended it to be).
(the screenshot isn't really showing it, but there's only 1 match for that search)
If I click the button at that point, it works as expected. The problem is that if I make a new selection from the dropdown after that, the text box gets cleared instead of displaying the item I selected, and there's a weird delay during which the box is displaying what appears to be selected whitespace - this only seems to happen when the previous selection was made after selecting a value in the dropdown while the search text matches multiple entries, like "Sleep" above.
After the box got cleared, I can make a new selection from the dropdown and it will work as expected (except the VBE won't actually activate the CodePane I'm setting the selection to, but that's a separate issue).
The command implementation simply raises a Navigate event that passes a Declaration to the code that owns the VM instance.
The Search method, for which I need to add a .Take(50) after the .Select, to limit the number of returned results and perhaps reduce the lag a bit:
private void Search(string value)
{
var lower = value.ToLowerInvariant();
var results = _declarations.Where(
declaration => declaration.IdentifierName.ToLowerInvariant().Contains(lower))
.OrderBy(declaration => declaration.IdentifierName.ToLowerInvariant())
.Select(declaration => new SearchResult(declaration));
MatchResults = new ObservableCollection<SearchResult>(results);
}
private string _searchString;
public string SearchString
{
get { return _searchString; }
set
{
_searchString = value;
Search(value);
}
}
private SearchResult _selectedItem;
public SearchResult SelectedItem
{
get { return _selectedItem; }
set
{
_selectedItem = value;
OnPropertyChanged();
}
}
private ObservableCollection<SearchResult> _matchResults;
public ObservableCollection<SearchResult> MatchResults
{
get { return _matchResults; }
set { _matchResults = value; OnPropertyChanged(); }
}
}
There's also an IValueConverter involved, that takes the Declaration in the SearchResult and switches on the declaration's DeclarationType enum to return a pack uri that points to the .png image to use in the dropdown list.

Aaah found it. It was all in the XAML.
Right here:
Text="{Binding SearchString, UpdateSourceTrigger=PropertyChanged}"
That line doesn't belong there; binding the TextSearch.Text property instead...
TextSearch.Text="{Binding SearchString, Mode=OneWayToSource, UpdateSourceTrigger=PropertyChanged}"
Makes it all work as intended. No glitch, no lag. Well there is a lag when I first drop the dropdown, but that's another issue.
Lesson learned: when TextSearch is enabled on an editable combobox, don't bind the Text property, unless you want weird behavior.

Related

WPF tooltip on item does not retrigger initial delay

Consider the following simple code.
When I hover the mouse on any item, it waits for 1 second and then it shows the ToolTip as expected. However, if i move the mouse to another item without getting out of the list, the tooltip simply updates to the new item name without retriggering a show delay. Is this normal behavior?
I need for the tooltip to disappear when moving the mouse across the list whenever it enters a new item and retrigger a show delay. Any suggestions?
MainWindow.xaml
<Window x:Class="WpfApplication.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:lcl="clr-namespace:WpfApplication"
Title="MainWindow" Height="350" Width="525">
<Grid>
<ListBox HorizontalContentAlignment="Stretch" ItemsSource="{Binding RelativeSource={RelativeSource AncestorType=Window}, Path=Items}">
<ListBox.ItemTemplate>
<DataTemplate DataType="lcl:Item">
<TextBlock
Text="{Binding Name}"
HorizontalAlignment="Stretch"
ToolTipService.InitialShowDelay="1000"
ToolTipService.BetweenShowDelay="1000"
ToolTipService.HasDropShadow="True"
ToolTipService.HorizontalOffset="5"
ToolTipService.VerticalOffset="5">
<TextBlock.ToolTip>
<TextBlock Text="{Binding Name}" />
</TextBlock.ToolTip>
</TextBlock>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Window>
MainWindow.xaml.cs
namespace WpfApplication
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
_Items.Add(new Item() { Name = "First" });
_Items.Add(new Item() { Name = "Second" });
_Items.Add(new Item() { Name = "Third" });
}
public Collection<Item> _Items = new Collection<Item>();
public Collection<Item> Items
{
get { return _Items; }
}
}
public class Item
{
public string Name
{
get;
set;
}
}
}
I am afraid that you misunderstood how the BetweenShowDelay property works. As you can read here:
In the [...] example, the InitialShowDelay property is set to one
second (1000 milliseconds) and the BetweenShowDelay is set to two
seconds (2000 milliseconds) for the tooltips of both Ellipse controls.
If you display the tooltip for one of the ellipses and then move the
mouse pointer to another ellipse within two seconds and pause on it,
the tooltip of the second ellipse displays immediately.
Take a look to the example in the link above for more details.
So - as you can see - the one that you describe is the normal behavior.
This seems to work as expected for me, i.e. don't set the ToolTipService.BetweenShowDelay property:
<TextBlock
Text="{Binding Name}"
HorizontalAlignment="Stretch"
ToolTipService.InitialShowDelay="5000"
ToolTipService.HasDropShadow="True"
ToolTipService.HorizontalOffset="5"
ToolTipService.VerticalOffset="5">
<TextBlock.ToolTip>
<TextBlock Text="{Binding Name}" />
</TextBlock.ToolTip>
</TextBlock>
I am also seeing the behavior that the OP was questioning. The entire reason I added the property ToolTipService.BetweenShowDelay was because I thought it would fix the problem, but as said here we are misunderstanding what it does.
Perhaps this is a bug in WPF, because even without setting BetweenShowDelay, the moment the mouse moves to another element, the tooltip just changes instead of the previous tooltip closing and then waiting to open the new one.
I am wondering if it has to do with using a Data Template?

Special Sorting ListView when clicking header

I got a row like this:
XAML:
<ListView x:Name="ListViewAnlagen"
Grid.RowSpan="2"
ItemContainerStyle="{StaticResource TempContainerStyle}"
VerticalAlignment="Top" HorizontalAlignment="Left"
Height="571" Width="1314"
Margin="0,53,0,0"
AlternationCount="2"
GridViewColumnHeader.Click="GridViewColumnHeaderClickedHandler">
<ListView.View>
<GridView ColumnHeaderContainerStyle="{DynamicResource CustomHeaderStyle}">
<GridView.Columns>
<GridViewColumn Width="100">
<GridViewColumn.CellTemplate>
<DataTemplate>
<Border x:Name="border"
BorderBrush="Gray" BorderThickness=".5" Margin="-6,-3">
<TextBlock Text="{Binding EqNr}" Margin="6,3"/>
</Border>
</DataTemplate>
</GridViewColumn.CellTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="EQ Nr."/>
<Image Source="img/filter.png"
Width="20" Height="20" Margin="25 0 0 0"
MouseDown="Image_MouseDown_1" />
</StackPanel>
</GridViewColumn>
I have added a click handler: GridViewColumnHeader.Click
My Question is, how to sort this ascending and descending. I already looked at some others solutions, but it seems they only work when you bind it with DisplayMemberBinding.
What I already tried:
this
Since you already examined the example as commented by #AmolBavannavar (https://code.msdn.microsoft.com/windowsdesktop/Sorting-a-WPF-ListView-by-209a7d45), here is a hybris between the example and your current approach.
The main obstacle in adapting the example is the usage of GridViewColumnHeader.Command and GridViewColumnHeader.CommandParameter. Your equivalent for the command is the GridViewColumnHeader.Click="GridViewColumnHeaderClickedHandler", but you still need an equivalent to the command parameter.
I suggest you create an attached string property for this purpose and use it to attach the sort property name to the GridViewColumn. For the sake of demonstration, I don't create a new property but instead misuse the TextSearch.TextPath attached property:
<GridViewColumn Width="100" TextSearch.TextPath="EqNr">
Note that the "EqNr" is the same as the property name that is used for binding inside the cell template later.
Now, everything is in place to be used inside the click handler.
Get the clicked column header
Get the associated column
Get the attached property value that contains the sort property name
Get the collection view that is associated with the items source (or items)
Change the sort descriptions of the collection view
Code with simplified sorting logic:
private void GridViewColumnHeaderClickedHandler(object sender, RoutedEventArgs e)
{
var h = e.OriginalSource as GridViewColumnHeader;
if (h != null)
{
var propertyName = h.Column.GetValue(TextSearch.TextPathProperty) as string;
var cvs = ListViewAnlagen.ItemsSource as ICollectionView ??
CollectionViewSource.GetDefaultView(ListViewAnlagen.ItemsSource) ??
ListViewAnlagen.Items;
if (cvs != null)
{
cvs.SortDescriptions.Clear();
cvs.SortDescriptions.Add(new SortDescription(propertyName, ListSortDirection.Descending));
}
}
}
Note that for the sake of demonstration I only clear the sort descriptions and add a static descending sort description. For your actual application, you may want to keep track (or analyze) the current sorting status for the column and then alternate between ascending and descending sort.

WPF - Setting tab order on large number of controls

So I have a large amount of controls (textboxes) as you can see below, but there are around 30 rows of this. These are loaded using arrays, and each column represents an array. So when I hit tab in a textbox, instead of tabbing horizontally, it tabs vertically instead.
Is there a way to set the tab order so it will tab horizontally, aside from changing the way the controls are loaded?
Another quirk is that when leaving one textbox, instead of focusing the next, it just kind of highlights the textbox, and I have to tab a second time to get inside the next textbox.
EDIT:
Main view (lots of code has been omitted, I'm pretty sure nothing has been left out that needs to be here)
<ListBox ItemsSource="{Binding Items}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
ItemsView
<UserControl>
<UserControl.Resources>
<DataTemplate DataType="{x:Type vm:Item}">
<views:ItemView/>
</DataTemplate>
</UserControl.Resources>
<StackPanel>
<ContentControl Content="{Binding item <!-- about 30 different items here, omitted for readability -->}" />
</StackPanel>
</UserControl>
ItemView
<UserControl ... IsTabStop="False">
<TextBox Text="{Binding Value}" />
</UserControl>
The ItemView is nested in the ItemsView, which is nested in the MainView. Since the textboxes are generated based on the array values, I can't easily set the TabIndex property unless there is a way I don't know about (I am pretty new at WPF).
The TabIndex property provides a way to control the tab order independently of the order controls are loaded.
Usage example:
<Grid>
<TextBox TabIndex="2" /><!-- will receive focus second -->
<TextBox TabIndex="1" /><!-- will receive focus first-->
</Grid>
I would guess the unwanted focusing you are seeing is due to a parent UserControl that your TextBoxes are placed in.
If this is the case, you could prevent that by setting IsTabStop="false" on that parent control.
For example:
<UserControl .... IsTabStop="False">
<Grid>
<!-- other graphics -->
<TextBox TabIndex="1" />
</Grid>
</UserControl>
Using a view model to populate the data
public class CellViewModel
{
public double Value { get; set; }
public int TabIndex { get; set; }
}
public IEnumerable<IEnumerable<CellViewModel>> GetMatrix(
List<List<double>> matrixValues)
{
var columnCount = matrixValues.Count;
return matrixValues
.Select((x, i) => GetColumn(x, columnCount, i));
}
public IEnumerable<CellViewModel> GetColumn(
List<double> columnValues,
int columnCount,
int columnIndex)
{
return columnValues
.Select((x, i) =>
new CellViewModel { Value = x, TabIndex = columnIndex + columnCount * i });
}
Your ItemsSource for your ListBox (which you've now changed to ItemsControl) should be a new Matrix property, which you populate using GetMatrix().
In your ItemView, you would want something like this:
<UserControl ... IsTabStop="False">
<TextBox Text="{Binding Value}" TabIndex="{Binding TabIndex}" />
</UserControl>

Copy String of a ListViewItem into a TextBox

So I'm working on a calculator, basically a copy of the Windows Version, as a training excercise. I have implemented a History of past calculations, and I was asked to transform this history from TextBox to Listview.
What I want to do is copy one of the past calculations back into the Calculator TextBox when I click on it, just like in the Windows Calculator.
My ListViewCode:
<ListView Grid.Column="0" Grid.Row="1" Foreground="#616161" Name="history" Background="Transparent"
HorizontalAlignment="Stretch" BorderThickness="0" Margin="10,10,10,0">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<EventSetter Event="MouseLeftButtonDown" Handler="RetrievePastCalculation" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
And this is the RetrievePastCalculation method, but it doesn't work, nothing happens when I click on a ListViewItem. I'm new to WPF by the way.
private void RetrievePastCalculation(object sender, MouseButtonEventArgs e)
{
innerTextBox.Text = history.SelectedItems.ToString();
}
This is where I add items to the ListView I think, it's the Equal button method:
private void ButtonEquals_Click(object sender, RoutedEventArgs e)
{
Calculator calculate = new Calculator();
textBox.Text = calculate.Calculate(innerTextBox.Text);
history.Items.Add(innerTextBox.Text + "=" + textBox.Text);
innerTextBox.Clear();
}
history.SelectedItems is a collection, so calling ToString on it won't give you anything other than the name of the type. If you try it in the debugger (which you should), you'll see that it returns System.Windows.Controls.SelectedItemCollection. Now, at this point you can either fix your issue one of two ways: you can continue to use your current event-based approach, or you can use binding.
Events
With events, you can hook a handler to the Selected event for each ListItem that you add to the list:
private void ButtonEquals_Click(object sender, RoutedEventArgs e)
{
Calculator calculate = new Calculator();
textBox.Text = calculate.Calculate(innerTextBox.Text);
var item = new ListViewItem();
item.Content = innerTextBox.Text + "=" + textBox.Text;
item.Selected += HistoryItem_Selected //hooks the handler to the 'Selected' event
history.Items.Add(item);
innerTextBox.Clear();
}
then define the handler itself:
private void HistoryItem_Selected(object sender, RoutedEventArgs e)
{
// here 'sender' will be the ListItem which you clicked on
// but since it's an object we need to cast it first
ListViewItem listItem = (ListViewItem)sender;
// now all that's left is getting the text and assigning it to the textbox
innerTextBox.Text = listItem.Content.ToString();
}
Binding
Binding is much simpler as far as the amount of code is concerned, but has a steeper learning curve. Here, instead of setting the TextBox.Text property directly, we will specify a binding expression. This means that the value will always be the same as that of the bound expression.
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<StackPanel>
<ListView Grid.Column="0" Grid.Row="0" Name="history" />
<TextBox Text="{Binding ElementName=history, Path=SelectedItem.Content}" />
<Button Name="ButtonEquals" Content="equals" Click="ButtonEquals_Click"/>
</StackPanel>
</Grid>
</Window>
I've run this in a new WPF project and it works as expected: the text box displays whatever text is in the clicked item from the list.
One thing to note is that both solutions assume that you are assigning strings to the ListViewItem Content. As you may know, you can assign other controls or any object to the Content property of a UI Control (ListViewItem inherits from Control). That's why the ListViewItem.Add method takes an argument of type object and is not restricted to one of type string. If you assigned anything other than a string in your button click event handler, both of the two cases above would likely break.
You could bind the value of the TextBox to the SelectedItem of the ListView. Here's an example:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel>
<ListView Grid.Column="0" Grid.Row="0" Foreground="#616161" Name="history" Background="Transparent"
HorizontalAlignment="Stretch" BorderThickness="0" Margin="10,10,10,0">
<ListViewItem>Calc1</ListViewItem>
<ListViewItem>Calc2</ListViewItem>
</ListView>
<TextBox Text="{Binding ElementName=history, Path=SelectedItem.Content}" />
</StackPanel>
</Page>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="100"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ListView Grid.Column="0" Grid.Row="0" Foreground="#616161" Name="history" BorderThickness="1,1" Height="50" Width="200" SelectionChanged="history_SelectionChanged">
<ListViewItem>
<TextBlock> A ListView</TextBlock>
</ListViewItem>
<ListViewItem>
with several
</ListViewItem>
<ListViewItem>
items
</ListViewItem>
</ListView>
<TextBox Grid.Row="1" Text="{Binding ElementName=history,Path=SelectedValue.Content}"
BorderThickness="1,1" Height="50" Width="200" />
</Grid>
It's better if you do it using XAML code. try to select item 0 and 1 to see the difference and understand how listboxworks.
now replace the text of textbox binding with following:
Text="{Binding ElementName=history,Path=SelectedValue.Content.Text}"
and seee the output for item 0. Hopefully you'll achieve desired output with a lot less effort.
Now that you have explained the whole problem i think you need to implement a converter in the text binding of TextBox. like below text
Text="{Binding ElementName=history,Path=SelectedValue.Content.Text,Converter={StaticResource mytextconverter}}"
and write down a logic to extract a part of text on the basis of '=' char. It's very easy to write a converter class. to write a converter follow the below link:
WPF Converter example

Get previous page name

something that I thought would be simple is turning out not to be, or I'm just not thinking hard enough :)
I have a page which I navigate to, in the OnNavigateTo event I set the SelectedIndex of a ListPicker and that works fine.
If I then touch the ListPicker and select a new value the OnNavigateTo event is fired again and the new value is overridden by the original value.
My initial thought was to simply check the parent page name and if it was the ListPicker then skip the initial setting but I can't seem to find where to get the parent page name from.
Any clues? or a better way I should be handling this?
Here's the XAML:
<toolkit:ListPicker x:Name="Status" Margin="10,549,163,-97" Header="Status" FullModeHeader="Status" ExpansionMode="FullScreenOnly" BorderBrush="Black" Foreground="Black" Grid.ColumnSpan="2" Visibility="Visible">
<toolkit:ListPicker.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</toolkit:ListPicker.ItemTemplate>
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"
FontSize="43"
FontFamily="{StaticResource PhoneFontFamilyLight}"/>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
And here's the Loaded event:
private void AddNote_Loaded(object sender, RoutedEventArgs e)
{
this.TicketStatus.ItemsSource = ticketStatus();
string st;
if (NavigationContext.QueryString.TryGetValue("status", out st))
{
tStatus = st;
TicketStatus.SelectedIndex = GetStatus(tStatus);
}
}
Ok, worked around it but creating my own page list and manually adding and removing the pages I want to check for. Bit of a hack but it works :)

Categories

Resources