I have a StackPanel in my C# Metro app, using MVVM Light, that has several child controls on it. I want some of the child controls to use the main DataContext set for the View. But there's a few child controls that I want to point to a different DataContext. I don't want to add another StackPanel or other container control just to group the child controls by DataContext because that will create a big mess. What I would like is some "harmless" XAML element that accepts the DataContext attribute that I could use to group the controls in the manner desired. For example, suppose there was a hypothetical XAML element named GroupByDataContext, then my XAML code would look like that in the XAML block shown below. In this hypothetical example I would have two View Models named ViewModel1 and ViewModel2 and I would group them using the hypothetical GroupByDataContext element.
Is there a XAML element that serves this purpose? Or is there a whole other way to accomplish this task?
<StackPanel x:Name="stackTopRow" HorizontalAlignment="Left" Height="115" VerticalAlignment="Center" Width="1226" Grid.Column="1" Margin="10,15,0,10" Orientation="Horizontal">
<GroupByDataContext DataContext="{Binding Source={StaticResource Locator}, Path=ViewModelName1}"
<TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}" Margin="10,0,60,0" VerticalAlignment="Center"/>
<TextBlock TextWrapping="Wrap" x:Name="userName" Text="You're not signed in." FontSize="36" RenderTransformOrigin="-4.832,0.596" VerticalAlignment="Center"/>
</GroupByDataContext>
<GroupByDataContext DataContext="{Binding Source={StaticResource Locator}, Path=ViewModelName2}"
<TextBlock TextWrapping="Wrap" Text="Search" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="36" Margin="0,39,0,38" Width="121" RenderTransformOrigin="-4.832,0.596" Visibility="Collapsed" />
<TextBox x:Name="txtQuery" TextWrapping="Wrap" Text="TextBox" Width="605" Margin="0,36,0,35" VerticalAlignment="Center" FontSize="24" HorizontalAlignment="Right" Visibility="Collapsed"/>
<Controls:ImageButton x:Name="btnSearch" Content="ImageButton" Width="79" Margin="0,36,0,38" VerticalAlignment="Center" Height="41" NormalStateImageSource="Assets/StoreLogo.png" Visibility="Collapsed"/>
</GroupByDataContext>
</StackPanel>