WPF Datatemplate with same viewmodel

Simon Ong 21 Reputation points
2022-11-24T15:12:17.82+00:00

Please check below Xaml code

  <Window.Resources>  
        
        <DataTemplate  DataType="{x:Type local:MainViewModel}">  
            <view1:View1_1_Usr/>  
        </DataTemplate>  
        <DataTemplate  DataType="{x:Type local:MainViewModel}">  
            <view2:View_2_Usr/>  
        </DataTemplate>  
   
    </Window.Resources>  

<grid>
<ContentControl x:Name="Display" Content="{Binding CurrentViemModel}"/>

</Grid>
Error :The key is already defined in this scope

The View1_1_Usr and View_2_Usr need the same viewmodel. if added with different Key, problem will be able to go away.

How can i switch View in ContentControl by loading MainViewModel?

XAML
XAML
A language based on Extensible Markup Language (XML) that enables developers to specify a hierarchy of objects with a set of properties and logic.
790 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Hui Liu-MSFT 47,336 Reputation points Microsoft Vendor
    2022-11-25T07:11:48.457+00:00

    You could try to refer to the code below.
    App.xaml.cs:

    <Application.Resources>  
            <local:ViewModel x:Key="SharedViewModel" />  
         </Application.Resources>  
    

    MainWindow.xaml and ViewModel:
    264596-content-control-two-view-on-viewmodel.txt

    View1:

    <UserControl   
    ...  
      DataContext="{StaticResource SharedViewModel}">  
         <Canvas>  
        <TextBlock Text="{Binding Name}" Width="100" Height="50" Background="LightPink"  Margin="50"/>  
        <Line x:Name="lin1" Stroke="Gray" StrokeThickness="2" X1="30" X2="30" Y1="20" Y2="40"/>  
        <Line x:Name="lin2" Stroke="Blue" StrokeThickness="2" X1="40" X2="40" Y1="20" Y2="40"/>  
        <Line x:Name="lin3" Stroke="Red" StrokeThickness="2" X1="50" X2="50" Y1="20" Y2="40"/>  
    </Canvas>  
    </UserControl>  
    

    View2:

    <UserControl    
    ...  
    DataContext="{StaticResource SharedViewModel}" >  
        <Canvas>  
        <Button Content="{Binding Address}" Width="100" Height="50" Background="AliceBlue"  Margin="70"/>  
        <Line x:Name="lin1" Stroke="Gray" StrokeThickness="2" X1="30" X2="130" Y1="40" Y2="40"/>  
        <Line x:Name="lin2" Stroke="Blue" StrokeThickness="2" X1="30" X2="120" Y1="50" Y2="50"/>  
        <Line x:Name="lin3" Stroke="Red" StrokeThickness="2" X1="30" X2="120" Y1="60" Y2="60"/>  
    </Canvas>  
    </UserControl>  
    

    The result:
    264661-4.gif

    ----------------------------------------------------------------------------

    If the response is helpful, please click "Accept Answer" and upvote it.

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    1 person found this answer helpful.