Loading a partial view when selecting a control [closed] - wpf

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
Sorry for the technically incorrect title, i am aware that partial view is more of an MVC term. However i unsure what the equivalent is in WPF.
I have a large form that the users need to complete. In order to assist them i wanted to split the view in two vertically and show helpful information in the right portion of the screen depending on what field they have selected on the left, or load quick select boxes in the right of the view which will then complete the items on the left.
I've been playing around for a few hours and have managed to split the view with a GridSplitter but from here i'm not sure where to go from here.
Could someone give me a few pointers on what to look at so I can progress. In the MVC world I would have had loaded it through Ajax and it would be done.
Update
This question got blocked, honestly im not entirely sure why. The question is valid and seems to be a logical comparison between the two frameworks. Im hoping that the ban is lifted as the answer was exactly what i was looking for and will definitely be helpful to others

Answer 1

Good question, and #Andy's comment points you in the correct direction. Here is how I would implement it:
View (MainView.xaml):
<Window x:Class="WpfApp4.MainView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp4"
mc:Ignorable="d"
Title="MainView" Height="450" Width="800">
<Window.DataContext>
<local:MainViewVM />
</Window.DataContext>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBlock Text="Box 1" />
<TextBox MinWidth="200" Name="TextBox1" GotFocus="TextBox1_GotFocus" />
<TextBlock Text="Box 2" />
<TextBox MinWidth="200" Name="TextBox2" GotFocus="TextBox2_GotFocus" />
</StackPanel>
<ContentControl Grid.Column="1" Content="{Binding SelectedUserControl}" />
</Grid>
</Window>
Code behind (MainView.xaml.cs):
using System.Windows;
namespace WpfApp4
{
/// <summary>
/// Interaction logic for MainView.xaml
/// </summary>
public partial class MainView : Window
{
public MainView()
{
InitializeComponent();
}
// I handle these in the code behind since this is pretty UI dependent.
private void TextBox1_GotFocus(object sender, RoutedEventArgs e)
{
((MainViewVM)DataContext).ChangeView(0);
}
private void TextBox2_GotFocus(object sender, RoutedEventArgs e)
{
((MainViewVM)DataContext).ChangeView(1);
}
}
}
ViewModel MainViewVM.cs:
using GalaSoft.MvvmLight;
using System.Collections.Generic;
using System.Windows.Controls;
namespace WpfApp4
{
public class MainViewVM : ObservableObject
{
private UserControl _SelectedUserControl;
public UserControl SelectedUserControl
{
get => _SelectedUserControl;
set => Set(ref _SelectedUserControl, value);
}
public List<UserControl> ViewOptions { get; set; }
public MainViewVM()
{
ViewOptions = new List<UserControl>()
{
new Box1View(),
new Box2View()
};
ChangeView();
}
public void ChangeView(int index = 0)
{
if (index < ViewOptions.Count && index >= 0)
{
SelectedUserControl = ViewOptions[index];
}
}
}
}
Then my 2 UserControls...
Box1View.xaml
<UserControl x:Class="WpfApp4.Box1View"
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:WpfApp4"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid Background="Yellow">
<TextBlock Text="Box 1" />
</Grid>
</UserControl>
Box2View.xaml
<UserControl x:Class="WpfApp4.Box2View"
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:WpfApp4"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid Background="Pink">
<TextBlock Text="Box 2" />
</Grid>
</UserControl>
Here are what the two views look like: