WPF ComboBox bind itemssource to different datacontext in MVVM - wpf

I have a user control that has its datacontext set to a view model called EmployeeList_VM. I then have a ContentControl within that user-control that has its datacontect set to a public property (EmployeeSelection) of the view model. The ContentControl's datacontext is the same as the selected item binding of a listbox within the same user control.
I want to have a combobox (of an observblecollection called EmployeeStatus) within the ContentControl bind its selecteditem to a property of the EmployeeSelection datacontext of the ContentControl. I want the itemssource of the combobox to bind to a public property EmployeeStatus of the "parent" viewmodel EmployeeList_VM.
I can get a list of the employees status to appear wihtin the combobox. I can not get it to bind to the idStatus property of the EmployeeSelection.
Here is What I have so far (some code removed for readability):
<UserControl x:Class="FTC.View.EmployeeListView"
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:FTC_Application"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:cmd="http://www.galasoft.ch/mvvmlight"
mc:Ignorable="d"
DataContext="{Binding EmployeeList_VM, Source={StaticResource Locator}}"
d:DesignHeight="900" d:DesignWidth="1000">
<Expander x:Name="DetailExpander" Grid.Column="2" Header="employee detail" Style="{DynamicResource ExpanderStyle_FTC}" IsExpanded="True" Padding="8,0,0,10" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" >
<Button Content="" Style="{DynamicResource ButtonSave}" Command="{Binding SaveCommand}" ToolTip="Save Changes" Margin="0,0,10,10"/>
<Button Content="" Style="{DynamicResource ButtonUndo}" Command="{Binding UndoCommand}" ToolTip="Undo Changes" Margin="0,0,10,10"/>
</StackPanel>
<ScrollViewer Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<ContentControl DataContext="{Binding Path=EmployeeSelection, Mode=TwoWay}" >
<!-- FTC SETTINGS GRID CONTENT-->
<Grid Grid.ColumnSpan="6" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock x:Name="SettingsHeading" Text="FTC Settings" Style="{StaticResource FTC_DetailHeading}" Grid.ColumnSpan="5"/>
<TextBlock Text="Status" Style="{StaticResource FTC_DetailLabelSub}" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1"/>
<ComboBox Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="2"
Margin="5,5,16,5" Height="37"
ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}},Path=DataContext.EmployeeStatus}"
SelectedItem="{Binding idStatus, Mode=TwoWay}"
SelectedValuePath="idStatus"
DisplayMemberPath="chrCode" FontSize="18"/>
</Grid>
</ContentControl>
</ScrollViewer>
</Grid>
</Expander>
</UserControl>
I even tried the following change (I named the ContentControl DetailControl) for the selected item of the combobox:
SelectedItem="{Binding ElementName=DetailControl, Path=DataContext.idStatus}"
Can someone please help me get the selected item binding hooked up properly. The combobox displays all the right items, but they do not bind to the EmployeeSelection.idStatus.
Thanks in advance.

so here is what worked for me, hope it can help someone else
<ComboBox Name="cbStatus" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="2"
Style="{StaticResource FTC_DetailComboBox}"
ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}},Path=DataContext.EmployeeStatus}"
SelectedItem="{Binding ElementName=DetailControl, Path=DataContext.employee_status}"
SelectedValuePath="idStatus"
SelectedValue="{Binding idStatus, Mode=TwoWay, ValidatesOnDataErrors=True}"
DisplayMemberPath="chrCode"/>

Related

Display items in dropdown list and selected items box via the same binding using only XAML

I'm sure that someone will jump all over this as being answered somewhere else but I claim I have followed every relevant link on this site (and elsewhere) and tried all possible combinations of ItemTemplate, ComboBoxItem, ItemContainerStyle, DisplayMemberPath, SelectedItem, SelectedValuePath and SelectedValue and for the life of me I can't get this to work as desired.
I simply want to define a list of ContentControl object (using x:Array) in XAML resources used as an ItemsSource for a ComboBox. This list contains 2 elements whose Content property is set to a Grid control - also defined in the resources. Each item also has the Tag property set to a string that functions as the name or description of the content.
Very simply: I want the string in the Tag property to be displayed in the selected item portion of the ComboBox and as the list of selectable items in the dropdown portion of the ComboBox.
If I set DisplayMemberPath="Tag", then the dropdown portion works as desired but nothing is displayed in the selected item portion of the ComboBox. I'm sure that proper use of SelectedValuePath and SelectedValue is the key, but I simply can't get it to work.
<UserControl.Resources>
<Grid x:Key="Fluidics" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="134"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Label Content="Cartridge:"
VerticalAlignment="Center" HorizontalAlignment="Left"
Margin="0,5,0,0" Height="26" Width="62"/>
<ComboBox Grid.Column="1"
ItemsSource="{Binding Cartridges}"
SelectedIndex="{Binding SelectedCartridgeIndex, FallbackValue=0}"
SelectedItem="{Binding SelectedCartridge}"
Margin="0,5,0,0" >
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Config.FriendlyName}" />
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<views:FluidicsExperimentParamsView Grid.Row="1" Grid.ColumnSpan="2" DataContext="{Binding FluidicsExperimentParams}" Margin="0,10,0,0"/>
</Grid>
<Grid x:Key="Data acquisition" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="157"/>
<ColumnDefinition Width="Auto" MinWidth="87"/>
</Grid.ColumnDefinitions>
<Label Content="Camera line:" />
<ComboBox
Grid.Column="1"
IsReadOnly="True"
ItemsSource="{Binding ImageDataAcquisitionParams}"
SelectedIndex="{Binding SelectedCameraLine}"
SelectedItem="{Binding SelectedImageDataAcquisitionParams}"/>
<data:ImageDataAcquisitionView
Grid.Row="1"
Grid.ColumnSpan="2"
DataContext="{Binding ImageDataAcquisition}" Margin="0,10,0,0"/>
</Grid>
<x:Array x:Key="ControlActivities" Type="ContentControl">
<ContentControl Content="{Binding Source={StaticResource Fluidics}}" Tag="Fluidics" />
<ContentControl Content="{Binding Source={StaticResource Data acquisition}}" Tag="Data acquisition"/>
</x:Array>
</UserControl.Resources>
...
<ComboBox Name="ControlActivityComboBox"
MinWidth="150"
ItemsSource="{Binding Source={StaticResource ControlActivities}}"
SelectedItem="{Binding SelectedActivity}"
SelectedValuePath="Tag"
SelectedValue="{Binding SelectedActivity.Tag}"
DisplayMemberPath="Tag"
HorizontalAlignment="Left"
SelectedIndex="0">
</ComboBox>

user control inside tabitem does not change values

I have a TabContorl and I am adding tabitem dynamically. I have bind datatemplate to some viewmodel and view is loaded as defined in datatemplate.
<DataTemplate DataType="{x:Type viewmodels:ItemViewModel}">
<views:CustomerOrderView />
</DataTemplate>
<DataTemplate DataType="{x:Type viewmodels:InvoiceGeneratorViewModel}">
<views:InvoiceGenerator/>
</DataTemplate>
<DataTemplate DataType="{x:Type viewmodels:OrderDetailsViewModel}">
<views:OrderDetailsView/>
</DataTemplate>
if i use controls directly in customerorderview then it works fine. It means if i switch the tab all values are loaded accordingly but does not work properly when if i use another usercontrol insite customerview user control. I have created once user control have one textbox, button and a popup contorl. When i click on button the popup opens and remains even if swich the tab. If textbox value is change the value is also changed for all tabs. It looks one view is serving all the tabs. I could not understand how to handle it.
Below is the user control which i am using inside customer
<UserControl x:Class="OrderManagement.Views.ProductSelectionView"
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">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="35"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<TextBox x:Name="txtProduct" Grid.Row="0" Grid.Column="0"/>
<Button x:Name="btnSearch" Content="S" Click="OnSearchClick" Grid.Row="0" Grid.Column="1" Margin="5"/>
<Popup x:Name="popup" PlacementTarget="{Binding ElementName=btnSearch}" Placement="Bottom"
Width="300" Height="300" Margin="5">
<Border BorderBrush="Black" BorderThickness="2" Background="AliceBlue">
<Grid >
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="35"/>
</Grid.RowDefinitions>
<DataGrid x:Name="dataGrid" AutoGenerateColumns="False" Grid.Row="0" Grid.ColumnSpan="2"
IsReadOnly="False" CanUserAddRows="False" CanUserDeleteRows="False">
<DataGrid.Columns>
<DataGridCheckBoxColumn Binding="{Binding IsChecked}" IsReadOnly="False"/>
<DataGridTextColumn Header="Product Name" Binding="{Binding Name}"/>
<DataGridTextColumn Header="Quantity In Stock" Binding="{Binding QuantityInStock}"/>
</DataGrid.Columns>
</DataGrid>
<WrapPanel Grid.Row="1" Grid.ColumnSpan="2" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Right">
<Button Content="OK" Click="OnOKClick" Width="80"/>
<Button Content="Cancel" Click="OnCancelClick" Width="80" Margin="20,0,0,0"/>
</WrapPanel>
</Grid>
</Border>
</Popup>
</Grid>
</UserControl>
Tabcontrol virtualize the data as per its datacontext but popup and text value in productselection control remains the same for all tabs. opens the popup but it remains for all the tab.
Let me know if how it can be done or what is the mistake i am doing

Odd WPF Grid Behavior Affected by TextBox Text

I can't figure out why the contents of my TextBox is affecting my grid column widths. I have setup a grid with 3 columns with widths defined as 50, *, 50, as shown below
Now, when in use, the center column will grow/shrink as the text in the TextBox changes, see the 2 examples below. The actual TextBox is not changing size, so I can't understand why in the world the grid is changing. The Grid is inside of a Border inside a UserControl. The UserControl is used as a DataTemplate in a ListBox.
Edit: I've discovered that this issue is related to the UserControl being in a ListBox, see example image below (UserControl in ListBox (circled in red) vs. UserControl Placed on Form (circed in blue). The grid behaves as expected when the UserControl is placed directly on the form. Code for the form is given below.
UserControl XAML:
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Text="Name:" Margin="2" />
<TextBox Grid.Column="1" Margin="2" Text="{Binding Name, UpdateSourceTrigger=PropertyChanged}" Grid.ColumnSpan="2" />
<TextBlock Text="Shift:" Grid.Row="1" Margin="2" />
<TextBox Grid.Column="1" Grid.Row="1" Margin="2" Text="{Binding TimeShift, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, FallbackValue=0}" HorizontalContentAlignment="Right" />
<TextBlock Text="s" Grid.Row="1" Grid.Column="2" Margin="2" />
</Grid>
Window/Form XAML:
<Window x:Class="CrashSimOffice.FileImport"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:CrashSimOffice"
Title="File Import" Height="350" Width="450" Background="White" Icon="/CrashSimOffice;component/Images/16/page-white-save.png">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75"/>
<ColumnDefinition Width="75"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="75"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Button Content="Add" Margin="2" Command="{Binding AddFileCommand}" />
<Button Content="Remove" Grid.Column="1" Margin="2" Command="{Binding RemoveFileCommand}" />
<ListBox HorizontalContentAlignment="Stretch" Grid.ColumnSpan="4" Margin="2" Grid.Row="1" ItemsSource="{Binding Files}" SelectedItem="{Binding CurrentFile}" ScrollViewer.CanContentScroll="False" Background="WhiteSmoke">
<ListBox.ItemTemplate>
<DataTemplate DataType="{x:Type local:FileViewModel}">
<local:FileView DataContext="{Binding}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Content="Done" Grid.Column="3" Margin="2" Grid.Row="2" Click="Button_Click" />
<local:FileView Grid.Row="3" Grid.ColumnSpan="4" />
</Grid>
OK, I figured it out, Bruno V you got me thinking it must have something to do with the ListBox. I needed to add this to my ListBox:
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Not sure why that works, but it does.

How can I bind a listbox selecteditem content to a textbox?

I have a listbox thats getting binded by this query when TextName content changes:
var players =
from p in context.Player
where p.GivenName.StartsWith(TextName.Text.Trim())
select p;
listNames.ItemsSource = players.ToList();
It shows the players names that starts with the text on the textbox. Now when I click any Item (name) from the listbox I need that the TextName shows the player name that's selected on the listbox. I tried to bind it this way:
<TextBox ... Text="{Binding Source=listNames, Path=SelectedItem.Content}" ... />
But when I click a ListboxItem, the textbox just get cleared and does not show anything.. may I have to set up the textbox like I do with the listbox when setting the DisplayMemeberPath???? I need a only one way binding!!
What can I do??
You have 2 problems with your binding:
You are using the Source property instead of the ElementName to specify the list box name
You are trying to bind to a Content property which (I am assuming) does not exist on your Player object. This happens because the SelectedItem property of the ListBox is an instance of Player when you specify an ItemsSource as you have
To solve this you should change your binding to the following:
<TextBox ... Text="{Binding ElementName=listNames, Path=SelectedItem.GivenName}" ... />
<TextBox ... Text="{Binding ElementName=listNames, Path=SelectedItem.Name}" ... />
This binds the TextBox.Text to the ListBoxes - called listNames - SelectedItem, which contains Player objects, and you need its Name property.
<Page
x:Class="Studentt1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Studentt1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="Wheat">
<ListBox x:Name="listBox1" ItemsSource="{Binding StudentsList}"
SelectedItem="Binding SelectedStud,Mode=TwoWay}"
DisplayMemberPath="StudName"
HorizontalAlignment="Left" Height="332" Margin="59,173,0,0" VerticalAlignment="Top"
<Button Content="Load" Command="{Binding LoadCommand}" HorizontalAlignment="Left"
Margin="144,567,0,0" VerticalAlignment="Top"/>
<Grid Background="Brown" HorizontalAlignment="Left" Height="352"
VerticalAlignment="Top" Width="633">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="347"/>
<ColumnDefinition Width="401"/>
<ColumnDefinition Width="367*"/>
<ColumnDefinition Width="251*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" FontSize="30" Grid.Column="0" Text="Registration
Number" HorizontalAlignment="Center" Margin="46,0,25,0" Width="276"/>
<TextBox Grid.Row="0" Grid.Column="1" Text="{Binding
ElementName=listBox1,Path=SelectedItem.RegNo,Mode=TwoWay}"/>
<TextBlock Grid.Row="1" Grid.Column="0" FontSize="30" Text="Name"
HorizontalAlignment="Center" Margin="144,0,124,0" Width="79"/>
<TextBox Grid.Row="1" Grid.Column="1" Text="{Binding
ElementName=listBox1,Path=SelectedItem.StudName,Mode=TwoWay}"/>
<TextBlock Grid.Row="2" Grid.Column="0" FontSize="30" Text="Age"
HorizontalAlignment="Center" Margin="157,0,137,0" Width="53"/>
<TextBox Grid.Row="2" Grid.Column="1" Text="{Binding
ElementName=listBox1,Path=SelectedItem.Age,Mode=TwoWay}"/>
</Grid>
</Grid>
</Page>
here i bind the selected item of list box to text box..
you can find zip file for full source code
You should use RelativeSource to access the ListBox, e.g.:
<TextBox ... Text="{Binding RelativeSource={RelativeSource
AncestorType={x:Type ListBox}}, Path=SelectedItem.Content}" .... />

WPF - Usercontrol height does not size properly

I have an issue I cannot figure out. I hope I can explain things enough.
Basically, I have a usercontrol that I'm looking to use as a sort of in window modal dialog.
<Grid>
<Rectangle Opacity=".75" Fill="White"/>
<Border Width="425" BorderBrush="LightGray" BorderThickness="2" CornerRadius="20,0,20,0" Padding="3">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="15"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<!-- First Name -->
<Label Grid.Row="0" Grid.Column="0" Content="First Name:"/>
<TextBox Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding FirstName}" Margin="3"/>
<!-- Last Name -->
<Label Grid.Row="0" Grid.Column="3" Content="Last Name:"/>
<TextBox Grid.Row="0" Grid.Column="4" Grid.ColumnSpan="2" Text="{Binding LastName}" Margin="3"/>
<!-- Address -->
<Label Grid.Row="1" Grid.Column="0" Content="Address:"/>
<TextBox Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="5" Text="{Binding Address}" HorizontalAlignment="Stretch" Margin="3"/>
<!-- City -->
<Label Grid.Row="2" Grid.Column="0" Content="City:"/>
<TextBox Grid.Row="2" Grid.Column="1" Text="{Binding City}" Margin="3"/>
<!-- State -->
<Label Grid.Row="2" Grid.Column="2" Content="State:"/>
<ComboBox Grid.Row="2" Grid.Column="3" ItemsSource="{Binding States}" SelectedValue="{Binding State}" Margin="3"/>
<!-- Zip Code -->
<Label Grid.Row="2" Grid.Column="4" Content="Zip Code:"/>
<TextBox Grid.Row="2" Grid.Column="5" Text="{Binding ZipCode}" Margin="3"/>
<Button Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="6" Width="100" HorizontalAlignment="Center" Content="Save" Command="{Binding SaveCustomerCommand}"/>
</Grid>
</Border>
</Grid>
I also have a resourcedictionary containing a datatemplate to connect this usercontrol to it's viewmodel.
<DataTemplate DataType="{x:Type vm:CreateCustomerViewModel}">
<view:CreateCustomerView/>
</DataTemplate>
Finally, in the main window viewmodel, I create an instance of the control's viewmodel, and in the main window view, I am using an itemscontrol and binding it's itemssource property to the instance of the control's viewmodel.
<ItemsControl Height="600" Grid.Row="0" ItemsSource="{Binding CreateCustomerViewModel}" Grid.RowSpan="2" />
Now, my issue is using the itemscontrol in the main window, I've tried a few different ways, but I cannot get the control to be the height of the window. I'm not sure if I shouldn't be using an itemscontrol, or what I'm doing wrong. Any help is very much appreciated.
ItemsControl is for collections. By default it uses a StackPanel to contain its child elements, which disallows stretching in the stack direction (Vertical by default). For a single item use ContentControl (the base of things like Button and Label) instead:
<ContentControl Height="600" Grid.Row="0" Content="{Binding CreateCustomerViewModel}" Grid.RowSpan="2" />
You could try the following:
Put your ItemsControl in a Grid.
Declare your ItemsControl with VerticalContentAlignment="Stretch".
It shouldn't make any difference because it's the default setting, but declare your ItemsControl with VerticalAlignment="Stretch" and try removing the Height="600".

Resources