Develop Reference

Can't change ComboBox selection when bound to ObservableCollection (WPF)

I'm trying to create an edit form for editing properties of a custom set of TV Series objects. One of the properties holds a collection of all owned media formats (DVD, Blu-ray, etc) for that particular series that will be displayed in a ComboBox. Items are added to the ComboBox via a separate popup window and items are to be removed from the ComboBox by selecting the item and clicking a remove Button.
I can add new entries to the MediaOwned ComboBox just fine, but when I try to select a specific ComboBox item to test the remove Button I find that I can only ever select the first entry. Can someone please tell me if I've missed something embarrassingly obvious, thanks.
Here is the problematic property:
private ObservableCollection<string> _mediaOwned = new ObservableCollection<string>();
public ObservableCollection<string> MediaOwned
{
get { return _mediaOwned; }
set
{
_mediaOwned = value;
OnPropertyChanged(new PropertyChangedEventArgs("MediaOwned"));
}
}
Here are the other relevant code behind:
private void Window_Loaded(object sender, RoutedEventArgs e)
{
// Create binding for the ListBox.
Binding listBinding = new Binding();
listBinding.Source = show.Series;
listBinding.Mode = BindingMode.OneWay;
listBinding.UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged;
lbSeries.SetBinding(ListBox.ItemsSourceProperty, listBinding);
// Create binding for the ComboBox.
Binding myBinding = new Binding();
myBinding.Path = new PropertyPath("MediaOwned");
myBinding.Mode = BindingMode.TwoWay;
myBinding.UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged;
cbMediaOwned.SetBinding(ComboBox.ItemsSourceProperty, myBinding);
}
private void btnRemoveMedia_Click(object sender, RoutedEventArgs e)
{
Series series = (Series)lbSeries.SelectedItem;
series.MediaOwned.Remove(cbMediaOwned.Text);
}
And here is the XAML code:
<Border Style="{StaticResource PanelBorderStyle}" DockPanel.Dock="Left" Margin="0,8,8,0"
DataContext="{Binding ElementName=lbLists, Path=SelectedItem}">
<DockPanel VerticalAlignment="Top">
<StackPanel>
<ListBox x:Name="lbSeries" Style="{StaticResource BasicListStyle}" Width="180" Height="300"
DisplayMemberPath="Title" SelectionMode="Single" LayoutUpdated="lbSeries_LayoutUpdated">
</ListBox>
</StackPanel>
<StackPanel x:Name="editPanel" DataContext="{Binding ElementName=lbSeries, Path=SelectedItem}">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0, 4, 0, 0">
<TextBlock Style="{StaticResource SmallFont}" Width="100">Title</TextBlock>
<TextBox x:Name="txtTitle" Style="{StaticResource TextBoxStyle}" Text="{Binding Path=Title, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Width="200" Margin="8, 8, 16, 8"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Top">
<TextBlock Style="{StaticResource SmallFont}" Width="100">Media owned</TextBlock>
<ComboBox x:Name="cbMediaOwned" Style="{StaticResource ComboBoxStyle}" Width="150" Margin="8,8,6,8"
></ComboBox>
<Button x:Name="btnAddMedia" Style="{StaticResource ToolbarButtonStyle}" Click="btnAddMedia_Click" Margin="0">
<StackPanel ToolTip="Add media">
<Image Source="Images/add.png" />
</StackPanel>
</Button>
<Button x:Name="btnRemoveMedia" Style="{StaticResource ToolbarButtonStyle}" Click="btnRemoveMedia_Click" Margin="4">
<StackPanel ToolTip="Remove media">
<Image Source="Images/remove.png" />
</StackPanel>
</Button>
</StackPanel>
</StackPanel>
</DockPanel>
</Border>
Alternatively I can also remove the binding code in the code behind and replace the ComboBox with the below code (but I still get the same problem - I can't select anything in the ComboBox):
<ComboBox x:Name="cbMediaOwned" Style="{StaticResource ComboBoxStyle}" Width="150" Margin="8,8,6,8" ItemsSource="{Binding ElementName=lbSeries, Path=SelectedItem.MediaOwned, UpdateSourceTrigger=PropertyChanged}"
SelectedItem="{Binding SelectedMedia, UpdateSourceTrigger=PropertyChanged}"></ComboBox>
SelectedMedia property:
private string _selectedMedia = "";
public string SelectedMedia
{
get { return _selectedMedia; }
set
{
_selectedMedia = value;
OnPropertyChanged(new PropertyChangedEventArgs("SelectedMedia"));
}
}

Here is my xaml:
<ComboBox x:Name="Models_ComboBox"
Width="110"
Text="Model"
ItemsSource="{Binding Models}"
SelectedItem="{Binding SelectedModel}"
DisplayMemberPath="Model"
MouseDoubleClick="Models_ComboBox_MouseDoubleClick"
SelectionChanged="Models_ComboBox_SelectionChanged"/>
Here are my VM properties:
private DataTable models;
public DataTable Models
{
get { return models; }
set
{
if (models != value)
{
models = value;
OnPropertyChanged(nameof(Models));
}
}
}
and
private DataRowView selectedModel;
public DataRowView SelectedModel
{
get { return selectedModel; }
set
{
if (selectedModel != value)
{
selectedModel = value;
if (value != null)
{
InitializeOptions(value["Model"].ToString());
}
OnPropertyChanged(nameof(SelectedModel));
}
}
}
As you can see, the ItemsSource and the SelectedItem of the ComboBox are bound to two different properties in the ViewModel. The ItemsSource is bound to a DataTable populated from a Database. Once the user selects a Model, then there are other option ComboBoxes that are populated based on that selection.

Fixed the problem myself. I had a line of code that was automatically setting the SelectedIndex of the ComboBox without me realizing.

c# How to find UIElements in RowDetailsTemplate

I need to build the UIElementCollection DetailsElement, after initializing the UserControl.
My problem lies in the FindName. I can't figure out how to use the TemplatedParent. Which element is that? an how can I refer to it in CB?
So DetailsElements would contain all the InputField elements in the DataGrid Details.
public partial class Segments
{
public Segments()
{
InitializeComponent();
// this does not work
var e = DgSections.FindName("MainPanel",...) as StackPanel;
DetailsElements = e.Children;
}
UIElementCollection DetailsElements;
...
<UserControl
x:Class="My.Views.MainUserControls.Segments"
.....
<DataGrid
x:Name="DgSections"
....
<DataGrid.Columns>
...
</DataGrid.Columns>
<DataGrid.RowDetailsTemplate>
<DataTemplate>
<Border Margin="0" Style="{StaticResource DataGridDetailsBorder}">
<StackPanel
x:Name="MainPanel"
...>
<muc:InputField
x:Name="Length"
.../>
<muc:InputField
x:Name="Diam"
... />
// and more InputFields
</StackPanel>
</Border>
</DataTemplate>
</DataGrid.RowDetailsTemplate>
</DataGrid>
....

As mentioned in a comment, there is no Border element created by the time Segments is created. It's loaded and rendered on demand.
What you can do is to handle the Loaded event of the Border and programmatically set the properties of the InputFields:
private void SomeButton_Click(object sender, RoutedEventArgs e)
{
Border border = (Border)sender;
StackPanel stackPanel = (StackPanel)border.Child;
foreach (InputField inputField in stackPanel.Children.OfType<InputField>())
{
//...
}
}
XAML:
<Border Margin="0" Style="{StaticResource DataGridDetailsBorder}" Loaded="OnLoaded">

Binding Errors on collapsed Gui Elements

I have a lot of bindings in a grid which are collapsed or visible based on the selecteditem in a treeview tree. so based on the object, the correct view pops up and the other collapses.
But I get lots of binding errors of the gui elements in the collapsed views. that is so, because I have a "myselecteditem" in the view model that fits to the view which is opened, but not to the collapsed ones.
is my approach stupid? can i suppress bindings for gui elemnts in a collapsed grid?
Code (shorted for lazy readers):
XAML:
<Grid x:Name="G_G_Content" Grid.Column="1">
<Grid x:Name="G_G_Abrechnung_Control" Visibility="Collapsed">
[...]
</Grid>
<Grid x:Name="G_G_Mitglied_Aktion" Visibility="Collapsed">
[...]
</Grid>
<Grid x:Name="G_G_Mitglied_Aktion_Nachweis" Visibility="Visible">
[...]
</Grid>
</Grid>
<TreeView
x:Name="G_tv_explorer"
Grid.Row="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ItemsSource="{Binding TreeViewItemSource, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
SelectedItemChanged="G_tv_explorer_SelectedItemChanged"
TreeViewItem.Expanded="TreeViewItem_Expanded" />
C#:
private void G_tv_explorer_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
{
//set active treeviewitem
if (G_tv_explorer.SelectedItem != null)
{
//set treeview && ViMo
ViMo.TreeViewSelectedItem = e.NewValue;
RedrawGui();
ViMo.MySelectedItem = ((TreeViewItem)e.NewValue).Tag;
}
}
public void RedrawGui()
{
//redraw gui, dependant on selectedtreeviewitem
if (ViMo.TreeViewSelectedItem != null)
{
if(ViMo.TreeViewSelectedItem is string)
MessageBox.Show("Dummy");
else
{
//this is a placeholder
if (((TreeViewItem)ViMo.TreeViewSelectedItem).Header.ToString() == "Verwaltung")
{
G_G_Mitglied_Aktion_Nachweis.Visibility = System.Windows.Visibility.Collapsed;
G_G_Abrechnung_Control.Visibility = System.Windows.Visibility.Visible;
}
else if (((TreeViewItem)ViMo.TreeViewSelectedItem).Tag is MVVM.Model.Jahresabschluss)
{
G_G_Mitglied_Aktion_Nachweis.Visibility = System.Windows.Visibility.Collapsed;
G_G_Abrechnung.Visibility = System.Windows.Visibility.Visible;
}
}
}
}
Where RedrawGUI only sets the Grids Visible / collapsed based on the Object Type of the SelectedItem

UWP - get first child of Gridview

<GridView x:Name="MainGridStations" ItemsSource="{x:Bind Stations}" IsItemClickEnabled="True" ItemClick="GridView_ItemClick">
<GridView.ItemTemplate>
<DataTemplate x:DataType="local:Station">
<Grid x:Name="WantToSelectByCode">
<Grid Background="White" HorizontalAlignment="Center" Width="300" Height="200" VerticalAlignment="Center">
<Grid Background="#e4f0fc" Height="65" VerticalAlignment="Bottom" Opacity="0.8">
<TextBlock x:Name="StationName" Text="{Binding Name}" FontWeight="Bold" Foreground="#2c9a8b" HorizontalAlignment="Center" />
</Grid>
</Grid>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
I'm trying to select a child by index of a dynamically filled gridview but what i've tried always returns null.
Like so for the first child for example:
var container = MainGridStations.ContainerFromIndex(0);
var presenter = VisualTreeHelper.GetChild(container, 0) as GridViewItem;
What am I doing wrong here?

You can get the corresponding GridViewItem from the method ItemsControl.ContainerFromIndex(Int32) directly and don't need to use the VisualTreeHelper to get it again.
var container = MainGridStations.ContainerFromIndex(0);
GridViewItem gridViewItem= container as GridViewItem;
gridViewItem.Background = new SolidColorBrush(Colors.Red);
The container have been the corresponding GridViewItem got from the index.
Note that: since your inner Grid have a Background="White" property configuration, you can delete the code to see the effect more obviously using my above code to change the gridViewItem.Background.
---Update---
You must get the GridViewItem after the items loaded. You can try the code in your GridView_ItemClick event handler or the page's loaded event hander. Also pay attention to my above note that to get more obvious effect, please delete the Background="White" in your above xaml code.
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
var container = MainGridStations.ContainerFromIndex(0);
GridViewItem gridViewItem = container as GridViewItem;
gridViewItem.Background = new SolidColorBrush(Colors.Green);
}
//get the item here
private void GridView_ItemClick(object sender, ItemClickEventArgs e)
{
var container = MainGridStations.ContainerFromIndex(0);
GridViewItem gridViewItem= container as GridViewItem;
gridViewItem.Background = new SolidColorBrush(Colors.Red);
//var presenter = VisualTreeHelper.GetChild(container, 0) as GridViewItem;
}

how to delete a selected template in a listbox

i have a listbox which has a data template binded to task from xml file,i want to delete selected template on button click,but its throws me an exception "Operation is not valid while ItemsSource is in use. Access and modify elements with ItemsControl.ItemsSource instead."
here is the code for xaml
<TabItem>
<Canvas Height="700" Width="850">
<Canvas.Resources>
<XmlDataProvider x:Key="Tasks" XPath="tasks"
Source="http://store.tymesheet.com/templates/Graphic-Designer.xml"/>
<DataTemplate x:Key="tasktemplate1">
<Canvas Height="50" Width="850" >
<Label Content="{Binding XPath=name}" Height="30"
Width="170" Canvas.Top="10" Canvas.Left="150"
Background="LightGray"/>
<TextBox Height="30" Width="120" Canvas.Top="10"
Canvas.Left="370" Background="AliceBlue"/>
<Label Canvas.Left="500" Canvas.Top="10">$</Label>
<Button Tag="{Binding}" Click="deletebuttonclick"
Canvas.Top="12" Height="10" Width="30"
Canvas.Left="600"/>
</Canvas>
</DataTemplate>
</Canvas.Resources>
<ListBox ItemTemplate="{StaticResource tasktemplate1}"
ItemsSource="{Binding Path=ChildNodes, Source={StaticResource Tasks}}"
x:Name="tasklistbox" Height="700" Width="850"/>
<Label Canvas.Top="-18" Canvas.Left="185">Select Task</Label>
<Label Canvas.Top="-18" Canvas.Left="377" RenderTransformOrigin="0.58,0.462">Enter Bill Rates</Label>
<Button Canvas.Left="39" Canvas.Top="575" Width="139">Click to add the task</Button>
</Canvas>
</TabItem>
here is the code behind for delete button
private void deletebuttonclick(object sender,RoutedEventArgs e)
{
tasklistbox.Items.Remove(tasklistbox.SelectedItem);
}
where am i wrong?,help.thanx.

The error that you displayed is fairly self explanatory:
Operation is not valid while ItemsSource is in use. Access and modify elements with ItemsControl.ItemsSource instead.
Clearly, as you should know, you used the ItemsSource property on the ListBox:
<ListBox ItemTemplate="{StaticResource tasktemplate1}"
ItemsSource="{Binding Path=ChildNodes, Source={StaticResource Tasks}}"
x:Name="tasklistbox" Height="700" Width="850" />
The error is telling you to Access and modify elements with ItemsControl.ItemsSource instead. So instead of not doing what it says:
private void deletebuttonclick(object sender,RoutedEventArgs e)
{
tasklistbox.Items.Remove(tasklistbox.SelectedItem);
}
Try actually doing what it says:
private void deletebuttonclick(object sender,RoutedEventArgs e)
{
tasklistbox.ItemsSource = null;
}
Or even better:
private void deletebuttonclick(object sender,RoutedEventArgs e)
{
ChildNodes = null;
}
UPDATE >>>
So it seems that we have another new user that asks one thing and when given that thing asks for another thing without so much as a 'thank you'... shame... a real shame.
First you need to data bind to the ListBox.SelectedItem property so that you know which item is selected:
<ListBox ItemTemplate="{StaticResource tasktemplate1}" SelectedItem="{Binding Item}"
ItemsSource="{Binding Path=ChildNodes, Source={StaticResource Tasks}}"
x:Name="tasklistbox" Height="700" Width="850" />
This Item property should be of the same type as the items in the ChildNodes collection... if it's not clear enough - you need to add that property next to your collection property. Then to remove that item in your handler, you just need to do this:
private void deletebuttonclick(object sender,RoutedEventArgs e)
{
ChildNodes.Remove(Item);
}

If you want to remove the item, then I would suggest to create ObservableCollection of XmlNode and bind ItemsSource with that. I suggested to use ObservableCollection because it implements INotifyCollectionChanged so whenever list is updated target which in your case is ListBox will automatically be updated.
In code behind
(Add System.Collections.ObjectModel namespace to use ObservableCollection<T>)
public MainWindow()
{
InitializeComponent();
XmlDocument doc = new XmlDocument();
doc.Load("http://store.tymesheet.com/templates/Software-Developer.xml");
var taskList = doc.ChildNodes.OfType<XmlNode>()
.Where(node => node.Name == "tasks")
.SelectMany(node => node.ChildNodes.OfType<XmlNode>());
Tasks = new ObservableCollection<XmlNode>(taskList);
this.DataContext = this;
}
public ObservableCollection<XmlNode> Tasks { get; set; }
private void deletebuttonclick(object sender, RoutedEventArgs e)
{
XmlNode selectedNode = ((Button)sender).DataContext as XmlNode;
Tasks.Remove(selectedNode);
}
Of course you need to update XAML as well:
<ListBox ItemsSource="{Binding Tasks}"
ItemTemplate="{StaticResource tasktemplate1}"
x:Name="listBox" Height="700" Width="850"/>