We Keep Coding

binding one model with different view models in different user control in same window in wpf mvvm

I have window which initially gets loaded with a list of item, based on list view item selection, I have to populate data in different user controls in the same window. I have one model which is common across all the user controls but they have separate user controls. Everytime when the data is filled , models gets initialized and data grid remains empty in the UI, even though the data is present at the back end.
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="17*"/>
</Grid.ColumnDefinitions>
<Border BorderThickness="1" BorderBrush="Black" Margin="5,5,5.4,5.2" Grid.ColumnSpan="2">
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" Margin="0 3 0 3" BorderThickness="1" BorderBrush="Gray">
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="300"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="310"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<!--ROW 2-->
<GroupBox Grid.Row="1" Grid.Column="0" Grid.RowSpan="3" Header="Rule Name" >
<ListBox ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollBarVisibility="Visible"
BorderBrush="Gray" BorderThickness="1"
Style="{x:Null}"
Name="lstSuggestedRule" SelectionMode="Single"
ItemsSource="{Binding RuleMetadata.SuggestedRuleList, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
SelectedItem="{Binding RuleMetadata.SelectedRule,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" Margin="0 3 0 3" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Width="350" HorizontalAlignment="Stretch" Text="{Binding Path=ExpressionName}">
</TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<interactivity:Interaction.Triggers>
<interactivity:EventTrigger EventName="SelectionChanged">
<interactivity:InvokeCommandAction Command="{Binding RuleSuggestionSelectionCommand}"
CommandParameter="{Binding Path= SelectedItems, ElementName=lstSuggestedRule}" />
</interactivity:EventTrigger>
</interactivity:Interaction.Triggers>
</ListBox>
</GroupBox>
<GroupBox Grid.Row="1" Grid.Column="1" Header="Rule MetaData" Grid.ColumnSpan="2" >
<DockPanel>
<local:RuleSuggestionMetaData />
</DockPanel>
</GroupBox>
<GroupBox Grid.Row="2" Grid.Column="1" Header="Rule Script" Grid.ColumnSpan="2">
<DockPanel>
<local:RuleSuggestionAvalonEditor HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Visibility="{Binding ElementName=lstSuggestedRule,Path=SelectedItem,Converter={StaticResource SuggestionVisibilityConverter},ConverterParameter= VB}" Margin="0,10,0,10.2" Width="537" />
<local:RuleTreeView HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Visibility="{Binding ElementName=lstSuggestedRule,Path=SelectedItem,Converter={StaticResource SuggestionVisibilityConverter} ,ConverterParameter= XML}" />
</DockPanel>
</GroupBox>
</Grid>
</Border>
<Grid Grid.Row="1" Grid.Column="1" Margin="0 0 10 3" HorizontalAlignment="Right">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="3" Width="100"
Height="25" Margin="0,3,0,3"
ToolTip="Click to Cancel Operation"
Content="Close" Command="{Binding CancelRuleSuggestion}"
CommandParameter="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}}}" >
</Button>
</Grid>
</Grid>
</Border>
</Grid>
This is the grid structure, where on listbox selection item, I have to populate data into user control ,user control also uses same view model

Equal spacing between controls

I want to place image and text under image as below. The height of the rows have to be equally divided. How can this work if I want images to size accordingly?
<Grid.ColumnDefinitions>
<ColumnDefinition Width="9*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="40*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="10*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10*" />
<RowDefinition Height="10*" />
<RowDefinition Height="10*" />
<RowDefinition Height="10*" />
<RowDefinition Height="10*" />
<RowDefinition Height="10*" />
<RowDefinition Height="10*" />
<RowDefinition Height="10*" />
<RowDefinition Height="10*" />
<RowDefinition Height="10*" />
</Grid.RowDefinitions>
<Image Grid.Column="1" Grid.Row="0" Source="pack://application:,,,/WpfApplication5;component/led.green.off.png" HorizontalAlignment="Center">
</Image>
<TextBlock Grid.Column="1" Grid.Row="1" Text="Turret Power" ></TextBlock>
<Image Grid.Column="1" Grid.Row="2" Source="pack://application:,,,/WpfApplication5;component/toggle.sheath.DOWN.png" HorizontalAlignment="Center">
</Image>
<TextBlock Grid.Column="1" Grid.Row="3" Text="Off" ></TextBlock>
<Image Grid.Column="1" Grid.Row="4" Source="pack://application:,,,/WpfApplication5;component/toggle.sheath.DOWN.png" HorizontalAlignment="Center">
</Image>
<TextBlock Grid.Column="1" Grid.Row="5" Text="Off" ></TextBlock>
<Image Grid.Column="1" Grid.Row="6" Source="pack://application:,,,/WpfApplication5;component/toggle.sheath.DOWN.png" HorizontalAlignment="Center">
</Image>
<TextBlock Grid.Column="1" Grid.Row="7" Text="Off" ></TextBlock>
<Image Grid.Column="1" Grid.Row="8" Source="pack://application:,,,/WpfApplication5;component/toggle.sheath.DOWN.png" HorizontalAlignment="Center">
</Image>
<TextBlock Grid.Column="1" Grid.Row="9" Text="Off" ></TextBlock>
<Image Grid.Column="1" Grid.Row="10" Source="pack://application:,,,/WpfApplication5;component/toggle.sheath.DOWN.png" HorizontalAlignment="Center">
</Image>
<TextBlock Grid.Column="1" Grid.Row="11" Text="Off" ></TextBlock>
</Grid>
If I do the above, the images are big and go over the window

You're missing 2 <RowDefinition> in <Grid.RowDefinitions> (according to your usages of Grid.Row)
You don't have to put a weight in your row/column definitions if they're all the same, and you don't even have to set Height if the value is *, since this is the default (you can remove Height="10*" from each <RowDefinition>)
Maybe you'll want to have some column definitions set with Width="Auto", but I'll leave that to you.

Is it possible to reuse grid pattern/template in WPF

In my WPF application I'd like to reuse grid template few times.
I defined a data template for grid (named GrdTemplate) and I would like to use this template in several places of my XAML definition.
How one can use grid template?
Here is my XAML code:
<Grid Height="{Binding Converter={StaticResource PercentageConverter}, ElementName=listboxItems, Path=ActualHeight, ConverterParameter=0.48}"
MaxWidth="{Binding Converter={StaticResource PercentageConverter}, ElementName=listboxItems, Path=ActualWidth, ConverterParameter=0.1}">
<Grid.Resources>
<Style TargetType="TextBlock" >
<Setter Property="TextAlignment" Value="Center" />
<Setter Property="Margin" Value="2,2" />
</Style>
<DataTemplate x:Key="GrdTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Grid.Row="0">
<Grid.RowDefinitions >
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0"
Text="{Binding Path=Tr}" />
<TextBlock Grid.Column="1" Grid.Row="0"
Text="{Binding Path=Hr}" />
</Grid>
<Grid Grid.Column="0" Grid.Row="1">
<Grid.RowDefinitions >
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0"
Text="{Binding Path=TypeK}" />
</Grid>
<Grid Grid.Column="0" Grid.Row="2">
<Grid.RowDefinitions >
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*" />
<ColumnDefinition Width="6*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0"
Text="{Binding Path=Tk}" />
<TextBlock Grid.Row="0" Grid.Column="1"
Text="{Binding Path=Lft}" />
</Grid>
<Grid Grid.Column="0" Grid.Row="3">
<Grid.RowDefinitions >
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0"
Text="{Binding Path=Crd}" />
</Grid>
</Grid>
</DataTemplate>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="3*" />
<RowDefinition Height="4*" />
<RowDefinition Height="4*" />
</Grid.RowDefinitions>
<Border Grid.Column="0" Grid.Row="1"
Background="#FF576577"
BorderBrush="{DynamicResource GrayBrush7}" BorderThickness="2">
<Viewbox Stretch="Uniform" >
!!! Here I want to use my template with Object1 as Datasource !!!
</Viewbox>
</Border>
<Border Grid.Column="0" Grid.Row="1"
Background="#FF576577"
BorderBrush="{DynamicResource GrayBrush7}" BorderThickness="2">
<Viewbox Stretch="Uniform" >
!!! Here I want to use my template with Object2 as Datasource !!!
</Viewbox>
</Border>
</Grid>

What you should use here is not a DataTemplate but a UserControl. DataTemplates are typically used for controls that have a collection of child controls that you want to take the same appearance.
Then use your custom UserControl like this:
<Viewbox Stretch="Uniform">
<!--Here I want to use my template with Object2 as Datasource-->
<views:MyGrdUserControl DataContext="{Binding Object2}"/>
</Viewbox>
If you do want to use your DataTemplate though you could use a ContentPresenter and set the ContentTemplate to be your GrdTemplate resource
<Viewbox Stretch="Uniform">
<!--Here I want to use my template with Object2 as Datasource-->
<ContentPresenter Content="{Binding Object2}"
ContentTemplate="{StaticResource GrdTemplate}"/>
</Viewbox>

How can i sort wpf textboxes straight?

I'm design a simple login window and i'm very wondering about this.
Well, this is my XAML code
<Grid ShowGridLines="False">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<DockPanel Grid.Row="0">
<Label x:Name="label_ID" Height="30"/>
<TextBox x:Name="textBox_ID" Height="20" TabIndex="0">
<TextBox.Margin>
<Thickness Right="5"/>
</TextBox.Margin>
</TextBox>
</DockPanel>
<DockPanel Grid.Row="1">
<Label x:Name="label_PW" Height="30"/>
<PasswordBox x:Name="textBox_PW" Height="20" TabIndex="1">
<PasswordBox.Margin>
<Thickness Right="5"/>
</PasswordBox.Margin>
</PasswordBox>
</DockPanel>
<DockPanel Grid.Row="2">
<Label x:Name="label_IP" Height="30"/>
<TextBox x:Name="textBox_IP" Height="20" UndoLimit="2">
<TextBox.Margin>
<Thickness Right="5"/>
</TextBox.Margin>
</TextBox>
</DockPanel>
</Grid>
label_ID's string is ID
label_PW's string is Password
label_IP's string is 'IP'
And the output is like this:
https://www.dropbox.com/s/k23ft06layp0sl4/1.PNG?dl=0
The password text box only short then other.
(I want to short another text boxes to.)
How can i fix location of text boxes?
Thanks.

I think your DockPanels are not really needed, instead you could use two columns in the Grid:
<Grid ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" x:Name="label_ID" Height="30"/>
<TextBox Grid.Row="0" Grid.Column="1" x:Name="textBox_ID" Height="20" TabIndex="0" Margin="5"/>
<Label Grid.Row="1" Grid.Column="0" x:Name="label_PW" Height="30"/>
<PasswordBox Grid.Row="1" Grid.Column="1" x:Name="textBox_PW" Height="20" TabIndex="1" Margin="5"/>
<Label Grid.Row="2" Grid.Column="0" x:Name="label_IP" Height="30"/>
<TextBox Grid.Row="2" Grid.Column="1" x:Name="textBox_IP" Height="20" UndoLimit="2" Margin="5"/>
</Grid>
Setting the first column's width to Auto ensures that the text will be visible, the second column will take the rest of the space (*).
It produces an output like this (with some test strings added by me):

Simplest way I could think of is
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Label Name="lblID" Content="ID:" HorizontalAlignment="Right" VerticalAlignment="Center" Width="Auto" Margin="5,2,5,2" />
<TextBox Name="txtID" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="1" Grid.Row="0" Margin="5,2,0,2" Width="250" Height="25" />
<Label Name="lblPwd" Content="Password:" HorizontalAlignment="Right" VerticalAlignment="Center" Width="Auto" Grid.Column="0" Grid.Row="1" Margin="5,2,5,2" />
<PasswordBox Name="pwdBx" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="1" Grid.Row="1" Margin="5,2,0,2" Width="250" Height="25" />
<Label Name="lblIP" Content="IP:" HorizontalAlignment="Right" VerticalAlignment="Center" Width="Auto" Grid.Column="0" Grid.Row="2" Margin="5,2,5,2" />
<TextBox Name="txtIP" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="1" Grid.Row="2" Margin="5,2,0,2" Width="250" Height="25" />
</Grid>

Right now I can only think of using the margin property as in:
<UIElement Margin="left, top, right, bottom" />
<Menu Name="EgMenu"
Margin="20,20,0,20" />
The margin property will help you position and size your UI elements in an easiser way thatt youy can visualise just looking at the text. But why not use WYSIWYG and, refine by editting XAML later.

How to stretch StackPanel to FullScreen

I have ItemDetailPage.xaml with FlipView, inside of DataTemplate i have Grid with come columns. One of columns contains StackPanel with some controls.
Example:
<FlipView.ItemTemplate>
<DataTemplate>
<UserControl Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates">
<ScrollViewer x:Name="scrollViewer" Style="{StaticResource HorizontalScrollViewerStyle}" Grid.Row="1">
<Grid Margin="120,0,20,20" x:Name="richTextColumns">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="400" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="400" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="2" Grid.Row="1" Margin="0,0,0,10" x:Name="ContentPanel">
<TextBlock FontSize="22" FontWeight="Light" Text="{Binding Title}" TextWrapping="Wrap" />
<Image x:Name="image" Width="200" Margin="0,10,0,10" Stretch="UniformToFill" Source="{Binding Image}"/>
<StackPanel Orientation="Horizontal" Margin="0,0,0,5">
<RichTextBlock x:Name="InformationOriginalName" Width="250"
Style="{StaticResource ItemRichTextStyle}" IsTextSelectionEnabled="False">
<Paragraph>
<Run FontWeight="SemiLight" Text="{Binding EvaInformation.OriginalName}"/>
</Paragraph>
</RichTextBlock>
</StackPanel>
</StackPanel>
....
</Grid>
</ScrollViewer>
</UserControl>
</DataTemplate>
</FlipView.ItemTemplate>
How to stretch ContentPanel to FullScreen and hide all different controls, including Back button and title of page?