Bind all Tab item view model at start in WPF

0
votes

I have an application with 2 tabs which are Person and User Management in WPF with MVVM. Now the problem is when I click on Person Mag tab, the PersonViewModel will bind to Person Mag View, and User Mag same as mentioned situation also.

How to make Person and User Mag tab bind its view model at start of the application (both bind viewmodel for its own view at the same time) instead of bind the view model when I clicked on that tab.

enter image description here

XAML

 <DockPanel LastChildFill="True">
    <TabControl TabStripPlacement="Left" DockPanel.Dock="Left" Margin="5">
        <TabItem Width="190" Margin="1">
            <TabItem.Header>
                <StackPanel Orientation="Horizontal">
                    <Image Source="/Images/Person-Management-Icon.png" Width="32" Height="32" />
                    <TextBlock Text="Person Mangement" Margin="5,0,0,0" VerticalAlignment="Center" />
                </StackPanel>
            </TabItem.Header>
            <TabItem.ContentTemplate>
                <DataTemplate>
                    <ptab:PersonManagementView />
                </DataTemplate>
            </TabItem.ContentTemplate>
        </TabItem>
        <TabItem Margin="1">
            <TabItem.Header>
                <StackPanel Orientation="Horizontal">
                    <Image Source="/Images/User-Management-Icon.png" Width="32" Height="32" />
                    <TextBlock Text="User Mangement" Margin="5,0,0,0" VerticalAlignment="Center" />
                </StackPanel>
            </TabItem.Header>
            <TabItem.ContentTemplate>
                <DataTemplate>
                    <ptab:UserManagementView />
                </DataTemplate>
            </TabItem.ContentTemplate>
        </TabItem>
    </TabControl>
</DockPanel>

PersonManagement XAML

<!--View Model Section-->
<UserControl.DataContext>
    <vm:PersonViewModel />
</UserControl.DataContext>
<!--End View Model Section-->

<!--Resources Section-->
<UserControl.Resources>
    <ResourceDictionary Source="../Resources/ResourceDictionary.xaml" />
</UserControl.Resources>
<!--End Resources Section-->

<DockPanel Name="Person_Management_View">
    <TabControl DockPanel.Dock="Top">
        <TabItem>
            <TabItem.Header>
                <StackPanel Orientation="Horizontal">
                    <Image Source="/Images/Person-Creation-Icon.png" Width="24" Height="24" />
                    <TextBlock Text="Person Creation" Margin="5,0,0,0" VerticalAlignment="Center" />
                </StackPanel>
            </TabItem.Header>
            <Grid>
                <Grid.RowDefinitions>
                    <!--Name-->
                    <RowDefinition Height="Auto" />
                    <!--Gender-->
                    <RowDefinition Height="Auto" />
                    <!--Department-->
                    <RowDefinition Height="Auto" />
                    <!--Error Message-->
                    <RowDefinition Height="25" />
                    <!--Save Button-->
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100" />
                    <ColumnDefinition Width="50" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <!--Name Section-->
                <Label Grid.Row="0" Grid.Column="0" Content="Name"/>
                <Label Grid.Row="0" Grid.Column="1" Content=":"/>
                <TextBox Name="txtPersonName" Grid.Row="0" Grid.Column="2"  Margin="4">
                    <TextBox.Text>
                        <Binding Path="PersonObject.Name" UpdateSourceTrigger="PropertyChanged" >
                            <Binding.ValidationRules>
                                <r:PersonNameRule ValidatesOnTargetUpdated="True" />
                            </Binding.ValidationRules>
                        </Binding>
                    </TextBox.Text>
                </TextBox>
                <!--End Name Section-->

                <!--Gender Section-->
                <Label Grid.Row="1" Grid.Column="0" Content="Gender"/>
                <Label Grid.Row="1" Grid.Column="1" Content=":"/>
                <ComboBox Grid.Row="1" Grid.Column="2"  Margin="4"  ItemsSource="{Binding GenderList}" SelectedItem="{Binding PersonObject.Gender}"/>
                <!--End Gender Section-->

                <!--Department Section-->
                <Label Grid.Row="2" Grid.Column="0" Content="Department" />
                <Label Grid.Row="2" Grid.Column="1" Content=":"/>
                <ComboBox Grid.Row="2" Grid.Column="2" Margin="4" ItemsSource="{Binding DepartmentList}" SelectedItem="{Binding PersonObject.DepartmentName}" />
                <!--End Department Section-->

                <!--Error Message Section-->
                <TextBlock Grid.Row="3" Grid.Column="2" Margin="4,4,4,0" Visibility="{Binding ElementName=txtPersonName, Path=(Validation.Errors), Converter={StaticResource toVisibilityConverter}}" Style="{StaticResource RedTextBlock}">
                    <TextBlock.Text>
                        <Binding ElementName="txtPersonName" Path="(Validation.Errors).CurrentItem.ErrorContent"/>
                    </TextBlock.Text>
                </TextBlock>
                <!--End Error Message Section-->

                <!--Save Button Section-->
                <Button Grid.Row="4" Grid.Column="2"  HorizontalAlignment="Right" MinWidth="100" Margin="4,0,4,4" Content="Save" Command="{Binding CreatePersonCommand}">
                    <Button.Style>
                        <Style TargetType="{x:Type Button}">
                            <Setter Property="IsEnabled" Value="false" />
                            <Style.Triggers>
                                <MultiDataTrigger>
                                    <MultiDataTrigger.Conditions>
                                        <Condition Binding="{Binding ElementName=txtPersonName, Path=(Validation.HasError)}" Value="false" />
                                    </MultiDataTrigger.Conditions>
                                    <Setter Property="IsEnabled" Value="true" />
                                </MultiDataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Button.Style>
                </Button>
                <!--End Save Button Section-->

            </Grid>
        </TabItem>
    </TabControl>

    <!--Person Data Section-->
    <DataGrid Name="PersonDataGrid" DockPanel.Dock="Bottom" AutoGenerateColumns="False" IsReadOnly="True" SelectionMode="Single" ColumnWidth="*" ItemsSource="{Binding PersonList}">
        <DataGrid.Columns>
            <DataGridTextColumn Header="Id" Binding="{Binding PersonID}" />
            <DataGridTextColumn Header="Name" Binding="{Binding Name}" />
            <DataGridTextColumn Header="Gender" Binding="{Binding Gender, Converter={StaticResource emptyStringConverter}}" />
            <DataGridTextColumn Header="Department" Binding="{Binding DepartmentName, Converter={StaticResource emptyStringConverter}}" />
            <DataGridTemplateColumn>
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <Button IsEnabled="{Binding Selected, Converter={StaticResource oppositeBoolConverter}}" Command="{Binding DataContext.DeletePersonCommand, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" CommandParameter="{Binding PersonID}" Style="{StaticResource TransparentButton}">
                            <Image Source="{Binding Selected, Converter={StaticResource deleteImageConverter}}" Width="16" Height="16"/>
                        </Button>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
            <DataGridTemplateColumn>
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <Button Command="{Binding DataContext.ViewPersonCommand, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" CommandParameter="{Binding PersonID}" Style="{StaticResource TransparentButton}">
                            <Image Source="/Images/Update-Icon.png" Width="16" Height="16"/>
                        </Button>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
        </DataGrid.Columns>
    </DataGrid>
    <!--End Person Data Section-->

</DockPanel>
1
c#wpfxamlmvvm
Post the code where you bind the data – Sajeetharan
@user1219310 Hi,pls let us know,why should u need to load person viewmodel when your on UserManagement Tab. Navigation through Views – Eldho
@Sajeetharan the XAML code that was I used for binding – user1219310
@Eldho erm, because I have a clipboard function, will copy Person and User details when I click the Copy to Clipboard button. – user1219310
Thus, I need Person and User tab both of them bind they own viewmodel when the application at first launch – user1219310

1 Answers

0
votes

Try this

Add Loaded event to TabControl

<TabControl TabStripPlacement="Left" DockPanel.Dock="Left" Margin="5" Loaded="Tab_OnLoaded" >

Remove the ContentTemplate from xaml and assign content in code like

    void Tab_OnLoaded(object sender, RoutedEventArgs e)
    {
        var tabControl = sender as TabControl;
        if (tabControl != null)
        {
            for (int i = 0; i < tabControl.Items.Count; i++)
            {
                if (i == 1)
                    (tabControl.Items[i] as TabItem).Content = new UserControl2();//Here assign the Usercontrol that you want to set as Content
            }
            tabControl.Loaded -= Tab_OnLoaded; // Do this on first time only
        }
    }

I dont think its a good approach . I hope this will help.