[英]Set DataContext into userControl
I have created MainWindow as a 'MasterPage' and inside this window I want to switch between other views which are UserControls. 我已经将MainWindow创建为“ MasterPage”,并且在此窗口内,我想在其他视图(即UserControls)之间进行切换。 Inside MainViewModel which is DataContext of MainWindow I have created ObservableCollection as my 'pages'.
在MainViewModel里面,它是MainWindow的DataContext,我创建了ObservableCollection作为我的“页面”。 Here is my XAML of view changes:
这是我的XAML视图更改:
<UserControl Grid.Row="1" Content="{Binding CurrentView.Content}"/>
View changing is working as expected but CurrentView still has MainWindow`s DataContext even when I set DataContext inside specific UserControl as example: 视图更改按预期工作,但即使我在特定UserControl中设置DataContext作为示例,CurrentView仍然具有MainWindow的DataContext:
<UserControl.DataContext>
<viewModels:DesignerViewModel/>
</UserControl.DataContext>
You can use Prism framework for this issue. 您可以使用Prism框架解决此问题。 He can navigate your content control between your user controls easily.
他可以轻松地在用户控件之间导航您的内容控件。
https://github.com/PrismLibrary/Prism-Samples-Wpf https://github.com/PrismLibrary/Prism-Samples-Wpf
I used a TabControl to switch between UserControls see below XAML: 我使用TabControl在UserControl之间切换,请参见XAML:
<TabControl Grid.Row="1" Margin="5" Name="tabControl" SelectionChanged="tabControl_SelectionChanged">
<TabItem IsSelected="True" FontSize="20">
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image Source="/Images/basket.png" Width="20" Height="20" Margin="0,0,5,0"/>
<TextBlock Text="Orders" VerticalAlignment="Center" />
</StackPanel>
</TabItem.Header>
<UserControl Name="ucOrder" />
</TabItem>
<TabItem IsSelected="True" FontSize="20">
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image Source="/Images/report.png" Width="20" Height="20" Margin="0,0,5,0"/>
<TextBlock Text="Order Reports" VerticalAlignment="Center" />
</StackPanel>
</TabItem.Header>
<UserControl Name="ucReports" />
</TabItem>
</TabControl>
As you can see i have some text and images included in the tabitem aswell, i just want you to notice the Usercontrol in each of them. 如您所见,我在Tabitem中也包含了一些文本和图像,我只想让您注意到其中的每个用户控件。
You need to create a UserControl, like this: 您需要创建一个UserControl,如下所示:
<UserControl x:Class="Order.ucOrderOversigt"
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="600" Loaded="UserControl_Loaded" Unloaded="UserControl_Unloaded">
<UserControl.Resources>
<!-- Resources -->
</UserControl.Resources>
<Grid >
<!-- GUI-->
</Grid>
</UserControl>
And the following .cs code: 以及以下.cs代码:
namespace WPFBestilling.Order
{
public partial class ucOrderOversigt: UserControl
{
public ucOrderOversigt()
{
//constructor
}
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
//Loaded
}
private void UserControl_Unloaded(object sender, RoutedEventArgs e)
{
//Unloaded
}
}
}
Then lastly to switch between the tabs in the main window, you need some .cs code to do so. 最后,要在主窗口中的选项卡之间切换,您需要一些.cs代码。 Like this:
像这样:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Window_Loaded(object sender, RoutedEventArgs e)
{
ucOrder.Content = new ucOrderOversigt();
ucReports.Content = new ucReportOversigt();
}
private void tabControl_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
//if something needs to happend when you shift between tabs
}
private void Window_Closing(object sender, CancelEventArgs e)
{
//Window closing
}
}
I hope it helps, if you have any questions just shoot :) 希望对您有帮助,请直接射击:)
You should set the CurrentView
property to an instance of a view model and use a ContentControl
to display and map a view with a view model, eg: 您应该将
CurrentView
属性设置为视图模型的实例,并使用ContentControl
来显示和映射带有视图模型的视图,例如:
<ContentControl Content="{Binding Binding CurrentView}">
<ContentControl.Resources>
<DataTemplate DataType="local:DesignerViewModel">
<local:DesignerUserControl />
</DataTemplate>
<DataTemplate DataType="local:TypeBViewModel">
<local:TypeBUserControl />
</DataTemplate>
</ContentControl.Resources>
</ContentControl>
The type of the CurrentView
should either be a common base type for all the view models or object
. CurrentView
的类型应该是所有视图模型或object
的通用基本类型。
You then define a DataTemplate
per view model type like above and remove this from the UserControls
: 然后,您按照上述每个视图模型类型定义一个
DataTemplate
,并将其从UserControls
删除:
<UserControl.DataContext>
<viewModels:DesignerViewModel/>
</UserControl.DataContext>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.