user control inside tabitem does not change values - wpf

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

Related

Using buttons in a DataGridColumn, WPF

I'm converting a Winforms app to WPF and run in to this error. In the winforms application the system loads buttons into a datagridview. As theres no datagridview in wpf, I've used datagrid. Sadly though, the things dont work. For some odd reason i cannot fix, i cant test what i thought of, i get a weird displayindex error. What i was wondering if someone can tell me either an alternative to what is used in the winforms app or tell me if what i have written works.
Winforms Code:
Dim btn As New DataGridViewButtonColumn()
dgBoorMachine.Columns.Add(btn)
btn.HeaderText = "del"
btn.Text = "X"
btn.Name = "del"
btn.UseColumnTextForButtonValue = True
dgBoorMachine.Columns("del").Width = 30
WPF Code:
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="560"/>
<ColumnDefinition Width="425" />
<ColumnDefinition Width="560" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="156" />
<RowDefinition Height="55.2" />
<RowDefinition Height="89.6"/>
<RowDefinition Height="332.8"/>
<RowDefinition Height="217.6"/>
<RowDefinition Height="1" />
<RowDefinition Height="1" />
</Grid.RowDefinitions>
<DataGrid x:Name="dgSlijpMachine" Grid.Row="2" Grid.Column="1">
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button x:Name="btn1" Content="X" Click="btn1_Click"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid>
</Grid>
The error might be because you're missing the <DataGrid.Colums> tag
instead of
<DataGrid x:Name="dgSlijpMachine" Grid.Row="2" Grid.Column="1">
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button x:Name="btn1" Content="X" Click="btn1_Click"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid>
it should be
<DataGrid x:Name="dgSlijpMachine" Grid.Row="2" Grid.Column="1">
<DataGrid.Columns>
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button x:Name="btn1" Content="X" Click="btn1_Click"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
Now I don't know exactly what you want to achieve. What this will do, is add a column with a button to every row you add to your DataGrid and nothing else. If you actually want to populate your DataGrid with values, you should bind to the DataGrid's ItemsSource, eg.
<DataGrid x:Name="dgSlijpMachine" Grid.Row="2" Grid.Column="1" ItemsSource="{Binding MyItems}">
where MyItems is an ObservableCollection or similar type.

How to center UserControl in a TabControl

My MainWindow is built with TabContol containing in each tab UserControl in xaml files. Opening specific UserControl is not a problem, but aligning it is. I was able to horizontally center content of tab but struggle to vertically do this same. I found out that the root problem is that UserControl don't take the whole free space (height) in the Tab. I tried to make main grid VerticalAlignment="Stretch" and "Center" but that didn't help. I could use margin with specific number or define row fixed hight but that will not work on every resolution and I don't want to write method in code behind but use the power of xaml. How can I force UserControl to take whole height in Tab and then vertically center it (it's important to do it for specific UserControl because others should have default position)?
ps. I'm using MetroWindow from MahApps.Metro.
MainWindow main Grid:
<Grid>
<StackPanel>
<TabControl ItemsSource="{Binding Tabs}"
SelectedIndex="0">
<TabControl.Resources>
<Style TargetType="{x:Type TabPanel}">
<Setter Property="HorizontalAlignment"
Value="Center" />
</Style>
<DataTemplate DataType="{x:Type VMod:LoginViewModel}">
<Pages:LoginView />
</DataTemplate>
<DataTemplate DataType="{x:Type VMod:AdminViewModel}">
<Pages:AdminView />
</DataTemplate>
<DataTemplate DataType="{x:Type VMod:ProductsViewModel}">
<Pages:ProductsView />
</DataTemplate>
<DataTemplate DataType="{x:Type VMod:DistributionViewModel}">
<Pages:DistributionView />
</DataTemplate>
<DataTemplate DataType="{x:Type VMod:SummaryViewModel}">
<Pages:SummaryView />
</DataTemplate>
<DataTemplate DataType="{x:Type VMod:SettingsViewModel}">
<Pages:SettingsView />
</DataTemplate>
</TabControl.Resources>
<TabControl.ItemTemplate>
<DataTemplate DataType="{x:Type inter:ITab}">
<TextBlock>
<Run Text="{Binding TabName}" />
</TextBlock>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
</StackPanel>
</Grid>
UserControl main Grid:
<Grid Background="LightBlue"
VerticalAlignment="Center"
HorizontalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Height="300"
Width="300"
Grid.Row="2"
BorderBrush="LightGray"
BorderThickness="1">
<StackPanel HorizontalAlignment="Center">
<iconPacks:PackIconRPGAwesome Kind="Honeycomb"
HorizontalAlignment="Center"
Width="60"
Height="60"
Margin="0, 0, 0, 0"/>
<TextBlock HorizontalAlignment="Center"
Text="DistributionTool"
FontSize="20"
FontWeight="Bold"
Margin="5" />
<Grid Width="200">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0"
Margin="5"
TextAlignment="Left"
FontSize="15"/>
<iconPacks:PackIconMaterial Grid.Column="1"
Kind="AccountTie"
Width="20"
Height="20"
VerticalAlignment="Center"/>
</Grid>
<Grid Width="200">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<PasswordBox Grid.Column="0"
Margin="5"
HorizontalContentAlignment="Left"
FontSize="15"
Style="{StaticResource Win8MetroPasswordBox}" />
<iconPacks:PackIconMaterial Grid.Column="1"
Kind="Key"
Width="20"
Height="20"
VerticalAlignment="Center" />
</Grid>
<Button Content="LOGIN"
Width="80"
metro:ControlsHelper.ContentCharacterCasing="Normal"
Margin="5"
Style="{StaticResource AccentedSquareButtonStyle}" />
</StackPanel>
</Border>
</Grid>
From what I gather, what you could try would be:
Remove the StackPanel in your MainWindow Grid. Unless you intend to have more than 1 child inside the stack panel (Other than your TabControl), it is useless.
Add VerticalAlignement="Stretch" to your TabControl. This will allow it to take up all the space it can vertically.
Then you should be pretty much set to go.
The reason why you shouldn't use a StackPanel unless you intend to stack items inside, as in
<StackPanel>
<Child1/>
<Child2/>
</StackPanel>
is that the StackPanel.Orientation property affects how things will appear inside, including the Alignement of each child.
So Orientation="Vertical" (the default), affects the VerticalAlignement of its children. Same idea with Horizontal.

How To Organize ItemsPanel Layout?

I have the code below which I want to display a series of buttons horizontally with an image and text label, and below that row of buttons one label for the entire button group. What I currently have displays the buttons in a row, but the group label displays in the same row to the left of the buttons. I'm probably doing this wrong, but I'm impressed that I got this far. I've tried putting the Child ItemsPanel in a StackPanel, but then it shows no buttons - it seems to loose contact with the collection from the parent window. Is there an easy way to connect this collection and organize the label below the buttons? I'm thinking my next try is to collect the data from the parent in the child's code-behind and build an ItemsSource which I will then connect to the ItemTemplate, but I don't really know how to do that either.
Parent window snippet:
<User_Controls:ToolbarGroup GroupLabel="Group 1">
<User_Controls:ImageButton ButtonText="Test 1"/>
<User_Controls:ImageButton ButtonText="Test 2"/>
<User_Controls:ImageButton ButtonText="Test 3"/>
</User_Controls:ToolbarGroup>
Child window code:
<ItemsControl x:Class="Fiducia_WPF.User_Controls.ToolbarGroup"
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:User_Controls="clr-namespace:Fiducia_WPF.User_Controls"
mc:Ignorable="d"
Loaded="ItemsControl_Loaded"
d:DesignHeight="170" d:DesignWidth="320">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Height="170" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<User_Controls:ImageButton ButtonText="Temp"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<Label Name="lblGroupTitle" Grid.Row="1" Grid.Column="0" Content="Group X" FontSize="16" FontWeight="Bold" Margin="0,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Visible" />
</ItemsControl>
You should create a ControlTemplate for your ItemsControl:
<ItemsControl x:Class="Fiducia_WPF.User_Controls.ToolbarGroup" ...>
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl">
<StackPanel>
<ItemsPresenter/>
<Label x:Name="lblGroupTitle" Content="Group X" ... />
</StackPanel>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Height="170" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<User_Controls:ImageButton ButtonText="Temp"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Setting the Content of the lblGroupTitle Label may probably better be done by binding it to a property of the ToolbarGroup control:
<Label Content="{Binding GroupTitle,
RelativeSource={RelativeSource AncestorType=User_Controls:ToolbarGroup}}" ... />
I'd just use a straight up Grid:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Grid.Column="0" ... />
<Button Grid.Row="0" Grid.Column="1" ... />
<Button Grid.Row="0" Grid.Column="2" ... />
<Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" />
</Grid>

WPF ComboBox bind itemssource to different datacontext in MVVM

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

How keep drop down opened in silverlights ComboBox?

I use ComboBox control as popup. Item for my ComboBox is Grid. There is TreeView control and two Buttons in grid. Items of TreeView are CheckBoxes.
When I click on Buttons or CheckBoxes drop down keeps opened, but when I click on other part of grid drop down i closed.
Is there any way to keep it opened until I click outside of ComboBox?
I have looked a lot in Google, but haven't found anything.
<UserControl.Resources>
<common:HierarchicalDataTemplate x:Key="HierarchicalDataTemplate_AddDivision" ItemsSource="{Binding DivisionIDs}">
<StackPanel Orientation="Horizontal">
<CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay}" Click="CheckBox_Click" />
<TextBlock Text="{Binding ToDisplay}"/>
</StackPanel>
</common:HierarchicalDataTemplate>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.5*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.90*"/>
<RowDefinition Height="0.10*"/>
</Grid.RowDefinitions>
<controls:TreeView Height="250" x:Name="itemsToShow" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="230"
Grid.ColumnSpan="2" ItemTemplate="{StaticResource HierarchicalDataTemplate_AddDivision}" SelectedItemChanged="itemsToShow_SelectedItemChanged" />
<Button Margin="28,0,22,5" Content="Ok" Grid.Row="1" d:LayoutOverrides="Height" Click="OkButton_Click"/>
<Button Margin="23,0,27,5" Content="Cancel" Grid.Column="1" Grid.Row="1" d:LayoutOverrides="Height" Click="CancelButton_Click"/>
</Grid>
And this is ComboBox
<ComboBox Grid.Row="1" Width="100" Height="20" HorizontalAlignment="Left" VerticalAlignment="Top" >
<ComboBox.ItemTemplate>
<DataTemplate>
<my1:ShowDivisions x:Name="ShowDivs" Loaded="ShowDivs_Loaded" ParentComboBox="{Binding ElementName=addStr2}"/>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
It sounds like your buttons are not filling all the space in the dropdown part of the ComboBox.
In that case you just need to have a a clickable object behind the buttons to eat any stray mouse clicks:
Try a rectangle with the background set to Transparent (not just a colour with 0 alpha value, as that is not clickable).
(Make sure the rectangle has IsHittestVisible set as well).

Resources