Change Windows Content Control From User Control - WPF









up vote
1
down vote

favorite
1












In my project I have a Window called AccountWindow.xaml which has a ContentControl to display the two UserControls.



AccountWindow



<Window>
<Window.Resources>
<!-- Login User Control Template -->
<DataTemplate x:Name="LoginUserControl" DataType="x:Type ViewModels:LoginViewModel">
<AccountViews:LoginUserControl DataContext="Binding"/>
</DataTemplate>

<!-- Registration User Control Template -->
<DataTemplate x:Name="RegistrationUserControl" DataType="x:Type ViewModels:RegistrationViewModel">
<AccountViews:RegistrationUserControl DataContext="Binding" />
</DataTemplate>
</Window.Resources>

<Grid>
<!-- ContentControl that displays the two User Controls -->
<ContentControl Content="Binding" />
</Grid>
</Window>


I then have two user controls called LoginUserControl and RegistrationUserControl



Login User Control



<Grid Background="Pink">
<Button Content="Switch To Register View" Command="Binding SwitchToReg" Margin="100" />
</Grid>


Register User Control



<Grid Background="Orange">
<Button Content="Press Me" Command="Binding PressMe" Margin="100" />
</Grid>


Both the Login User Control and the Registration User Control have their own ViewModels with a RelayCommand inside that is bound to the buttons as shown in the code.



Login View Model



public class LoginViewModel

public RelayCommand SwitchToReg

get

return new RelayCommand(param =>

Console.WriteLine("Switch To Reg");
// Somehow change the content control in the AccountWindow to show the RegistrationDataTemplate???
);





The Problem



I want to be able to change the content of the ContentControl in the AccountWindow when the user presses on one of the buttons in the UserControls. For example, when the user presses the button in the Login User Control called "Switch To Register View" it executes a the Command SwitchToReg and changes the content control to RegistrationUserControl & its ViewModel. How could this be possible?










share|improve this question

























    up vote
    1
    down vote

    favorite
    1












    In my project I have a Window called AccountWindow.xaml which has a ContentControl to display the two UserControls.



    AccountWindow



    <Window>
    <Window.Resources>
    <!-- Login User Control Template -->
    <DataTemplate x:Name="LoginUserControl" DataType="x:Type ViewModels:LoginViewModel">
    <AccountViews:LoginUserControl DataContext="Binding"/>
    </DataTemplate>

    <!-- Registration User Control Template -->
    <DataTemplate x:Name="RegistrationUserControl" DataType="x:Type ViewModels:RegistrationViewModel">
    <AccountViews:RegistrationUserControl DataContext="Binding" />
    </DataTemplate>
    </Window.Resources>

    <Grid>
    <!-- ContentControl that displays the two User Controls -->
    <ContentControl Content="Binding" />
    </Grid>
    </Window>


    I then have two user controls called LoginUserControl and RegistrationUserControl



    Login User Control



    <Grid Background="Pink">
    <Button Content="Switch To Register View" Command="Binding SwitchToReg" Margin="100" />
    </Grid>


    Register User Control



    <Grid Background="Orange">
    <Button Content="Press Me" Command="Binding PressMe" Margin="100" />
    </Grid>


    Both the Login User Control and the Registration User Control have their own ViewModels with a RelayCommand inside that is bound to the buttons as shown in the code.



    Login View Model



    public class LoginViewModel

    public RelayCommand SwitchToReg

    get

    return new RelayCommand(param =>

    Console.WriteLine("Switch To Reg");
    // Somehow change the content control in the AccountWindow to show the RegistrationDataTemplate???
    );





    The Problem



    I want to be able to change the content of the ContentControl in the AccountWindow when the user presses on one of the buttons in the UserControls. For example, when the user presses the button in the Login User Control called "Switch To Register View" it executes a the Command SwitchToReg and changes the content control to RegistrationUserControl & its ViewModel. How could this be possible?










    share|improve this question























      up vote
      1
      down vote

      favorite
      1









      up vote
      1
      down vote

      favorite
      1






      1





      In my project I have a Window called AccountWindow.xaml which has a ContentControl to display the two UserControls.



      AccountWindow



      <Window>
      <Window.Resources>
      <!-- Login User Control Template -->
      <DataTemplate x:Name="LoginUserControl" DataType="x:Type ViewModels:LoginViewModel">
      <AccountViews:LoginUserControl DataContext="Binding"/>
      </DataTemplate>

      <!-- Registration User Control Template -->
      <DataTemplate x:Name="RegistrationUserControl" DataType="x:Type ViewModels:RegistrationViewModel">
      <AccountViews:RegistrationUserControl DataContext="Binding" />
      </DataTemplate>
      </Window.Resources>

      <Grid>
      <!-- ContentControl that displays the two User Controls -->
      <ContentControl Content="Binding" />
      </Grid>
      </Window>


      I then have two user controls called LoginUserControl and RegistrationUserControl



      Login User Control



      <Grid Background="Pink">
      <Button Content="Switch To Register View" Command="Binding SwitchToReg" Margin="100" />
      </Grid>


      Register User Control



      <Grid Background="Orange">
      <Button Content="Press Me" Command="Binding PressMe" Margin="100" />
      </Grid>


      Both the Login User Control and the Registration User Control have their own ViewModels with a RelayCommand inside that is bound to the buttons as shown in the code.



      Login View Model



      public class LoginViewModel

      public RelayCommand SwitchToReg

      get

      return new RelayCommand(param =>

      Console.WriteLine("Switch To Reg");
      // Somehow change the content control in the AccountWindow to show the RegistrationDataTemplate???
      );





      The Problem



      I want to be able to change the content of the ContentControl in the AccountWindow when the user presses on one of the buttons in the UserControls. For example, when the user presses the button in the Login User Control called "Switch To Register View" it executes a the Command SwitchToReg and changes the content control to RegistrationUserControl & its ViewModel. How could this be possible?










      share|improve this question













      In my project I have a Window called AccountWindow.xaml which has a ContentControl to display the two UserControls.



      AccountWindow



      <Window>
      <Window.Resources>
      <!-- Login User Control Template -->
      <DataTemplate x:Name="LoginUserControl" DataType="x:Type ViewModels:LoginViewModel">
      <AccountViews:LoginUserControl DataContext="Binding"/>
      </DataTemplate>

      <!-- Registration User Control Template -->
      <DataTemplate x:Name="RegistrationUserControl" DataType="x:Type ViewModels:RegistrationViewModel">
      <AccountViews:RegistrationUserControl DataContext="Binding" />
      </DataTemplate>
      </Window.Resources>

      <Grid>
      <!-- ContentControl that displays the two User Controls -->
      <ContentControl Content="Binding" />
      </Grid>
      </Window>


      I then have two user controls called LoginUserControl and RegistrationUserControl



      Login User Control



      <Grid Background="Pink">
      <Button Content="Switch To Register View" Command="Binding SwitchToReg" Margin="100" />
      </Grid>


      Register User Control



      <Grid Background="Orange">
      <Button Content="Press Me" Command="Binding PressMe" Margin="100" />
      </Grid>


      Both the Login User Control and the Registration User Control have their own ViewModels with a RelayCommand inside that is bound to the buttons as shown in the code.



      Login View Model



      public class LoginViewModel

      public RelayCommand SwitchToReg

      get

      return new RelayCommand(param =>

      Console.WriteLine("Switch To Reg");
      // Somehow change the content control in the AccountWindow to show the RegistrationDataTemplate???
      );





      The Problem



      I want to be able to change the content of the ContentControl in the AccountWindow when the user presses on one of the buttons in the UserControls. For example, when the user presses the button in the Login User Control called "Switch To Register View" it executes a the Command SwitchToReg and changes the content control to RegistrationUserControl & its ViewModel. How could this be possible?







      c# wpf xaml viewmodel






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 10 at 18:30









      Craig Martin

      114




      114






















          2 Answers
          2






          active

          oldest

          votes

















          up vote
          0
          down vote



          accepted










          To achieve that you would need to pass a reference for the AccountWindow into the UserControl when you are constructing it and then your Command can update the ContentControl using the reference you have provided.



          This is introducing coupling which is better to avoid so instead I would suggest thinking about the design of the AccountWindow. I would use grid rows to separate the ContentControl area from the button which will change the UserControl.



          Example window



          In the window above, the blue area is where I would host the ContentControl and the red area is part of the AccountWindow.



          This way, the behaviour for switching the ContentControl is entirely handled by the AccountWindow.






          share|improve this answer




















          • Thanks for your helpful answer. After posting my question I realised the issue as you have described. I've now implemented what you have suggested.
            – Craig Martin
            Nov 11 at 18:03

















          up vote
          -1
          down vote













          You can create a property and attache it to the control.
          Or you can create another user control and make it visible o not controled by the property that you created.






          share|improve this answer




















            Your Answer






            StackExchange.ifUsing("editor", function ()
            StackExchange.using("externalEditor", function ()
            StackExchange.using("snippets", function ()
            StackExchange.snippets.init();
            );
            );
            , "code-snippets");

            StackExchange.ready(function()
            var channelOptions =
            tags: "".split(" "),
            id: "1"
            ;
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function()
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled)
            StackExchange.using("snippets", function()
            createEditor();
            );

            else
            createEditor();

            );

            function createEditor()
            StackExchange.prepareEditor(
            heartbeatType: 'answer',
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader:
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            ,
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            );



            );













            draft saved

            draft discarded


















            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53242134%2fchange-windows-content-control-from-user-control-wpf%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown

























            2 Answers
            2






            active

            oldest

            votes








            2 Answers
            2






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes








            up vote
            0
            down vote



            accepted










            To achieve that you would need to pass a reference for the AccountWindow into the UserControl when you are constructing it and then your Command can update the ContentControl using the reference you have provided.



            This is introducing coupling which is better to avoid so instead I would suggest thinking about the design of the AccountWindow. I would use grid rows to separate the ContentControl area from the button which will change the UserControl.



            Example window



            In the window above, the blue area is where I would host the ContentControl and the red area is part of the AccountWindow.



            This way, the behaviour for switching the ContentControl is entirely handled by the AccountWindow.






            share|improve this answer




















            • Thanks for your helpful answer. After posting my question I realised the issue as you have described. I've now implemented what you have suggested.
              – Craig Martin
              Nov 11 at 18:03














            up vote
            0
            down vote



            accepted










            To achieve that you would need to pass a reference for the AccountWindow into the UserControl when you are constructing it and then your Command can update the ContentControl using the reference you have provided.



            This is introducing coupling which is better to avoid so instead I would suggest thinking about the design of the AccountWindow. I would use grid rows to separate the ContentControl area from the button which will change the UserControl.



            Example window



            In the window above, the blue area is where I would host the ContentControl and the red area is part of the AccountWindow.



            This way, the behaviour for switching the ContentControl is entirely handled by the AccountWindow.






            share|improve this answer




















            • Thanks for your helpful answer. After posting my question I realised the issue as you have described. I've now implemented what you have suggested.
              – Craig Martin
              Nov 11 at 18:03












            up vote
            0
            down vote



            accepted







            up vote
            0
            down vote



            accepted






            To achieve that you would need to pass a reference for the AccountWindow into the UserControl when you are constructing it and then your Command can update the ContentControl using the reference you have provided.



            This is introducing coupling which is better to avoid so instead I would suggest thinking about the design of the AccountWindow. I would use grid rows to separate the ContentControl area from the button which will change the UserControl.



            Example window



            In the window above, the blue area is where I would host the ContentControl and the red area is part of the AccountWindow.



            This way, the behaviour for switching the ContentControl is entirely handled by the AccountWindow.






            share|improve this answer












            To achieve that you would need to pass a reference for the AccountWindow into the UserControl when you are constructing it and then your Command can update the ContentControl using the reference you have provided.



            This is introducing coupling which is better to avoid so instead I would suggest thinking about the design of the AccountWindow. I would use grid rows to separate the ContentControl area from the button which will change the UserControl.



            Example window



            In the window above, the blue area is where I would host the ContentControl and the red area is part of the AccountWindow.



            This way, the behaviour for switching the ContentControl is entirely handled by the AccountWindow.







            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Nov 11 at 10:24









            Sirgrowns

            516




            516











            • Thanks for your helpful answer. After posting my question I realised the issue as you have described. I've now implemented what you have suggested.
              – Craig Martin
              Nov 11 at 18:03
















            • Thanks for your helpful answer. After posting my question I realised the issue as you have described. I've now implemented what you have suggested.
              – Craig Martin
              Nov 11 at 18:03















            Thanks for your helpful answer. After posting my question I realised the issue as you have described. I've now implemented what you have suggested.
            – Craig Martin
            Nov 11 at 18:03




            Thanks for your helpful answer. After posting my question I realised the issue as you have described. I've now implemented what you have suggested.
            – Craig Martin
            Nov 11 at 18:03












            up vote
            -1
            down vote













            You can create a property and attache it to the control.
            Or you can create another user control and make it visible o not controled by the property that you created.






            share|improve this answer
























              up vote
              -1
              down vote













              You can create a property and attache it to the control.
              Or you can create another user control and make it visible o not controled by the property that you created.






              share|improve this answer






















                up vote
                -1
                down vote










                up vote
                -1
                down vote









                You can create a property and attache it to the control.
                Or you can create another user control and make it visible o not controled by the property that you created.






                share|improve this answer












                You can create a property and attache it to the control.
                Or you can create another user control and make it visible o not controled by the property that you created.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 10 at 18:33









                D. Hurtado

                716




                716



























                    draft saved

                    draft discarded
















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid


                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.

                    To learn more, see our tips on writing great answers.





                    Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


                    Please pay close attention to the following guidance:


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid


                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.

                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function ()
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53242134%2fchange-windows-content-control-from-user-control-wpf%23new-answer', 'question_page');

                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    這個網誌中的熱門文章

                    How to read a connectionString WITH PROVIDER in .NET Core?

                    Node.js Script on GitHub Pages or Amazon S3

                    Museum of Modern and Contemporary Art of Trento and Rovereto