I assume this has been asked before but I couldn't find it, so let me know if it's a duplicate found with other verbiage or something.
The problem is with an SL4 DataGrid which contains multiple CellTemplate's including Checkbox, Button etc. By default it will only tab through these elements on the first row. If I set TabNavigation="Cycle" it will tab through all the elements, but it doesn't move on to the next elements and instead just re-iterates the tabbing through the same DataGrid.
If I set it to Once then again it will only tab through the first row....and SL4 doesn't appear to have a Continue option to move onto the next object once it reaches the edge.
I'm looking for just an easy way to take the equivalent of TabNavigation="Cycle" except when it reaches the last tab-able element in the DataGrid then it moves on to the next thing in the tree instead of just tabbing back to the first element in the DataGrid again. What am I missing here?
There doesn't seem to be a native way to do this in Silverlight, here is a list of supported key strokes in the data grid control: http://msdn.microsoft.com/en-us/library/cc838112(v=vs.95).aspx
I was able to fake it by using a KeyDown event and checking for Tab then setting the editing cell manually:
<Grid x:Name="LayoutRoot" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBox Grid.Row="0" Text="Some text" />
<sdk:DataGrid Grid.Row="1" ItemsSource="{Binding People}" AutoGenerateColumns="False" KeyDown="DataGrid_KeyDown">
<sdk:DataGrid.Columns>
<sdk:DataGridTemplateColumn>
<sdk:DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<TextBox Text="{Binding FirstName}" />
</DataTemplate>
</sdk:DataGridTemplateColumn.CellEditingTemplate>
</sdk:DataGridTemplateColumn>
<sdk:DataGridTemplateColumn>
<sdk:DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<TextBox Text="{Binding LastName}" />
</DataTemplate>
</sdk:DataGridTemplateColumn.CellEditingTemplate>
</sdk:DataGridTemplateColumn>
</sdk:DataGrid.Columns>
</sdk:DataGrid>
<TextBox Grid.Row="2" Text="Some more text" />
</Grid>
private void DataGrid_KeyDown(object sender, KeyEventArgs e)
{
DataGrid dg = (DataGrid)sender;
ObservableCollection<Person> items = dg.ItemsSource as ObservableCollection<Person>;
if (e.Key == Key.Tab && dg.SelectedIndex < items.Count -1)
{
dg.SelectedIndex++;
dg.CurrentColumn = dg.Columns[0];
dg.BeginEdit();
var cell = dg.CurrentColumn.GetCellContent(dg.SelectedItem);
}
}
I had some exp wth SL4 long time back. I will give your problem a try:
See the property you set to get your desired behavior won't work. It will be the Microsoft way only, thus alternative is to write your own code to achieve the required behavior.
My idea is to attach the following event to each datagrid cell:
private void DataGridCell_KeyDown(object sender, KeyEventArgs e)
{
if (keypressed == 'TAB' && last cell of the datagrid)
{
e.handled=true;
int tabIndex = dg.TabIndex;
tabindex++;
Control control = GetControl(tabIndex); // You can use visual tree in the method to get it
control.select();
control.focus();
}
}
My apologies I have written pseudo instead of real code, since it will take time for me to recall the code I use to do in SL.
Hope this solution works for you both way, when you tab out of data-grid and reverse tab in to the data-grid.
Related
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
I have 2 ListViews and a TextBlock. The first ListView1 includes letters in Alphabetical order. And the second ListView2 includes the words that start with the selected letter (in ListView1). When I choose a letter from ListView1 and then click on a word loaded in ListView2, I want to get the definition of this word in a TextBlock.
This is my Xaml:
<ListView
Width="510"
x:Name="ListView1"
ItemsSource="{Binding}"
Background="White"
Foreground="Black"
TabIndex="1"
Margin="-7,8,0,0"
IsSwipeEnabled="False"
SelectionChanged="ItemListView_SelectionChanged"
Grid.Row="1"
HorizontalAlignment="Left">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Grid.Row="0"
Text="{Binding glossary_letter}"
Margin="10,0,0,0"
TextWrapping="Wrap"
Foreground="Black"
FontSize="24"
FontWeight="SemiBold"
VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView Width="361"
x:Name="ListView2"
Background="White"
Foreground="Black"
Margin="425,8,230,0"
Grid.Row="1"
HorizontalAlignment="Center"
ItemsSource="{Binding}"
SelectionChanged="itemListView2_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Grid.Row="1"
TextWrapping="Wrap"
Foreground="Black"
Text="{Binding}"
FontSize="24"
FontWeight="SemiBold"
VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<StackPanel HorizontalAlignment="Right"
Background="White"
Width="580"
Margin="0,10,0,0" Grid.Row="1" Grid.ColumnSpan="2">
<TextBlock x:Name="defBlock" Foreground="Black" Text="{Binding glossary_definition}"></TextBlock>
</StackPanel>
If I click the first time on a letter (ListView1) then on a word (ListView2) it shows me the definition. However the second time I click on a letter, it gives me an OutOfRange Error where the ListView2.SelectedIndex = -1
This is my C# code:
private void ListView1_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
ListView2.ItemsSource = arrayW[ListView1.SelectedIndex];
}
private void ListView2_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
defBlock.Text = arrayDef[ListView1.SelectedIndex][ListView2.SelectedIndex];
}
Any idea what is the error I am doing?
private void ListView2_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if(ListView2.SelectedIndex >= 0){
defBlock.Text = arrayDef[ListView1.SelectedIndex][ListView2.SelectedIndex];
}
else
{
defBlock.Text = arrayDef[ListView1.SelectedIndex][0];//set default selected word..
}
}
The problem
You need to manage your list2 selected index changed handler, as every time you update your list one there is a selected index change on list 2 and as there is no selected index it defaults to -1.
There's a number of ways to do this.
1.
private void ListView2_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if(ListView2.SelectedIndex == -1)
// do something or
// eg.
return;
// or
throw new IndexOutOfRangeException("Message");
//or
throw new Exception(); // catch all
}
2.
I'm not sure how you want your app to look like.
I'd be using two separate pages for this. And have the xaml for your first list view and then a second page is viewed and bound to the selected index of your first page.
So list1, you select and that then is easier to set as the data source in a new page which shows list2, and then you can update your textbox with the details from a selected item. or further, create a third page if you wanted to show more extensive details of the word and it's definition.
This way you will not have problems with your List2 having no selected index as the data source is changed.
3.
Or,
Take the binding declarations out of the index changed handler and call them methodically when an index is in List1 is selected.So when the selection of List1 is changed, List 2 is updated in other words, you need to update your data source. edit: and with this it's another way of you controlling the use of error handling to avoid an outofrange exception, as the datasource is updated.
So possibly put the following into a separate method.
private void MyTextMethod(){
defBlock.Text = arrayDef[ListView1.SelectedIndex][ListView2.SelectedIndex];
}
private void ListView2_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
try{
MyTextMethod)();
}
catch(OutOfRangeException){
// do something.
}
}
out of your selected index changed handler and make a call to a separate method when from within the handler.
4.
Take your binding declaration for list2 from out of your selectedindex change handler for list1.
So you could have a method that will update the binding source of list2 and manage the selected index changed handler. Though this is the least useful suggestion.
Bottom line: You need to have some try and catch, or throw statement managing the outofrange exception, as the second list will have varying lengths and the index on letter As list may be selected at 10, and then the letter X may only have a list of length 1 and there is always the issue of the selectionchange returning a selection of -1.
( You don't actually need to clear list2, it is cleared automatically as the data source is changed (sorry, I didn't make that clear))
I'm trying to programatically create a button flyout, within my XAML I have:
<Page.Resources>
<Button x:Key="LaunchFlyout" Content="LAUNCH">
<Button.Flyout>
<Flyout Placement="Top">
<Grid Width="200" Height="200">
<StackPanel>
<Rectangle Fill="Red" Width="100" Height="100" />
<Rectangle Fill="Green" Width="100" Height="100" />
</StackPanel>
</Grid>
</Flyout>
</Button.Flyout>
</Button>
</Page.Resources>
Nested within grids I have:
<Grid x:Name="launchBtn_grid" Grid.Column="1">
</Grid>
And then in my code within the Page_Loaded method I have:
bool hasContainer = localSettings.Containers.ContainsKey("appStatus");
if (!hasContainer) {
Button button = (Button)this.Resources["LaunchFlyout"];
launchBtn_grid.Children.Add(button);
}
else {
Button button = new Button();
button.Content = "LAUNCH";
button.Click += launch_btn_Click;
launchBtn_grid.Children.Add(button);
}
When I debug this, it reaches the IF statement and reaches this line launchBtn_grid.Children.Add(button); and then I get this error Element is already the child of another element.
Does anyone understand why? I have already looked and they dont already exist so I don't understand why it is giving me this error. Does anyone know what I am doing wrong?
I'm not sure in what context/use case your are doing that, but it feels weird to me to have an actual control as a Resource (not a DataTemplate, Style, etc).
If you only want to have 1 button of the 2 different template, why not switch Visibility on the 2 instead of loading controls from your code behind ?
Going forward with the idea, just add both buttons in the Grid within your XAML and switch their Visibility according to the setting you read.
There is a BooleanToVisibilityConverter within the framework to help you with this.
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.
Have an issue with getting access to a button that is embedded in a
DataGridTemplateColumn.HeaderTemplate. The button is created fine and can attach an event to the button. All works well, except when attempting to get access from the code behind, Ex:btnbutton.IsEnabled = false; Returns an error and said the object does not exist. I have tested this with various version of .NET up to 4.5 and get the same results, btnButton does not exist.
I have done this same with a ListView object and it works fine.
<DataGrid Name="dgTest1" ItemsSource="{Binding} AutoGenerateColumns="False"
<DataGrid.Columns>
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Name="btnButton" Content="One Button" WinWidth="100"></Button>
</Grid>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
</DataGrid.Columns>
</DataGrid>
Code Behind: btnButton.IsEnabled = false;
Is there a way to gain access to a button in a DataGrid Template Header?
You can try something like this :
var aButton = templateName.ChildrenOfType<Button>().FirstOrDefault( b => b.Name == "btnButton" );
You can not access template control like that, you need to apply template and then find them
You need to call apply template first on DataGrid header and then
var button = dgTest1.template.findname("btnButton", dgTest1)
I believe the proper way here would be to bind your button to a property on the view model:
<Button IsEnabled="{Binding IsButtonEnabled}" Content="One Button"/>
or to a command (you can implement your own command, create a property IsEnabled in it, and return this property's value from the CanExecute() method). Let me know if you need more details here.